React-treelist NPM

react-treelist

A React treelist component to display data in tree structure. Uses virtual scrolling to display large data sets without performance issues.

Demo

Features

Display large data sets
Resize columns
Sort columns
Expand all rows by default
Apply custom styles to rows and columns
Custom handlers when rows are selected

Installation

npm install --save react-treelist

Usage

import TreeList from 'react-treelist';
import 'react-treelist/build/css/index.css';

<TreeList
  data={DATA}  
  columns={COLUMNS}
  options={OPTIONS}
  handlers={HANDLERS}
  id={'id'}
  parentId={'parentId'}></TreeList>

Property	Type	Description
`data`	array	Array of data objects which become rows in the treelist
`columns`	array	Array of column configuration options. See column options for more details.
`options`	object	Component level configuration options. See component options for more details.
`handlers`	object	Component level handlers. See handlers for more details.
`id`	string	Data field which uniquely identifies each record
`parentId`	string	Data field which identifies the parent row of a record. Data objects with `null` value in this field are treated as top-level parent records
`refresh`	number	This optional property can be used to improve render performance if the data is not expected to change often. A hash is computed for every render to check if the data has changed, so that the DOM can be re-rendered again. If the dataset is large, this can affect performance. Setting this property will disable the built-in hash calculation and the component will be re-rendered only if this property changes.

See src/js/index.js for an example.

Options

Column options

The component accepts an array of column objects via the property columns. The column objects can accept the following properties.

Property name	Type	Required	Description
`title`	string	yes	Will be displayed as column header
`field`	string	yes	Property in the data object whose value will be displayed in the rows against this column
`type`	string	yes	Data type of the values displayed in the column. Required for sorting and applying formatting. Valid values: `number`, `string`, `date`
`width`	number	no	Width of the column
`expand`	bool	no	Shows the expand or collapse in this column if set to `true`. If this option is not provided, the icons are shown in the first column by default.
`class`	string \| function	no	Class name (string) to be added to the cells in the column. Can be used for applying specific styles for the column values. A function can also be provided, which will be executed with the row's data object to determine the class name.
`formatter`	function	no	If provided, the return value of this function will be dispayed in the rows for this column. The function receives two arguments: value of `field` from the data object as the first argument and entire row's data as the second argument.

Component options

Component level options are accepted via the property, options.

Property name	Type	Required	Description
`expandAll`	bool	no	If set to `true` will expand all rows by default when the component is rendered for the first time. Defaults to `false`.
`height`	number	no	Height of the treelist body. When not provided, the component will expand to show all available rows.
`minimumColWidth`	number	no	Minimum width of columns. Columns can't be resized below this value.
`canSelect`	bool	no	Set this as `true` to enable the row selection handler. See `onSelectRow` in handlers for details.
`rowClass`	string \| function	no	Class name (string) to be added to rows. Can be used for applying specific styles for the rows. A function can also be provided, which will be executed with the row's data object to determine the class name.