Home Reference Source 
import Table from 'n2o/src/components/widgets/Table/Table.jsx'
public class | source

Table

Extends:

react~React.Component → Table

Компонент таблицы. Отображает данные в виде таблицы с возможностью задать различные компоненты для колонок. Сами данные ожидает в виде массива объектов. Можно задавать заголовки колонок разными компонентами.

Example:

const headers = [
 {
   id: "id",
   label: "ID",
   sortable: false,
   component: FilteredHeader
 },
 {
   id: "name",
   label: "Имя",
   sortable: true,
   component: TextHeader
 },
 {
   id: "vip",
   sortable: false,
   component: IconHeader,
   componentProps: {
     icon: "plus"
   }
 },
];

const cells = [
 {
   id: "id",
   component: TextCell
 },
 {
   id: "name",
   component: TextCell
 },
 {
   id: "vip",
   component: TextCell
 }
];

const datasource = [
 {
   id: "1",
   name: "Foo",
   vip: "yes"
 },
 {
   id: "2",
   name: "Bar",
   vip: "no"
 }
]

<Table headers={headers} cells={cells} datasource={datasource} />

React Props:

NameTypeAttributeDescription
className string имя css класса
colorFieldId string
style object имя css класса
hasSelect boolean становится ли строка активной при фокусе или нет
hasFocus boolean
autoFocus boolean селект при фокусе
cells array массив из объектов ячеек
headers array массив из объектов ячеек-хэдеров
sorting object
onSort function
datasource array данные
onResolve function резолв модели в редакс
children node элемент потомок компонента Table
onFocus function событие фокуса
redux object
resolveModel object
widgetId string идентификатор виджета
isActive boolean

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

rows: *[]

public

state: {"focusIndex": *, "selectIndex": *}

Method Summary

Public Methods
public
public

componentDidUpdate(prevProps: *)

public
public

handleRow(id: *, index: *, noResolve: *)

public

onKeyDown(e: *)

public

render(): *

public

renderCell(props: *): *

public

setNewFocusIndex(index: *)

public

setNewSelectIndex(index: *)

public

setSelectAndFocus(selectIndex: *, focusIndex: *)

Public Constructors

public constructor() source

Public Members

public rows: *[] source

public state: {"focusIndex": *, "selectIndex": *} source

Public Methods

public componentDidMount() source

public componentDidUpdate(prevProps: *) source

Params:

NameTypeAttributeDescription
prevProps *

public focusActiveRow() source

public handleRow(id: *, index: *, noResolve: *) source

Params:

NameTypeAttributeDescription
id *
index *
noResolve *

public onKeyDown(e: *) source

Params:

NameTypeAttributeDescription
e *

public render(): * source

Return:

*

public renderCell(props: *): * source

Params:

NameTypeAttributeDescription
props *

Return:

*

public setNewFocusIndex(index: *) source

Params:

NameTypeAttributeDescription
index *

public setNewSelectIndex(index: *) source

Params:

NameTypeAttributeDescription
index *

public setSelectAndFocus(selectIndex: *, focusIndex: *) source

Params:

NameTypeAttributeDescription
selectIndex *
focusIndex *