React-VT-Table

Table realisation based on 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

npm install react-vt-table

Demo

Here are some live examples.

Examples

Check out ./src/stories folder to find some code examples.

Styling

You can use built-in CSS style:

import 'react-vt-table/dist/style.css';

or create your own using existing one

API

<Table />

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 <Row /> 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. | | 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 | | 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

<Column />

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. |

<Row />

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