React has a library called React Table Library for creating Tree Table or Tree List. First let’s see how to Install React Table Library. Run the below npm command line in your command terminal to install the library.

npm install @table-library/react-table-library styled-components

In this session we will present some tasks using React table components. The following is the list of tasks.

const list = [
  {
    id: '1',
    name: 'VSCode',
    deadline: new Date(2020, 1, 17),
    type: 'SETUP',
    isComplete: true,
  },
  {
    id: '2',
    name: 'JavaScript',
    deadline: new Date(2020, 2, 28),
    type: 'LEARN',
    isComplete: true,
  },
  {
    id: '3',
    name: 'React',
    deadline: new Date(2020, 3, 8),
    type: 'LEARN',
    isComplete: false,
  }
];

Now our task is to start the structuring of the list in an object. This object will be later consumed by the Table component. Components will get imported from the library.

import * as React from 'react';
import { Table } from '@table-library/react-table-library/table';
 
const list = [ ... ];
 
const App = () => {
  const data = { nodes: list };
 
  return <Table data={data}>{(tableList) => null}</Table>;
};

Component accepts data objects as prop with nodes property. Nodes are the items in our list. The table can also display tree structures so the terms are kept as generic. As a tableList we can access our list using functions as children. React Table Library uses composition over configuration so all building blocks can be retrieved as components from the library. 

import * as React from 'react';
import {
  Table,
  Header,
  HeaderRow,
  HeaderCell,
} from '@table-library/react-table-library/table';
 
const list = [ ... ];
 
const App = () => {
  const data = { nodes: list };
 
  return (
    <Table data={data}>
      {(tableList) => (
        <Header>
          <HeaderRow>
            <HeaderCell>Task</HeaderCell>
            <HeaderCell>Deadline</HeaderCell>
            <HeaderCell>Type</HeaderCell>
            <HeaderCell>Complete</HeaderCell>
          </HeaderRow>
        </Header>
      )}
    </Table>
  );
};