メニュー
Pin stable row IDs into top, center, and bottom collections with rowPinningFeature and keepPinnedRows. Load for filtering/pagination visibility, explicit region rendering, or renderer-owned sticky CSS.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TanStack/table --skill row-pinningコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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 | row-pinning |
| description | Pin stable row IDs into top, center, and bottom collections with rowPinningFeature and keepPinnedRows. Load for filtering/pagination visibility, explicit region rendering, or renderer-owned sticky CSS. |
| metadata | {"type":"sub-skill","library":"@tanstack/table-core","library_version":"9.2.4"} |
| requires | ["core","table-features"] |
| sources | ["TanStack/table:docs/framework/react/guide/row-pinning.md","TanStack/table:packages/table-core/src/features/row-pinning","TanStack/table:examples/react/row-pinning"] |
This skill builds on core and table-features. Pinning creates row regions; the renderer controls order and sticky layout.
import { rowPinningFeature, tableFeatures } from '@tanstack/table-core'
type Person = { id: string; name: string }
export const features = tableFeatures({ rowPinningFeature })
export const options = {
getRowId: (row: Person) => row.id,
keepPinnedRows: true,
}
const regions = [
table.getTopRows(),
table.getCenterRows(),
table.getBottomRows(),
]
for (const rows of regions) rows.forEach(renderRow)
Render each region explicitly if the visual order matters.
Wrong: const options = { getRowId: (_row: Person, index: number) => String(index) }
Correct: const options = { getRowId: (row: Person) => row.id }
Indexes change under sorting, filtering, pagination, and insertion.
Source: docs/framework/react/guide/row-pinning.md
Wrong: row.pin('top')
Correct: topRowElement.style.position = 'sticky'
Pinning state does not style or place DOM elements.
Source: examples/react/row-pinning/src/main.tsx
keepPinnedRows: true is the default. Pinned rows stay visible in their
pinned region even when filtering or pagination removes them from the center
row model.keepPinnedRows: false limits pinned rows to those present in the current
filtered and paginated row model.Choose explicitly based on product behavior; neither value is inherently wrong.
Source: packages/table-core/src/features/row-pinning/rowPinningFeature.types.ts
Inspect node_modules/@tanstack/table-core/dist/features/row-pinning/ for region getters, row APIs, and keepPinnedRows semantics.