1 背景
要改造现有的table组件，目前是这样的
改造前
1.1 需求
- 需要固定表头
- 需要固定第一列
- 滚动区域宽高可限制
1.2 确定参数形式
入参例子
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:
http://08643.cn/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/
