Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avin/react-vt-table
Table realisation based on `react-window` library
https://github.com/avin/react-vt-table
react resize-column selectable sortable table table-realisation virtualized
Last synced: 1 day ago
JSON representation
Table realisation based on `react-window` library
- Host: GitHub
- URL: https://github.com/avin/react-vt-table
- Owner: avin
- Created: 2018-10-17T13:15:34.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:47:35.000Z (7 months ago)
- Last Synced: 2024-04-23T04:02:30.098Z (7 months ago)
- Topics: react, resize-column, selectable, sortable, table, table-realisation, virtualized
- Language: JavaScript
- Homepage: https://avin.github.io/react-vt-table
- Size: 2.76 MB
- Stars: 28
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-VT-Table
Table realisation based on [react-window](https://github.com/bvaughn/react-window) library.
## Features
- Efficiently rendering large tables.
- Allow custom renderers for row, cell, and header.
- Built-in resize columns.
- Built-in auto-scrolling.
- Easy to add your own sorting and selecting mechanisms (see examples).
- Works with Immutable.Iterable data lists or native arrays of objects.
## Installation
```sh
npm install react-vt-table
```
## Demo
Here are [some live examples](https://avin.github.io/react-vt-table?selectedKind=Table).
## Examples
Check out `./src/stories` folder to find some code examples.
## Styling
You can use built-in CSS style:
```js
import 'react-vt-table/dist/style.css';
```
or create your own using existing one
## API
### ``
#### Props
| Property | Type | Required? | Description |
| :-------------------- | :----------------- | :-------: | :---------------------------------------------------------------------------------------------------------------------------- |
| width | Number | ✓ | Table width. |
| height | Number | ✓ | Table height. |
| headerHeight | Number or Func | | Table header height (Default: 30). |
| rowHeight | Number or Func | | Table row height (Default: 30).
Function params: `(rowIndex)`. |
| data | Immutable.Iterable | ✓ | Data list for table content. |
| rowClassName | Func | | Row className determine function.
Function params: `(rowIndex)`. |
| rowRenderer | Func | | Personal row renderer function.
Function params: see `` props. |
| sortIndicatorRenderer | Func | | Sort indicator render function.
Function params: `({ dataKey, columnIndex })`. |
| onHeaderClick | Func | | Click Mouse action on header row.
Function params: `(event, { dataKey, columnIndex })`. |
| onHeaderDoubleClick | Func | | Double Click Mouse action on header row.
Function params: `(event, { dataKey, columnIndex })`. |
| onHeaderMouseOver | Func | | Mouse Over action on header row.
Function params: `(event, { dataKey, columnIndex })`. |
| onHeaderMouseOut | Func | | Mouse Out action on header row.
Function params: `(event, { dataKey, columnIndex })`. |
| onHeaderRightClick | Func | | Right Click Mouse action on header row.
Function params: `(event, { dataKey, columnIndex })`. |
| onRowClick | Func | | Click Mouse action on table row.
Function params: `(event, { dataKey, columnIndex })`. |
| onRowDoubleClick | Func | | Double Click Mouse action on table row.
Function params: `(event, { dataKey, columnIndex })`. |
| onRowMouseOver | Func | | Mouse Over action on table row.
Function params: `(event, { dataKey, columnIndex })`. |
| onRowMouseOut | Func | | Mouse Out action on table row.
Function params: `(event, { dataKey, columnIndex })`. |
| onRowMouseDown | Func | | Mouse Down action on table row.
Function params: `(event, { dataKey, columnIndex })`. |
| onRowMouseUp | Func | | Mouse Up action on table row.
Function params: `(event, { dataKey, columnIndex })`. |
| onRowRightClick | Func | | Right Click Mouse action on table row.
Function params: `(event, { dataKey, columnIndex })`. |
| onScroll | Func | | Action on table scroll.
Function params: See [React-Window's docs](https://react-window.now.sh/#/api/FixedSizeList). |
| onResizeColumn | Func | | Action on change column width.
Function params: `({ dataKey, columnIndex, resizeDiff, newWidth })`. |
| overflowWidth | Number | | Width of vertical table overflow. |
| minColumnWidth | Number | | Minimal column width. |
| maxColumnWidth | Number | | Maximum column width. |
| dynamicColumnWidth | Bool | | Dynamic width for columns that was not resized. |
| listProps | Object | | Props for inner `react-window` list component. @see See [React-Windows docs](https://react-window.now.sh/#/api/FixedSizeList) |
| noItemsLabel | Node | | No items in data list label. |
| disableHeader | Bool | | Hide table header row. |
| autoScroll | Bool | | Auto scroll to list bottom. |
| className | String | | Optional custom CSS class name to attach to root container element. |
| id | String | | Optional custom id to attach to root container element. |
#### Methods
**scrollTo(scrollOffset: number): void**
**scrollToItem(index: number, align: string = "auto"): void**
For more info see [React-Window's docs](https://react-window.now.sh/#/api/FixedSizeGrid)
### ``
#### Props
| Property | Type | Required? | Description |
| :----------------------- | :----- | :-------: | :-------------------------------------------------------------------------------------------- |
| cellRenderer | Func | | Content cell render function.
Function params: `({ dataKey, rowData, columnIndex })`. |
| columnHeaderCellRenderer | Func | | Column header cell render function.
Function params: `({ label, dataKey, columnIndex })`. |
| dataKey | String | | Field key containing data. |
| width | Number | | Default column width in pixels. |
### ``
Use `Row` component only if you want to low modify your table rows. (See example `./srs/stories/rowRenderer.js`)
#### Props
| Property | Type | Required? | Description |
| :------- | :----- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------- |
| index | Number | | Row number |
| style | Object | | Row style |
| data | Object | | Additional row data `({dataList, rowProps})` where `dataList` is table data and rowProps is additional row properties (see below) |
#### Additional row properties
Additional row properties are contained in row's `props.data.rowProps`
| Property | Type | Required? | Description |
| :------------- | :---- | :-------: | :----------------------------------------------------------------------------------- |
| columns | array | | Table columns array |
| rowClassName | Func | | Row className determine function.
Function params: `(rowIndex)`. |
| getRowWidth | Func | | Get row actual width. |
| getDataRowItem | Func | | Function to get cell value.
Function params: `({rowData, dataKey})`. |
| getColumnWidth | Func | | Function to get column width.
Function params: `(columnIndex)`. |
| getDataRow | Func | | Function to get row data item.
Function params: `(rowIndex)`. |
| onClick | Func | | onClick row handler.
Function params: `(event, { dataKey, columnIndex })`. |
| onDoubleClick | Func | | onDoubleClick row handler.
Function params: `(event, { dataKey, columnIndex })`. |
| onMouseOver | Func | | onMouseOver row handler.
Function params: `(event, { dataKey, columnIndex })`. |
| onMouseOut | Func | | onMouseOut row handler.
Function params: `(event, { dataKey, columnIndex })`. |
| onRightClick | Func | | onRightClick row handler.
Function params: `(event, { dataKey, columnIndex })`. |
## License
MIT © [avin](https://github.com/avin)