メニュー
Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing/pinning layout mismatch.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TanStack/table --skill column-sizingコマンドは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 | column-sizing |
| description | Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing/pinning layout mismatch. |
| metadata | {"type":"sub-skill","library":"@tanstack/table-core","library_version":"9.2.4"} |
| requires | ["core","table-features"] |
| sources | ["TanStack/table:docs/framework/react/guide/column-sizing.md","TanStack/table:packages/table-core/src/features/column-sizing","TanStack/table:examples/react/column-sizing"] |
This skill builds on core and table-features. Sizing is numeric state; translating it to layout is a renderer decision.
import { columnSizingFeature, tableFeatures } from '@tanstack/table-core'
export const features = tableFeatures({ columnSizingFeature })
export const defaultColumn = { size: 180, minSize: 80, maxSize: 480 }
cell.style.width = `${cell.column.getSize()}px`
tableElement.style.width = `${table.getTotalSize()}px`
Apply the same model sizes consistently to headers, cells, and pinned offsets.
Wrong: const options = { defaultColumn: { size: 180 } }
Correct: cell.style.width = ${cell.column.getSize()}px``
Numeric state does not apply CSS to headless markup.
Source: docs/framework/react/guide/column-sizing.md#column-size-apis
Wrong: const column = { size: '25%' }
Correct: const column = { size: 240 }
Table sizing state is numeric; percentages and auto layout belong in renderer CSS.
Source: packages/table-core/src/features/column-sizing/columnSizingFeature.types.ts
Wrong: cell.style.minWidth = 'max-content'
Correct: cell.style.width = ${column.getSize()}px; cell.style.overflow = 'hidden'
If rendered width differs from the model, totals and pinning offsets no longer match geometry.
Source: examples/react/column-sizing/src/main.tsx
Inspect node_modules/@tanstack/table-core/dist/features/column-sizing/ for defaults and region-aware offset signatures.