用途
该技能用于在 Preact 环境中，为 TanStack Table 的最终行或列模型接入 TanStack Virtual 的虚拟化渲染能力。它建立在 @tanstack/table-core 的核心、入门与表格状态相关技能之上，目标是在长列表场景下只渲染可视区域内的行，从而降低渲染开销。需要明确的是，虚拟化是叠加在最终 Table 模型之上的渲染层组合，而不是 tableFeatures 的一个插槽。
主要能力
- 通过 React 兼容层（preact/compat）使用维护中的 React 适配器 @tanstack/react-virtual 的 useVirtualizer。
- 在无法使用 compat 别名时，直接集成 @tanstack/virtual-core 的 Virtualizer 类。
- 将 Table 的列尺寸应用到单元格宽度，例如通过 cell.column.getSize()。
- 支持按索引测量动态行高（使用 virtualizer.measureElement 与 data-index）。
使用方式
标准设置示例（资料原文）：
import { useRef } from 'preact/hooks' import { useVirtualizer } from '@tanstack/react-virtual' // via preact/compat
const scrollRef = useRef<HTMLDivElement>(null) const rows = table.getRowModel().rows const virtualizer = useVirtualizer({ count: rows.length, getScrollElement: () => scrollRef.current, estimateSize: () => 36, getItemKey: (index) => rows[index].id, overscan: 5, })
渲染时需提供一个高度为 getTotalSize() 的占位符（spacer），并根据每个虚拟项的 start 值定位每一行。
应用 Table 的列尺寸：
<td style={{ width: cell.column.getSize() }}> <table.FlexRender cell={cell} /> </td>
按索引测量动态行：
<div key={row.id} data-index={item.index} ref={virtualizer.measureElement}> {row.id} </div>
适用场景
- 使用 Preact 渲染 TanStack Table，且表格数据量较大、需要虚拟滚动优化性能。
- 已采用 preact/compat 别名、希望复用维护中的 React 虚拟化适配器的项目。
- 需要精确测量动态行高、或需要应用 Table 列宽到单元格的表格布局。
限制与常见错误
- 寻找 Preact 专属适配器：不存在 @tanstack/preact-virtual 包。在标准 Preact 设置中应使用 React 适配器；若无法使用 compat 别名，则直接集成 @tanstack/virtual-core 的 Virtualizer 类，此为较低层集成，生命周期与订阅由应用负责，不要自行围绕它发明 Preact hooks。
- 虚拟化原始数据：错误做法是对 data.length 做虚拟化；正确做法是对 table.getRowModel().rows 做虚拟化，因为原始数据会忽略 Table 当前的过滤、排序、展开、分组和分页。
- 假设布局自动完成：虚拟化只计算几何信息，应用标记与 CSS 必须自行应用，并提供滚动容器和占位符；需要手动设置 position: absolute 与 transform: translateY(item.start)。
资料与 API 探索
可检查 node_modules/@tanstack/preact-table/dist/index.d.ts 了解 API。使用标准 preact/compat 别名时，查看已安装的 node_modules/@tanstack/react-virtual/dist/；直接集成时查看 node_modules/@tanstack/virtual-core/dist/。资料指出没有维护中的 Preact 专属 Virtual 包或 Table 示例，应从 Preact 指南出发，并仅通过其描述的 compat 设置来转换维护中的 React 示例。
关于收费、价格、平台支持或具体性能数值等事实，上述资料暂未提供。