【2种方法】固定表头滚动内容的react table组件

1 背景

要改造现有的table组件,目前是这样的


改造前

1.1 需求

  • 需要固定表头
  • 需要固定第一列
  • 滚动区域宽高可限制

1.2 确定参数形式

参考antd table-scroll

入参例子

2 用2个<table>

2.1 描述

使用两个table分别放置实际的header和body

2.2 滚动

2.2.1 一些问题

  • <thead><tbody>无法设置高度,就无法用overflow:scroll 来让它滚动;
  • <table>的整体设置高度会让表头和表内容一起滚动,没有办法固定住表头只滚动内容。

2.2.2 实现

为了让表头和表内容都可以滚动,需要用两个<table>分别包裹表头和表内容,如下

两个table

然后对包裹住表内容的那个table的外面那个div设定高度
样式示例

就有这个效果
分别可以滚动

为了美观把表头的滚动条用css去掉

一起滚动

  • 目标:让表头和表内容一起滚
  • 实现:使用onScroll事件,让表头和表内容的scrollLeft在滚动的时候保持一致
    代码

    效果

2.3 对齐

2.3.1 宽度调整

  • 问题:现在虽然能同步滚动了,但是每列没有对上,需要处理宽度
  • 实现:使用table-layout: fixed;,手动设置每列宽度

但是
这个table有两层的头,第二层头的<th>设置width是失效的,也就是说没办法直接修改th、td样式来让宽度保持一致。

  • 解决:使用<colgroup>来设定列的宽度,可以根据自己的column来动态设置
    例如
function handleLength(width: string | number | undefined): string | undefined {
  return typeof width === 'number' ? `${width}px` : width;
}
  const ColGroup = React.useMemo(() => {
    const cols = [];
    if (onSelected) cols.push(<col style={{ width: '42px' }} key="first" />);

    headerGroups.forEach((item) => {
      // console.log('test', item);
      item.headers.forEach((head) => {
        if (head.width) cols.push(<col style={{ width: handleLength(head.width) }} />);
      });
    });
    return (
      <colgroup>
        {cols}
      </colgroup>
    );
  }, [headerGroups, onSelected]);
dom

效果

2.3.2 总宽度调整

  • 问题:但是body所在的table因为多了一个滚动条宽度,所以两个table的宽度不一样,滚动条横向拖到尾部会出现不对齐的情况,如下
    示例
  • 解决:给header加上这个多出来的滚动条宽度,宽度计算的代码如下:
const scrollbarWidth = () => {
    // thanks too https://davidwalsh.name/detect-scrollbar-width
    const scrollDiv = document.createElement('div')
    scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;')
    document.body.appendChild(scrollDiv)
    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
    document.body.removeChild(scrollDiv)
    return scrollbarWidth
}
  
export default scrollbarWidth
dom

效果

3 使用sticky

mui 文档
  • 问题:上面那种办法必须指定每列的宽度,不然滚动的时候就对不齐了,table每列自适应还是很方便的。

在不考虑IE的情况下其实有更简单的办法:对<thead>设置position:sticky

dom

  • 值得注意的是,在Firefox里如果给标签<thead>设置sticky,且使用了border-collapse: collapse,border会看不见,需要改成
  border-collapse: separate;
  border-spacing: 0;

完成效果如下


效果

下一篇:
多个固定列的React Table组件

Reference:
https://www.jianshu.com/p/1dbf8819c388
https://zhuanlan.zhihu.com/p/33280304
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
https://github.com/TanStack/table/blob/v7/examples/virtualized-rows/src/scrollbarWidth.js
https://mui.com/material-ui/react-table/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容