A Table, also called a data grid, is an arrangement of data in rows and columns or possibly in a more complex structure. It is an essential building block of a user interface.
A TreeTable is an extension of a Table that supports a tree-like hierarchy, typically in the first column. As a Tree, the hierarchy is determined by the parent-children relationships.
We have written about Ant Tables with sorting, filtering, pagination, row selections, infinite scrolling, and many more features. In this article, we will build a TreeTable using its nested-table capability. It takes ten steps to build, and you can always scroll down to the end to see the final source code.
Set up Working Environment
We use Create React App as a base to explore TreeTables. The following command creates a React project:
% yarn create react-app react-tree-table % cd react-tree-table
We install three additional packages:
% yarn add antd styled-components unique-names-generator
antd: Ant Design System is an open source code for enterprise-level UI design languages and React UI library. We useantd’s Table component to build a TreeTable.styled-components: It is a React-specific CSS-in-JS styling solution that writes CSS code in JavaScript to style components. We usestyled-componentsto style the TreeTable.unique-names-generator: It is a tool to generate unique and memorable name strings. We useunique-names-generatorto generate the TreeTable content.
After the installation, these packages become part of dependencies in