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

lijy91 发布于2019-08-26 10:34 / 1808人阅读

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

前段时间在研究并实现了如何实现表格的固定列（fixed column）功能，这里记录了思路和细节
表格控件比较复杂，应用场景也很多，需要各种数据展示、统计、操作等特性

原文有视频演示哦

live demo uke-dashboard https://admin.ukelli.com/ ( 用户名 admin, 密码 123 ). 介绍一下 uke-dashboard 是一套前后端分离模式的管理后台前端框架，已经经过了实际项目的验证，快速应对项目需求。

Ukelli-UI Table 的文档，此 Table 已经在 ukelli-ui 中实现，还有更多表格功能

期望效果

固定表头

左右各有一个固定的列

自动计算表格 cell 的宽度和高度，并且不能超过一定的长度，并且表头需要和表体同步宽度，不需要在配置中传入 UI 相关的宽度信息

实现细节

需要分别渲染 3 个表格

mainTable 主体表格

leftFixedTable 左边的固定列表格

rightFixedTable 右边固定列表格

监听 mainTable 和 fixedTable 的 scroll 事件，同步所有的表格的列的显示区域

向所有的行（ row ）元素 tr 监听 mouseenter 事件，确保鼠标移过对应的行所有的表格都有一致的表现

记录第一列的所有的格子（ td ）的高度信息，用于给固定表格的格子高度

记录第一行的格子的宽度信息，给 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

云服务器 GPU云服务器固定表头表格固定表头固定表头html asp 表头固定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106387.html

jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

soasme 2019-08-02 16:07 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

everfly 2019-08-23 14:05 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

张巨伟 2019-08-30 15:54 评论0 收藏0
bootstrap-table实现表头固定以及列固定

摘要：之前使用写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一引入和引入之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研...

B0B0 2019-08-23 15:42 评论0 收藏0
今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

leo108 2019-08-21 11:51 评论0 收藏0