cp-react-tree-table


A fast, efficient tree table component for ReactJS.

Live Demo

$3

###### [Method A] Using npm:

``sh
npm install --save cp-react-tree-table
`

###### [Method B] Using yarn:

`sh
yarn add cp-react-tree-table
`




$3

Import the cp-react-tree-table module:

`javascript
import TreeDataTable from 'cp-react-tree-table';
`




$3

Example Live Demo (JSFiddle)

`javascript
import React, { Component } from 'react';

import TreeDataTable from 'cp-react-tree-table';


const mockData =
{
data: { name: '[1 Height: 25px.' },
height: 25,
children:
{
data: { name: '[2' },
children:
{
data: { name: '[3' },
},
{
data: { name: '3' },
},
{
data: { name: '3' },
}
],
},
{
data: { name: '2 Height: 40px.' },
height: 40,
}
],
},
{
data: { name: '1 Height: 30px.' },
height: 30,
},
{
data: { name: '1 Height: 30px.' },
height: 30,
},
];


export default class DemoApp extends Component {
render () {
return (




);
}

renderIndexColumn = (data, metadata, toggleChildren) => {
return (



);
}

renderColumn = (data, metadata, toggleChildren) => {
return (
Column 2: {data.name}
);
}
}
`

Props

Props for TreeDataTable:

| Prop | Type | Required | Description |
|---------------------|------------|----------|------------------------ |
| data | _Array<TreeDataRow>_ | yes | List of data items |
| height | _Number_ | no | Table height (px) \* |
| rowHeight | _Number_ | no | Default row height (px) \\ |
| className | _String_ | no | Table custom class \\\* |


_\* Table height: default 200._

_\\ Default row height: will be used for items (TreeDataRow) that don't specify their height property._

_\\\* Table custom class: will be appended to the classList of TreeDataTable's root element._


Props for TreeDataTable.Column:

| Prop | Type | Required | Description |
|-------------------|------------|----------|------------------------ |
| grow | _Number_ | no | flexGrow CSS property |
| basis | _String_ | no | flexBasis CSS property |
| renderCell | _Function_ | yes | Renders a single cell \* |


_\* renderCell(rowData, rowMetadata, toggleChildren) => Node:_

* rowData: The item data object.
* rowMetadata: Metadata object describing the item state:
* depth: (number) Starts from 0, indicates the depth level of the item inside the tree.
* hasChildren: (boolean)
* toggleChildren: Callback function that will toggle direct descendants of the item.

$3

Properties:

|             | Type       | Required | Description         |
|-------------------|------------|----------|------------------------ |
| data | _any_ | yes | The item data object |
| height | _Number_ | no | Row height (px) \* |
| children | _Array<TreeDataRow>_ | no | List of children data items |

_\* Row height: defaults to 26px if TreeDataTable's property rowHeight` is not set._

License

This project is MIT licensed.
Please see the LICENSE file for more information.