メニュー
Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TanStack/table --skill column-resizingコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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.
SKILL.md を表示中
| name | column-resizing |
| description | Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly. |
| 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-resizing.md","TanStack/table:packages/table-core/src/features/column-resizing","TanStack/table:examples/react/column-resizing-performant"] |
This skill builds on core, table-features, and column-sizing. Resizing supplies gesture APIs and state; the renderer supplies handles and widths.
import {
columnResizingFeature,
columnSizingFeature,
tableFeatures,
} from '@tanstack/table-core'
export const features = tableFeatures({
columnSizingFeature,
columnResizingFeature,
})
export const options = {
columnResizeMode: 'onChange' as const,
columnResizeDirection: 'ltr' as const,
}
const handler = header.getResizeHandler()
handle.addEventListener('mousedown', handler)
handle.addEventListener('touchstart', handler)
For large grids, compute all visible sizes once per update and expose them as CSS variables.
Wrong: tableFeatures({ columnResizingFeature })
Correct: tableFeatures({ columnSizingFeature, columnResizingFeature })
Resizing modifies the sizing state and requires columnSizingFeature.
Source: packages/table-core/src/types/TableFeatures.ts#FeatureSlotPrereqs
Wrong: handle.addEventListener('pointerdown', header.getResizeHandler())
Correct:
const handler = header.getResizeHandler()
handle.addEventListener('mousedown', handler)
handle.addEventListener('touchstart', handler)
The shipped handler distinguishes touchstart from the mouse path. A single
pointerdown listener does not provide working touch resizing; wire both mouse
and touch start events.
Source: docs/framework/react/guide/column-resizing.md#connect-column-resizing-apis-to-ui
Wrong: cells.forEach(cell => cell.style.width = ${cell.column.getSize()}px)
Correct: root.style.setProperty(--col-${header.id}, ${header.getSize()}px)
Caching sizes or CSS variables avoids repeated work during onChange resizing.
Source: examples/react/column-resizing-performant/src/main.tsx
Inspect node_modules/@tanstack/table-core/dist/features/column-resizing/ and the sizing feature directory for the state it updates.