菜单
Apply TanStack Virtual rendering to the final Preact Table row or column model through React compatibility or virtual-core. Load for adapter selection, reactive counts, scroll targets, stable keys, measurements, spacer geometry, sticky layout, sizing CSS, or overscan.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TanStack/table --skill with-tanstack-virtual命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Share Alpine tableFeatures, defaults, createAppTable, and createAppColumnHelper with createTableHook. Load when multiple Alpine tables repeat infrastructure; unlike JSX adapters, Alpine has no registered table/cell/header component or context registry.
Create an Alpine TanStack Table v9 table with createTable, explicit tableFeatures, Alpine.reactive data getters, x-for rendering, and FlexRender through x-html. Load for first-table setup, reactive options, or when nested Alpine directives rendered by x-html do not initialize.
Read automatically reactive Alpine table APIs in bindings and own slices with Alpine.reactive getters plus on*Change or external TanStack Store atoms. Load for controlled state, updater callbacks, selector gating, atom precedence, or code incorrectly adding table.Subscribe.
| name | with-tanstack-virtual |
| description | Apply TanStack Virtual rendering to the final Preact Table row or column model through React compatibility or virtual-core. Load for adapter selection, reactive counts, scroll targets, stable keys, measurements, spacer geometry, sticky layout, sizing CSS, or overscan. |
| metadata | {"type":"composition","library":"@tanstack/preact-table","library_version":"9.2.4","framework":"preact"} |
| requires | ["@tanstack/table-core#core","getting-started","table-state"] |
| sources | ["TanStack/table:docs/framework/preact/guide/virtualization.md","TanStack/table:packages/preact-table/src/index.ts"] |
This skill builds on @tanstack/table-core#core, getting-started, and table-state. Virtual is renderer composition over the final Table model, never a tableFeatures slot.
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,
})
Render a spacer of getTotalSize() and position each row from its virtual item's start.
<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>
There is no @tanstack/preact-virtual package. In the standard Preact setup that aliases React to preact/compat, use the maintained React adapter:
import { useVirtualizer } from '@tanstack/react-virtual'
If the application cannot use the compat alias, integrate the Virtualizer class from @tanstack/virtual-core directly. That is a lower-level integration with application-owned lifecycle and subscriptions; do not invent Preact hooks around it.
Source: docs/framework/preact/guide/virtualization.md
Wrong:
useVirtualizer({ count: data.length, getScrollElement, estimateSize })
Correct:
const rows = table.getRowModel().rows
useVirtualizer({ count: rows.length, getScrollElement, estimateSize })
Raw data omits Table's current filtering, sorting, expansion, grouping, and pagination.
Source: docs/framework/preact/guide/virtualization.md
Wrong:
virtualizer.getVirtualItems().map((item) => <div>{rows[item.index].id}</div>)
Correct:
virtualizer
.getVirtualItems()
.map((item) => (
<div
style={{ position: 'absolute', transform: `translateY(${item.start}px)` }}
>
{rows[item.index].id}
</div>
))
Virtual computes geometry; application markup and CSS must apply it and supply the scroll container/spacer.
Source: docs/framework/preact/guide/virtualization.md
Inspect node_modules/@tanstack/preact-table/dist/index.d.ts. For rendering APIs, inspect installed node_modules/@tanstack/react-virtual/dist/ when using the standard preact/compat alias, or node_modules/@tanstack/virtual-core/dist/ for a direct integration. There is no maintained Preact-specific Virtual package or Table example; start from the Preact guide and translate the maintained React examples only through the compat setup it describes.