feat(angular-table): improve implementation and cleanup code

docs/api/core/cell.md

@@ -2,7 +2,7 @@
 title: Cell APIs
 ---
 
-These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../guide/features).
+These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../../guide/features).
 
 ## Cell API
 

docs/api/core/column.md

@@ -2,7 +2,7 @@
 title: Column APIs
 ---
 
-These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../guide/features).
+These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../../guide/features).
 
 ## Column API
 

docs/api/core/header-group.md

@@ -2,7 +2,7 @@
 title: HeaderGroup APIs
 ---
 
-These are **core** options and API properties for all header groups. More options and API properties may be available for other [table features](../../guide/features).
+These are **core** options and API properties for all header groups. More options and API properties may be available for other [table features](../../../guide/features).
 
 ## Header Group API
 
@@ -30,4 +30,4 @@ The depth of the header group, zero-indexed based.
 type headers = Header<TData>[]
 ```
 
-An array of [Header](./header) objects that belong to this header group
+An array of [Header](../../header) objects that belong to this header group

docs/api/core/header.md

@@ -2,7 +2,7 @@
 title: Header APIs
 ---
 
-These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../guide/features).
+These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../../guide/features).
 
 ## Header API
 
@@ -38,15 +38,15 @@ The depth of the header, zero-indexed based.
 column: Column<TData>
 ```
 
-The header's associated [Column](./column) object
+The header's associated [Column](../column) object
 
 ### `headerGroup`
 
 ```tsx
 headerGroup: HeaderGroup<TData>
 ```
 
-The header's associated [HeaderGroup](./header-group) object
+The header's associated [HeaderGroup](../header-group) object
 
 ### `subHeaders`
 

docs/api/core/row.md

@@ -2,7 +2,7 @@
 title: Row APIs
 ---
 
-These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../guide/features).
+These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../../guide/features).
 
 ## Row API
 
@@ -120,4 +120,4 @@ An array of the original subRows as returned by the `options.getSubRows` option.
 type getAllCells = () => Cell<TData>[]
 ```
 
-Returns all of the [Cells](api/core/cell) for the row.
+Returns all of the [Cells](../cell) for the row.

docs/api/core/table.md

@@ -14,7 +14,7 @@ These functions are used to create a table. Which one you use depends on which f
 
 ## Options
 
-These are **core** options and API properties for the table. More options and API properties are available for other [table features](../../guide/features).
+These are **core** options and API properties for the table. More options and API properties are available for other [table features](../../../guide/features).
 
 ### `data`
 
@@ -34,7 +34,7 @@ When the `data` option changes reference (compared via `Object.is`), the table w
 type columns = ColumnDef<TData>[]
 ```
 
-The array of column defs to use for the table. See the [Column Defs Guide](../../docs/guide/column-defs) for more information on creating column definitions.
+The array of column defs to use for the table. See the [Column Defs Guide](../../../docs/guide/column-defs) for more information on creating column definitions.
 
 ### `defaultColumn`
 
@@ -89,7 +89,7 @@ declare module '@tanstack/table-core' {
 }
 ```
 
-> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data example](../framework/react/examples/editable-data).
+> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data example](../../framework/react/examples/editable-data).
 
 ### `state`
 

docs/api/features/filters.md

@@ -7,7 +7,7 @@ id: filters
 
 The Filtering API docs are now split into multiple API doc pages:
 
-- [Column Faceting](api/features/column-faceting)
-- [Global Faceting](api/features/global-faceting)
-- [Column Filtering](api/features/column-filtering)
-- [Global Filtering](api/features/global-filtering)
+- [Column Faceting](../column-faceting)
+- [Global Faceting](../global-faceting)
+- [Column Filtering](../column-filtering)
+- [Global Filtering](../global-filtering)

docs/api/features/global-filtering.md

@@ -25,7 +25,7 @@ export interface GlobalFilterTableState {
 
 ## Filter Functions
 
-You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering APIs](api/features/column-filtering) to learn more about filter functions.
+You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering APIs](../column-filtering) to learn more about filter functions.
 
 #### Using Filter Functions
 

docs/api/features/pinning.md

@@ -7,5 +7,5 @@ id: pinning
 
 The pinning apis are now split into multiple api pages:
 
-- [Column Pinning](api/features/column-pinning)
-- [Row Pinning](api/features/row-pinning)
+- [Column Pinning](../column-pinning)
+- [Row Pinning](../row-pinning)

docs/api/features/row-selection.md

@@ -15,7 +15,7 @@ export type RowSelectionTableState = {
 }
 ```
 
-By default, the row selection state uses the index of each row as the row identifiers. Row selection state can instead be tracked with a custom unique row id by passing in a custom [getRowId](../../api/core/table.md#getrowid) function to the the table.
+By default, the row selection state uses the index of each row as the row identifiers. Row selection state can instead be tracked with a custom unique row id by passing in a custom [getRowId](../../../api/core/table.md#getrowid) function to the the table.
 
 ## Table Options
 

docs/api/features/sorting.md

@@ -123,16 +123,22 @@ Inverts the order of the sorting for this column. This is useful for values that
 ### `sortUndefined`
 
 ```tsx
-sortUndefined?: false | -1 | 1 // defaults to 1
+sortUndefined?: 'first' | 'last' | false | -1 | 1 // defaults to 1
 ```
 
+- `'first'`
+  - Undefined values will be pushed to the beginning of the list
+- `'last'`
+  - Undefined values will be pushed to the end of the list
 - `false`
   - Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies)
 - `-1`
   - Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list)
 - `1`
   - Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)
 
+> NOTE: `'first'` and `'last'` options are new in v8.16.0
+
 ## Column API
 
 ### `getAutoSortingFn`

docs/config.json

@@ -115,13 +115,17 @@
           "label": "Rows",
           "to": "guide/rows"
         },
-        {
-          "label": "Headers",
-          "to": "guide/headers"
-        },
         {
           "label": "Cells",
           "to": "guide/cells"
+        },
+        {
+          "label": "Header Groups",
+          "to": "guide/headers-groups"
+        },
+        {
+          "label": "Headers",
+          "to": "guide/headers"
         }
       ],
       "frameworks": [
@@ -417,7 +421,19 @@
             },
             {
               "to": "framework/react/examples/column-groups",
-              "label": "Column Groups"
+              "label": "Header Groups"
+            },
+            {
+              "to": "framework/react/examples/filters",
+              "label": "Column Filters"
+            },
+            {
+              "to": "framework/react/examples/filters-faceted",
+              "label": "Column Filters (Faceted)"
+            },
+            {
+              "to": "framework/react/examples/filters-fuzzy",
+              "label": "Fuzzy Search Filters"
             },
             {
               "to": "framework/react/examples/column-ordering",
@@ -459,10 +475,6 @@
               "to": "framework/react/examples/sub-components",
               "label": "Sub Components"
             },
-            {
-              "to": "framework/react/examples/filters",
-              "label": "Filters"
-            },
             {
               "to": "framework/react/examples/fully-controlled",
               "label": "Fully Controlled"

docs/framework/react/guide/table-state.md

@@ -6,8 +6,8 @@ title: Table State (React) Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [kitchen sink](../framework/react/examples/kitchen-sink)
-- [fully controlled](../framework/react/examples/fully-controlled)
+- [kitchen sink](../../examples/kitchen-sink)
+- [fully controlled](../../examples/fully-controlled)
 
 ## Table State (React) Guide
 

docs/guide/cells.md

@@ -4,4 +4,4 @@ title: Cells Guide
 
 ## API
 
-[Cell API](../api/core/cell)
+[Cell API](../../api/core/cell)

docs/guide/column-defs.md

@@ -4,15 +4,15 @@ title: Columns Guide
 
 ## API
 
-[Table API](../api/core/table)
+[Table API](../../api/core/table)
 
 ## Column Definitions Guide
 
 Column defs are the single most important part of building a table. They are responsible for:
 
 - Building the underlying data model that will be used for everything including sorting, filtering, grouping, etc.
 - Formatting the data model into what will be displayed in the table
-- Creating [header groups](./api/core/header-group), [headers](./api/core/header) and [footers](./api/core/column-def#footer)
+- Creating [header groups](../../../api/core/header-group), [headers](../../../api/core/header) and [footers](../../../api/core/column-def#footer)
 - Creating columns for display-only purposes, eg. action buttons, checkboxes, expanders, sparklines, etc.
 
 ## Column Def Types
@@ -242,7 +242,7 @@ columnHelper.accessor('firstName', {
 
 ## Aggregated Cell Formatting
 
-For more info on aggregated cells, see [grouping](../guide/grouping).
+For more info on aggregated cells, see [grouping](../grouping).
 
 ## Header & Footer Formatting
 

docs/guide/column-faceting.md

@@ -6,10 +6,84 @@ title: Column Faceting Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [filters](../framework/react/examples/filters) (includes faceting)
+- [filters-faceted](../../framework/react/examples/filters-faceted)
 
 ## API
 
-[Column Faceting API](../api/features/column-faceting)
+[Column Faceting API](../../api/features/column-faceting)
 
-## Column Faceting Guide
+## Column Faceting 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, you must include the appropriate row models in your table options.
+
+```ts
+//only import the row models you need
+import {
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedMinMaxValues, //depends on getFacetedRowModel
+  getFacetedUniqueValues, //depends on getFacetedRowModel
+}
+//...
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getFacetedRowModel: getFacetedRowModel(), //if you need a list of values for a column (other faceted row models depend on this one)
+  getFacetedMinMaxValues: getFacetedMinMaxValues(), //if you need min/max values
+  getFacetedUniqueValues: getFacetedUniqueValues(), //if you need a list of unique values
+  //...
+})
+```
+
+First, you must include the `getFacetedRowModel` row model. This row model will generate a list of values for a given column. If you need a list of unique values, include the `getFacetedUniqueValues` row model. If you need a tuple of minimum and maximum values, include the `getFacetedMinMaxValues` 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(
+  //...
+)
+
+const table = useReactTable({
+  columns,
+  data,
+  getCoreRowModel: getCoreRowModel(),
+  getFacetedRowModel: getFacetedRowModel(),
+  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.