@tanstack/table-core 8.0.0-alpha.28 → 8.0.0-alpha.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.28",
+  "version": "8.0.0-alpha.34",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",
@@ -14,6 +14,8 @@
   },
   "keywords": [
     "react",
+    "vue",
+    "solid",
     "table",
     "table-core",
     "datagrid"

package/src/aggregationTypes.ts

@@ -72,7 +72,7 @@ function extent(
   return [min, max]
 }
 
-function mean(getLeafValues: () => unknown[]) {
+export function mean(getLeafValues: () => unknown[]) {
   let count = 0
   let sum = 0
 

package/src/core.tsx

@@ -46,6 +46,8 @@ import { RowSelection } from './features/RowSelection'
 import { Sorting } from './features/Sorting'
 import { Visibility } from './features/Visibility'
 import { Headers } from './features/Headers'
+import { mean } from './aggregationTypes'
+import React from 'react'
 
 const features: TableFeature[] = [
   Headers,
@@ -61,12 +63,19 @@ const features: TableFeature[] = [
   ColumnSizing,
 ]
 
+export type CoreTableState = {
+  coreProgress: number
+}
+
 export type CoreOptions<TGenerics extends AnyGenerics> = {
   data: TGenerics['Row'][]
   columns: ColumnDef<TGenerics>[]
   state: Partial<TableState>
   onStateChange: (updater: Updater<TableState>) => void
   render: TGenerics['Render']
+  getCoreRowModel: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
   debugAll?: boolean
   debugTable?: boolean
   debugHeaders?: boolean
@@ -84,6 +93,11 @@ export type CoreOptions<TGenerics extends AnyGenerics> = {
     parent?: Row<TGenerics>
   ) => string
   autoResetAll?: boolean
+  mergeOptions?: (
+    defaultOptions: TableFeature,
+    options: Partial<Options<TGenerics>>
+  ) => Options<TGenerics>
+  meta?: TGenerics['TableMeta']
 }
 
 export type TableCore<TGenerics extends AnyGenerics> = {
@@ -91,6 +105,8 @@ export type TableCore<TGenerics extends AnyGenerics> = {
   reset: () => void
   options: RequiredKeys<Options<TGenerics>, 'state'>
   setOptions: (newOptions: Updater<Options<TGenerics>>) => void
+  queue: (cb: () => void) => void
+  willUpdate: () => void
   getRowId: (
     _: TGenerics['Row'],
     index: number,
@@ -124,6 +140,7 @@ export type TableCore<TGenerics extends AnyGenerics> = {
     values: Record<string, any>
   ) => Row<TGenerics>
   getCoreRowModel: () => RowModel<TGenerics>
+  _getCoreRowModel?: () => RowModel<TGenerics>
   getRowModel: () => RowModel<TGenerics>
   getRow: (id: string) => Row<TGenerics>
   getCell: (rowId: string, columnId: string) => Cell<TGenerics>
@@ -146,6 +163,7 @@ export type TableCore<TGenerics extends AnyGenerics> = {
     template: Renderable<TGenerics, TProps>,
     props: TProps
   ) => string | null | ReturnType<UseRenderer<TGenerics>>
+  getOverallProgress: () => number
 }
 
 export type CoreRow<TGenerics extends AnyGenerics> = {
@@ -232,26 +250,54 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
 
   instance.options = buildOptions(options)
 
+  const coreInitialState: CoreTableState = {
+    coreProgress: 1,
+  }
+
   const initialState = {
+    ...coreInitialState,
     ...features.reduce((obj, feature) => {
       return Object.assign(obj, feature.getInitialState?.())
     }, {}),
     ...(options.initialState ?? {}),
   } as TableState
 
+  const queued: (() => void)[] = []
+  let queuedTimeout: NodeJS.Timeout
+
   const finalInstance: TableInstance<TGenerics> = {
     ...instance,
     ...features.reduce((obj, feature) => {
       return Object.assign(obj, feature.getInstance?.(instance))
     }, {}),
+    queue: cb => {
+      queued.push(cb)
+      if (!queuedTimeout) {
+        queuedTimeout = setTimeout(() => {
+          instance.setState(old => ({ ...old }))
+        })
+      }
+    },
+    willUpdate: () => {
+      clearTimeout(queuedTimeout)
+      while (queued.length) {
+        queued.shift()!()
+      }
+    },
     initialState,
     reset: () => {
       instance.setState(instance.initialState)
     },
     setOptions: updater => {
-      instance.options = buildOptions(
-        functionalUpdate(updater, instance.options)
-      )
+      const newOptions = functionalUpdate(updater, instance.options)
+      if (instance.options.mergeOptions) {
+        instance.options = instance.options.mergeOptions(
+          defaultOptions,
+          newOptions
+        )
+      } else {
+        instance.options = buildOptions(newOptions)
+      }
     },
     render: (template, props) => {
       if (typeof instance.options.render === 'function') {
@@ -557,103 +603,13 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
       return row as Row<TGenerics>
     },
 
-    getCoreRowModel: memo(
-      () => [instance.options.data],
-      (
-        data
-      ): {
-        rows: Row<TGenerics>[]
-        flatRows: Row<TGenerics>[]
-        rowsById: Record<string, Row<TGenerics>>
-      } => {
-        // Access the row model using initial columns
-        const rows: Row<TGenerics>[] = []
-        const flatRows: Row<TGenerics>[] = []
-        const rowsById: Record<string, Row<TGenerics>> = {}
-
-        const leafColumns = instance.getAllLeafColumns()
-
-        const accessRow = (
-          originalRow: TGenerics['Row'],
-          rowIndex: number,
-          depth = 0,
-          parentRows: Row<TGenerics>[],
-          parent?: Row<TGenerics>
-        ) => {
-          const id = instance.getRowId(originalRow, rowIndex, parent)
-
-          if (!id) {
-            if (process.env.NODE_ENV !== 'production') {
-              throw new Error(`getRowId expected an ID, but got ${id}`)
-            }
-          }
-
-          const values: Record<string, any> = {}
-
-          for (let i = 0; i < leafColumns.length; i++) {
-            const column = leafColumns[i]
-            if (column && column.accessorFn) {
-              values[column.id] = column.accessorFn(originalRow, rowIndex)
-            }
-          }
-
-          // Make the row
-          const row = instance.createRow(
-            id,
-            originalRow,
-            rowIndex,
-            depth,
-            values
-          )
-
-          // Push instance row into the parentRows array
-          parentRows.push(row)
-          // Keep track of every row in a flat array
-          flatRows.push(row)
-          // Also keep track of every row by its ID
-          rowsById[id] = row
-
-          // Get the original subrows
-          if (instance.options.getSubRows) {
-            const originalSubRows = instance.options.getSubRows(
-              originalRow,
-              rowIndex
-            )
-
-            // Then recursively access them
-            if (originalSubRows?.length) {
-              row.originalSubRows = originalSubRows
-              const subRows: Row<TGenerics>[] = []
-
-              for (let i = 0; i < row.originalSubRows.length; i++) {
-                accessRow(
-                  row.originalSubRows[i] as TGenerics['Row'],
-                  i,
-                  depth + 1,
-                  subRows,
-                  row
-                )
-              }
-              row.subRows = subRows
-            }
-          }
-        }
-
-        for (let i = 0; i < data.length; i++) {
-          accessRow(data[i] as TGenerics['Row'], i, 0, rows)
-        }
-
-        return { rows, flatRows, rowsById }
-      },
-      {
-        key: 'getRowModel',
-        debug: () => instance.options.debugAll ?? instance.options.debugTable,
-        onChange: () => {
-          instance._notifyFiltersReset()
-          instance._notifyRowSelectionReset()
-        },
+    getCoreRowModel: () => {
+      if (!instance._getCoreRowModel) {
+        instance._getCoreRowModel = instance.options.getCoreRowModel(instance)
       }
-    ),
+
+      return instance._getCoreRowModel()
+    },
 
     // The final calls start at the bottom of the model,
     // expanded rows, which then work their way up
@@ -764,6 +720,17 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
       instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
         return sum + header.getWidth()
       }, 0) ?? 0,
+
+    getOverallProgress: () => {
+      const { coreProgress, columnFiltersProgress, globalFilterProgress } =
+        instance.getState()
+
+      return mean(() =>
+        [coreProgress, columnFiltersProgress, globalFilterProgress].filter(
+          d => d < 1
+        )
+      ) as number
+    },
   }
 
   instance = Object.assign(instance, finalInstance)

package/src/createTable.tsx

@@ -14,13 +14,9 @@ export type CreateTableFactory<TGenerics extends AnyGenerics> = <
   TSubGenerics extends {
     Row: any
     ColumnMeta?: object
+    TableMeta?: object
   }
->() => Table<
-  Overwrite<
-    TGenerics,
-    { Row: TSubGenerics['Row']; ColumnMeta: TSubGenerics['ColumnMeta'] }
-  >
->
+>() => Table<Overwrite<TGenerics, TSubGenerics>>
 
 export type CreateTableFactoryOptions<
   TRender extends AnyRender,

package/src/features/Expanding.ts

@@ -31,10 +31,9 @@ export type ExpandedOptions<TGenerics extends AnyGenerics> = {
   onExpandedChange?: OnChangeFn<ExpandedState>
   autoResetExpanded?: boolean
   enableExpanded?: boolean
-  expandRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    rowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
+  getExpandedRowModel?: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
   expandSubRows?: boolean
   defaultCanExpand?: boolean
   getIsRowExpanded?: (row: Row<TGenerics>) => boolean
@@ -66,6 +65,7 @@ export type ExpandedInstance<TGenerics extends AnyGenerics> = {
   getIsAllRowsExpanded: () => boolean
   getExpandedDepth: () => number
   getExpandedRowModel: () => RowModel<TGenerics>
+  _getExpandedRowModel?: () => RowModel<TGenerics>
   getPreExpandedRowModel: () => RowModel<TGenerics>
 }
 
@@ -96,6 +96,8 @@ export const Expanding = {
 
     return {
       _notifyExpandedReset: () => {
+        instance._notifyPageIndexReset()
+
         if (!registered) {
           registered = true
           return
@@ -211,7 +213,7 @@ export const Expanding = {
           title: canExpand ? 'Toggle Expanded' : undefined,
           onClick: canExpand
             ? (e: MouseEvent | TouchEvent) => {
-                e.persist()
+                e.persist?.()
                 instance.toggleRowExpanded(rowId)
               }
             : undefined,
@@ -223,7 +225,7 @@ export const Expanding = {
         const initialProps: ToggleExpandedProps = {
           title: 'Toggle All Expanded',
           onClick: (e: MouseEvent | TouchEvent) => {
-            e.persist()
+            e.persist?.()
             instance.toggleAllRowsExpanded()
           },
         }
@@ -269,32 +271,22 @@ export const Expanding = {
 
         return maxDepth
       },
-      getExpandedRowModel: memo(
-        () => [
-          instance.getState().expanded,
-          instance.getGroupedRowModel(),
-          instance.options.expandRowsFn,
-          instance.options.paginateExpandedRows,
-        ],
-        (expanded, rowModel, expandRowsFn, paginateExpandedRows) => {
-          if (
-            !expandRowsFn ||
-            // Do not expand if rows are not included in pagination
-            !paginateExpandedRows ||
-            (expanded !== true && !Object.keys(expanded ?? {}).length)
-          ) {
-            return rowModel
-          }
+      getPreExpandedRowModel: () => instance.getGroupedRowModel(),
+      getExpandedRowModel: () => {
+        if (
+          !instance._getExpandedRowModel &&
+          instance.options.getExpandedRowModel
+        ) {
+          instance._getExpandedRowModel =
+            instance.options.getExpandedRowModel(instance)
+        }
 
-          return expandRowsFn(instance, rowModel)
-        },
-        {
-          key: 'getExpandedRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        if (!instance._getExpandedRowModel) {
+          return instance.getPreExpandedRowModel()
         }
-      ),
 
-      getPreExpandedRowModel: () => instance.getGroupedRowModel(),
+        return instance._getExpandedRowModel()
+      },
     }
   },
 

package/src/features/Filters.ts

@@ -42,6 +42,8 @@ export type CustomFilterTypes<TGenerics extends AnyGenerics> = Record<
 export type FiltersTableState = {
   columnFilters: ColumnFiltersState
   globalFilter: any
+  columnFiltersProgress: number
+  globalFilterProgress: number
 }
 
 export type FilterType<TGenerics extends AnyGenerics> =
@@ -81,20 +83,18 @@ export type FiltersOptions<TGenerics extends AnyGenerics> = {
   onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
   autoResetColumnFilters?: boolean
   enableColumnFilters?: boolean
-  columnFilterRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    coreRowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
+  getColumnFilteredRowModel?: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
   // Global
   globalFilterType?: FilterType<TGenerics>
   onGlobalFilterChange?: OnChangeFn<any>
   enableGlobalFilters?: boolean
   autoResetGlobalFilter?: boolean
   enableGlobalFilter?: boolean
-  globalFilterRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    rowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
+  getGlobalFilteredRowModel?: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
   getColumnCanGlobalFilterFn?: (column: Column<TGenerics>) => boolean
 }
 
@@ -120,6 +120,7 @@ export type FiltersInstance<TGenerics extends AnyGenerics> = {
   // Column Filters
   getPreColumnFilteredRowModel: () => RowModel<TGenerics>
   getColumnFilteredRowModel: () => RowModel<TGenerics>
+  _getColumnFilteredRowModel?: () => RowModel<TGenerics>
 
   // Global Filters
   setGlobalFilter: (updater: Updater<any>) => void
@@ -129,6 +130,7 @@ export type FiltersInstance<TGenerics extends AnyGenerics> = {
   getColumnCanGlobalFilter: (columnId: string) => boolean
   getPreGlobalFilteredRowModel: () => RowModel<TGenerics>
   getGlobalFilteredRowModel: () => RowModel<TGenerics>
+  _getGlobalFilteredRowModel?: () => RowModel<TGenerics>
 }
 
 //
@@ -146,6 +148,8 @@ export const Filters = {
     return {
       columnFilters: [],
       globalFilter: undefined,
+      columnFiltersProgress: 1,
+      globalFilterProgress: 1,
     }
   },
 
@@ -235,6 +239,8 @@ export const Filters = {
 
     return {
       _notifyFiltersReset: () => {
+        instance._notifySortingReset()
+
         if (!registered) {
           registered = true
           return
@@ -244,15 +250,18 @@ export const Filters = {
           return
         }
 
-        if (instance.options.autoResetAll === true) {
-          instance.resetSorting()
-        } else {
-          if (instance.options.autoResetColumnFilters) {
-            instance.resetColumnFilters()
-          }
-          if (instance.options.autoResetGlobalFilter) {
-            instance.resetGlobalFilter()
-          }
+        if (
+          instance.options.autoResetAll === true ||
+          instance.options.autoResetColumnFilters
+        ) {
+          instance.resetColumnFilters()
+        }
+
+        if (
+          instance.options.autoResetAll === true ||
+          instance.options.autoResetGlobalFilter
+        ) {
+          instance.resetGlobalFilter()
         }
       },
       getColumnAutoFilterFn: columnId => {
@@ -350,7 +359,7 @@ export const Filters = {
       },
 
       resetGlobalFilter: () => {
-        instance.setGlobalFilter(undefined)
+        instance.setGlobalFilter(instance.initialState.globalFilter)
       },
 
       getColumnCanColumnFilter: columnId => {
@@ -462,93 +471,37 @@ export const Filters = {
 
       getPreFilteredRowModel: () => instance.getCoreRowModel(),
       getPreColumnFilteredRowModel: () => instance.getCoreRowModel(),
-      getColumnFilteredRowModel: memo(
-        () => [
-          instance.getState().columnFilters,
-          instance.getCoreRowModel(),
-          instance.options.columnFilterRowsFn,
-        ],
-        (columnFilters, rowModel, columnFiltersFn) => {
-          const columnFilteredRowModel = (() => {
-            if (!columnFilters?.length || !columnFiltersFn) {
-              return rowModel
-            }
-
-            return columnFiltersFn(instance as any, rowModel)
-          })()
-
-          // Now that each filtered column has it's partially filtered rows,
-          // lets assign the final filtered rows to all of the other columns
-          const nonFilteredColumns = instance
-            .getAllLeafColumns()
-            .filter(
-              column =>
-                !instance
-                  .getState()
-                  .columnFilters?.find(d => d.id === column.id)
-            )
-
-          // This essentially enables faceted filter options to be built easily
-          // using every column's preFilteredRows value
-
-          nonFilteredColumns.forEach(column => {
-            column.getPreFilteredRows = () => columnFilteredRowModel.rows
-          })
-
-          return columnFilteredRowModel
-        },
-        {
-          key: 'getColumnFilteredRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
+      getColumnFilteredRowModel: () => {
+        if (
+          !instance._getColumnFilteredRowModel &&
+          instance.options.getColumnFilteredRowModel
+        ) {
+          instance._getColumnFilteredRowModel =
+            instance.options.getColumnFilteredRowModel(instance)
         }
-      ),
-      getPreGlobalFilteredRowModel: () => instance.getColumnFilteredRowModel(),
-      getGlobalFilteredRowModel: memo(
-        () => [
-          instance.getState().globalFilter,
-          instance.getColumnFilteredRowModel(),
-          instance.options.globalFilterRowsFn,
-        ],
-        (globalFilterValue, columnFilteredRowModel, globalFiltersFn) => {
-          const globalFilteredRowModel = (() => {
-            if (!globalFiltersFn || !globalFilterValue) {
-              return columnFilteredRowModel
-            }
 
-            return globalFiltersFn(
-              instance as TableInstance<TGenerics>,
-              columnFilteredRowModel
-            )
-          })()
-
-          // Now that each filtered column has it's partially filtered rows,
-          // lets assign the final filtered rows to all of the other columns
-          const nonFilteredColumns = instance
-            .getAllLeafColumns()
-            .filter(
-              column =>
-                !instance
-                  .getState()
-                  .columnFilters?.find(d => d.id === column.id)
-            )
-
-          // This essentially enables faceted filter options to be built easily
-          // using every column's preFilteredRows value
+        if (!instance._getColumnFilteredRowModel) {
+          return instance.getPreColumnFilteredRowModel()
+        }
 
-          nonFilteredColumns.forEach(column => {
-            column.getPreFilteredRows = () => globalFilteredRowModel.rows
-          })
+        return instance._getColumnFilteredRowModel()
+      },
+      getPreGlobalFilteredRowModel: () => instance.getColumnFilteredRowModel(),
+      getGlobalFilteredRowModel: () => {
+        if (
+          !instance._getGlobalFilteredRowModel &&
+          instance.options.getGlobalFilteredRowModel
+        ) {
+          instance._getGlobalFilteredRowModel =
+            instance.options.getGlobalFilteredRowModel(instance)
+        }
 
-          return globalFilteredRowModel
-        },
-        {
-          key: 'getGlobalFilteredRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => {
-            instance._notifySortingReset()
-          },
+        if (!instance._getGlobalFilteredRowModel) {
+          return instance.getPreGlobalFilteredRowModel()
         }
-      ),
+
+        return instance._getGlobalFilteredRowModel()
+      },
     }
   },
 }

package/src/features/Grouping.ts

@@ -99,10 +99,9 @@ export type GroupingOptions<TGenerics extends AnyGenerics> = {
   autoResetGrouping?: boolean
   enableGrouping?: boolean
   enableGroupingRemoval?: boolean
-  groupRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    rowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
+  getGroupedRowModel?: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
 
   groupedColumnMode?: false | 'reorder' | 'remove'
 }
@@ -135,6 +134,7 @@ export type GroupingInstance<TGenerics extends AnyGenerics> = {
   getRowIsGrouped: (rowId: string) => boolean
   getPreGroupedRowModel: () => RowModel<TGenerics>
   getGroupedRowModel: () => RowModel<TGenerics>
+  _getGroupedRowModel?: () => RowModel<TGenerics>
 }
 
 //
@@ -186,6 +186,8 @@ export const Grouping = {
 
     return {
       _notifyGroupingReset: () => {
+        instance._notifyExpandedReset()
+
         if (!registered) {
           registered = true
           return
@@ -300,25 +302,21 @@ export const Grouping = {
       getRowIsGrouped: rowId => !!instance.getRow(rowId)?.groupingColumnId,
 
       getPreGroupedRowModel: () => instance.getSortedRowModel(),
-      getGroupedRowModel: memo(
-        () => [
-          instance.getState().grouping,
-          instance.getSortedRowModel(),
-          instance.options.groupRowsFn,
-        ],
-        (grouping, rowModel, groupRowsFn) => {
-          if (!groupRowsFn || !grouping.length) {
-            return rowModel
-          }
+      getGroupedRowModel: () => {
+        if (
+          !instance._getGroupedRowModel &&
+          instance.options.getGroupedRowModel
+        ) {
+          instance._getGroupedRowModel =
+            instance.options.getGroupedRowModel(instance)
+        }
 
-          return groupRowsFn(instance, rowModel)
-        },
-        {
-          key: 'getGroupedRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => instance._notifyExpandedReset(),
+        if (!instance._getGroupedRowModel) {
+          return instance.getPreGroupedRowModel()
         }
-      ),
+
+        return instance._getGroupedRowModel()
+      },
     }
   },