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.