TreeDataTable Demo

https://github.com/constantin-p/cp-react-tree-table

by Constantin Panaitescu

HTML

<!-- React + ReactDOM -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- cp-react-tree-table -->
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>



<a class="demo" href="https://constantin-p.github.io/cp-react-tree-table"><span>TreeDataTable</span> Demo</a>
<div id="root"> <!-- React --> </div>

CSS

.demo-tree-table {
  background: #ffffff;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}

.demo-tree-table .cp_tree-table_row:not(:first-child) {
  box-shadow: inset 0 1px 0 #eeeeee;
}

.demo-tree-table .cell-wrapper {
  display: flex;
  align-items: center;
  font-weight: 300;
  font-size: 13px;
  height: 100%;
  width: 100%;

  font-family: 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Courier, monospace;
}

.demo-tree-table .cell-wrapper > span {
  flex-grow: 1;
}

.demo-tree-table .cell-wrapper > .toggle-button-wrapper {
  flex-grow: 0;
}


.demo-tree-table .toggle-button-wrapper > span {
  background: #efefef;
  color: #0f55eb;
  cursor: pointer;
  padding: 1px;
  border-radius: 3px;
}

.demo-tree-table .toggle-button-wrapper > span:hover {
  background: #d7d7d7;
}

/* DEMO */
a.demo {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,  'Helvetica Neue', sans-serif;
    padding: 10px 0 15px 0;
    display: inline-block;
}

a.demo,
a.demo:focus,
a.demo:hover,
a.demo:active {
  color: #0f55eb;
  outline: none;
  text-decoration: none;
}

a.demo span {
  font-family: 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Courier, monospace;
  background: #efefef;
  border: 1px solid #e5e5e5;
  padding: 2px;
  border-radius: 3px;
}

button {
  margin-bottom: 10px;
}

Babel + JSX

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,
  },
];



class Demo extends React.Component {
  render () {
    return (
        <TreeDataTable data={mockData} height={200} 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'}} className="cell-wrapper">
        <span className="toggle-button-wrapper" style={{ width: '80px'}}>
          {(metadata.hasChildren)
            ? (
                <span onClick={toggleChildren}>[toggle{(metadata.hasVisibleChildren) ? '-' : '+' }]</span>
              )
            : ''
          }
        </span>
        
        <span>{data.name}</span>
      </div>
    );
  }
  
  renderColumn = (data, metadata, toggleChildren) => {
    return (
    	<span  className="cell-wrapper">Column 2: {data.name}</span>
    );
  }
}


ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);