メニュー
Expand hierarchical subrows or custom detail panels with rowExpandingFeature, expandedRowModel, getSubRows, getRowCanExpand, manualExpanding, and paginateExpandedRows. Load when expansion state changes but no UI appears.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TanStack/table --skill expandingコマンドは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 | expanding |
| description | Expand hierarchical subrows or custom detail panels with rowExpandingFeature, expandedRowModel, getSubRows, getRowCanExpand, manualExpanding, and paginateExpandedRows. Load when expansion state changes but no UI appears. |
| metadata | {"type":"sub-skill","library":"@tanstack/table-core","library_version":"9.2.4"} |
| requires | ["core","table-features","client-vs-server"] |
| sources | ["TanStack/table:docs/framework/react/guide/expanding.md","TanStack/table:packages/table-core/src/features/row-expanding","TanStack/table:examples/react/expanding"] |
This skill builds on core, table-features, and client-vs-server. Expansion controls row-tree inclusion; the renderer owns disclosure controls and detail panels.
import {
createExpandedRowModel,
rowExpandingFeature,
tableFeatures,
} from '@tanstack/table-core'
type Node = { id: string; children?: Node[] }
export const features = tableFeatures({
rowExpandingFeature,
expandedRowModel: createExpandedRowModel(),
})
export const options = { getSubRows: (row: Node) => row.children }
const detailOptions = { getRowCanExpand: () => true }
const isDetailOpen = row.getIsExpanded()
For custom detail UI, render an additional row/panel when isDetailOpen is true.
Wrong: const options = { data: nestedRows }
Correct: const options = { data: nestedRows, getSubRows: (row: Node) => row.children }
Nested object structure is not inferred automatically.
Source: docs/framework/react/guide/expanding.md#table-rows-as-expanded-data
Wrong: row.toggleExpanded(true)
Correct: if (row.getIsExpanded()) renderDetail(row.original)
Table is headless and cannot render a custom detail panel.
Source: docs/framework/react/guide/expanding.md#custom-expanding-ui
Wrong: const options = { paginateExpandedRows: false }; const leafOnlyPages = true
Correct: const options = { paginateExpandedRows: false }; const descendantsStayWithParent = true
This option controls whether expansion happens before or after pagination; it does not make page size count only leaf rows.
Source: packages/table-core/src/features/row-expanding/rowExpandingFeature.types.ts
Inspect node_modules/@tanstack/table-core/dist/features/row-expanding/ for expansion state, row APIs, and model placement.