メニュー
Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TanStack/table --skill column-facetingコマンドは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-faceting |
| description | Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness. |
| metadata | {"type":"sub-skill","library":"@tanstack/table-core","library_version":"9.2.4"} |
| requires | ["core","table-features","column-filtering"] |
| sources | ["TanStack/table:docs/framework/react/guide/column-faceting.md","TanStack/table:packages/table-core/src/features/column-faceting","TanStack/table:examples/react/filters-faceted"] |
This skill builds on core, table-features, and column-filtering. Faceting derives filter choices; it does not render controls.
import {
columnFacetingFeature,
columnFilteringFeature,
createFacetedMinMaxValues,
createFacetedRowModel,
createFacetedUniqueValues,
createFilteredRowModel,
filterFn_includesString,
filterFn_inNumberRange,
tableFeatures,
} from '@tanstack/table-core'
export const features = tableFeatures({
columnFilteringFeature,
filteredRowModel: createFilteredRowModel(),
filterFns: {
includesString: filterFn_includesString,
inNumberRange: filterFn_inNumberRange,
},
columnFacetingFeature,
facetedRowModel: createFacetedRowModel(),
facetedUniqueValues: createFacetedUniqueValues(),
facetedMinMaxValues: createFacetedMinMaxValues(),
})
const counts = table.getColumn('status')?.getFacetedUniqueValues() ?? new Map()
const range = table.getColumn('age')?.getFacetedMinMaxValues()
Use unique values for discrete controls and min/max only for numeric ranges.
The filtered model makes facets respond to the table's other active filters.
Register individually imported built-ins under their conventional keys so
columns can reference them by string name; a column may instead receive a
filter function directly without registering it. The full filterFns registry
object still works but bundles every built-in.
Wrong: tableFeatures({ columnFilteringFeature, columnFacetingFeature })
Correct: tableFeatures({ columnFilteringFeature, columnFacetingFeature, facetedRowModel: createFacetedRowModel(), facetedUniqueValues: createFacetedUniqueValues() })
Each faceting getter needs its matching factory slot.
Source: packages/table-core/src/features/column-faceting/columnFacetingFeature.ts
Wrong: column.getFacetedUniqueValues().get(activeValue) === 0
Correct: column.getFacetedUniqueValues().get(activeValue) ?? 0
A column facet intentionally excludes that column's own filter while applying other filters.
Source: docs/framework/react/guide/column-faceting.md
Wrong: const globalCounts = column.getFacetedUniqueValues()
Correct: const globalCounts = await fetchFacetCounts(activeFilters)
With server pagination, client faceting sees only loaded data.
Source: docs/framework/react/guide/column-faceting.md#custom-server-side-faceting
Inspect node_modules/@tanstack/table-core/dist/features/column-faceting/ for exact getters and factory return types.