@tanstack/table-core 8.0.0-alpha.61 → 8.0.0-alpha.64

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.61",
+  "version": "8.0.0-alpha.64",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",

package/src/core.ts

@@ -55,7 +55,7 @@ export type TableCore<TGenerics extends TableGenerics> = {
   options: RequiredKeys<TableOptions<TGenerics>, 'state'>
   setOptions: (newOptions: Updater<TableOptions<TGenerics>>) => void
   queue: (cb: () => void) => void
-  willUpdate: () => void
+  // willUpdate: () => void
   getState: () => TableState
   setState: (updater: Updater<TableState>) => void
   render: <TProps>(
@@ -116,16 +116,17 @@ export function createTableInstance<TGenerics extends TableGenerics>(
     coreProgress: 1,
   }
 
-  const initialState = {
+  let initialState = {
     ...coreInitialState,
     ...(options.initialState ?? {}),
-    ...instance._features.reduce((obj, feature) => {
-      return Object.assign(obj, feature.getInitialState?.(options.initialState))
-    }, {}),
   } as TableState
 
+  instance._features.forEach(feature => {
+    initialState = feature.getInitialState?.(initialState) ?? initialState
+  })
+
   const queued: (() => void)[] = []
-  let queuedTimeout: ReturnType<typeof setTimeout>
+  let queuedTimeout = false
 
   const finalInstance: TableInstance<TGenerics> = {
     ...instance,
@@ -134,18 +135,27 @@ export function createTableInstance<TGenerics extends TableGenerics>(
     }, {}) as unknown as TableInstance<TGenerics>),
     queue: cb => {
       queued.push(cb)
+
       if (!queuedTimeout) {
-        queuedTimeout = setTimeout(() => {
-          instance.setState(old => ({ ...old }))
-        })
-      }
-    },
-    willUpdate: () => {
-      clearTimeout(queuedTimeout)
-      while (queued.length) {
-        queued.shift()!()
+        queuedTimeout = true
+
+        // Schedule a microtask to run the queued callbacks after
+        // the current call stack (render, etc) has finished.
+        Promise.resolve()
+          .then(() => {
+            while (queued.length) {
+              queued.shift()!()
+            }
+            queuedTimeout = false
+          })
+          .catch(error =>
+            setTimeout(() => {
+              throw error
+            })
+          )
       }
     },
+    // willUpdate: () => {},
     initialState,
     reset: () => {
       instance.setState(instance.initialState)

package/src/features/ColumnSizing.ts

@@ -98,7 +98,7 @@ export const ColumnSizing: TableFeature = {
   getDefaultColumn: (): ColumnSizingColumnDef => {
     return defaultColumnSizing
   },
-  getInitialState: (): ColumnSizingTableState => {
+  getInitialState: (state): ColumnSizingTableState => {
     return {
       columnSizing: {},
       columnSizingInfo: {
@@ -109,6 +109,7 @@ export const ColumnSizing: TableFeature = {
         isResizingColumn: false,
         columnSizingStart: [],
       },
+      ...state,
     }
   },
 

package/src/features/Expanding.ts

@@ -5,6 +5,7 @@ import {
   TableInstance,
   Row,
   Updater,
+  TableFeature,
 } from '../types'
 import { makeStateUpdater } from '../utils'
 
@@ -57,10 +58,11 @@ export type ExpandedInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Expanding = {
-  getInitialState: (): ExpandedTableState => {
+export const Expanding: TableFeature = {
+  getInitialState: (state): ExpandedTableState => {
     return {
       expanded: {},
+      ...state,
     }
   },
 

package/src/features/Filters.ts

@@ -7,6 +7,7 @@ import {
   TableInstance,
   Row,
   Updater,
+  TableFeature,
 } from '../types'
 import {
   functionalUpdate,
@@ -57,12 +58,8 @@ export type FilterFnOption<TGenerics extends TableGenerics> =
 
 export type FiltersColumnDef<TGenerics extends TableGenerics> = {
   filterFn?: FilterFnOption<Overwrite<TGenerics, { Value: any }>>
-  enableAllFilters?: boolean
   enableColumnFilter?: boolean
   enableGlobalFilter?: boolean
-  defaultCanFilter?: boolean
-  defaultCanColumnFilter?: boolean
-  defaultCanGlobalFilter?: boolean
 }
 
 export type FiltersColumn<TGenerics extends TableGenerics> = {
@@ -81,7 +78,7 @@ export type FiltersColumn<TGenerics extends TableGenerics> = {
 export type FiltersOptions<TGenerics extends TableGenerics> = {
   filterFromLeafRows?: boolean
   filterFns?: TGenerics['FilterFns']
-  enableFilters?: boolean
+
   // Column
   manualColumnFiltering?: boolean
   onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
@@ -89,6 +86,7 @@ export type FiltersOptions<TGenerics extends TableGenerics> = {
   getColumnFilteredRowModel?: (
     instance: TableInstance<TGenerics>
   ) => () => RowModel<TGenerics>
+
   // Global
   manualGlobalFiltering?: boolean
   globalFilterFn?: FilterFnOption<TGenerics>
@@ -97,7 +95,7 @@ export type FiltersOptions<TGenerics extends TableGenerics> = {
   getGlobalFilteredRowModel?: (
     instance: TableInstance<TGenerics>
   ) => () => RowModel<TGenerics>
-  getColumnCanGlobalFilterFn?: (column: Column<TGenerics>) => boolean
+  getColumnCanGlobalFilter?: (column: Column<TGenerics>) => boolean
 }
 
 export type FiltersInstance<TGenerics extends TableGenerics> = {
@@ -132,7 +130,7 @@ export type FiltersInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Filters = {
+export const Filters: TableFeature = {
   getDefaultColumn: <
     TGenerics extends TableGenerics
   >(): FiltersColumnDef<TGenerics> => {
@@ -141,12 +139,13 @@ export const Filters = {
     }
   },
 
-  getInitialState: (): FiltersTableState => {
+  getInitialState: (state): FiltersTableState => {
     return {
       columnFilters: [],
       globalFilter: undefined,
       columnFiltersProgress: 1,
       globalFilterProgress: 1,
+      ...state,
     }
   },
 
@@ -158,7 +157,7 @@ export const Filters = {
       onGlobalFilterChange: makeStateUpdater('globalFilter', instance),
       filterFromLeafRows: true,
       globalFilterFn: 'auto',
-      getColumnCanGlobalFilterFn: column => {
+      getColumnCanGlobalFilter: column => {
         const value = instance
           .getCoreRowModel()
           .flatRows[0]?.getAllCellsByColumnId()[column.id]?.value
@@ -281,6 +280,8 @@ export const Filters = {
         const { filterFns: userFilterFns, globalFilterFn: globalFilterFn } =
           instance.options
 
+        debugger
+
         return isFunction(globalFilterFn)
           ? globalFilterFn
           : globalFilterFn === 'auto'
@@ -331,12 +332,8 @@ export const Filters = {
         }
 
         return (
-          column.enableAllFilters ??
-          column.enableColumnFilter ??
-          instance.options.enableFilters ??
-          instance.options.enableColumnFilters ??
-          column.defaultCanColumnFilter ??
-          column.defaultCanFilter ??
+          (column.enableColumnFilter ?? true) &&
+          (instance.options.enableColumnFilters ?? true) &&
           !!column.accessorFn
         )
       },
@@ -349,15 +346,10 @@ export const Filters = {
         }
 
         return (
-          ((instance.options.enableFilters ??
-            instance.options.enableGlobalFilter ??
-            column.enableAllFilters ??
-            column.enableGlobalFilter ??
-            column.defaultCanGlobalFilter ??
-            column.defaultCanFilter ??
-            !!column.accessorFn) &&
-            instance.options.getColumnCanGlobalFilterFn?.(column)) ??
-          true
+          (column.enableGlobalFilter ?? true) &&
+          (instance.options.enableGlobalFilter ?? true) &&
+          (instance.options.getColumnCanGlobalFilter?.(column) ?? true) &&
+          !!column.accessorFn
         )
       },
 

package/src/features/Grouping.ts

@@ -9,6 +9,7 @@ import {
   Updater,
   Renderable,
   TableGenerics,
+  TableFeature,
 } from '../types'
 import { isFunction, makeStateUpdater, Overwrite } from '../utils'
 
@@ -116,7 +117,7 @@ export type GroupingInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Grouping = {
+export const Grouping: TableFeature = {
   getDefaultColumn: <
     TGenerics extends TableGenerics
   >(): GroupingColumnDef<TGenerics> => {
@@ -125,9 +126,10 @@ export const Grouping = {
     }
   },
 
-  getInitialState: (): GroupingTableState => {
+  getInitialState: (state): GroupingTableState => {
     return {
       grouping: [],
+      ...state,
     }
   },
 
@@ -302,28 +304,28 @@ export const Grouping = {
       },
     }
   },
+}
 
-  orderColumns: <TGenerics extends TableGenerics>(
-    leafColumns: Column<TGenerics>[],
-    grouping: string[],
-    groupedColumnMode?: GroupingColumnMode
-  ) => {
-    if (!grouping?.length || !groupedColumnMode) {
-      return leafColumns
-    }
+export function orderColumns<TGenerics extends TableGenerics>(
+  leafColumns: Column<TGenerics>[],
+  grouping: string[],
+  groupedColumnMode?: GroupingColumnMode
+) {
+  if (!grouping?.length || !groupedColumnMode) {
+    return leafColumns
+  }
 
-    const nonGroupingColumns = leafColumns.filter(
-      col => !grouping.includes(col.id)
-    )
+  const nonGroupingColumns = leafColumns.filter(
+    col => !grouping.includes(col.id)
+  )
 
-    if (groupedColumnMode === 'remove') {
-      return nonGroupingColumns
-    }
+  if (groupedColumnMode === 'remove') {
+    return nonGroupingColumns
+  }
 
-    const groupingColumns = grouping
-      .map(g => leafColumns.find(col => col.id === g)!)
-      .filter(Boolean)
+  const groupingColumns = grouping
+    .map(g => leafColumns.find(col => col.id === g)!)
+    .filter(Boolean)
 
-    return [...groupingColumns, ...nonGroupingColumns]
-  },
+  return [...groupingColumns, ...nonGroupingColumns]
 }

package/src/features/Ordering.ts

@@ -6,9 +6,10 @@ import {
   Updater,
   Column,
   TableGenerics,
+  TableFeature,
 } from '../types'
 
-import { Grouping } from './Grouping'
+import { Grouping, orderColumns } from './Grouping'
 
 export type ColumnOrderTableState = {
   columnOrder: ColumnOrderState
@@ -34,10 +35,11 @@ export type ColumnOrderInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Ordering = {
-  getInitialState: (): ColumnOrderTableState => {
+export const Ordering: TableFeature = {
+  getInitialState: (state): ColumnOrderTableState => {
     return {
       columnOrder: [],
+      ...state,
     }
   },
 
@@ -95,11 +97,7 @@ export const Ordering = {
             orderedColumns = [...orderedColumns, ...columnsCopy]
           }
 
-          return Grouping.orderColumns(
-            orderedColumns,
-            grouping,
-            groupedColumnMode
-          )
+          return orderColumns(orderedColumns, grouping, groupedColumnMode)
         },
         {
           key: 'getOrderColumnsFn',

package/src/features/Pagination.ts

@@ -59,13 +59,14 @@ export type PaginationInstance<TGenerics extends TableGenerics> = {
 //
 
 export const Pagination: TableFeature = {
-  getInitialState: (initialState): PaginationTableState => {
+  getInitialState: (state): PaginationTableState => {
     return {
+      ...state,
       pagination: {
         pageCount: -1,
         pageIndex: 0,
         pageSize: 10,
-        ...initialState?.pagination,
+        ...state?.pagination,
       },
     }
   },

package/src/features/Pinning.ts

@@ -6,6 +6,7 @@ import {
   TableGenerics,
   Row,
   Cell,
+  TableFeature,
 } from '../types'
 import { makeStateUpdater, memo } from '../utils'
 
@@ -31,7 +32,6 @@ export type ColumnPinningDefaultOptions = {
 
 export type ColumnPinningColumnDef = {
   enablePinning?: boolean
-  defaultCanPin?: boolean
 }
 
 export type ColumnPinningColumn = {
@@ -47,12 +47,6 @@ export type ColumnPinningRow<TGenerics extends TableGenerics> = {
   getRightVisibleCells: () => Cell<TGenerics>[]
 }
 
-export type ColumnPinningCell<TGenerics extends TableGenerics> = {
-  getLeftVisibleCells: () => Cell<TGenerics>[]
-  getCenterVisibleCells: () => Cell<TGenerics>[]
-  getRightVisibleCells: () => Cell<TGenerics>[]
-}
-
 export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
   resetColumnPinning: () => void
@@ -68,13 +62,14 @@ export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Pinning = {
-  getInitialState: (): ColumnPinningTableState => {
+export const Pinning: TableFeature = {
+  getInitialState: (state): ColumnPinningTableState => {
     return {
       columnPinning: {
         left: [],
         right: [],
       },
+      ...state,
     }
   },
 
@@ -159,67 +154,6 @@ export const Pinning = {
     }
   },
 
-  createCell: <TGenerics extends TableGenerics>(
-    cell: Cell<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnPinningCell<TGenerics> => {
-    return {
-      getCenterVisibleCells: memo(
-        () => [
-          cell.row._getAllVisibleCells(),
-          instance.getState().columnPinning.left,
-          instance.getState().columnPinning.right,
-        ],
-        (allCells, left, right) => {
-          const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
-
-          return allCells.filter(d => !leftAndRight.includes(d.columnId))
-        },
-        {
-          key: 'row.getCenterVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getLeftVisibleCells: memo(
-        () => [
-          cell.row._getAllVisibleCells(),
-          instance.getState().columnPinning.left,
-          ,
-        ],
-        (allCells, left) => {
-          const cells = (left ?? [])
-            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
-            .filter(Boolean)
-            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
-
-          return cells
-        },
-        {
-          key: 'row.getLeftVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getRightVisibleCells: memo(
-        () => [
-          cell.row._getAllVisibleCells(),
-          instance.getState().columnPinning.right,
-        ],
-        (allCells, right) => {
-          const cells = (right ?? [])
-            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
-            .filter(Boolean)
-            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
-
-          return cells
-        },
-        {
-          key: 'row.getRightVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-    }
-  },
-
   createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnPinningInstance<TGenerics> => {
@@ -277,10 +211,8 @@ export const Pinning = {
 
         return leafColumns.some(
           d =>
-            d.enablePinning ??
-            instance.options.enablePinning ??
-            d.defaultCanPin ??
-            !!d.accessorFn
+            (d.enablePinning ?? true) &&
+            (instance.options.enablePinning ?? true)
         )
       },
 

package/src/features/RowSelection.ts

@@ -5,6 +5,7 @@ import {
   Row,
   RowModel,
   Updater,
+  TableFeature,
 } from '../types'
 import { makeStateUpdater, memo } from '../utils'
 
@@ -15,10 +16,10 @@ export type RowSelectionTableState = {
 }
 
 export type RowSelectionOptions<TGenerics extends TableGenerics> = {
-  onRowSelectionChange?: OnChangeFn<RowSelectionState>
   enableRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
   enableMultiRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
   enableSubRowSelection?: boolean | ((row: Row<TGenerics>) => boolean)
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>
   // enableGroupingRowSelection?:
   //   | boolean
   //   | ((
@@ -76,10 +77,11 @@ export type RowSelectionInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const RowSelection = {
-  getInitialState: (): RowSelectionTableState => {
+export const RowSelection: TableFeature = {
+  getInitialState: (state): RowSelectionTableState => {
     return {
       rowSelection: {},
+      ...state,
     }
   },
 

package/src/features/Sorting.ts

@@ -12,6 +12,7 @@ import {
   TableInstance,
   Row,
   Updater,
+  TableFeature,
 } from '../types'
 
 import { isFunction, makeStateUpdater, Overwrite } from '../utils'
@@ -108,18 +109,19 @@ export type SortingInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Sorting = {
-  getDefaultColumn: <
-    TGenerics extends TableGenerics
-  >(): SortingColumnDef<TGenerics> => {
+export const Sorting: TableFeature = {
+  getInitialState: (state): SortingTableState => {
     return {
-      sortingFn: 'auto',
+      sorting: [],
+      ...state,
     }
   },
 
-  getInitialState: (): SortingTableState => {
+  getDefaultColumn: <
+    TGenerics extends TableGenerics
+  >(): SortingColumnDef<TGenerics> => {
     return {
-      sorting: [],
+      sortingFn: 'auto',
     }
   },
 

package/src/features/Visibility.ts

@@ -6,6 +6,7 @@ import {
   TableInstance,
   Updater,
   Row,
+  TableFeature,
 } from '../types'
 import { makeStateUpdater, memo } from '../utils'
 
@@ -62,10 +63,11 @@ export type VisibilityColumn = {
 
 //
 
-export const Visibility = {
-  getInitialState: (): VisibilityTableState => {
+export const Visibility: TableFeature = {
+  getInitialState: (state): VisibilityTableState => {
     return {
       columnVisibility: {},
+      ...state,
     }
   },