Table component that implements both large table virtualization and tree tables

There is such a need, a React Suite (hereinafter referred to as rsuite ) users, he needs a Table component to support tree data like Jira Portfolio , and need to support big data rendering. As of now (January 17, 2019), no supportable components have been found in the open source UI library, so rsuite supports this feature in the latest release.

Next, let’s see how these two features are supported in rsuite ?

Large table virtualization

First, let’s look at supporting big data rendering. Rendering too many DOM elements in a page can cause performance problems. There must be a solution to optimize it. Let’s call it big table virtualization for the time being.

The so-called large form virtualization is to set a large data (such as 10000 data) for the table, and then virtual one table to hide the data that does not need to be displayed.

In order to solve the performance problems that occur when a large number of DOMs are rendered by the browser, we can’t render 10,000 pieces of data to the page, in one way, only render the data in the visible range. At the same time, a scroll bar is set for the table, and the data of the area is only rendered when scrolling to the area to be displayed, and the number of DOMs is reduced.

Preview

The above is a Table of 10000 data. The rendered HTML structure is:

We can see that only 14 `rs-table-row` are rendered in the Table , the first and last ones are not `children`, just a placeholder with height. Every `rs-table-row` is absolutely positioned, so even if you delete a Row in a Table, or add a Row, it will not change the position of other Rows. On this basis, by obtaining the scroll position of the scroll bar, it is easy to judge whether the top value of the current Row is within the visible range of the Table, and update all the Rows at the same time.

Many excellent libraries implement such a function, and the principle is basically the same. For example, `react-virtualized` provides the Table component, but he does not support Tree.

Tree Table

The need to display tree data in a table, we see more like the Gantt chart table. It has a child-parent relationship and can expand child nodes.

Such a table is supported by many Table components, but it is relatively cumbersome if you need to support virtualization at the same time, because you need to recalculate the displayed DOM and set the position of the scroll bar when you expand the closed node.

In versions prior to the rsuite Table component, the DOM structure of the rendered tree table was a Tree. So first you need to flatten the Tree, convert a one-dimensional array, set the parent node for each node, and render the relative position of the Tree node by the depth of the parent node. Then it is better to deal with, just need to deal with the data filtering when clicking the expand and close node button.

Installation and use

The design of rsuite’s Table component is very convenient for development. The structure is defined by the <Table>, <Column>, <Cell>, <HeaderCell> components, and the table data is rendered by assigning the data property.

Installation:

npm install rsuite --save

If you only want to use Table in your project and don’t want to install the entire rsuite library, you can install ` rsuite-table ` separately.

Example:

import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;
const data = [{ id: 1, name: 'foobar', email: '[email protected]' }];

ReactDOM.render(
  <Table height={400} data={data}>
    <Column width={70} align="center" fixed>
      <HeaderCell>编号</HeaderCell>
      <Cell dataKey="id" />
    </Column>
    <Column width={200} fixed>
      <HeaderCell>姓名</HeaderCell>
      <Cell dataKey="name" />
    </Column>
    <Column width={200}>
      <HeaderCell>邮箱</HeaderCell>
      <Cell dataKey="email" />
    </Column>
  </Table>
);

Finally

Finally, how can this feature be used for a mature Table component, so it also supports:

• Custom adjustment column width
• Locked column
• Automatic line break
• Sort
• Pagination
• Edit
• Merge Cells
• Custom cell
• Automatic column width
• Expandable row

The only question left is whether you try it in your project?