0%

简易的react table组件

简易的 react table 组件

Github: simple-react-table

Antd 中的 Table 组件有固定头和固定列的功能,表格还有无限滚动,合并单元格。

我自己手写实现了一下其中的固定头和固定列。

运行效果

代码分析

表格的固定头固定列

Table 组件用了 position: sticky; 实现了固定头和固定列,可以看看简易下面的 demo,打开页面后用 F12 查看代码。

这是固定列部分的代码,更多的代码可以去上面的 Github 项目中查看

其中 style.position = 'sticky'; 设置了当前列固定,style.zIndex = '2'; 设置层级,这样在滚动的时候,这一列可以覆盖在上方,

1
2
3
4
5
if (fixed === 'left') {
style.left = index * 100 + 'px';
} else {
style.right = (columns.length - 1 - index) * 100 + 'px';
}

这一段代码判断列是在左边还是右边,如果是在左边,就加 css 的 left 属性,然后宽度是可以自定义的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
renderTbodyTree(index, key, props) {
const { columns, data } = props;
let rowData = data[index];
return (
<tr key={'Tbody_' + key}>
{columns.map((e, index) => {
let { fixed } = e;
let style: any = {};
if (fixed) {
style.position = 'sticky';
style.zIndex = '2';
style.background = 'black';
if (fixed === 'left') {
style.left = index * 100 + 'px';
} else {
style.right = (columns.length - 1 - index) * 100 + 'px';
}
}
return (
<td key={'Tbody' + index} style={style}>
{rowData[e.dataIndex]}
</td>
);
})}
</tr>
);
}

表格无限加载

表格无限加载用了 react-list 组件,运行 npm i react-list 安装依赖

这儿不多做介绍,看文档就可以了,用起来超简单

1
2
3
4
5
6
7
<ReactList
itemsRenderer={(items, ref) => this.renderTable(items, ref)}
itemRenderer={(index, key) => this.renderTbodyTree(index, key, this.props)}
length={this.props.data.length}
type='uniform'
pageSize={100}
/>

后记

项目没用 webpack,也没用 react 脚手架这些的,用的是 parcel,这个我也是第一次听说。

不知道 webpack 还行不行了,听说 vite 将取代 webpack,技术的发展真是日新月异,想想 20 年前电脑和和智能手机是个稀罕货,现在经济条件不错的都可以拥有了。