React-vt-table NPM

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	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	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	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 })`.