react-bootstrap-table

react bootstrap table for view large data

React компонет для отображения таблиц в bootstrap. Таблица имеет фиксированный заголовок, а так же позволяет быстро просматривать большие массивы (проверено на 1000000 записей). Контейнер, в котором формируется таблица должен иметь фиксированную высоту либо maxHeight:100%

Пример использования:

import React from 'react';
import Table from "fmihel-react-bootstrap-table";
import 'fmihel-react-bootstrap-table/style/scss';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid" >
                <div className="row">
                    <div className="col">
                        Table
                    </div>
                </div>
                <div className="row">
                    <div className="col" style={{ height: '200px' }}>
                        <Table
                            data={this.props.data}
                            fields ={this.props.fields}
                            css={{
                                add:'table-sm table-bordered table-striped table-hover'
                            }}
                            light={false}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

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 = rowwidthCaption : 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 :

row:{
    select: { light: 'table-primary', dark: 'bg-primary' },
    error: { light: 'table-danger', dark: 'bg-danger' }
}