cp-react-tree-table
A fast, efficient tree table component for ReactJS.
Installation
[Method A] Using npm:
[Method B] Using yarn:
Usage
Import the cp-react-tree-table
module:
Example
Example Live Demo (JSFiddle)
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) ** |
onScroll |
Function | no | Callback for scroll event *** |
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.
*** onScroll(scrollTop)
:
scrollTop
: (number
) The number of pixels that the table's content is scrolled vertically.
**** 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.
TreeDataRow
Object type
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 26
px if TreeDataTable
's property rowHeight
is not set.