开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件

背景

有这样一个需求，一位 React Suite（以下简称 rsuite）的用户，他需要一个 Table 组件能够像 Jira Portfolio 一样，支持树形数据，同时需要支持大数据渲染。截止到目前（2019年1月18日）为止，开源 UI 库中没有找到可以支持的组件，所以 rsuite 在最新的版本中支持这一特性。

接下来，我们看一下 rsuite 中是怎么支持这两个功能？

大表格虚拟化

首先，我们看一下支持大数据渲染，在页面中渲染过多的 DOM 元素会带来性能问题，必须得有一种解决方案去优化它，我们暂且叫做大表格虚拟化。

所谓的大表格虚拟化，其实就是为表格设置一个较大的数据（比如 10000 条数据），然后虚拟一个表格隐藏掉不需要显示的数据。

为了解决让浏览器渲染的大量 DOM 时候出现的性能问题，我们不能把 10000 条数据都渲染到页面，采用一种方式，只渲染可视范围内数据。同时为表格设置一个滚动条，只有在滚动到需要显示的区域时候才渲染该区域的数据，减少的 DOM 数量。

预览地址

以上这是一个 10000 条数据的 Table，渲染后的 HTML 结构是:

我们可以看到在 Table 中只渲染了 14 个 rs-table-row ，其中第一个和最后一个是没有 children, 只是一个拥有高度的占位符。每一个 rs-table-row 都是绝对定位，所以即使 Table 中删除一个 Row, 或者新增一个 Row ,也不会改变其他 Row 的位置。在这样的基础上，通过获取滚动条的滚动的位置，就很容易判断当前 Row 的 top 值是否在 Table 的可视范围内，同时更新所有的 Row。

很多优秀的库都实现了这样的功能，原理基本一致，比如 react-virtualized 就提供 Table 组件，但是他不支持 Tree。

树形表格

在表格中展示树形数据的需求，我们见得比较多就像甘特图表格展示那样。它有子父层级关系，可以展开子节点。

这样一个表格，很多 Table 组件都支持，但是如果同时需要支持虚拟化就相对比较麻烦，因为在展开关闭节点的时候需要重新计算显示的 DOM 以及设置滚动条的位置。

在 rsuite Table 组件之前的版本中，渲染的树形表格的 DOM 结构是一棵 Tree。所以首先需要把 Tree 拍平，转换一个一维数组，为每一个节点设置父节点，通过父节点的深度渲染 Tree 节点的相对位置。然后就比较好处理，只需要在点击展开关闭节点按钮的时候，处理好数据的过滤。

安装与使用

rsuite 的 Table 组件的设计，对开发还是非常方便，通过 <Table>、<Column>、<Cell>、<HeaderCell> 组件定义结构，通过赋值data 属性渲染表格数据。

安装



<code class="language-zsh">npm install rsuite --save

如果你在项目只希望用到 Table, 不想安装整个 rsuite 库，你可以单独安装 rsuite-table

示例代码：



<code class="language-jsx">import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;

const data = [{ id: 1, name: 'foobar', email: 'foobar@xxx.com' }];

ReactDOM.render(

  &lt;Table height={400} data={data}&gt;

    &lt;Column width={70} align=&quot;center&quot; fixed&gt;

      &lt;HeaderCell&gt;编号&lt;/HeaderCell&gt;

      &lt;Cell dataKey=&quot;id&quot; /&gt;

    &lt;/Column&gt;

    &lt;Column width={200} fixed&gt;

      &lt;HeaderCell&gt;姓名&lt;/HeaderCell&gt;

      &lt;Cell dataKey=&quot;name&quot; /&gt;

    &lt;/Column&gt;

    &lt;Column width={200}&gt;

      &lt;HeaderCell&gt;邮箱&lt;/HeaderCell&gt;

      &lt;Cell dataKey=&quot;email&quot; /&gt;

    &lt;/Column&gt;

  &lt;/Table&gt;

);

最后

最后，对于一个成熟的 Table 组件怎么能只有这点功能，所以它还支持：

自定义调整列宽
锁定列
自动换行
排序
分页
编辑
合并单元格
自定义单元格
自动列宽
可展开行

剩下唯一的问题，就是您是否在项目中尝试它。

原文链接：https://my.oschina.net/simonguo/blog/3003231