SuperAPI AI 工具集

tanstack-lit-table-with-tanstack-virtual

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 Lit 组件中把 TanStack Table 与 TanStack Virtual 结合,对表格行或列做虚拟化,以处理大数据量渲染。

主要能力:使用 @tanstack/lit-table 的 TableController 与 tableFeatures 构建表格,使用 @tanstack/lit-virtual 的 VirtualizerController 管理虚拟滚动;通过 createRef/ref 绑定滚动容器,按 estimateSize、overscan 等选项渲染可见项。

必要用法:虚拟化最终行模型时,count 取自 table.getRowModel().rows.length,虚拟项索引到同一 rows 数组,以尊重过滤、排序、展开和分页。列虚拟化时从 column.getSize() 估算,并在 columnSizing 变化时重新测量,宽度使用同一尺寸状态。列定义应声明为稳定的可变数组并直接传入,避免在 render() 中重建。

限制:拖拽与虚拟化组合不是官方维护的 Table 配方,需自行协调两库的变换、测量与自动滚动契约。粘性表头、宽度和 transform 等 CSS 需在 Lit 模板中自行实现,两库均为 headless。不要在 tableFeatures 中注册 Virtual。常见错误包括虚拟化原始 data 数组、count 与渲染行来自不同模型、每次渲染重建列、假设粘性与尺寸 CSS 自动生效。