cp-react-tree-table

A fast, efficient tree table component for ReactJS.

Live Demo

Installation

[Method A] Using npm:

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

[Method B] Using yarn:

yarn add cp-react-tree-table

Usage

Import the cp-react-tree-table module:

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

Example

Example Live Demo (JSFiddle)

import React, { Component } from 'react';

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


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


export default class DemoApp extends Component {
  render () {
    return (
        <TreeDataTable data={mockData} height={100} className="demo-tree-table">
          <TreeDataTable.Column grow={0} basis="300px" renderCell={this.renderIndexColumn} />
          <TreeDataTable.Column grow={1} renderCell={this.renderColumn} />
        </TreeDataTable>
    );
  }

  renderIndexColumn = (data, metadata, toggleChildren) => {
    return (
      <div style={{ paddingLeft: (metadata.depth * 25) + 'px'}}>
        <span className="toggle-button-wrapper" style={{ width: '80px'}}>
          {(metadata.hasChildren)
            ? (
                <span onClick={toggleChildren}>[toggle]</span>
              )
            : ''
          }
        </span>
        
        <span>{data.name}</span>
      </div>
    );
  }
  
  renderColumn = (data, metadata, toggleChildren) => {
    return (
      <span>Column 2: {data.name}</span>
    );
  }
}

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.

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 26px if TreeDataTable's property rowHeight is not set.

License

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