如何实现 React Table 固定列、固定表头

2019年9月20日 441次阅读 来源: sanget

前段时间在研究并实现了如何实现表格的固定列（fixed column）功能，这里记录了思路和细节

表格控件比较复杂，应用场景也很多，需要各种数据展示、统计、操作等特性

原文有视频演示哦

《如何实现 React Table 固定列、固定表头》

  • live demo uke-dashboard https://admin.ukelli.com/ ( 用户名 admin, 密码 123 ). 介绍一下 uke-dashboard 是一套前后端分离模式的管理后台前端框架，已经经过了实际项目的验证，快速应对项目需求。
  • Ukelli-UI Table 的文档，此 Table 已经在 ukelli-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 的宽度信息

表格 Column 的宽度

目前主流的 Table 组件实现固定 column 时需要指定 column 的宽度，但是这样会定义更多 UI 相关的信息，例如 antd

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 150, // 有 UI 相关的定义
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 150, // 有 UI 相关的定义
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

...

这样我认为会有一定 问题 ，因为根据以往的项目来看，这样会「分散开发时的注意力」，就算反复调试的 width 也未必准确，毕竟内容是不确定的。

所以 uke-table 对 column 的宽度做了计算优化，达到「column 自适应内容宽度」，超出一定宽度会自动换行这样的目的。 从而让开发更加专注于业务，而不是 UI 信息。

uke-table 文档: https://ui.ukelli.com/#/Table

    原文作者：sanget
    原文地址: https://segmentfault.com/a/1190000019968314
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞