菜单
Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TanStack/table --skill column-pinning命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | column-pinning |
| description | Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps. |
| metadata | {"type":"sub-skill","library":"@tanstack/table-core","library_version":"9.2.4"} |
| requires | ["core","table-features","column-sizing"] |
| sources | ["TanStack/table:docs/framework/react/guide/column-pinning.md","TanStack/table:packages/table-core/src/features/column-pinning","TanStack/table:examples/react/column-pinning-sticky"] |
This skill builds on core, table-features, and column-sizing. Pinning partitions models; CSS creates the sticky visual result.
import {
columnPinningFeature,
columnSizingFeature,
tableFeatures,
} from '@tanstack/table-core'
export const features = tableFeatures({
columnSizingFeature,
columnPinningFeature,
})
export const initialState = {
columnPinning: { start: ['name'], end: ['actions'] },
}
const style = (column: Column<any, any>) => ({
position: column.getIsPinned() ? 'sticky' : 'relative',
insetInlineStart:
column.getIsPinned() === 'start'
? `${column.getStart('start')}px`
: undefined,
insetInlineEnd:
column.getIsPinned() === 'end' ? `${column.getAfter('end')}px` : undefined,
width: `${column.getSize()}px`,
zIndex: column.getIsPinned() ? 1 : 0,
background: 'Canvas',
})
Wrong: column.pin('left')
Correct: column.pin('start')
V9 uses logical start and end, including state and collection APIs.
Source: docs/framework/react/guide/migrating.md#column-pinning
Wrong: column.pin('start')
Correct: Object.assign(cell.style, style(column))
The feature only computes regions and offsets; the renderer owns positioning, backgrounds, overflow, and stacking.
Source: examples/react/column-pinning-sticky/src/main.tsx
Wrong: cell.style.width = 'auto'
Correct: cell.style.width = ${column.getSize()}px``
Sticky offsets use numeric sizes, so mismatched DOM widths create gaps or overlaps.
Source: docs/framework/react/guide/column-pinning.md#useful-column-pinning-apis
Inspect node_modules/@tanstack/table-core/dist/features/column-pinning/; use CSS logical properties for direction-aware rendering.
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.
