update examples to pass fns new way

TanStack · Dec 16, 2024 · bc69a07 · bc69a07
1 parent c4191d7
commit bc69a07
Show file tree

Hide file tree

Showing 55 changed files with 500 additions and 343 deletions.
diff --git a/docs/api/features/column-filtering.md b/docs/api/features/column-filtering.md
@@ -356,7 +356,7 @@ Example:
 import { getFilteredRowModel } from '@tanstack/[adapter]-table'
 
 
-  getFilteredRowModel: createFilteredRowModel(),
+  getFilteredRowModel: createFilteredRowModel(filterFns),
 })
 ```
 

diff --git a/docs/api/features/global-filtering.md b/docs/api/features/global-filtering.md
@@ -196,7 +196,7 @@ Example:
 ```tsx
 import { getFilteredRowModel } from '@tanstack/[adapter]-table'
 
-  getFilteredRowModel: createFilteredRowModel(),
+  getFilteredRowModel: createFilteredRowModel(filterFns),
 })
 ```
 

diff --git a/docs/framework/lit/guide/table-state.md b/docs/framework/lit/guide/table-state.md
@@ -90,7 +90,7 @@ class MyComponent extends LitElement {
           this._sorting = updaterOrValue
         }
       },
-      getSortedRowModel: createSortedRowModel(),
+      getSortedRowModel: createSortedRowModel(sortFns),
       getCoreRowModel: createCoreRowModel(),
     })
 
@@ -118,7 +118,7 @@ render() {
     columns,
     data,
     getCoreRowModel: createCoreRowModel(),
-    getSortedRowModel: createSortedRowModel()
+    getSortedRowModel: createSortedRowModel(sortFns)
   })
   const state = { ...table.initialState, ...this._tableState };
   table.setOptions(prev => ({
@@ -160,7 +160,7 @@ render() {
         this._sorting = updaterOrValue
       }
     },
-    getSortedRowModel: createSortedRowModel(),
+    getSortedRowModel: createSortedRowModel(sortFns),
     getCoreRowModel: createCoreRowModel(),
   })
 

diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md
@@ -54,7 +54,7 @@ const table = useTable({
   data,
   columns,
   getCoreRowModel: createCoreRowModel(),
-  // getFilteredRowModel: createFilteredRowModel(), // not needed for manual server-side filtering
+  // getFilteredRowModel: createFilteredRowModel(filterFns), // not needed for manual server-side filtering
   manualFiltering: true,
 })
 ```
@@ -72,7 +72,7 @@ const table = useTable({
   data,
   columns,
   getCoreRowModel: createCoreRowModel(),
-  getFilteredRowModel: createFilteredRowModel(), // needed for client-side filtering
+  getFilteredRowModel: createFilteredRowModel(filterFns), // needed for client-side filtering
 })
 ```
 
@@ -216,7 +216,7 @@ const table = useTable({
   columns,
   data,
   getCoreRowModel: createCoreRowModel(),
-  getFilteredRowModel: createFilteredRowModel(),
+  getFilteredRowModel: createFilteredRowModel(filterFns),
   filterFns: { // add a custom global filter function
     myCustomFilterFn: (row, columnId, filterValue) => { // defined inline here
       return // true or false based on your custom logic
@@ -296,7 +296,7 @@ const table = useTable({
   columns,
   data,
   getCoreRowModel: createCoreRowModel(),
-  getFilteredRowModel: createFilteredRowModel(),
+  getFilteredRowModel: createFilteredRowModel(filterFns),
   getExpandedRowModel: createExpandedRowModel(),
   filterFromLeafRows: true, // filter and search through sub-rows
 })
@@ -313,7 +313,7 @@ const table = useTable({
   columns,
   data,
   getCoreRowModel: createCoreRowModel(),
-  getFilteredRowModel: createFilteredRowModel(),
+  getFilteredRowModel: createFilteredRowModel(filterFns),
   getExpandedRowModel: createExpandedRowModel(),
   maxLeafRowFilterDepth: 0, // only filter root level parent rows out
 })

diff --git a/docs/guide/row-models.md b/docs/guide/row-models.md
@@ -52,10 +52,10 @@ const table = useTable({
   getFacetedMinMaxValues: getFacetedMinMaxValues(),
   getFacetedRowModel: createFacetedRowModel(),
   getFacetedUniqueValues: getFacetedUniqueValues(),
-  getFilteredRowModel: createFilteredRowModel(),
+  getFilteredRowModel: createFilteredRowModel(filterFns),
   getGroupedRowModel: createGroupedRowModel(),
   getPaginatedRowModel: createPaginatedRowModel(),
-  getSortedRowModel: createSortedRowModel(),
+  getSortedRowModel: createSortedRowModel(sortFns),
 })
 ```
 

diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md
@@ -104,7 +104,7 @@ const table = useTable({
   columns,
   data,
   getCoreRowModel: createCoreRowModel(),
-  //getSortedRowModel: createSortedRowModel(), //not needed for manual sorting
+  //getSortedRowModel: createSortedRowModel(sortFns), //not needed for manual sorting
   manualSorting: true, //use pre-sorted row model instead of sorted row model
   state: {
     sorting,
@@ -126,7 +126,7 @@ const table = useTable({
   columns,
   data,
   getCoreRowModel: createCoreRowModel(),
-  getSortedRowModel: createSortedRowModel(), //provide a sorting row model
+  getSortedRowModel: createSortedRowModel(sortFns), //provide a sorting row model
 })
 ```
 
@@ -199,7 +199,7 @@ const table = useTable({
   columns,
   data,
   getCoreRowModel: createCoreRowModel(),
-  getSortedRowModel: createSortedRowModel(),
+  getSortedRowModel: createSortedRowModel(sortFns),
   sortFns: { //add a custom sorting function
     myCustomSortFn: (rowA, rowB, columnId) => {
       return rowA.original[columnId] > rowB.original[columnId] ? 1 : rowA.original[columnId] < rowB.original[columnId] ? -1 : 0

diff --git a/examples/angular/column-visibility/src/app/app.component.ts b/examples/angular/column-visibility/src/app/app.component.ts
@@ -7,8 +7,8 @@ import {
 import {
   FlexRenderDirective,
   columnVisibilityFeature,
-  createCoreRowModel,
   injectTable,
+  isFunction,
   tableFeatures,
 } from '@tanstack/angular-table'
 import type { OnInit } from '@angular/core'
@@ -124,12 +124,10 @@ export class AppComponent implements OnInit {
     state: {
       columnVisibility: this.columnVisibility(),
     },
-    getCoreRowModel: createCoreRowModel(),
     onColumnVisibilityChange: (updaterOrValue) => {
-      const visibilityState =
-        typeof updaterOrValue === 'function'
-          ? updaterOrValue(this.columnVisibility())
-          : updaterOrValue
+      const visibilityState = isFunction(updaterOrValue)
+        ? updaterOrValue(this.columnVisibility())
+        : updaterOrValue
       this.columnVisibility.set(visibilityState)
     },
     debugTable: true,

diff --git a/examples/angular/filters/src/app/app.component.ts b/examples/angular/filters/src/app/app.component.ts
@@ -8,17 +8,18 @@ import {
   FlexRenderDirective,
   columnFacetingFeature,
   columnFilteringFeature,
-  createCoreRowModel,
   createFacetedMinMaxValues,
   createFacetedRowModel,
   createFacetedUniqueValues,
   createFilteredRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
+  filterFns,
   injectTable,
   isFunction,
   rowPaginationFeature,
   rowSortingFeature,
+  sortFns,
   tableFeatures,
 } from '@tanstack/angular-table'
 import { FormsModule } from '@angular/forms'
@@ -93,6 +94,14 @@ export class AppComponent {
 
   table = injectTable<typeof _features, Person>(() => ({
     _features,
+    _rowModels: {
+      facetedMinMaxValues: createFacetedMinMaxValues(),
+      facetedRowModel: createFacetedRowModel(),
+      facetedUniqueValues: createFacetedUniqueValues(),
+      filteredRowModel: createFilteredRowModel(filterFns),
+      paginatedRowModel: createPaginatedRowModel(),
+      sortedRowModel: createSortedRowModel(sortFns),
+    },
     columns: this.columns,
     data: this.data(),
     state: {
@@ -103,13 +112,6 @@ export class AppComponent {
         ? this.columnFilters.update(updater)
         : this.columnFilters.set(updater)
     },
-    getCoreRowModel: createCoreRowModel(),
-    getFilteredRowModel: createFilteredRowModel(), // client-side filtering
-    getSortedRowModel: createSortedRowModel(),
-    getPaginatedRowModel: createPaginatedRowModel(),
-    getFacetedRowModel: createFacetedRowModel(), // client-side faceting
-    getFacetedUniqueValues: createFacetedUniqueValues(), // generate unique values for select filter/autocomplete
-    getFacetedMinMaxValues: createFacetedMinMaxValues(), // generate min/max values for range filter
     debugTable: true,
     debugHeaders: true,
     debugColumns: false,

diff --git a/examples/angular/grouping/src/app/app.component.ts b/examples/angular/grouping/src/app/app.component.ts
@@ -7,12 +7,14 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  aggregationFns,
   columnFilteringFeature,
   columnGroupingFeature,
   createExpandedRowModel,
   createFilteredRowModel,
   createGroupedRowModel,
   createPaginatedRowModel,
+  filterFns,
   injectTable,
   isFunction,
   rowExpandingFeature,
@@ -49,10 +51,10 @@ export class AppComponent {
   readonly table = injectTable(() => ({
     _features,
     _rowModels: {
-      groupedRowModel: createGroupedRowModel(),
+      groupedRowModel: createGroupedRowModel(aggregationFns),
       expandedRowModel: createExpandedRowModel(),
       paginatedRowModel: createPaginatedRowModel(),
-      filteredRowModel: createFilteredRowModel(),
+      filteredRowModel: createFilteredRowModel(filterFns),
     },
     enableExperimentalReactivity: true,
     data: this.data(),

diff --git a/examples/angular/row-selection-signal/src/app/app.component.ts b/examples/angular/row-selection-signal/src/app/app.component.ts
@@ -11,6 +11,7 @@ import {
   columnVisibilityFeature,
   createFilteredRowModel,
   createPaginatedRowModel,
+  filterFns,
   injectTable,
   rowPaginationFeature,
   rowSelectionFeature,
@@ -109,22 +110,12 @@ export class AppComponent {
   table = injectTable(() => ({
     _features,
     _rowModels: {
-      filteredRowModel: createFilteredRowModel(),
+      filteredRowModel: createFilteredRowModel(filterFns),
       paginatedRowModel: createPaginatedRowModel(),
     },
+    columns: this.columns,
     data: this.data(),
     enableExperimentalReactivity: true,
-    _features: {
-      rowSelectionFeature,
-      rowPaginationFeature,
-      columnFilteringFeature,
-      columnVisibilityFeature,
-    },
-    _rowModels: {
-      filteredRowModel: createFilteredRowModel(),
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    columns: this.columns,
     state: {
       rowSelection: this.rowSelection(),
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -356,7 +356,7 @@ Example: @@
     import { getFilteredRowModel } from '@tanstack/[adapter]-table'
-      getFilteredRowModel: createFilteredRowModel(),
+      getFilteredRowModel: createFilteredRowModel(filterFns),
     })
     ```
@@ Expand Down @@