move rowModelFns table option to create row models

Author: KevinVandy

docs/api/features/sorting.md

@@ -50,35 +50,35 @@ Every sorting function receives 2 rows and a column ID and are expected to compa
 This is the type signature for every sorting function:
 
 ```tsx
-export type SortingFn<TData extends AnyData> = {
+export type SortFn<TData extends AnyData> = {
   (rowA: Row<TFeatures, TData>, rowB: Row<TFeatures, TData>, columnId: string): number
 }
 ```
 
 #### Using Sorting Functions
 
-Sorting functions can be used/referenced/defined by passing the following to `columnDefinition.sortingFn`:
+Sorting functions can be used/referenced/defined by passing the following to `columnDefinition.sortFn`:
 
 - A `string` that references a built-in sorting function
 - A `string` that references a custom sorting functions provided via the `tableOptions.sortFns` option
-- A function directly provided to the `columnDefinition.sortingFn` option
+- A function directly provided to the `columnDefinition.sortFn` option
 
-The final list of sorting functions available for the `columnDef.sortingFn` use the following type:
+The final list of sorting functions available for the `columnDef.sortFn` use the following type:
 
 ```tsx
-export type SortingFnOption<TData extends AnyData> =
+export type SortFnOption<TData extends AnyData> =
   | 'auto'
   | SortFns
   | BuiltInSortFns
-  | SortingFn<TFeatures, TData>
+  | SortFn<TFeatures, TData>
 ```
 
 ## Column Def Options
 
-### `sortingFn`
+### `sortFn`
 
 ```tsx
-sortingFn?: SortingFn | keyof SortFns | keyof BuiltInSortFns
+sortFn?: SortFn | keyof SortFns | keyof BuiltInSortFns
 ```
 
 The sorting function to use with this column.
@@ -141,10 +141,10 @@ sortUndefined?: 'first' | 'last' | false | -1 | 1 // defaults to 1
 
 ## Column API
 
-### `getAutoSortingFn`
+### `getAutoSortFn`
 
 ```tsx
-getAutoSortingFn: () => SortingFn<TFeatures, TData>
+getAutoSortFn: () => SortFn<TFeatures, TData>
 ```
 
 Returns a sorting function automatically inferred based on the columns values.
@@ -157,10 +157,10 @@ getAutoSortDir: () => SortDirection
 
 Returns a sort direction automatically inferred based on the columns values.
 
-### `getSortingFn`
+### `getSortFn`
 
 ```tsx
-getSortingFn: () => SortingFn<TFeatures, TData>
+getSortFn: () => SortFn<TFeatures, TData>
 ```
 
 Returns the resolved sorting function to be used for this column
@@ -242,21 +242,21 @@ Returns a function that can be used to toggle this column's sorting state. This
 ### `sortFns`
 
 ```tsx
-sortFns?: Record<string, SortingFn>
+sortFns?: Record<string, SortFn>
 ```
 
-This option allows you to define custom sorting functions that can be referenced in a column's `sortingFn` option by their key.
+This option allows you to define custom sorting functions that can be referenced in a column's `sortFn` option by their key.
 Example:
 
 ```tsx
 declare module '@tanstack/table-core' {
   interface SortFns {
-    myCustomSorting: SortingFn<unknown>
+    myCustomSorting: SortFn<unknown>
   }
 }
 
 const column = columnHelper.data('key', {
-  sortingFn: 'myCustomSorting',
+  sortFn: 'myCustomSorting',
 })
 
 const table = useTable({

docs/guide/fuzzy-filtering.md

@@ -92,7 +92,7 @@ When using fuzzy filtering with column filtering, you might also want to sort th
 import { compareItems } from '@tanstack/match-sorter-utils'
 import { sortFns } from '@tanstack/table'
 
-const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
+const fuzzySort: SortFn<any> = (rowA, rowB, columnId) => {
   let dir = 0
 
   // Only sort by rank if the column has ranking information

docs/guide/sorting.md

@@ -134,7 +134,7 @@ const table = useTable({
 
 The default sorting function for all columns is inferred from the data type of the column. However, it can be useful to define the exact sorting function that you want to use for a specific column, especially if any of your data is nullable or not a standard data type.
 
-You can determine a custom sorting function on a per-column basis using the `sortingFn` column option.
+You can determine a custom sorting function on a per-column basis using the `sortFn` column option.
 
 By default, there are 6 built-in sorting functions to choose from:
 
@@ -145,20 +145,20 @@ By default, there are 6 built-in sorting functions to choose from:
 - `datetime` - Sorts by time, use this if your values are `Date` objects.
 - `basic` - Sorts using a basic/standard `a > b ? 1 : a < b ? -1 : 0` comparison. This is the fastest sorting function, but may not be the most accurate.
 
-You can also define your own custom sorting functions either as the `sortingFn` column option, or as a global sorting function using the `sortFns` table option.
+You can also define your own custom sorting functions either as the `sortFn` column option, or as a global sorting function using the `sortFns` table option.
 
 #### Custom Sorting Functions
 
-When defining a custom sorting function in either the `sortFns` table option or as a `sortingFn` column option, it should have the following signature:
+When defining a custom sorting function in either the `sortFns` table option or as a `sortFn` column option, it should have the following signature:
 
 ```tsx
-//optionally use the SortingFn to infer the parameter types
-const myCustomSortingFn: SortingFn<TFeatures, TData> = (rowA: Row<TFeatures, TData>, rowB: Row<TFeatures, TData>, columnId: string) => {
+//optionally use the SortFn to infer the parameter types
+const myCustomSortFn: SortFn<TFeatures, TData> = (rowA: Row<TFeatures, TData>, rowB: Row<TFeatures, TData>, columnId: string) => {
   return //-1, 0, or 1 - access any row data using rowA.original and rowB.original
 }
 ```
 
-> Note: The comparison function does not need to take whether or not the column is in descending or ascending order into account. The row models will take of that logic. `sortingFn` functions only need to provide a consistent comparison.
+> Note: The comparison function does not need to take whether or not the column is in descending or ascending order into account. The row models will take of that logic. `sortFn` functions only need to provide a consistent comparison.
 
 Every sorting function receives 2 rows and a column ID and are expected to compare the two rows using the column ID to return `-1`, `0`, or `1` in ascending order. Here's a cheat sheet:
 
@@ -173,23 +173,23 @@ const columns = [
   {
     header: () => 'Name',
     accessorKey: 'name',
-    sortingFn: 'alphanumeric', // use built-in sorting function by name
+    sortFn: 'alphanumeric', // use built-in sorting function by name
   },
   {
     header: () => 'Age',
     accessorKey: 'age',
-    sortingFn: 'myCustomSortingFn', // use custom global sorting function
+    sortFn: 'myCustomSortFn', // use custom global sorting function
   },
   {
     header: () => 'Birthday',
     accessorKey: 'birthday',
-    sortingFn: 'datetime', // recommended for date columns
+    sortFn: 'datetime', // recommended for date columns
   },
   {
     header: () => 'Profile',
     accessorKey: 'profile',
     // use custom sorting function directly
-    sortingFn: (rowA, rowB, columnId) => {
+    sortFn: (rowA, rowB, columnId) => {
       return rowA.original.someProperty - rowB.original.someProperty
     },
   }
@@ -201,7 +201,7 @@ const table = useTable({
   getCoreRowModel: createCoreRowModel(),
   getSortedRowModel: createSortedRowModel(),
   sortFns: { //add a custom sorting function
-    myCustomSortingFn: (rowA, rowB, columnId) => {
+    myCustomSortFn: (rowA, rowB, columnId) => {
       return rowA.original[columnId] > rowB.original[columnId] ? 1 : rowA.original[columnId] < rowB.original[columnId] ? -1 : 0
     },
   },
@@ -408,8 +408,8 @@ There are a lot of sorting related APIs that you can use to hook up to your UI o
 - `column.getNextSortingOrder` - Useful for showing which direction the column will sort by next. (asc/desc/clear in a tooltip/menu item/aria-label or something)
 - `column.getFirstSortDir` - Useful for showing which direction the column will sort by first. (asc/desc in a tooltip/menu item/aria-label or something)
 - `column.getAutoSortDir` - Determines whether the first sorting direction will be ascending or descending for a column.
-- `column.getAutoSortingFn` - Used internally to find the default sorting function for a column if none is specified.
-- `column.getSortingFn` - Returns the exact sorting function being used for a column.
+- `column.getAutoSortFn` - Used internally to find the default sorting function for a column if none is specified.
+- `column.getSortFn` - Returns the exact sorting function being used for a column.
 
 - `column.getCanMultiSort` - Useful for enabling/disabling the multi-sorting UI for a column.
 - `column.getSortIndex` - Useful for showing a badge or indicator of the column's sort order in a multi-sort scenario. i.e. whether or not it is the first, second, third, etc. column to be sorted.

examples/lit/sorting/src/main.ts

@@ -9,9 +9,9 @@ import {
   flexRender,
 } from '@tanstack/lit-table'
 import { Person, makeData } from './makeData'
-import type { ColumnDef, SortingFn, SortingState } from '@tanstack/lit-table'
+import type { ColumnDef, SortFn, SortingState } from '@tanstack/lit-table'
 
-const sortStatusFn: SortingFn<any, Person> = (rowA, rowB, _columnId) => {
+const sortStatusFn: SortFn<any, Person> = (rowA, rowB, _columnId) => {
   const statusA = rowA.original.status
   const statusB = rowB.original.status
   const statusOrder = ['single', 'complicated', 'relationship']
@@ -45,7 +45,7 @@ const columns: Array<ColumnDef<any, Person>> = [
   {
     accessorKey: 'status',
     header: 'Status',
-    sortingFn: sortStatusFn, // use our custom sorting function for this enum column
+    sortFn: sortStatusFn, // use our custom sorting function for this enum column
   },
   {
     accessorKey: 'progress',
@@ -60,7 +60,7 @@ const columns: Array<ColumnDef<any, Person>> = [
   {
     accessorKey: 'createdAt',
     header: 'Created At',
-    // sortingFn: 'datetime' //make sure table knows this is a datetime column (usually can detect if no null values)
+    // sortFn: 'datetime' //make sure table knows this is a datetime column (usually can detect if no null values)
   },
 ]
 

examples/qwik/filters/src/main.tsx

@@ -19,7 +19,7 @@ import type {
   Column,
   ColumnFiltersState,
   FilterFn,
-  SortingFn,
+  SortFn,
   Table,
 } from '@tanstack/qwik-table'
 import type { RankingInfo } from '@tanstack/match-sorter-utils'
@@ -46,7 +46,7 @@ const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
   return itemRank.passed
 }
 
-const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
+const fuzzySort: SortFn<any> = (rowA, rowB, columnId) => {
   let dir = 0
 
   // Only sort by rank if the column has ranking information
@@ -121,14 +121,14 @@ const columns = [
         cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
         footer: (props) => props.column.id,
-        sortingFn: fuzzySort,
+        sortFn: fuzzySort,
       }),
       columnHelper.accessor((row) => `${row.firstName} ${row.lastName}`, {
         id: 'fullName',
         header: 'Full Name',
         cell: (info) => info.getValue(),
         footer: (props) => props.column.id,
-        sortingFn: fuzzySort,
+        sortFn: fuzzySort,
       }),
     ],
   }),

examples/qwik/sorting/src/main.tsx

@@ -57,7 +57,7 @@ const columns: Array<ColumnDef<any, Person>> = [
     accessorKey: 'createdAt',
     header: 'Created At',
     cell: (info) => info.getValue<Date>().toLocaleDateString(),
-    // sortingFn: 'datetime' (inferred from the data)
+    // sortFn: 'datetime' (inferred from the data)
   },
 ]
 

examples/react/basic-table-helper/src/main.tsx

@@ -55,7 +55,6 @@ const defaultData: Array<Person> = [
 const tableHelper = createTableHelper({
   _features: {},
   _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
-  _rowModelFns: {}, // client-side processing functions used by the row models (sorting, filtering, etc.). Not needed in this basic example
   debugTable: true,
   // TData: {} as Person, // optionally, set the TData type for the table helper. Omit if this will be a table helper for multiple tables of all different data types
 })

examples/react/custom-features/src/main.tsx

@@ -189,13 +189,9 @@ function App() {
   const table = useTable({
     _features,
     _rowModels: {
-      filteredRowModel: createFilteredRowModel(),
+      filteredRowModel: createFilteredRowModel({ filterFns }),
       paginatedRowModel: createPaginatedRowModel(),
-      sortedRowModel: createSortedRowModel(),
-    },
-    _rowModelFns: {
-      filterFns,
-      sortFns,
+      sortedRowModel: createSortedRowModel({ sortFns }),
     },
     columns,
     data,

examples/react/expanding/src/main.tsx

@@ -33,14 +33,10 @@ const tableHelper = createTableHelper({
     rowSortingFeature,
     rowSelectionFeature,
   },
-  _rowModelFns: {
-    filterFns: filterFns,
-    sortFns: sortFns,
-  },
   _rowModels: {
-    filteredRowModel: createFilteredRowModel(),
+    filteredRowModel: createFilteredRowModel({ filterFns }),
     paginatedRowModel: createPaginatedRowModel(),
-    sortedRowModel: createSortedRowModel(),
+    sortedRowModel: createSortedRowModel({ sortFns }),
   },
 })
 

examples/react/filters-faceted/src/main.tsx

@@ -102,14 +102,10 @@ function App() {
 
   const table = useTable({
     _features,
-    _rowModelFns: {
-      filterFns,
-      sortFns,
-    },
     _rowModels: {
-      filteredRowModel: createFilteredRowModel(), // client-side filtering
+      filteredRowModel: createFilteredRowModel({ filterFns }), // client-side filtering
       paginatedRowModel: createPaginatedRowModel(),
-      sortedRowModel: createSortedRowModel(),
+      sortedRowModel: createSortedRowModel({ sortFns }),
       facetedRowModel: createFacetedRowModel(), // client-side faceting
       facetedMinMaxValues: createFacetedMinMaxValues(), // generate min/max values for range filter
       facetedUniqueValues: createFacetedUniqueValues(), // generate unique values for select filter/autocomplete