table
table copied to clipboard
feat: virtual list at Y-axis when using table tag
目的:
在使用table标签时添加虚拟列表支持的同时支持:固定行列,以及筛选,排序等功能。
解决问题:
组件原有虚拟列表为div标签,不包含筛选,固定行列等功能。
实现方式:
- 根据
start
,end
变量控制渲染列表的个数 len = end - start - 用一个相对定位的盒子
virtual-box
,撑出滚动区域。将内容table放在virtual-box
子div中,该子div绝对定位,根据隐藏了多少起始行的行高,改变它在相对定位盒子中的位置。 - 首次加载
start
为 0end
为 1依次渲染行,并通过dom得到行高集合rowsHeights
,end++
一直到总高度超过scroll.y
值停止 - 开始沿着y轴滚动时,
- start::根据行高的集合
rowsHeights
和scrollTop
算出新的start
即已滚动超过了多少行 。 - end:计算需要知道
scrollTop
是否滚动过当前最后一行,所以需要依赖当前的end
衍生出新的end
,但是如果end
保存在state
中会有数据data
先过来,但是end
无法和data
一起更新, end >= data.length 越界的情况,所以将当前的end
保存在useRef
中,通过useMemo
计算出新的值。
- start::根据行高的集合
This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.
🔍 Inspect: https://vercel.com/react-component/table/jyiwiaazp
✅ Preview: https://table-git-virtual-list-yaixs.react-component.vercel.app