# fmihel-react-bootstrap-table

> table component with fixed header and fast view long data array

Latest version **1.2.0** (published 2020-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install fmihel-react-bootstrap-table
pnpm add fmihel-react-bootstrap-table
yarn add fmihel-react-bootstrap-table
bun add fmihel-react-bootstrap-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-06-07 |
| First published | 2020-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 289.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | fmihel76@gmail.com |
| Maintainers | fmihel |
| Keywords | table, react, bootstrap, fixed, long |

## Links

- npm: https://www.npmjs.com/package/fmihel-react-bootstrap-table
- Repository: https://github.com/fmihel/react-bootstrap-table
- Homepage: https://github.com/fmihel/react-bootstrap-table#readme
- Issues: https://github.com/fmihel/react-bootstrap-table/issues
- npm.io page: https://npm.io/package/fmihel-react-bootstrap-table

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2020-06-07
- 1.1.0 — 2020-06-07
- 1.0.1 — 2020-05-24
- 1.0.0 — 2020-05-17
- 0.2.1 — 2020-05-09
- 0.2.0 — 2020-05-09
- 0.1.0 — 2020-05-06
- 0.0.10 — 2020-05-06
- 0.0.9 — 2020-05-05
- 0.0.8 — 2020-05-05
- 0.0.7 — 2020-05-05
- 0.0.6 — 2020-05-05
- 0.0.5 — 2020-05-04
- 0.0.4 — 2020-05-01
- 0.0.3 — 2020-04-30
- … 2 more at https://npm.io/package/fmihel-react-bootstrap-table/versions

## README

# react-bootstrap-table
react bootstrap table for view large data

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

## Пример использования:
```javascript
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|{<br>enable : boolean- включить вертикальный режим(default = true)<br>showCaption : boolean - добавить описания столбцов (default = true)<br>direct : string - 'row'/'column' default = row<br>widthCaption : string - ширина caption, только для direct = 'row' <br>}|
|data|array|массив данных <br>[ <br>{fieldName1:value1,filedName2:value2,...},<br>{fieldName1:value3,filedName2:value4,...},<br>... ]|
|fields|array|массив полей, порядок полей определяет порядок отображения<br>[{name:string,caption?:string,width?:int},<br>...] |
|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' }
}
```

---
_Source: https://npm.io/package/fmihel-react-bootstrap-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._