@tanstack/table-core 8.0.0-alpha.22 → 8.0.0-alpha.25

package/package.json

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

package/src/aggregationTypes.ts

@@ -12,19 +12,19 @@ export const aggregationTypes = {
 
 export type BuiltInAggregationType = keyof typeof aggregationTypes
 
-function sum(_leafValues: unknown[], childValues: unknown[]) {
+function sum(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
   // It's faster to just add the aggregations together instead of
   // process leaf nodes individually
-  return childValues.reduce(
+  return getChildValues().reduce(
     (sum: number, next: unknown) => sum + (typeof next === 'number' ? next : 0),
     0
   )
 }
 
-function min(_leafValues: unknown[], childValues: unknown[]) {
+function min(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
   let min: number | undefined
 
-  for (const value of childValues as number[]) {
+  for (const value of getChildValues() as number[]) {
     if (
       value != null &&
       (min! > value || (min === undefined && value >= value))
@@ -36,10 +36,10 @@ function min(_leafValues: unknown[], childValues: unknown[]) {
   return min
 }
 
-function max(_leafValues: unknown[], childValues: unknown[]) {
+function max(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
   let max: number | undefined
 
-  for (const value of childValues as number[]) {
+  for (const value of getChildValues() as number[]) {
     if (
       value != null &&
       (max! < value || (max === undefined && value >= value))
@@ -51,11 +51,14 @@ function max(_leafValues: unknown[], childValues: unknown[]) {
   return max
 }
 
-function extent(_leafValues: unknown[], childValues: unknown[]) {
+function extent(
+  _getLeafValues: () => unknown[],
+  getChildValues: () => unknown[]
+) {
   let min: number | undefined
   let max: number | undefined
 
-  for (const value of childValues as number[]) {
+  for (const value of getChildValues() as number[]) {
     if (value != null) {
       if (min === undefined) {
         if (value >= value) min = max = value
@@ -69,11 +72,11 @@ function extent(_leafValues: unknown[], childValues: unknown[]) {
   return [min, max]
 }
 
-function mean(leafValues: unknown[]) {
+function mean(getLeafValues: () => unknown[]) {
   let count = 0
   let sum = 0
 
-  for (let value of leafValues as number[]) {
+  for (let value of getLeafValues() as number[]) {
     if (value != null && (value = +value) >= value) {
       ++count, (sum += value)
     }
@@ -84,15 +87,16 @@ function mean(leafValues: unknown[]) {
   return
 }
 
-function median(values: unknown[]) {
-  if (!values.length) {
+function median(getLeafValues: () => unknown[]) {
+  const leafValues = getLeafValues()
+  if (!leafValues.length) {
     return
   }
 
   let min = 0
   let max = 0
 
-  values.forEach(value => {
+  leafValues.forEach(value => {
     if (typeof value === 'number') {
       min = Math.min(min, value)
       max = Math.max(max, value)
@@ -102,14 +106,14 @@ function median(values: unknown[]) {
   return (min + max) / 2
 }
 
-function unique<T>(values: T[]) {
-  return Array.from(new Set(values).values())
+function unique<T>(getLeafValues: () => T[]) {
+  return Array.from(new Set(getLeafValues()).values())
 }
 
-function uniqueCount(values: unknown[]) {
-  return new Set(values).size
+function uniqueCount(getLeafValues: () => unknown[]) {
+  return new Set(getLeafValues()).size
 }
 
-function count(values: unknown[]) {
-  return values.length
+function count(getLeafValues: () => unknown[]) {
+  return getLeafValues().length
 }

package/src/core.tsx

@@ -30,36 +30,38 @@ import {
   CoreCell,
   Renderable,
   UseRenderer,
+  RowModel,
+  TableFeature,
+  AnyGenerics,
 } from './types'
 
-import { Visibility } from './features/Visibility'
-import { Ordering } from './features/Ordering'
-import { Pinning } from './features/Pinning'
-import { Headers } from './features/Headers'
+import { ColumnSizing } from './features/ColumnSizing'
+import { Expanding } from './features/Expanding'
 import { Filters } from './features/Filters'
-import { Sorting } from './features/Sorting'
 import { Grouping } from './features/Grouping'
-import { Expanding } from './features/Expanding'
-import { ColumnSizing, defaultColumnSizing } from './features/ColumnSizing'
+import { Ordering } from './features/Ordering'
 import { Pagination } from './features/Pagination'
+import { Pinning } from './features/Pinning'
 import { RowSelection } from './features/RowSelection'
-import { RowModel } from '.'
+import { Sorting } from './features/Sorting'
+import { Visibility } from './features/Visibility'
+import { Headers } from './features/Headers'
 
-const features = [
+const features: TableFeature[] = [
+  Headers,
   Visibility,
   Ordering,
   Pinning,
-  Headers,
   Filters,
   Sorting,
   Grouping,
   Expanding,
-  ColumnSizing,
   Pagination,
   RowSelection,
+  ColumnSizing,
 ]
 
-export type CoreOptions<TGenerics extends PartialGenerics> = {
+export type CoreOptions<TGenerics extends AnyGenerics> = {
   data: TGenerics['Row'][]
   columns: ColumnDef<TGenerics>[]
   state: Partial<TableState>
@@ -84,7 +86,7 @@ export type CoreOptions<TGenerics extends PartialGenerics> = {
   autoResetAll?: boolean
 }
 
-export type TableCore<TGenerics extends PartialGenerics> = {
+export type TableCore<TGenerics extends AnyGenerics> = {
   initialState: TableState
   reset: () => void
   options: RequiredKeys<Options<TGenerics>, 'state'>
@@ -108,7 +110,6 @@ export type TableCore<TGenerics extends PartialGenerics> = {
   getAllFlatColumnsById: () => Record<string, Column<TGenerics>>
   getAllLeafColumns: () => Column<TGenerics>[]
   getColumn: (columnId: string) => Column<TGenerics>
-  getColumnWidth: (columnId: string) => number
   getTotalWidth: () => number
   createCell: (
     row: Row<TGenerics>,
@@ -147,27 +148,24 @@ export type TableCore<TGenerics extends PartialGenerics> = {
   ) => string | null | ReturnType<UseRenderer<TGenerics>>
 }
 
-export type CoreRow<TGenerics extends PartialGenerics> = {
+export type CoreRow<TGenerics extends AnyGenerics> = {
   id: string
   index: number
   original?: TGenerics['Row']
   depth: number
   values: RowValues
-  leafRows: Row<TGenerics>[]
   subRows: Row<TGenerics>[]
+  getLeafRows: () => Row<TGenerics>[]
   getRowProps: PropGetter<RowProps>
   originalSubRows?: TGenerics['Row'][]
   getAllCells: () => Cell<TGenerics>[]
   getAllCellsByColumnId: () => Record<string, Cell<TGenerics>>
 }
 
-export type CoreColumnDef<TGenerics extends PartialGenerics> = {
+export type CoreColumnDef<TGenerics extends AnyGenerics> = {
   id: string
   accessorKey?: string & keyof TGenerics['Row']
   accessorFn?: AccessorFn<TGenerics['Row']>
-  width?: number
-  minWidth?: number
-  maxWidth?: number
   columns?: ColumnDef<TGenerics>[]
   header?: Renderable<
     TGenerics,
@@ -199,7 +197,7 @@ export type CoreColumnDef<TGenerics extends PartialGenerics> = {
 }
 // & GeneratedProperties<true>
 
-export type CoreColumn<TGenerics extends PartialGenerics> = {
+export type CoreColumn<TGenerics extends AnyGenerics> = {
   id: string
   depth: number
   accessorFn?: AccessorFn<TGenerics['Row']>
@@ -211,7 +209,7 @@ export type CoreColumn<TGenerics extends PartialGenerics> = {
   getLeafColumns: () => Column<TGenerics>[]
 }
 
-export function createTableInstance<TGenerics extends PartialGenerics>(
+export function createTableInstance<TGenerics extends AnyGenerics>(
   options: Options<TGenerics>
 ): TableInstance<TGenerics> {
   if (options.debugAll || options.debugTable) {
@@ -221,7 +219,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
   let instance = {} as TableInstance<TGenerics>
 
   const defaultOptions = features.reduce((obj, feature) => {
-    return Object.assign(obj, (feature as any).getDefaultOptions?.(instance))
+    return Object.assign(obj, feature.getDefaultOptions?.(instance))
   }, {})
 
   const buildOptions = (options: Options<TGenerics>) => ({
@@ -233,7 +231,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
 
   const initialState = {
     ...features.reduce((obj, feature) => {
-      return Object.assign(obj, (feature as any).getInitialState?.())
+      return Object.assign(obj, feature.getInitialState?.())
     }, {}),
     ...(options.initialState ?? {}),
   } as TableState
@@ -241,7 +239,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
   const finalInstance: TableInstance<TGenerics> = {
     ...instance,
     ...features.reduce((obj, feature) => {
-      return Object.assign(obj, (feature as any).getInstance?.(instance))
+      return Object.assign(obj, feature.getInstance?.(instance))
     }, {}),
     initialState,
     reset: () => {
@@ -288,7 +286,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
           cell: ({ value = '' }: { value: any }): JSX.Element =>
             typeof value === 'boolean' ? value.toString() : value,
           ...features.reduce((obj, feature) => {
-            return Object.assign(obj, (feature as any).getDefaultColumn?.())
+            return Object.assign(obj, feature.getDefaultColumn?.())
           }, {}),
           ...defaultColumn,
         } as Partial<ColumnDef<TGenerics>>
@@ -330,7 +328,6 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
       }
 
       let column: CoreColumn<TGenerics> = {
-        ...defaultColumnSizing,
         ...defaultColumn,
         ...columnDef,
         id: `${id}`,
@@ -376,10 +373,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
       }
 
       column = features.reduce((obj, feature) => {
-        return Object.assign(
-          obj,
-          (feature as any).createColumn?.(column, instance)
-        )
+        return Object.assign(obj, feature.createColumn?.(column, instance))
       }, column)
 
       // Yes, we have to convert instance to uknown, because we know more than the compiler here.
@@ -465,24 +459,6 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
       return column
     },
 
-    getColumnWidth: (columnId: string) => {
-      const column = instance.getColumn(columnId)
-
-      if (!column) {
-        throw new Error()
-      }
-
-      const columnSize = instance.getState().columnSizing[column.id]
-
-      return Math.min(
-        Math.max(
-          column.minWidth ?? defaultColumnSizing.minWidth,
-          columnSize ?? column.width ?? defaultColumnSizing.width
-        ),
-        column.maxWidth ?? defaultColumnSizing.maxWidth
-      )
-    },
-
     createCell: (row, column, value) => {
       const cell: CoreCell<TGenerics> = {
         id: `${row.id}_${column.id}`,
@@ -508,7 +484,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
       features.forEach(feature => {
         Object.assign(
           cell,
-          (feature as any).createCell?.(
+          feature.createCell?.(
             cell as Cell<TGenerics>,
             column,
             row as Row<TGenerics>,
@@ -528,7 +504,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         depth,
         values,
         subRows: [],
-        leafRows: [],
+        getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
         getRowProps: userProps => instance.getRowProps(row.id, userProps)!,
         getAllCells: undefined!,
         getAllCellsByColumnId: undefined!,
@@ -567,7 +543,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
 
       for (let i = 0; i < features.length; i++) {
         const feature = features[i]
-        Object.assign(row, (feature as any).createRow?.(row, instance))
+        Object.assign(row, feature.createRow?.(row, instance))
       }
 
       return row as Row<TGenerics>
@@ -650,9 +626,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
                   row
                 )
               }
-              // Keep the new subRows array on the row
               row.subRows = subRows
-              row.leafRows = flattenBy(subRows, d => d.leafRows)
             }
           }
         }
@@ -667,8 +641,8 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         key: 'getRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
-          instance._notifyRowSelectionReset()
           instance._notifyFiltersReset()
+          instance._notifyRowSelectionReset()
         },
       }
     ),

package/src/createTable.tsx

@@ -1,10 +1,16 @@
 import { CustomFilterTypes } from './features/Filters'
 import { CustomAggregationTypes } from './features/Grouping'
 import { CustomSortingTypes } from './features/Sorting'
-import { ColumnDef, AccessorFn, PartialGenerics, AnyRender } from './types'
+import {
+  ColumnDef,
+  AccessorFn,
+  PartialGenerics,
+  AnyRender,
+  AnyGenerics,
+} from './types'
 import { Overwrite, PartialKeys } from './utils'
 
-export type CreateTableFactory<TGenerics extends PartialGenerics> = <
+export type CreateTableFactory<TGenerics extends AnyGenerics> = <
   TSubGenerics extends {
     Row: any
     ColumnMeta?: object
@@ -28,7 +34,7 @@ export type CreateTableFactoryOptions<
   aggregationFns?: TAggregationFns
 }
 
-export type Table<TGenerics extends PartialGenerics> = {
+export type Table<TGenerics extends AnyGenerics> = {
   generics: TGenerics
   __options: CreateTableFactoryOptions<any, any, any, any>
   createColumns: <TColumnDef extends ColumnDef<any>>(
@@ -94,8 +100,8 @@ export type Table<TGenerics extends PartialGenerics> = {
 }
 
 type InitTable<TRender extends AnyRender> = {
-  createTableFactory: <TGenerics extends PartialGenerics>(
-    options?: CreateTableFactoryOptions<TRender, any, any, any>
+  createTableFactory: <TGenerics extends AnyGenerics>(
+    options: CreateTableFactoryOptions<TRender, any, any, any>
   ) => CreateTableFactory<Overwrite<TGenerics, { Render: TRender }>>
   createTable: CreateTableFactory<
     Overwrite<PartialGenerics, { Render: TRender }>
@@ -108,16 +114,16 @@ export function init<TRender extends AnyRender>(opts: {
   render: TRender
 }): InitTable<TRender> {
   return {
-    createTableFactory: options => () =>
-      _createTable(undefined, undefined, { ...options, ...opts }),
+    createTableFactory: factoryOptions => () =>
+      _createTable(undefined, undefined, { ...factoryOptions, ...opts }),
     createTable: () => _createTable(undefined, undefined, opts),
   }
 }
 
-function _createTable<TGenerics extends PartialGenerics>(
-  _?: undefined,
-  __?: undefined,
-  __options?: CreateTableFactoryOptions<any, any, any, any>
+function _createTable<TGenerics extends AnyGenerics>(
+  _: undefined,
+  __: undefined,
+  __options: CreateTableFactoryOptions<any, any, any, any>
 ): Table<TGenerics> {
   return {
     generics: undefined!,

package/src/features/ColumnSizing.ts

@@ -52,7 +52,8 @@ export type ColumnResizerProps = {
   role?: string
 }
 
-export type ColumnSizingInstance<TGenerics extends PartialGenerics> = {
+export type ColumnSizingInstance<TGenerics extends AnyGenerics> = {
+  getColumnWidth: (columnId: string) => number
   setColumnSizing: (updater: Updater<ColumnSizing>) => void
   setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
   resetColumnSizing: () => void
@@ -72,15 +73,18 @@ export type ColumnSizingInstance<TGenerics extends PartialGenerics> = {
 export type ColumnSizingColumnDef = {
   enableResizing?: boolean
   defaultCanResize?: boolean
+  width?: number
+  minWidth?: number
+  maxWidth?: number
 }
 
-export type ColumnSizingColumn<TGenerics extends PartialGenerics> = {
+export type ColumnSizingColumn<TGenerics extends AnyGenerics> = {
   getCanResize: () => boolean
   getIsResizing: () => boolean
   resetSize: () => void
 }
 
-export type ColumnSizingHeader<TGenerics extends PartialGenerics> = {
+export type ColumnSizingHeader<TGenerics extends AnyGenerics> = {
   getCanResize: () => boolean
   getIsResizing: () => boolean
   getResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
@@ -98,6 +102,9 @@ export const defaultColumnSizing = {
 }
 
 export const ColumnSizing = {
+  getDefaultColumn: (): ColumnSizingColumnDef => {
+    return defaultColumnSizing
+  },
   getInitialState: (): ColumnSizingTableState => {
     return {
       columnSizing: {},
@@ -112,7 +119,7 @@ export const ColumnSizing = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends AnyGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnSizingDefaultOptions => {
     return {
@@ -122,10 +129,27 @@ export const ColumnSizing = {
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  getInstance: <TGenerics extends AnyGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnSizingInstance<TGenerics> => {
     return {
+      getColumnWidth: (columnId: string) => {
+        const column = instance.getColumn(columnId)
+
+        if (!column) {
+          throw new Error()
+        }
+
+        const columnSize = instance.getState().columnSizing[column.id]
+
+        return Math.min(
+          Math.max(
+            column.minWidth ?? defaultColumnSizing.minWidth,
+            columnSize ?? column.width ?? defaultColumnSizing.width
+          ),
+          column.maxWidth ?? defaultColumnSizing.maxWidth
+        )
+      },
       setColumnSizing: updater =>
         instance.options.onColumnSizingChange?.(
           updater,
@@ -373,7 +397,7 @@ export const ColumnSizing = {
     }
   },
 
-  createColumn: <TGenerics extends PartialGenerics>(
+  createColumn: <TGenerics extends AnyGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): ColumnSizingColumn<TGenerics> => {
@@ -384,7 +408,7 @@ export const ColumnSizing = {
     }
   },
 
-  createHeader: <TGenerics extends PartialGenerics>(
+  createHeader: <TGenerics extends AnyGenerics>(
     header: Header<TGenerics>,
     instance: TableInstance<TGenerics>
   ): ColumnSizingHeader<TGenerics> => {

package/src/features/Expanding.ts

@@ -27,7 +27,7 @@ export type ExpandedRow = {
   ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
 }
 
-export type ExpandedOptions<TGenerics extends PartialGenerics> = {
+export type ExpandedOptions<TGenerics extends AnyGenerics> = {
   onExpandedChange?: OnChangeFn<ExpandedState>
   autoResetExpanded?: boolean
   enableExpanded?: boolean
@@ -47,7 +47,7 @@ export type ToggleExpandedProps = {
   onClick?: (event: MouseEvent | TouchEvent) => void
 }
 
-export type ExpandedInstance<TGenerics extends PartialGenerics> = {
+export type ExpandedInstance<TGenerics extends AnyGenerics> = {
   _notifyExpandedReset: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
   toggleRowExpanded: (rowId: string, expanded?: boolean) => void
@@ -78,7 +78,7 @@ export const Expanding = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends AnyGenerics>(
     instance: TableInstance<TGenerics>
   ): ExpandedOptions<TGenerics> => {
     return {
@@ -89,7 +89,7 @@ export const Expanding = {
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  getInstance: <TGenerics extends AnyGenerics>(
     instance: TableInstance<TGenerics>
   ): ExpandedInstance<TGenerics> => {
     let registered = false
@@ -298,7 +298,7 @@ export const Expanding = {
     }
   },
 
-  createRow: <TGenerics extends PartialGenerics>(
+  createRow: <TGenerics extends AnyGenerics>(
     row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
   ): ExpandedRow => {
@@ -307,16 +307,8 @@ export const Expanding = {
         void instance.toggleRowExpanded(row.id, expanded),
       getIsExpanded: () => instance.getIsRowExpanded(row.id),
       getCanExpand: () => row.subRows && !!row.subRows.length,
-      getToggleExpandedProps: userProps => {
-        const initialProps: ToggleExpandedProps = {
-          title: 'Toggle Row Expanded',
-          onClick: (e: MouseEvent | TouchEvent) => {
-            e.stopPropagation()
-            instance.toggleRowExpanded(row.id)
-          },
-        }
-        return propGetter(initialProps, userProps)
-      },
+      getToggleExpandedProps: userProps =>
+        instance.getToggleExpandedProps(row.id, userProps),
     }
   },
 }