Table

data={this.props.data}
fields ={this.props.fields}
css={{
add:'table-sm table-bordered table-striped table-hover'
}}
light={false}
/>



);
}
}

function getData(count) {
const res = [];
for (let i = 0; i < count; i++) {
res.push({
id: i,
name: name ${i},
age: i * 10,
date: ${i}/${i 10}/${i 100},
});
}
return res;
}


App.defaultProps = {
data: getData(2000),
fields: [
{ name: 'id', width: 30 },
{ name: 'name' },
{ name: 'age' },
{ name: 'date' }
],
};

`

Table.props

|name|type|notes|
|----|----|----|
|showHeader|bool| отобразить/скрыть заголовок|
|showScrollBar|bool| отобразить/скрыть вертикальный scrollbar|
|moveTo|int| переместить на запись с номером moveTo|
|vertical|bool|распологает ячейки td по вертикали, что удобно про просмотре на мобильном|
|vertical|object|{
enable : boolean- включить вертикальный режим(default = true)
showCaption : boolean - добавить описания столбцов (default = true)
direct : string - 'row'/'column' default = row
widthCaption : string - ширина caption, только для direct = 'row'
}|
|data|array|массив данных
[
{fieldName1:value1,filedName2:value2,...},
{fieldName1:value3,filedName2:value4,...},
... ]|
|fields|array|массив полей, порядок полей определяет порядок отображения
[{name:string,caption?:string,width?:int},
...] |
|keyField|string|имя поля содержащего ключ, если не указать, то будет использоваться порядковый номер|
|css|object|набор дополнительных классов |
|onDrawRow|function|обработчик вызываемяй перед перерисовкой каждой строки|
|onDrawCol|function|обработчик вызываемый перед перерисовкой клетки|

css

Объект позволяющий кастомизировать стили таблицы и компонентов
|name|type (default)|notes|
|----|----|----|
|root|string ('table')|верхний класс, предустановлен как класс bootstrap 'table'|
|add|string ('')| дополнительные классы, к примеру 'table-sm table-bordered '|
|themePrefClass|string ('table')|префикс класса для определения настроек темы, тема определяется свойством theme|
|theme|string ('')|имя темы,результирующий класс темы получается как themePrefClass+'-'+theme|
|row|object (...)|библиотека тематических классов, для подсветкм строк |
css.row.default :
`js
row:{
select: { light: 'table-primary', dark: 'bg-primary' },
error: { light: 'table-danger', dark: 'bg-danger' }
}
``