React Table 固定列、固定表头的实现

这几天在研究如何实现表格的固定列（fixed column）功能，这里记录了思路和细节。
表格控件比较复杂，应用场景也很多，各种数据展示、统计、操作，管理应用常用的组件之一。

Ukelli-UI Table 是为了应对以下应用场景：

1. 友好的展示数据
2. 友好的数据交互
3. 友好的开发体验
4. 业务逻辑和 UI 分离

期望效果

1. 固定表头
2. 左右各有一个固定的列
3. 自动计算表格 cell 的宽度和高度，并且不能超过一定的长度，并且表头需要和表体同步宽度，不需要在配置中传入 UI 相关的宽度信息

实现细节

1. 分为 3 个表格
   1. mainTable 主体表格
   2. leftFixedTable 左边的固定列表格
   3. rightFixedTable 右边固定列表格
2. 监听 mainTable 和 fixedTable 的 scroll 事件，同步所有的表格的列的显示区域
3. 向所有的行（ row）元素 tr 监听 mouseenter 事件，确保鼠标移过对应的行所有的表格都有一致的表现
4. 记录第一列的所有的格子 （ td ）的高度信息，用于给固定表格的格子高度
5. 记录第一行的格子的宽度信息，给 TableHeader 同步 TableBody 的宽度信息

目前主流的 Table 组件都需要设置列的宽度，最开始 ukelli-ui 的表格控件也是如此实现的，但是后面发现这样有两个问题

1. 定义渲染配置的时候需要额外的 UI 的信息，即 width，这样不够纯粹
2. 在开发的时候需要花很多精力在格子宽度上，要做到每一个表头都不会过长而换行，影响排版

参考:

• Ukelli-UI/Table https://ui.ukelli.com/#/Table
• 原文地址 https://ukelli.com/2019/03/24/react-table/