fmihel-react-bootstrap-table v1.2.0

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

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' }
}