Skip to content

[pull] beta from TanStack:beta #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 2 commits into from
Jun 9, 2026
Merged

[pull] beta from TanStack:beta #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29bea70
docs: re-organize feature guides to be framework specific
KevinVandy Jun 9, 2026
ab4208b
docs: add more migration guides
KevinVandy Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 180 additions & 24 deletions docs/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
{
"label": "lit",
"children": [
{ "label": "Lit Table Adapter", "to": "framework/lit/lit-table" }
{ "label": "Lit Table Adapter", "to": "framework/lit/lit-table" },
{ "label": "Migrating to V9", "to": "framework/lit/guide/migrating" }
]
},
{
Expand All @@ -41,25 +42,29 @@
{
"label": "preact",
"children": [
{ "label": "Preact Table Adapter", "to": "framework/preact/preact-table" }
{ "label": "Preact Table Adapter", "to": "framework/preact/preact-table" },
{ "label": "Migrating to V9", "to": "framework/preact/guide/migrating" }
]
},
{
"label": "solid",
"children": [
{ "label": "Solid Table Adapter", "to": "framework/solid/solid-table" }
{ "label": "Solid Table Adapter", "to": "framework/solid/solid-table" },
{ "label": "Migrating to V9", "to": "framework/solid/guide/migrating" }
]
},
{
"label": "svelte",
"children": [
{ "label": "Svelte Table Adapter", "to": "framework/svelte/svelte-table" }
{ "label": "Svelte Table Adapter", "to": "framework/svelte/svelte-table" },
{ "label": "Migrating to V9", "to": "framework/svelte/guide/migrating" }
]
},
{
"label": "vue",
"children": [
{ "label": "Vue Table Adapter", "to": "framework/vue/vue-table" }
{ "label": "Vue Table Adapter", "to": "framework/vue/vue-table" },
{ "label": "Migrating to V9", "to": "framework/vue/guide/migrating" }
]
},
{
Expand Down Expand Up @@ -143,25 +148,176 @@
},
{
"label": "Feature Guides",
"children": [
{ "label": "Column Ordering", "to": "guide/column-ordering" },
{ "label": "Column Pinning", "to": "guide/column-pinning" },
{ "label": "Column Sizing", "to": "guide/column-sizing" },
{ "label": "Column Resizing", "to": "guide/column-resizing" },
{ "label": "Column Visibility", "to": "guide/column-visibility" },
{ "label": "Column Filtering", "to": "guide/column-filtering" },
{ "label": "Global Filtering", "to": "guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "guide/column-faceting" },
{ "label": "Global Faceting", "to": "guide/global-faceting" },
{ "label": "Grouping", "to": "guide/grouping" },
{ "label": "Expanding", "to": "guide/expanding" },
{ "label": "Pagination", "to": "guide/pagination" },
{ "label": "Row Pinning", "to": "guide/row-pinning" },
{ "label": "Row Selection", "to": "guide/row-selection" },
{ "label": "Sorting", "to": "guide/sorting" },
{ "label": "Virtualization", "to": "guide/virtualization" },
{ "label": "Custom Features", "to": "guide/custom-features" }
"children": [],
"frameworks": [
{
"label": "angular",
"children": [
{ "label": "Column Ordering", "to": "framework/angular/guide/column-ordering" },
{ "label": "Column Pinning", "to": "framework/angular/guide/column-pinning" },
{ "label": "Column Sizing", "to": "framework/angular/guide/column-sizing" },
{ "label": "Column Resizing", "to": "framework/angular/guide/column-resizing" },
{ "label": "Column Visibility", "to": "framework/angular/guide/column-visibility" },
{ "label": "Column Filtering", "to": "framework/angular/guide/column-filtering" },
{ "label": "Global Filtering", "to": "framework/angular/guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "framework/angular/guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "framework/angular/guide/column-faceting" },
{ "label": "Global Faceting", "to": "framework/angular/guide/global-faceting" },
{ "label": "Grouping", "to": "framework/angular/guide/grouping" },
{ "label": "Expanding", "to": "framework/angular/guide/expanding" },
{ "label": "Pagination", "to": "framework/angular/guide/pagination" },
{ "label": "Row Pinning", "to": "framework/angular/guide/row-pinning" },
{ "label": "Row Selection", "to": "framework/angular/guide/row-selection" },
{ "label": "Sorting", "to": "framework/angular/guide/sorting" },
{ "label": "Virtualization", "to": "framework/angular/guide/virtualization" },
{ "label": "Custom Features", "to": "framework/angular/guide/custom-features" }
]
},
{
"label": "lit",
"children": [
{ "label": "Column Ordering", "to": "framework/lit/guide/column-ordering" },
{ "label": "Column Pinning", "to": "framework/lit/guide/column-pinning" },
{ "label": "Column Sizing", "to": "framework/lit/guide/column-sizing" },
{ "label": "Column Resizing", "to": "framework/lit/guide/column-resizing" },
{ "label": "Column Visibility", "to": "framework/lit/guide/column-visibility" },
{ "label": "Column Filtering", "to": "framework/lit/guide/column-filtering" },
{ "label": "Global Filtering", "to": "framework/lit/guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "framework/lit/guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "framework/lit/guide/column-faceting" },
{ "label": "Global Faceting", "to": "framework/lit/guide/global-faceting" },
{ "label": "Grouping", "to": "framework/lit/guide/grouping" },
{ "label": "Expanding", "to": "framework/lit/guide/expanding" },
{ "label": "Pagination", "to": "framework/lit/guide/pagination" },
{ "label": "Row Pinning", "to": "framework/lit/guide/row-pinning" },
{ "label": "Row Selection", "to": "framework/lit/guide/row-selection" },
{ "label": "Sorting", "to": "framework/lit/guide/sorting" },
{ "label": "Virtualization", "to": "framework/lit/guide/virtualization" },
{ "label": "Custom Features", "to": "framework/lit/guide/custom-features" }
]
},
{
"label": "react",
"children": [
{ "label": "Column Ordering", "to": "framework/react/guide/column-ordering" },
{ "label": "Column Pinning", "to": "framework/react/guide/column-pinning" },
{ "label": "Column Sizing", "to": "framework/react/guide/column-sizing" },
{ "label": "Column Resizing", "to": "framework/react/guide/column-resizing" },
{ "label": "Column Visibility", "to": "framework/react/guide/column-visibility" },
{ "label": "Column Filtering", "to": "framework/react/guide/column-filtering" },
{ "label": "Global Filtering", "to": "framework/react/guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "framework/react/guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "framework/react/guide/column-faceting" },
{ "label": "Global Faceting", "to": "framework/react/guide/global-faceting" },
{ "label": "Grouping", "to": "framework/react/guide/grouping" },
{ "label": "Expanding", "to": "framework/react/guide/expanding" },
{ "label": "Pagination", "to": "framework/react/guide/pagination" },
{ "label": "Row Pinning", "to": "framework/react/guide/row-pinning" },
{ "label": "Row Selection", "to": "framework/react/guide/row-selection" },
{ "label": "Sorting", "to": "framework/react/guide/sorting" },
{ "label": "Virtualization", "to": "framework/react/guide/virtualization" },
{ "label": "Custom Features", "to": "framework/react/guide/custom-features" }
]
},
{
"label": "preact",
"children": [
{ "label": "Column Ordering", "to": "framework/preact/guide/column-ordering" },
{ "label": "Column Pinning", "to": "framework/preact/guide/column-pinning" },
{ "label": "Column Sizing", "to": "framework/preact/guide/column-sizing" },
{ "label": "Column Resizing", "to": "framework/preact/guide/column-resizing" },
{ "label": "Column Visibility", "to": "framework/preact/guide/column-visibility" },
{ "label": "Column Filtering", "to": "framework/preact/guide/column-filtering" },
{ "label": "Global Filtering", "to": "framework/preact/guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "framework/preact/guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "framework/preact/guide/column-faceting" },
{ "label": "Global Faceting", "to": "framework/preact/guide/global-faceting" },
{ "label": "Grouping", "to": "framework/preact/guide/grouping" },
{ "label": "Expanding", "to": "framework/preact/guide/expanding" },
{ "label": "Pagination", "to": "framework/preact/guide/pagination" },
{ "label": "Row Pinning", "to": "framework/preact/guide/row-pinning" },
{ "label": "Row Selection", "to": "framework/preact/guide/row-selection" },
{ "label": "Sorting", "to": "framework/preact/guide/sorting" },
{ "label": "Virtualization", "to": "framework/preact/guide/virtualization" },
{ "label": "Custom Features", "to": "framework/preact/guide/custom-features" }
]
},
{
"label": "solid",
"children": [
{ "label": "Column Ordering", "to": "framework/solid/guide/column-ordering" },
{ "label": "Column Pinning", "to": "framework/solid/guide/column-pinning" },
{ "label": "Column Sizing", "to": "framework/solid/guide/column-sizing" },
{ "label": "Column Resizing", "to": "framework/solid/guide/column-resizing" },
{ "label": "Column Visibility", "to": "framework/solid/guide/column-visibility" },
{ "label": "Column Filtering", "to": "framework/solid/guide/column-filtering" },
{ "label": "Global Filtering", "to": "framework/solid/guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "framework/solid/guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "framework/solid/guide/column-faceting" },
{ "label": "Global Faceting", "to": "framework/solid/guide/global-faceting" },
{ "label": "Grouping", "to": "framework/solid/guide/grouping" },
{ "label": "Expanding", "to": "framework/solid/guide/expanding" },
{ "label": "Pagination", "to": "framework/solid/guide/pagination" },
{ "label": "Row Pinning", "to": "framework/solid/guide/row-pinning" },
{ "label": "Row Selection", "to": "framework/solid/guide/row-selection" },
{ "label": "Sorting", "to": "framework/solid/guide/sorting" },
{ "label": "Virtualization", "to": "framework/solid/guide/virtualization" },
{ "label": "Custom Features", "to": "framework/solid/guide/custom-features" }
]
},
{
"label": "svelte",
"children": [
{ "label": "Column Ordering", "to": "framework/svelte/guide/column-ordering" },
{ "label": "Column Pinning", "to": "framework/svelte/guide/column-pinning" },
{ "label": "Column Sizing", "to": "framework/svelte/guide/column-sizing" },
{ "label": "Column Resizing", "to": "framework/svelte/guide/column-resizing" },
{ "label": "Column Visibility", "to": "framework/svelte/guide/column-visibility" },
{ "label": "Column Filtering", "to": "framework/svelte/guide/column-filtering" },
{ "label": "Global Filtering", "to": "framework/svelte/guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "framework/svelte/guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "framework/svelte/guide/column-faceting" },
{ "label": "Global Faceting", "to": "framework/svelte/guide/global-faceting" },
{ "label": "Grouping", "to": "framework/svelte/guide/grouping" },
{ "label": "Expanding", "to": "framework/svelte/guide/expanding" },
{ "label": "Pagination", "to": "framework/svelte/guide/pagination" },
{ "label": "Row Pinning", "to": "framework/svelte/guide/row-pinning" },
{ "label": "Row Selection", "to": "framework/svelte/guide/row-selection" },
{ "label": "Sorting", "to": "framework/svelte/guide/sorting" },
{ "label": "Virtualization", "to": "framework/svelte/guide/virtualization" },
{ "label": "Custom Features", "to": "framework/svelte/guide/custom-features" }
]
},
{
"label": "vue",
"children": [
{ "label": "Column Ordering", "to": "framework/vue/guide/column-ordering" },
{ "label": "Column Pinning", "to": "framework/vue/guide/column-pinning" },
{ "label": "Column Sizing", "to": "framework/vue/guide/column-sizing" },
{ "label": "Column Resizing", "to": "framework/vue/guide/column-resizing" },
{ "label": "Column Visibility", "to": "framework/vue/guide/column-visibility" },
{ "label": "Column Filtering", "to": "framework/vue/guide/column-filtering" },
{ "label": "Global Filtering", "to": "framework/vue/guide/global-filtering" },
{ "label": "Fuzzy Filtering", "to": "framework/vue/guide/fuzzy-filtering" },
{ "label": "Column Faceting", "to": "framework/vue/guide/column-faceting" },
{ "label": "Global Faceting", "to": "framework/vue/guide/global-faceting" },
{ "label": "Grouping", "to": "framework/vue/guide/grouping" },
{ "label": "Expanding", "to": "framework/vue/guide/expanding" },
{ "label": "Pagination", "to": "framework/vue/guide/pagination" },
{ "label": "Row Pinning", "to": "framework/vue/guide/row-pinning" },
{ "label": "Row Selection", "to": "framework/vue/guide/row-selection" },
{ "label": "Sorting", "to": "framework/vue/guide/sorting" },
{ "label": "Virtualization", "to": "framework/vue/guide/virtualization" },
{ "label": "Custom Features", "to": "framework/vue/guide/custom-features" }
]
},
{
"label": "vanilla",
"children": [
{ "label": "Pagination", "to": "framework/vanilla/guide/pagination" },
{ "label": "Sorting", "to": "framework/vanilla/guide/sorting" }
]
}
]
},
{
Expand Down
116 changes: 116 additions & 0 deletions docs/framework/angular/guide/column-faceting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
---
title: Column Faceting (Angular) Guide
---

## Examples

Want to skip to the implementation? Check out these Angular examples:

- [Faceted Filters](../examples/filters-faceted)
### Angular Setup

```ts
import { signal } from '@angular/core'
import { injectTable, tableFeatures, columnFacetingFeature, createFacetedRowModel, createFacetedUniqueValues, createFacetedMinMaxValues } from '@tanstack/angular-table'

const features = tableFeatures({ columnFacetingFeature })

export class App {
readonly data = signal(defaultData)

readonly table = injectTable(() => ({
features,
rowModels: {
facetedRowModel: createFacetedRowModel(),
facetedUniqueValues: createFacetedUniqueValues(),
facetedMinMaxValues: createFacetedMinMaxValues(),
},
columns,
data: this.data(),
}))
}
```

## Column Faceting (Angular) Guide

Column Faceting is a feature that allows you to generate lists of values for a given column from that column's data. For example, a list of unique values in a column can be generated from all rows in that column to be used as search suggestions in an autocomplete filter component. Or, a tuple of minimum and maximum values can be generated from a column of numbers to be used as a range for a range slider filter component.

### Column Faceting Row Models

In order to use any of the column faceting features, add the `columnFacetingFeature` to your features and the appropriate faceted row models to `rowModels`.

```ts
import {
injectTable,
tableFeatures,
columnFacetingFeature,
createFacetedRowModel,
createFacetedMinMaxValues,
createFacetedUniqueValues,
} from '@tanstack/angular-table'

const features = tableFeatures({ columnFacetingFeature })

readonly table = injectTable(() => ({
features,
rowModels: {
facetedRowModel: createFacetedRowModel(), // required for faceting (other faceted row models depend on this)
facetedMinMaxValues: createFacetedMinMaxValues(), // if you need min/max values
facetedUniqueValues: createFacetedUniqueValues(), // if you need a list of unique values
},
columns,
data,
})
```

First, you must include the `facetedRowModel`. This row model will generate a list of values for a given column. If you need a list of unique values, include the `facetedUniqueValues` row model. If you need a tuple of minimum and maximum values, include the `facetedMinMaxValues` row model.

### Use Faceted Row Models

Once you have included the appropriate row models in your table options, you will be able to use the faceting column instance APIs to access the lists of values generated by the faceted row models.

```ts
// list of unique values for autocomplete filter
const autoCompleteSuggestions =
Array.from(column.getFacetedUniqueValues().keys())
.sort()
.slice(0, 5000);
```

```ts
// tuple of min and max values for range filter
const [min, max] = column.getFacetedMinMaxValues() ?? [0, 1];
```

### Custom (Server-Side) Faceting

If instead of using the built-in client-side faceting features, you can implement your own faceting logic on the server-side and pass the faceted values to the client-side. You can use the `getFacetedUniqueValues` and `getFacetedMinMaxValues` table options to resolve the faceted values from the server-side.

```ts
const facetingQuery = useQuery(
//...
)

readonly table = injectTable(() => ({
features,
rowModels: {
facetedRowModel: createFacetedRowModel(),
facetedUniqueValues: createFacetedUniqueValues(),
facetedMinMaxValues: createFacetedMinMaxValues(),
},
columns,
data,
getFacetedUniqueValues: (table, columnId) => {
const uniqueValueMap = new Map<string, number>()
//...
return uniqueValueMap
},
getFacetedMinMaxValues: (table, columnId) => {
//...
return [min, max]
},
//...
})
```

Alternatively, you don't have to put any of your faceting logic through the TanStack Table APIs at all. Just fetch your lists and pass them to your filter components directly.
Loading
Loading