Skip to content

Commit 29bea70

Browse files
KevinVandyKevinVandy
committed
docs: re-organize feature guides to be framework specific
1 parent be6a932 commit 29bea70

140 files changed

Lines changed: 26613 additions & 852 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/config.json‎

Lines changed: 170 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -143,25 +143,176 @@
143143
},
144144
{
145145
"label": "Feature Guides",
146-
"children": [
147-
{ "label": "Column Ordering", "to": "guide/column-ordering" },
148-
{ "label": "Column Pinning", "to": "guide/column-pinning" },
149-
{ "label": "Column Sizing", "to": "guide/column-sizing" },
150-
{ "label": "Column Resizing", "to": "guide/column-resizing" },
151-
{ "label": "Column Visibility", "to": "guide/column-visibility" },
152-
{ "label": "Column Filtering", "to": "guide/column-filtering" },
153-
{ "label": "Global Filtering", "to": "guide/global-filtering" },
154-
{ "label": "Fuzzy Filtering", "to": "guide/fuzzy-filtering" },
155-
{ "label": "Column Faceting", "to": "guide/column-faceting" },
156-
{ "label": "Global Faceting", "to": "guide/global-faceting" },
157-
{ "label": "Grouping", "to": "guide/grouping" },
158-
{ "label": "Expanding", "to": "guide/expanding" },
159-
{ "label": "Pagination", "to": "guide/pagination" },
160-
{ "label": "Row Pinning", "to": "guide/row-pinning" },
161-
{ "label": "Row Selection", "to": "guide/row-selection" },
162-
{ "label": "Sorting", "to": "guide/sorting" },
163-
{ "label": "Virtualization", "to": "guide/virtualization" },
164-
{ "label": "Custom Features", "to": "guide/custom-features" }
146+
"children": [],
147+
"frameworks": [
148+
{
149+
"label": "angular",
150+
"children": [
151+
{ "label": "Column Ordering", "to": "framework/angular/guide/column-ordering" },
152+
{ "label": "Column Pinning", "to": "framework/angular/guide/column-pinning" },
153+
{ "label": "Column Sizing", "to": "framework/angular/guide/column-sizing" },
154+
{ "label": "Column Resizing", "to": "framework/angular/guide/column-resizing" },
155+
{ "label": "Column Visibility", "to": "framework/angular/guide/column-visibility" },
156+
{ "label": "Column Filtering", "to": "framework/angular/guide/column-filtering" },
157+
{ "label": "Global Filtering", "to": "framework/angular/guide/global-filtering" },
158+
{ "label": "Fuzzy Filtering", "to": "framework/angular/guide/fuzzy-filtering" },
159+
{ "label": "Column Faceting", "to": "framework/angular/guide/column-faceting" },
160+
{ "label": "Global Faceting", "to": "framework/angular/guide/global-faceting" },
161+
{ "label": "Grouping", "to": "framework/angular/guide/grouping" },
162+
{ "label": "Expanding", "to": "framework/angular/guide/expanding" },
163+
{ "label": "Pagination", "to": "framework/angular/guide/pagination" },
164+
{ "label": "Row Pinning", "to": "framework/angular/guide/row-pinning" },
165+
{ "label": "Row Selection", "to": "framework/angular/guide/row-selection" },
166+
{ "label": "Sorting", "to": "framework/angular/guide/sorting" },
167+
{ "label": "Virtualization", "to": "framework/angular/guide/virtualization" },
168+
{ "label": "Custom Features", "to": "framework/angular/guide/custom-features" }
169+
]
170+
},
171+
{
172+
"label": "lit",
173+
"children": [
174+
{ "label": "Column Ordering", "to": "framework/lit/guide/column-ordering" },
175+
{ "label": "Column Pinning", "to": "framework/lit/guide/column-pinning" },
176+
{ "label": "Column Sizing", "to": "framework/lit/guide/column-sizing" },
177+
{ "label": "Column Resizing", "to": "framework/lit/guide/column-resizing" },
178+
{ "label": "Column Visibility", "to": "framework/lit/guide/column-visibility" },
179+
{ "label": "Column Filtering", "to": "framework/lit/guide/column-filtering" },
180+
{ "label": "Global Filtering", "to": "framework/lit/guide/global-filtering" },
181+
{ "label": "Fuzzy Filtering", "to": "framework/lit/guide/fuzzy-filtering" },
182+
{ "label": "Column Faceting", "to": "framework/lit/guide/column-faceting" },
183+
{ "label": "Global Faceting", "to": "framework/lit/guide/global-faceting" },
184+
{ "label": "Grouping", "to": "framework/lit/guide/grouping" },
185+
{ "label": "Expanding", "to": "framework/lit/guide/expanding" },
186+
{ "label": "Pagination", "to": "framework/lit/guide/pagination" },
187+
{ "label": "Row Pinning", "to": "framework/lit/guide/row-pinning" },
188+
{ "label": "Row Selection", "to": "framework/lit/guide/row-selection" },
189+
{ "label": "Sorting", "to": "framework/lit/guide/sorting" },
190+
{ "label": "Virtualization", "to": "framework/lit/guide/virtualization" },
191+
{ "label": "Custom Features", "to": "framework/lit/guide/custom-features" }
192+
]
193+
},
194+
{
195+
"label": "react",
196+
"children": [
197+
{ "label": "Column Ordering", "to": "framework/react/guide/column-ordering" },
198+
{ "label": "Column Pinning", "to": "framework/react/guide/column-pinning" },
199+
{ "label": "Column Sizing", "to": "framework/react/guide/column-sizing" },
200+
{ "label": "Column Resizing", "to": "framework/react/guide/column-resizing" },
201+
{ "label": "Column Visibility", "to": "framework/react/guide/column-visibility" },
202+
{ "label": "Column Filtering", "to": "framework/react/guide/column-filtering" },
203+
{ "label": "Global Filtering", "to": "framework/react/guide/global-filtering" },
204+
{ "label": "Fuzzy Filtering", "to": "framework/react/guide/fuzzy-filtering" },
205+
{ "label": "Column Faceting", "to": "framework/react/guide/column-faceting" },
206+
{ "label": "Global Faceting", "to": "framework/react/guide/global-faceting" },
207+
{ "label": "Grouping", "to": "framework/react/guide/grouping" },
208+
{ "label": "Expanding", "to": "framework/react/guide/expanding" },
209+
{ "label": "Pagination", "to": "framework/react/guide/pagination" },
210+
{ "label": "Row Pinning", "to": "framework/react/guide/row-pinning" },
211+
{ "label": "Row Selection", "to": "framework/react/guide/row-selection" },
212+
{ "label": "Sorting", "to": "framework/react/guide/sorting" },
213+
{ "label": "Virtualization", "to": "framework/react/guide/virtualization" },
214+
{ "label": "Custom Features", "to": "framework/react/guide/custom-features" }
215+
]
216+
},
217+
{
218+
"label": "preact",
219+
"children": [
220+
{ "label": "Column Ordering", "to": "framework/preact/guide/column-ordering" },
221+
{ "label": "Column Pinning", "to": "framework/preact/guide/column-pinning" },
222+
{ "label": "Column Sizing", "to": "framework/preact/guide/column-sizing" },
223+
{ "label": "Column Resizing", "to": "framework/preact/guide/column-resizing" },
224+
{ "label": "Column Visibility", "to": "framework/preact/guide/column-visibility" },
225+
{ "label": "Column Filtering", "to": "framework/preact/guide/column-filtering" },
226+
{ "label": "Global Filtering", "to": "framework/preact/guide/global-filtering" },
227+
{ "label": "Fuzzy Filtering", "to": "framework/preact/guide/fuzzy-filtering" },
228+
{ "label": "Column Faceting", "to": "framework/preact/guide/column-faceting" },
229+
{ "label": "Global Faceting", "to": "framework/preact/guide/global-faceting" },
230+
{ "label": "Grouping", "to": "framework/preact/guide/grouping" },
231+
{ "label": "Expanding", "to": "framework/preact/guide/expanding" },
232+
{ "label": "Pagination", "to": "framework/preact/guide/pagination" },
233+
{ "label": "Row Pinning", "to": "framework/preact/guide/row-pinning" },
234+
{ "label": "Row Selection", "to": "framework/preact/guide/row-selection" },
235+
{ "label": "Sorting", "to": "framework/preact/guide/sorting" },
236+
{ "label": "Virtualization", "to": "framework/preact/guide/virtualization" },
237+
{ "label": "Custom Features", "to": "framework/preact/guide/custom-features" }
238+
]
239+
},
240+
{
241+
"label": "solid",
242+
"children": [
243+
{ "label": "Column Ordering", "to": "framework/solid/guide/column-ordering" },
244+
{ "label": "Column Pinning", "to": "framework/solid/guide/column-pinning" },
245+
{ "label": "Column Sizing", "to": "framework/solid/guide/column-sizing" },
246+
{ "label": "Column Resizing", "to": "framework/solid/guide/column-resizing" },
247+
{ "label": "Column Visibility", "to": "framework/solid/guide/column-visibility" },
248+
{ "label": "Column Filtering", "to": "framework/solid/guide/column-filtering" },
249+
{ "label": "Global Filtering", "to": "framework/solid/guide/global-filtering" },
250+
{ "label": "Fuzzy Filtering", "to": "framework/solid/guide/fuzzy-filtering" },
251+
{ "label": "Column Faceting", "to": "framework/solid/guide/column-faceting" },
252+
{ "label": "Global Faceting", "to": "framework/solid/guide/global-faceting" },
253+
{ "label": "Grouping", "to": "framework/solid/guide/grouping" },
254+
{ "label": "Expanding", "to": "framework/solid/guide/expanding" },
255+
{ "label": "Pagination", "to": "framework/solid/guide/pagination" },
256+
{ "label": "Row Pinning", "to": "framework/solid/guide/row-pinning" },
257+
{ "label": "Row Selection", "to": "framework/solid/guide/row-selection" },
258+
{ "label": "Sorting", "to": "framework/solid/guide/sorting" },
259+
{ "label": "Virtualization", "to": "framework/solid/guide/virtualization" },
260+
{ "label": "Custom Features", "to": "framework/solid/guide/custom-features" }
261+
]
262+
},
263+
{
264+
"label": "svelte",
265+
"children": [
266+
{ "label": "Column Ordering", "to": "framework/svelte/guide/column-ordering" },
267+
{ "label": "Column Pinning", "to": "framework/svelte/guide/column-pinning" },
268+
{ "label": "Column Sizing", "to": "framework/svelte/guide/column-sizing" },
269+
{ "label": "Column Resizing", "to": "framework/svelte/guide/column-resizing" },
270+
{ "label": "Column Visibility", "to": "framework/svelte/guide/column-visibility" },
271+
{ "label": "Column Filtering", "to": "framework/svelte/guide/column-filtering" },
272+
{ "label": "Global Filtering", "to": "framework/svelte/guide/global-filtering" },
273+
{ "label": "Fuzzy Filtering", "to": "framework/svelte/guide/fuzzy-filtering" },
274+
{ "label": "Column Faceting", "to": "framework/svelte/guide/column-faceting" },
275+
{ "label": "Global Faceting", "to": "framework/svelte/guide/global-faceting" },
276+
{ "label": "Grouping", "to": "framework/svelte/guide/grouping" },
277+
{ "label": "Expanding", "to": "framework/svelte/guide/expanding" },
278+
{ "label": "Pagination", "to": "framework/svelte/guide/pagination" },
279+
{ "label": "Row Pinning", "to": "framework/svelte/guide/row-pinning" },
280+
{ "label": "Row Selection", "to": "framework/svelte/guide/row-selection" },
281+
{ "label": "Sorting", "to": "framework/svelte/guide/sorting" },
282+
{ "label": "Virtualization", "to": "framework/svelte/guide/virtualization" },
283+
{ "label": "Custom Features", "to": "framework/svelte/guide/custom-features" }
284+
]
285+
},
286+
{
287+
"label": "vue",
288+
"children": [
289+
{ "label": "Column Ordering", "to": "framework/vue/guide/column-ordering" },
290+
{ "label": "Column Pinning", "to": "framework/vue/guide/column-pinning" },
291+
{ "label": "Column Sizing", "to": "framework/vue/guide/column-sizing" },
292+
{ "label": "Column Resizing", "to": "framework/vue/guide/column-resizing" },
293+
{ "label": "Column Visibility", "to": "framework/vue/guide/column-visibility" },
294+
{ "label": "Column Filtering", "to": "framework/vue/guide/column-filtering" },
295+
{ "label": "Global Filtering", "to": "framework/vue/guide/global-filtering" },
296+
{ "label": "Fuzzy Filtering", "to": "framework/vue/guide/fuzzy-filtering" },
297+
{ "label": "Column Faceting", "to": "framework/vue/guide/column-faceting" },
298+
{ "label": "Global Faceting", "to": "framework/vue/guide/global-faceting" },
299+
{ "label": "Grouping", "to": "framework/vue/guide/grouping" },
300+
{ "label": "Expanding", "to": "framework/vue/guide/expanding" },
301+
{ "label": "Pagination", "to": "framework/vue/guide/pagination" },
302+
{ "label": "Row Pinning", "to": "framework/vue/guide/row-pinning" },
303+
{ "label": "Row Selection", "to": "framework/vue/guide/row-selection" },
304+
{ "label": "Sorting", "to": "framework/vue/guide/sorting" },
305+
{ "label": "Virtualization", "to": "framework/vue/guide/virtualization" },
306+
{ "label": "Custom Features", "to": "framework/vue/guide/custom-features" }
307+
]
308+
},
309+
{
310+
"label": "vanilla",
311+
"children": [
312+
{ "label": "Pagination", "to": "framework/vanilla/guide/pagination" },
313+
{ "label": "Sorting", "to": "framework/vanilla/guide/sorting" }
314+
]
315+
}
165316
]
166317
},
167318
{

‎docs/framework/angular/guide/column-faceting.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: Column Faceting (Angular) Guide
3+
---
4+
5+
## Examples
6+
7+
Want to skip to the implementation? Check out these Angular examples:
8+
9+
- [Faceted Filters](../examples/filters-faceted)
10+
### Angular Setup
11+
12+
```ts
13+
import { signal } from '@angular/core'
14+
import { injectTable, tableFeatures, columnFacetingFeature, createFacetedRowModel, createFacetedUniqueValues, createFacetedMinMaxValues } from '@tanstack/angular-table'
15+
16+
const features = tableFeatures({ columnFacetingFeature })
17+
18+
export class App {
19+
readonly data = signal(defaultData)
20+
21+
readonly table = injectTable(() => ({
22+
features,
23+
rowModels: {
24+
facetedRowModel: createFacetedRowModel(),
25+
facetedUniqueValues: createFacetedUniqueValues(),
26+
facetedMinMaxValues: createFacetedMinMaxValues(),
27+
},
28+
columns,
29+
data: this.data(),
30+
}))
31+
}
32+
```
33+
34+
## Column Faceting (Angular) Guide
35+
36+
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.
37+
38+
### Column Faceting Row Models
39+
40+
In order to use any of the column faceting features, add the `columnFacetingFeature` to your features and the appropriate faceted row models to `rowModels`.
41+
42+
```ts
43+
import {
44+
injectTable,
45+
tableFeatures,
46+
columnFacetingFeature,
47+
createFacetedRowModel,
48+
createFacetedMinMaxValues,
49+
createFacetedUniqueValues,
50+
} from '@tanstack/angular-table'
51+
52+
const features = tableFeatures({ columnFacetingFeature })
53+
54+
readonly table = injectTable(() => ({
55+
features,
56+
rowModels: {
57+
facetedRowModel: createFacetedRowModel(), // required for faceting (other faceted row models depend on this)
58+
facetedMinMaxValues: createFacetedMinMaxValues(), // if you need min/max values
59+
facetedUniqueValues: createFacetedUniqueValues(), // if you need a list of unique values
60+
},
61+
columns,
62+
data,
63+
})
64+
```
65+
66+
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.
67+
68+
### Use Faceted Row Models
69+
70+
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.
71+
72+
```ts
73+
// list of unique values for autocomplete filter
74+
const autoCompleteSuggestions =
75+
Array.from(column.getFacetedUniqueValues().keys())
76+
.sort()
77+
.slice(0, 5000);
78+
```
79+
80+
```ts
81+
// tuple of min and max values for range filter
82+
const [min, max] = column.getFacetedMinMaxValues() ?? [0, 1];
83+
```
84+
85+
### Custom (Server-Side) Faceting
86+
87+
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.
88+
89+
```ts
90+
const facetingQuery = useQuery(
91+
//...
92+
)
93+
94+
readonly table = injectTable(() => ({
95+
features,
96+
rowModels: {
97+
facetedRowModel: createFacetedRowModel(),
98+
facetedUniqueValues: createFacetedUniqueValues(),
99+
facetedMinMaxValues: createFacetedMinMaxValues(),
100+
},
101+
columns,
102+
data,
103+
getFacetedUniqueValues: (table, columnId) => {
104+
const uniqueValueMap = new Map<string, number>()
105+
//...
106+
return uniqueValueMap
107+
},
108+
getFacetedMinMaxValues: (table, columnId) => {
109+
//...
110+
return [min, max]
111+
},
112+
//...
113+
})
114+
```
115+
116+
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.

0 commit comments

Comments
 (0)