SuperAPI AI 工具集

tanstack-react-table-with-tanstack-virtual

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 React 项目中,把 TanStack Table 的最终渲染行或可见列交给 TanStack Virtual 做虚拟滚动,从而只渲染视口内的行或列。它建立在 table-core、getting-started 与 table-state 之上,先构建 Table 模型,再虚拟化其输出。

主要能力与用法:使用 @tanstack/react-virtual 的 useVirtualizer,通过 count 传入 table.getRowModel().rows.length,getScrollElement 返回滚动容器引用,estimateSize 给出行高估算,getItemKey 使用行 id 保证稳定身份,overscan 控制预渲染行数。滚动容器内需设置高度与 overflow: auto,内容层设置高度为 virtualizer.getTotalSize() 并使用 position: relative,每个虚拟项通过 transform: translateY(item.start) 定位,并配合 data-index={item.index} 与 ref={virtualizer.measureElement} 做动态测量。列宽应由渲染层应用 cell.column.getSize()。

常见限制与错误:不要将 useVirtualizer 注册为 Table 的 feature;不要直接虚拟化原始输入数据(会绕过筛选、排序、展开、分组和分页);动态测量必须同时提供虚拟索引与稳定行键,否则测量会错位;渲染层必须自行提供总尺寸占位与定位几何。虚拟化只控制渲染几何,不是 Table 的 feature 或行模型。

其他细节:可查阅 node_modules/@tanstack/react-table/dist/index.d.ts 与 @tanstack/react-virtual/dist/ 以获取确切 API 选项。关于收费、价格、平台与效果,资料暂未提供。