react-treelist 
A React treelist component to display data in tree structure. Uses virtual scrolling to display large data sets without performance issues.
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-treelistUsage
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
License
This project is licensed under the MIT License - see the LICENSE.md file for details.