Building a TreeTable Using Ant Design System

A <a href="https://en.wikipedia.org/wiki/Table_(information)" rel="noopener ugc nofollow" target="_blank">Table</a>, 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 <a href="https://betterprogramming.pub/an-introduction-to-ant-tables-for-javascript-developers-c420754c9fe7" rel="noopener ugc nofollow" target="_blank">Ant Tables</a> 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. <h1>Set up Working Environment</h1> We use <a href="https://betterprogramming.pub/an-in-depth-guide-for-create-react-app-5-cra-5-b94b03c233f2" rel="noopener ugc nofollow" target="_blank">Create React App</a> as a base to explore TreeTables. The following command creates a React project: <pre> % yarn create react-app react-tree-table % cd react-tree-table</pre> We install three additional packages: <pre> % yarn add antd styled-components unique-names-generator</pre> <ul> <li><code><a href="https://betterprogramming.pub/understanding-the-ant-design-system-a-ui-design-for-enterprises-39afdb188b06" rel="noopener ugc nofollow" target="_blank">antd</a></code>: Ant Design System is an open source code for enterprise-level UI design languages and React UI library. We use <code>antd</code>’s Table component to build a TreeTable.</li> <li><code><a href="https://betterprogramming.pub/styled-components-a-css-in-js-approach-755f6a196c42" rel="noopener ugc nofollow" target="_blank">styled-components</a></code>: It is a React-specific CSS-in-JS styling solution that writes CSS code in JavaScript to style components. We use <code>styled-components</code> to style the TreeTable.</li> <li><code><a href="https://github.com/andreasonny83/unique-names-generator" rel="noopener ugc nofollow" target="_blank">unique-names-generator</a></code>: It is a tool to generate unique and memorable name strings. We use <code>unique-names-generator</code> to generate the TreeTable content.</li> </ul> After the installation, these packages become part of <code><a href="https://betterprogramming.pub/package-jsons-dependencies-in-depth-a1f0637a3129" rel="noopener ugc nofollow" target="_blank">dependencies</a></code> in <a href="https://betterprogramming.pub/building-a-treetable-using-ant-design-system-8048cb93afe3">Click Here</a>