Implement client-side column and global filtering in TanStack Table v9.
npx skills add https://github.com/TanStack/table --skill filtering-tanstack
Please help me install this Agent Skill. Skill: filtering Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/filtering Command: npx skills add https://github.com/TanStack/table --skill filtering-tanstack
This Skill helps you implement reliable row filtering in TanStack Table v9 so users can narrow large datasets using column filters, a global search box, faceted filter UIs, and optional fuzzy matching.
columnFilteringFeature with filteredRowModel (via createFilteredRowModel(filterFns)) to filter by per-column criteria stored in state.columnFilters.globalFilteringFeature to filter across eligible columns using state.globalFilter and a configurable globalFilterFn (built-ins like includesString or custom ones).columnFacetingFeature with createFacetedRowModel() plus createFacetedUniqueValues() and createFacetedMinMaxValues() to power “autocomplete” and range-style filter controls that reflect counts/min-max after current filtering.FilterFn backed by @tanstack/match-sorter-utils (with module augmentation for FilterFns and optional FilterMeta) to support typo-tolerant matching.Set up filteredRowModel: createFilteredRowModel(filterFns) with columnFilteringFeature and globalFilteringFeature, then drive filtering through table.setColumnFilters([{ id, value }]) and table.setGlobalFilter(value) while choosing an appropriate globalFilterFn (such as includesString).
High-intent search queries and answers about installing and using this skill.
Column filtering in TanStack Table v9 uses the columnFilteringFeature with a filteredRowModel, driven by state.columnFilters to narrow rows by per-column criteria. You configure createFilteredRowModel(filterFns) and update filters via table.setColumnFilters([{ id, value }]).
Global filtering uses globalFilteringFeature to filter across eligible columns via state.globalFilter. You configure a globalFilterFn, such as includesString, and update the search value through table.setGlobalFilter(value) to narrow rows globally.
Yes, fuzzy filtering is supported by adding a custom FilterFn backed by @tanstack/match-sorter-utils. This requires module augmentation for FilterFns and optional FilterMeta to register the typo-tolerant matching function in the filterFns registry.
Faceted filtering uses columnFacetingFeature with createFacetedRowModel(), combined with createFacetedUniqueValues() and createFacetedMinMaxValues(). This provides counts and min-max metadata after current filtering to power autocomplete and range-style controls.
Yes, custom filter functions require safe module augmentation for FilterFns and optional FilterMeta. This integrates custom logic into the filterFns registry, ensuring type safety and correct execution within the filtered-row pipeline stages.
Column filters use state.columnFilters to apply specific criteria to individual columns, while global filter uses state.globalFilter to search across all eligible columns simultaneously. Both operate within the filtered-row pipeline but target different filtering scopes.
TanStackMigrate TanStack Table v8 code to the v9 core shape.
jiaiyanRender Vue data tables with sorting, filtering, pagination, and CSV export.
janpeterdConfigure headless TanStack Table logic for sorting, filtering, pagination, and grouping.
FaysilAlshareefImplement MediatR query handlers with paginated, filtered DTO results from repositories.