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.

Handlers

Property name	Type	Required	Description
onSelectRow	function	no	Handler function to be called with the row data whenever a row is selected. Requires canSelect component option to be set.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE.md file for details.