skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

column-faceting

Build faceted filter UIs with TanStack Table faceted row models and unique value getters.

28.4k|3.6k|Updated Oct 20, 2016
Search Tags:#typeScript#tanstack table#faceted search#datagrid#column filtering#faceted row model#filter counts
One-click install
npx skills add https://github.com/TanStack/table --skill column-faceting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: column-faceting
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/column-faceting
Command: npx skills add https://github.com/TanStack/table --skill column-faceting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Building faceted filter interfaces (checkbox lists with counts, numeric range sliders) requires deriving filter options from table data while correctly handling how each facet interacts with other active filters, which is error-prone to implement manually.

Core Features & Use Cases

  • Faceted Unique Values: Use getFacetedUniqueValues to get a Map of value counts for discrete filter controls like status or category pickers.
  • Numeric Range Facets: Use getFacetedMinMaxValues to drive min/max range sliders for numeric columns.
  • Own-Filter Exclusion: Each column's facet excludes that column's own filter while applying all other active filters, matching standard faceted search behavior.
  • Use Case: Build a product listing sidebar where category checkboxes show live counts that update as the user applies price and brand filters.

Quick Start

Set up columnFacetingFeature with facetedRowModel, facetedUniqueValues, and facetedMinMaxValues in tableFeatures, then read facet counts via column.getFacetedUniqueValues().

Frequently Asked Questions about column-faceting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build faceted filters with TanStack Table?▼

Register columnFacetingFeature with facetedRowModel, facetedUniqueValues, and facetedMinMaxValues factories in tableFeatures. Then call column.getFacetedUniqueValues() for discrete value counts or column.getFacetedMinMaxValues() for numeric ranges.

How to get filter counts for each column value in TanStack Table?▼

Call table.getColumn('status').getFacetedUniqueValues(), which returns a Map of values to counts. The counts reflect all other active filters while excluding that column's own filter.

Why does getFacetedUniqueValues return undefined in TanStack Table?▼

Each faceting getter requires its matching factory slot registered in tableFeatures. Registering columnFacetingFeature alone is not enough; you must also provide facetedRowModel, facetedUniqueValues, or facetedMinMaxValues factories.

Does TanStack Table faceting work with server-side pagination?▼

Client-side faceting only sees the currently loaded page of data, so counts will be incomplete with server pagination. For global facet counts, fetch them from your server using the active filters instead.

Why does a facet exclude its own column filter?▼

This is intentional faceted search behavior: a column's facet applies all other filters but ignores its own, so users can still see and select alternative values. Use the nullish coalescing operator when reading counts for the active value.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

filtering

Implement client-side column and global filtering in TanStack Table v9.

Official
Intermediate
tomtoto757tomtoto757
14

faceted-navigation

Manage URL-driven multi-select filter state for product listing pages.

Community
Advanced
novadbnovadb

nova-find-branches

Search and filter NovaDB branch records with pagination and attribute filters.

Official
Intermediate
kineticdatakineticdata

pagination

Implement server-side and client-side API pagination strategies with pageToken and keyset filters.

Official
Intermediate