Skip to content

avin/react-vt-table

Repository files navigation

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