update sorted row model

TanStack · Oct 6, 2024 · 4816dac · 4816dac
1 parent ef94b23
commit 4816dac
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 200 deletions.
diff --git a/examples/react/sorting/src/main.tsx b/examples/react/sorting/src/main.tsx
@@ -7,14 +7,29 @@ import {
   RowSorting,
   createSortedRowModel,
   flexRender,
+  sortingFns,
+  tableFeatures,
+  tableFns,
   useTable,
 } from '@tanstack/react-table'
 import { makeData } from './makeData'
 import type { ColumnDef, SortingFn, SortingState } from '@tanstack/react-table'
 import type { Person } from './makeData'
 
+const _features = tableFeatures({
+  RowSorting,
+})
+
+const _fns = tableFns(_features, {
+  sortingFns,
+})
+
 // custom sorting logic for one of our enum columns
-const sortStatusFn: SortingFn<any, Person> = (rowA, rowB, _columnId) => {
+const sortStatusFn: SortingFn<typeof _features, typeof _fns, Person> = (
+  rowA,
+  rowB,
+  _columnId,
+) => {
   const statusA = rowA.original.status
   const statusB = rowB.original.status
   const statusOrder = ['single', 'complicated', 'relationship']
@@ -24,9 +39,12 @@ const sortStatusFn: SortingFn<any, Person> = (rowA, rowB, _columnId) => {
 function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
+  // optionally, manage sorting state in your own state management
   const [sorting, setSorting] = React.useState<SortingState>([])
 
-  const columns = React.useMemo<Array<ColumnDef<any, Person>>>(
+  const columns = React.useMemo<
+    Array<ColumnDef<typeof _features, typeof _fns, Person>>
+  >(
     () => [
       {
         accessorKey: 'firstName',
@@ -79,7 +97,8 @@ function App() {
   const refreshData = () => setData(() => makeData(100_000)) // stress test with 100k rows
 
   const table = useTable({
-    _features: { RowSorting },
+    _features,
+    _fns,
     _rowModels: {
       Sorted: createSortedRowModel(), // client-side sorting
     },
@@ -102,9 +121,6 @@ function App() {
     // maxMultiSortColCount: 3, // only allow 3 columns to be sorted at once - default is Infinity
   })
 
-  // access sorting state from the table instance
-  console.log(table.getState().sorting)
-
   return (
     <div className="p-2">
       <div className="h-2" />
@@ -156,7 +172,7 @@ function App() {
             .map((row) => {
               return (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map((cell) => {
+                  {row.getAllCells().map((cell) => {
                     return (
                       <td key={cell.id}>
                         {flexRender(

diff --git a/packages/table-core/src/core/table/createCoreRowModel.ts b/packages/table-core/src/core/table/createCoreRowModel.ts
@@ -1,5 +1,5 @@
 import { constructRow } from '../rows/constructRow'
-import { _memo, isDev, tableMemo } from '../../utils'
+import { isDev, tableMemo } from '../../utils'
 import { table_getRowId } from '../rows/Rows.utils'
 import { table_autoResetPageIndex } from '../../features/row-pagination/RowPagination.utils'
 import type { Fns } from '../../types/Fns'
@@ -22,8 +22,7 @@ export function createCoreRowModel<
       fnName: 'createCoreRowModel',
       memoDeps: () => [table.options.data],
       fn: (data) => _createCoreRowModel(table, data),
-      onAfterUpdate: () =>
-        queueMicrotask(() => table_autoResetPageIndex(table)),
+      onAfterUpdate: () => table_autoResetPageIndex(table),
     })
 }
 

diff --git a/packages/table-core/src/features/row-pagination/RowPagination.utils.ts b/packages/table-core/src/features/row-pagination/RowPagination.utils.ts
@@ -36,28 +36,14 @@ export function table_autoResetPageIndex<
   TFeatures extends TableFeatures,
   TFns extends Fns<TFeatures, TFns, TData>,
   TData extends RowData,
->(
-  table: Table_Internal<TFeatures, TFns, TData>,
-  registered?: boolean,
-  queued?: boolean,
-) {
-  if (!registered) {
-    table._queue(() => {
-      registered = true
-    })
-    return
-  }
-
+>(table: Table_Internal<TFeatures, TFns, TData>) {
   if (
     table.options.autoResetAll ??
     table.options.autoResetPageIndex ??
     !table.options.manualPagination
   ) {
-    if (queued) return
-    queued = true
-    table._queue(() => {
+    queueMicrotask(() => {
       table_resetPageIndex(table)
-      queued = false
     })
   }
 }

diff --git a/packages/table-core/src/features/row-sorting/RowSorting.ts b/packages/table-core/src/features/row-sorting/RowSorting.ts
@@ -21,10 +21,8 @@ import type { Fns } from '../../types/Fns'
 import type { TableState } from '../../types/TableState'
 import type {
   ColumnDef_RowSorting,
-  Column_RowSorting,
   TableOptions_RowSorting,
   TableState_RowSorting,
-  Table_RowSorting,
 } from './RowSorting.types'
 import type { CellData, RowData } from '../../types/type-utils'
 import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
@@ -78,10 +76,8 @@ export const RowSorting: TableFeature = {
     TData extends RowData,
     TValue extends CellData = CellData,
   >(
-    column: Column<TFeatures, TFns, TData, TValue> &
-      Partial<Column_RowSorting<TFeatures, TFns, TData>>,
-    table: Table<TFeatures, TFns, TData> &
-      Partial<Table_RowSorting<TFeatures, TFns, TData>>,
+    column: Column<TFeatures, TFns, TData, TValue>,
+    table: Table<TFeatures, TFns, TData>,
   ): void => {
     assignAPIs(column, table, [
       {
@@ -128,8 +124,7 @@ export const RowSorting: TableFeature = {
     TFns extends Fns<TFeatures, TFns, TData>,
     TData extends RowData,
   >(
-    table: Table<TFeatures, TFns, TData> &
-      Partial<Table_RowSorting<TFeatures, TFns, TData>>,
+    table: Table<TFeatures, TFns, TData>,
   ): void => {
     assignAPIs(table, table, [
       {

diff --git a/packages/table-core/src/features/row-sorting/RowSorting.utils.ts b/packages/table-core/src/features/row-sorting/RowSorting.utils.ts
@@ -1,4 +1,4 @@
-import { reSplitAlphaNumeric } from '../../fns/sortingFns'
+import { reSplitAlphaNumeric, sortingFn_basic } from '../../fns/sortingFns'
 import { isFunction } from '../../utils'
 import { table_getFilteredRowModel } from '../column-filtering/ColumnFiltering.utils'
 import { row_getValue } from '../../core/rows/Rows.utils'
@@ -12,13 +12,8 @@ import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { RowModel } from '../../types/RowModel'
 import type { Table_Internal } from '../../types/Table'
-import type { Column } from '../../types/Column'
-import type {
-  ColumnDef_RowSorting,
-  SortDirection,
-  SortingFn,
-  SortingState,
-} from './RowSorting.types'
+import type { Column_Internal } from '../../types/Column'
+import type { SortDirection, SortingFn, SortingState } from './RowSorting.types'
 
 // State Utils
 
@@ -68,15 +63,15 @@ export function column_getAutoSortingFn<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
-) {
+): SortingFn<TFeatures, TFns, TData> {
   const sortingFns = table._fns.sortingFns as
     | Record<string, SortingFn<TFeatures, TFns, TData>>
     | undefined
 
+  let sortingFn: SortingFn<TFeatures, TFns, TData> | undefined
+
   const firstRows = table_getFilteredRowModel(table).flatRows.slice(10)
 
   let isString = false
@@ -85,23 +80,23 @@ export function column_getAutoSortingFn<
     const value = row_getValue(row, table, column.id)
 
     if (Object.prototype.toString.call(value) === '[object Date]') {
-      return sortingFns?.datetime
+      sortingFn = sortingFns?.datetime
     }
 
     if (typeof value === 'string') {
       isString = true
 
       if (value.split(reSplitAlphaNumeric).length > 1) {
-        return sortingFns?.alphanumeric
+        sortingFn = sortingFns?.alphanumeric
       }
     }
   }
 
   if (isString) {
-    return sortingFns?.text
+    sortingFn = sortingFns?.text
   }
 
-  return sortingFns?.basic
+  return sortingFn ?? sortingFn_basic
 }
 
 /**
@@ -116,7 +111,7 @@ export function column_getAutoSortDir<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue>,
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ) {
   const firstRow = table_getFilteredRowModel(table).flatRows[0]
@@ -142,11 +137,9 @@ export function column_getSortingFn<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
-) {
+): SortingFn<TFeatures, TFns, TData> {
   const sortingFns = table._fns.sortingFns as
     | Record<string, SortingFn<TFeatures, TFns, TData>>
     | undefined
@@ -155,7 +148,7 @@ export function column_getSortingFn<
     ? column.columnDef.sortingFn
     : column.columnDef.sortingFn === 'auto'
       ? column_getAutoSortingFn(column, table)
-      : sortingFns?.[column.columnDef.sortingFn as string]
+      : (sortingFns?.[column.columnDef.sortingFn as string] ?? sortingFn_basic)
 }
 
 /**
@@ -171,9 +164,7 @@ export function column_toggleSorting<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
   desc?: boolean,
   multi?: boolean,
@@ -283,9 +274,7 @@ export function column_getFirstSortDir<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ) {
   const sortDescFirst =
@@ -308,9 +297,7 @@ export function column_getNextSortingOrder<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
   multi?: boolean,
 ) {
@@ -343,9 +330,7 @@ export function column_getCanSort<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ) {
   return (
@@ -367,9 +352,7 @@ export function column_getCanMultiSort<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ): boolean {
   return (
@@ -391,9 +374,7 @@ export function column_getIsSorted<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ): false | SortDirection {
   const columnSort = table_getState(table).sorting?.find(
@@ -414,9 +395,7 @@ export function column_getSortIndex<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ): number {
   return (
@@ -435,9 +414,7 @@ export function column_clearSorting<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ) {
   // clear sorting for just 1 column
@@ -458,9 +435,7 @@ export function column_getToggleSortingHandler<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TFns, TData, TValue> & {
-    columnDef: Partial<ColumnDef_RowSorting<TFeatures, TFns, TData>>
-  },
+  column: Column_Internal<TFeatures, TFns, TData, TValue>,
   table: Table_Internal<TFeatures, TFns, TData>,
 ) {
   const canSort = column_getCanSort(column, table)