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