@tanstack/table-core 8.0.0-alpha.67 → 8.0.0-alpha.70

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.67",
+  "version": "8.0.0-alpha.70",
   "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

@@ -26,10 +26,9 @@ import { Sorting } from './features/Sorting'
 import { Visibility } from './features/Visibility'
 import { Headers } from './features/Headers'
 //
-import { mean } from './aggregationFns'
 
 export type CoreTableState = {
-  coreProgress: number
+  // coreProgress: number
 }
 
 export type CoreOptions<TGenerics extends TableGenerics> = {
@@ -45,27 +44,52 @@ export type CoreOptions<TGenerics extends TableGenerics> = {
   initialState?: InitialTableState
   autoResetAll?: boolean
   mergeOptions?: <T>(defaultOptions: T, options: Partial<T>) => T
+  keepPreviousData?: boolean
   meta?: TGenerics['TableMeta']
 }
 
-export type TableCore<TGenerics extends TableGenerics> = {
+export type CoreInstance<TGenerics extends TableGenerics> = {
   // generics: TGenerics
   initialState: TableState
   reset: () => void
   options: RequiredKeys<TableOptions<TGenerics>, 'state'>
   setOptions: (newOptions: Updater<TableOptions<TGenerics>>) => void
   queue: (cb: () => void) => void
-  // willUpdate: () => void
   getState: () => TableState
   setState: (updater: Updater<TableState>) => void
   render: <TProps>(
     template: Renderable<TGenerics, TProps>,
     props: TProps
   ) => string | null | TGenerics['Rendered']
-  getOverallProgress: () => number
+  // getOverallProgress: () => number
+  // getProgressStage: () =>
+  //   | undefined
+  //   | 'coreRowModel'
+  //   | 'filteredRowModel'
+  //   | 'facetedRowModel'
   _features: readonly TableFeature[]
+  // createBatch: (priority: keyof CoreBatches) => Batch
+  // init: () => void
+  // willUpdate: () => void
+  // destroy: () => void
+  // batches: CoreBatches
 }
 
+// export type Batch = {
+//   id: number
+//   priority: keyof CoreBatches
+//   tasks: (() => void)[]
+//   schedule: (cb: () => void) => void
+//   cancel: () => void
+// }
+
+// type CoreBatches = {
+//   data: Batch[]
+//   facets: Batch[]
+// }
+
+// export type TaskPriority = keyof CoreBatches
+
 export function createTableInstance<TGenerics extends TableGenerics>(
   options: TableOptions<TGenerics>
 ): TableInstance<TGenerics> {
@@ -73,24 +97,24 @@ export function createTableInstance<TGenerics extends TableGenerics>(
     console.info('Creating Table Instance...')
   }
 
-  let instance = {} as TableInstance<TGenerics>
-
-  instance._features = [
-    Columns,
-    Rows,
-    Cells,
-    Headers,
-    Visibility,
-    Ordering,
-    Pinning,
-    Filters,
-    Sorting,
-    Grouping,
-    Expanding,
-    Pagination,
-    RowSelection,
-    ColumnSizing,
-  ] as const
+  let instance = {
+    _features: [
+      Columns,
+      Rows,
+      Cells,
+      Headers,
+      Visibility,
+      Ordering,
+      Pinning,
+      Filters,
+      Sorting,
+      Grouping,
+      Expanding,
+      Pagination,
+      RowSelection,
+      ColumnSizing,
+    ] as const,
+  } as unknown as CoreInstance<TGenerics>
 
   const defaultOptions = instance._features.reduce((obj, feature) => {
     return Object.assign(obj, feature.getDefaultOptions?.(instance))
@@ -107,13 +131,8 @@ export function createTableInstance<TGenerics extends TableGenerics>(
     }
   }
 
-  instance.options = {
-    ...defaultOptions,
-    ...options,
-  }
-
   const coreInitialState: CoreTableState = {
-    coreProgress: 1,
+    // coreProgress: 1,
   }
 
   let initialState = {
@@ -128,11 +147,90 @@ export function createTableInstance<TGenerics extends TableGenerics>(
   const queued: (() => void)[] = []
   let queuedTimeout = false
 
-  const finalInstance: TableInstance<TGenerics> = {
+  // let workScheduled = false
+  // let working = false
+  // let latestCallback: ReturnType<typeof requestIdleCallback>
+  // let batchUid = 0
+  // const onProgress = () => {}
+  // const getBatch = () => {
+  //   instance.batches.data = instance.batches.data.filter(d => d.tasks.length)
+  //   instance.batches.facets = instance.batches.facets.filter(
+  //     d => d.tasks.length
+  //   )
+
+  //   return (
+  //     instance.batches.data.find(d => d.tasks.length) ??
+  //     instance.batches.facets.find(d => d.tasks.length)
+  //   )
+  // }
+
+  // const startWorkLoop = () => {
+  //   working = true
+
+  //   const workLoop = (deadline: IdleDeadline) => {
+  //     const batch = getBatch()
+
+  //     if (!batch) {
+  //       working = false
+  //       return
+  //     }
+  //     // Prioritize tasks
+  //     while (deadline.timeRemaining() > 0 && batch.tasks.length) {
+  //       batch.tasks.shift()!()
+  //     }
+
+  //     onProgress()
+
+  //     if (working) {
+  //       latestCallback = requestIdleCallback(workLoop, { timeout: 10000 })
+  //     }
+  //   }
+
+  //   latestCallback = requestIdleCallback(workLoop, { timeout: 10000 })
+  // }
+
+  // const startWork = () => {
+  //   if (getBatch() && !working) {
+  //     if (
+  //       (process.env.NODE_ENV === 'development' && instance.options.debugAll) ??
+  //       instance.options.debugTable
+  //     ) {
+  //       console.info('Starting work...')
+  //     }
+  //     startWorkLoop()
+  //   }
+  // }
+
+  // const stopWork = () => {
+  //   if (working) {
+  //     if (
+  //       (process.env.NODE_ENV === 'development' && instance.options.debugAll) ??
+  //       instance.options.debugTable
+  //     ) {
+  //       console.info('Stopping work...')
+  //     }
+
+  //     working = false
+  //     cancelIdleCallback(latestCallback)
+  //   }
+  // }
+
+  const midInstance: CoreInstance<TGenerics> = {
     ...instance,
-    ...(instance._features.reduce((obj, feature) => {
-      return Object.assign(obj, feature.createInstance?.(instance))
-    }, {}) as unknown as TableInstance<TGenerics>),
+    // init: () => {
+    //   startWork()
+    // },
+    // willUpdate: () => {
+    //   startWork()
+    // },
+    // destroy: () => {
+    //   stopWork()
+    // },
+    options: {
+      ...defaultOptions,
+      ...options,
+    },
+    initialState,
     queue: cb => {
       queued.push(cb)
 
@@ -155,7 +253,43 @@ export function createTableInstance<TGenerics extends TableGenerics>(
           )
       }
     },
-    initialState,
+    // batches: {
+    //   data: [],
+    //   facets: [],
+    // },
+    // createBatch: priority => {
+    //   const batchId = batchUid++
+    //   let canceled: boolean
+
+    //   const batch: Batch = {
+    //     id: batchId,
+    //     priority,
+    //     tasks: [],
+    //     schedule: cb => {
+    //       if (canceled) return
+    //       batch.tasks.push(cb)
+
+    //       if (!working && !workScheduled) {
+    //         workScheduled = true
+    //         instance.queue(() => {
+    //           workScheduled = false
+    //           instance.setState(old => ({ ...old }))
+    //         })
+    //       }
+    //     },
+    //     cancel: () => {
+    //       canceled = true
+    //       batch.tasks = []
+    //       instance.batches[priority] = instance.batches[priority].filter(
+    //         b => b.id !== batchId
+    //       )
+    //     },
+    //   }
+
+    //   instance.batches[priority].push(batch)
+
+    //   return batch
+    // },
     reset: () => {
       instance.setState(instance.initialState)
     },
@@ -183,19 +317,37 @@ export function createTableInstance<TGenerics extends TableGenerics>(
       instance.options.onStateChange?.(updater)
     },
 
-    getOverallProgress: () => {
-      const { coreProgress, columnFiltersProgress, globalFilterProgress } =
-        instance.getState()
+    // getOverallProgress: () => {
+    //   const { coreProgress, filtersProgress, facetProgress } =
+    //     instance.getState()
 
-      return mean(() =>
-        [coreProgress, columnFiltersProgress, globalFilterProgress].filter(
-          d => d < 1
-        )
-      ) as number
-    },
+    //   return mean(() =>
+    //     [coreProgress, filtersProgress].filter(d => d < 1)
+    //   ) as number
+    // },
+    // getProgressStage: () => {
+    //   const { coreProgress, filtersProgress, facetProgress } =
+    //     instance.getState()
+
+    //   if (coreProgress < 1) {
+    //     return 'coreRowModel'
+    //   }
+
+    //   if (filtersProgress < 1) {
+    //     return 'filteredRowModel'
+    //   }
+
+    //   if (Object.values(facetProgress).some(d => d < 1)) {
+    //     return 'facetedRowModel'
+    //   }
+    // },
   }
 
-  instance = Object.assign(instance, finalInstance)
+  instance = Object.assign(instance, midInstance)
+
+  instance._features.forEach(feature => {
+    return Object.assign(instance, feature.createInstance?.(instance))
+  })
 
-  return instance
+  return instance as TableInstance<TGenerics>
 }

package/src/features/Cells.ts

@@ -17,7 +17,7 @@ export type CellsInstance<TGenerics extends TableGenerics> = {
   createCell: (
     row: Row<TGenerics>,
     column: Column<TGenerics>,
-    value: any
+    columnId: string
   ) => Cell<TGenerics>
   getCell: (rowId: string, columnId: string) => Cell<TGenerics>
 }
@@ -34,15 +34,11 @@ export const Cells = {
         () => [instance.getAllLeafColumns()],
         leafColumns => {
           return leafColumns.map(column => {
-            return instance.createCell(
-              row as Row<TGenerics>,
-              column,
-              row.values[column.id]
-            )
+            return instance.createCell(row as Row<TGenerics>, column, column.id)
           })
         },
         {
-          key: process.env.NODE_ENV === 'development' ? 'row.getAllCells' : '',
+          key: process.env.NODE_ENV === 'development' && 'row.getAllCells',
           debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
@@ -69,14 +65,14 @@ export const Cells = {
     instance: TableInstance<TGenerics>
   ): CellsInstance<TGenerics> => {
     return {
-      createCell: (row, column, value) => {
+      createCell: (row, column, columnId) => {
         const cell: CoreCell<TGenerics> = {
           id: `${row.id}_${column.id}`,
           rowId: row.id,
-          columnId: column.id,
+          columnId,
           row,
           column,
-          value,
+          getValue: () => row.getValue(columnId),
           renderCell: () =>
             column.cell
               ? instance.render(column.cell, {
@@ -84,7 +80,7 @@ export const Cells = {
                   column,
                   row,
                   cell: cell as Cell<TGenerics>,
-                  value,
+                  getValue: cell.getValue,
                 })
               : null,
         }

package/src/features/ColumnSizing.ts

@@ -46,8 +46,8 @@ export type ColumnSizingDefaultOptions = {
 export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
   setColumnSizing: (updater: Updater<ColumnSizingState>) => void
   setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
-  resetColumnSizing: () => void
-  resetHeaderSizeInfo: () => void
+  resetColumnSizing: (defaultState?: boolean) => void
+  resetHeaderSizeInfo: (defaultState?: boolean) => void
   getTotalSize: () => number
   getLeftTotalSize: () => number
   getCenterTotalSize: () => number
@@ -83,6 +83,15 @@ export const defaultColumnSizing = {
   maxSize: Number.MAX_SAFE_INTEGER,
 }
 
+const getDefaultColumnSizingInfoState = (): ColumnSizingInfoState => ({
+  startOffset: null,
+  startSize: null,
+  deltaOffset: null,
+  deltaPercentage: null,
+  isResizingColumn: false,
+  columnSizingStart: [],
+})
+
 export const ColumnSizing: TableFeature = {
   getDefaultColumn: (): ColumnSizingColumnDef => {
     return defaultColumnSizing
@@ -90,14 +99,7 @@ export const ColumnSizing: TableFeature = {
   getInitialState: (state): ColumnSizingTableState => {
     return {
       columnSizing: {},
-      columnSizingInfo: {
-        startOffset: null,
-        startSize: null,
-        deltaOffset: null,
-        deltaPercentage: null,
-        isResizingColumn: false,
-        columnSizingStart: [],
-      },
+      columnSizingInfo: getDefaultColumnSizingInfoState(),
       ...state,
     }
   },
@@ -138,7 +140,7 @@ export const ColumnSizing: TableFeature = {
         const index = columns.findIndex(d => d.id === column.id)
 
         if (index > 0) {
-          const prevSiblingColumn = columns[index - 1]
+          const prevSiblingColumn = columns[index - 1]!
 
           return (
             prevSiblingColumn.getStart(position) + prevSiblingColumn.getSize()
@@ -188,7 +190,8 @@ export const ColumnSizing: TableFeature = {
       },
       getStart: () => {
         if (header.index > 0) {
-          const prevSiblingHeader = header.headerGroup.headers[header.index - 1]
+          const prevSiblingHeader =
+            header.headerGroup.headers[header.index - 1]!
           return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
         }
 
@@ -221,7 +224,7 @@ export const ColumnSizing: TableFeature = {
             : [[column.id, column.getSize()]]
 
           const clientX = isTouchStartEvent(e)
-            ? Math.round(e.touches[0].clientX)
+            ? Math.round(e.touches[0]!.clientX)
             : (e as MouseEvent).clientX
 
           const updateOffset = (
@@ -298,7 +301,7 @@ export const ColumnSizing: TableFeature = {
                 e.preventDefault()
                 e.stopPropagation()
               }
-              onMove(e.touches[0].clientX)
+              onMove(e.touches[0]!.clientX)
               return false
             },
             upHandler: (e: TouchEvent) => {
@@ -308,7 +311,7 @@ export const ColumnSizing: TableFeature = {
                 e.preventDefault()
                 e.stopPropagation()
               }
-              onEnd(e.touches[0].clientX)
+              onEnd(e.touches[0]!.clientX)
             },
           }
 
@@ -352,12 +355,17 @@ export const ColumnSizing: TableFeature = {
         instance.options.onColumnSizingChange?.(updater),
       setColumnSizingInfo: updater =>
         instance.options.onColumnSizingInfoChange?.(updater),
-      resetColumnSizing: () => {
-        instance.setColumnSizing(instance.initialState.columnSizing ?? {})
+      resetColumnSizing: defaultState => {
+        instance.setColumnSizing(
+          defaultState ? {} : instance.initialState.columnSizing ?? {}
+        )
       },
-      resetHeaderSizeInfo: () => {
+      resetHeaderSizeInfo: defaultState => {
         instance.setColumnSizingInfo(
-          instance.initialState.columnSizingInfo ?? {}
+          defaultState
+            ? getDefaultColumnSizingInfoState()
+            : instance.initialState.columnSizingInfo ??
+                getDefaultColumnSizingInfoState()
         )
       },
       getTotalSize: () =>

package/src/features/Columns.ts

@@ -8,7 +8,6 @@ import {
   AccessorFn,
   ColumnDef,
   Renderable,
-  HeaderRenderProps,
 } from '../types'
 import { memo } from '../utils'
 
@@ -42,7 +41,7 @@ export type CoreColumnDef<TGenerics extends TableGenerics> = {
       row: Row<TGenerics>
       column: Column<TGenerics>
       cell: Cell<TGenerics>
-      value: TGenerics['Value']
+      getValue: () => TGenerics['Value']
     }
   >
   meta?: TGenerics['ColumnMeta']
@@ -93,12 +92,9 @@ export const Columns = {
           defaultColumn = (defaultColumn ?? {}) as Partial<ColumnDef<TGenerics>>
 
           return {
-            header: (props: HeaderRenderProps<Header<TGenerics>>) =>
-              props.header.column.id,
-            footer: (props: HeaderRenderProps<Header<TGenerics>>) =>
-              props.header.column.id,
-            cell: ({ value = '' }: { value: any }): JSX.Element =>
-              typeof value === 'boolean' ? value.toString() : value,
+            header: props => props.header.column.id,
+            footer: props => props.header.column.id,
+            cell: props => props.getValue().toString?.() ?? null,
             ...instance._features.reduce((obj, feature) => {
               return Object.assign(obj, feature.getDefaultColumn?.())
             }, {}),

package/src/features/Expanding.ts

@@ -41,7 +41,7 @@ export type ExpandedInstance<TGenerics extends TableGenerics> = {
   _autoResetExpanded: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
   toggleAllRowsExpanded: (expanded?: boolean) => void
-  resetExpanded: () => void
+  resetExpanded: (defaultState?: boolean) => void
   getCanSomeRowsExpand: () => boolean
   getToggleAllRowsExpandedHandler: () => (event: unknown) => void
   getIsSomeRowsExpanded: () => boolean
@@ -104,8 +104,10 @@ export const Expanding: TableFeature = {
           instance.setExpanded({})
         }
       },
-      resetExpanded: () => {
-        instance.setExpanded(instance.initialState?.expanded ?? {})
+      resetExpanded: defaultState => {
+        instance.setExpanded(
+          defaultState ? {} : instance.initialState?.expanded ?? {}
+        )
       },
       getCanSomeRowsExpand: () => {
         return instance.getRowModel().flatRows.some(row => row.getCanExpand())