@tanstack/table-core 8.0.0-alpha.43 → 8.0.0-alpha.46

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.43",
+  "version": "8.0.0-alpha.46",
   "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 → aggregationFns.ts}

@@ -1,4 +1,4 @@
-export const aggregationTypes = {
+export const aggregationFns = {
   sum,
   min,
   max,
@@ -10,7 +10,7 @@ export const aggregationTypes = {
   count,
 }
 
-export type BuiltInAggregationType = keyof typeof aggregationTypes
+export type BuiltInAggregationType = keyof typeof aggregationFns
 
 function sum(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
   // It's faster to just add the aggregations together instead of

package/src/core.ts

@@ -26,7 +26,6 @@ import {
   CellProps,
   TableInstance,
   RowValues,
-  PartialGenerics,
   CoreCell,
   Renderable,
   UseRenderer,
@@ -46,7 +45,7 @@ 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 { mean } from './aggregationFns'
 
 const features: TableFeature[] = [
   Headers,
@@ -310,7 +309,8 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
       return template
     },
 
-    getRowId: (_: TGenerics['Row'], index: number, parent?: Row<TGenerics>) =>
+    getRowId: (row: TGenerics['Row'], index: number, parent?: Row<TGenerics>) =>
+      instance.options.getRowId?.(row, index, parent) ??
       `${parent ? [parent.id, index].join('.') : index}`,
 
     getState: () => {

package/src/createTable.ts

@@ -1,38 +1,60 @@
-import { CustomFilterTypes } from './features/Filters'
-import { CustomAggregationTypes } from './features/Grouping'
-import { CustomSortingTypes } from './features/Sorting'
-import {
-  ColumnDef,
-  AccessorFn,
-  PartialGenerics,
-  AnyRender,
-  AnyGenerics,
-} from './types'
-import { Overwrite, PartialKeys } from './utils'
+import { CustomFilterTypes, FilterFn } from './features/Filters'
+import { AggregationFn, CustomAggregationTypes } from './features/Grouping'
+import { CustomSortingTypes, SortingFn } from './features/Sorting'
+import { ColumnDef, AccessorFn, AnyRender, AnyGenerics, Options } from './types'
+import { IfDefined, Overwrite, PartialKeys } from './utils'
 
-export type CreateTableFactory<TGenerics extends AnyGenerics> = <
-  TSubGenerics extends {
-    Row: any
-    ColumnMeta?: object
-    TableMeta?: object
-  }
->() => Table<Overwrite<TGenerics, TSubGenerics>>
+export type TableFactory<TGenerics extends AnyGenerics> = () => Table<TGenerics>
 
-export type CreateTableFactoryOptions<
+export type CreateTableOptions<
   TRender extends AnyRender,
   TFilterFns extends CustomFilterTypes<any>,
   TSortingFns extends CustomSortingTypes<any>,
-  TAggregationFns extends CustomAggregationTypes<any>
-> = {
-  render: TRender
-  filterFns?: TFilterFns
-  sortingFns?: TSortingFns
-  aggregationFns?: TAggregationFns
-}
+  TAggregationFns extends CustomAggregationTypes<any>,
+  TGenerics extends AnyGenerics
+> = Partial<
+  {
+    render?: TRender
+    filterFns?: TFilterFns
+    sortingFns?: TSortingFns
+    aggregationFns?: TAggregationFns
+  } & Omit<Options<TGenerics>, 'filterFns' | 'sortingFns' | 'aggregationFns'>
+>
 
 export type Table<TGenerics extends AnyGenerics> = {
   generics: TGenerics
-  __options: CreateTableFactoryOptions<any, any, any, any>
+  options: Partial<Options<TGenerics>>
+  setRowType: <TRow extends object>() => Table<
+    Overwrite<TGenerics, { Row: TRow }>
+  >
+  setTableMetaType: <TTableMeta extends object>() => Table<
+    Overwrite<TGenerics, { TableMeta: TTableMeta }>
+  >
+  setColumnMetaType: <TColumnMeta extends object>() => Table<
+    Overwrite<TGenerics, { ColumnMeta: TColumnMeta }>
+  >
+  setOptions: <
+    TFilterFns extends Record<string, FilterFn<any>>,
+    TSortingFns extends Record<string, SortingFn<any>>,
+    TAggregationFns extends Record<string, AggregationFn<any>>
+  >(
+    options: CreateTableOptions<
+      any,
+      TFilterFns,
+      TSortingFns,
+      TAggregationFns,
+      TGenerics
+    >
+  ) => Table<
+    Overwrite<
+      TGenerics,
+      {
+        FilterFns: IfDefined<TFilterFns, TGenerics['FilterFns']>
+        SortingFns: IfDefined<TSortingFns, TGenerics['SortingFns']>
+        AggregationFns: IfDefined<TAggregationFns, TGenerics['AggregationFns']>
+      }
+    >
+  >
   createColumns: <TColumnDef extends ColumnDef<any>>(
     columns: TColumnDef[]
   ) => TColumnDef[]
@@ -95,39 +117,36 @@ export type Table<TGenerics extends AnyGenerics> = {
   ) => ColumnDef<TGenerics>
 }
 
-type InitTable<TRender extends AnyRender> = {
-  createTableFactory: <TGenerics extends AnyGenerics>(
-    options: CreateTableFactoryOptions<TRender, any, any, any>
-  ) => CreateTableFactory<Overwrite<TGenerics, { Render: TRender }>>
-  createTable: CreateTableFactory<
-    Overwrite<PartialGenerics, { Render: TRender }>
-  >
-}
-
 //
 
-export function init<TRender extends AnyRender>(opts: {
+export function createTableFactory<TRender extends AnyRender>(opts: {
   render: TRender
-}): InitTable<TRender> {
-  return {
-    createTableFactory: factoryOptions => () =>
-      _createTable(undefined, undefined, { ...factoryOptions, ...opts }),
-    createTable: () => _createTable(undefined, undefined, opts),
-  }
+}): () => Table<{ Render: TRender }> {
+  return () => createTable(undefined, undefined, opts)
 }
 
-function _createTable<TGenerics extends AnyGenerics>(
-  _: undefined,
-  __: undefined,
-  __options: CreateTableFactoryOptions<any, any, any, any>
+// A lot of returns in here are `as any` for a reason. Unless you
+// can find a better way to do this, then don't worry about them
+function createTable<TGenerics extends AnyGenerics>(
+  _?: undefined,
+  __?: undefined,
+  options?: CreateTableOptions<any, any, any, any, TGenerics>
 ): Table<TGenerics> {
-  return {
+  const table: Table<TGenerics> = {
     generics: undefined!,
-    __options: __options ?? {
-      render: () => {
-        throw new Error()
-      },
+    options: options ?? {
+      render: (() => {
+        throw new Error('')
+      })(),
     },
+    setRowType: () => table as any,
+    setTableMetaType: () => table as any,
+    setColumnMetaType: () => table as any,
+    setOptions: newOptions =>
+      createTable(_, __, {
+        ...options,
+        ...newOptions,
+      } as any),
     createColumns: columns => columns,
     createDisplayColumn: column => ({ ...column, columnDefType: 'display' }),
     createGroup: column => ({ ...column, columnDefType: 'group' } as any),
@@ -156,4 +175,6 @@ function _createTable<TGenerics extends AnyGenerics>(
       throw new Error('Invalid accessor')
     },
   }
+
+  return table
 }

package/src/features/ColumnSizing.ts

@@ -228,7 +228,7 @@ export const ColumnSizing = {
 
         const canResize = column.getCanResize()
 
-        const onResizeStart = (e: MouseEvent | TouchEvent) => {
+        const onResizeStart = (e: unknown) => {
           if (isTouchStartEvent(e)) {
             // lets not respond to multiple touches (e.g. 2 or 3 fingers)
             if (e.touches && e.touches.length > 1) {
@@ -246,7 +246,7 @@ export const ColumnSizing = {
 
           const clientX = isTouchStartEvent(e)
             ? Math.round(e.touches[0].clientX)
-            : e.clientX
+            : (e as MouseEvent).clientX
 
           const updateOffset = (
             eventType: 'move' | 'end',
@@ -446,6 +446,6 @@ export function passiveEventSupported() {
   return passiveSupported
 }
 
-function isTouchStartEvent(e: TouchEvent | MouseEvent): e is TouchEvent {
-  return e.type === 'touchstart'
+function isTouchStartEvent(e: unknown): e is TouchEvent {
+  return (e as TouchEvent).type === 'touchstart'
 }

package/src/features/Expanding.ts

@@ -42,7 +42,7 @@ export type ExpandedOptions<TGenerics extends AnyGenerics> = {
 
 export type ToggleExpandedProps = {
   title?: string
-  onClick?: (event: MouseEvent | TouchEvent) => void
+  onClick?: (event: unknown) => void
 }
 
 export type ExpandedInstance<TGenerics extends AnyGenerics> = {
@@ -217,7 +217,7 @@ export const Expanding = {
         const initialProps: ToggleExpandedProps = {
           title: canExpand ? 'Toggle Expanded' : undefined,
           onClick: canExpand
-            ? (e: MouseEvent | TouchEvent) => {
+            ? (e: unknown) => {
                 ;(e as any).persist?.()
                 instance.toggleRowExpanded(rowId)
               }
@@ -229,7 +229,7 @@ export const Expanding = {
       getToggleAllRowsExpandedProps: userProps => {
         const initialProps: ToggleExpandedProps = {
           title: 'Toggle All Expanded',
-          onClick: (e: MouseEvent | TouchEvent) => {
+          onClick: (e: unknown) => {
             ;(e as any).persist?.()
             instance.toggleAllRowsExpanded()
           },

package/src/features/Filters.ts

@@ -1,5 +1,5 @@
 import { RowModel } from '..'
-import { BuiltInFilterType, filterTypes } from '../filterTypes'
+import { BuiltInFilterType, filterFns } from '../filterFns'
 import {
   Column,
   OnChangeFn,
@@ -49,11 +49,11 @@ export type FiltersTableState = {
 export type FilterType<TGenerics extends AnyGenerics> =
   | 'auto'
   | BuiltInFilterType
-  | TGenerics['FilterFns']
+  | keyof TGenerics['FilterFns']
   | FilterFn<TGenerics>
 
 export type FiltersColumnDef<TGenerics extends AnyGenerics> = {
-  filterType?: FilterType<Overwrite<TGenerics, { Value: any }>>
+  filterFn?: FilterType<Overwrite<TGenerics, { Value: any }>>
   enableAllFilters?: boolean
   enableColumnFilter?: boolean
   enableGlobalFilter?: boolean
@@ -63,7 +63,7 @@ export type FiltersColumnDef<TGenerics extends AnyGenerics> = {
 }
 
 export type FiltersColumn<TGenerics extends AnyGenerics> = {
-  filterType: FilterType<Overwrite<TGenerics, { Value: any }>>
+  filterFn: FilterType<Overwrite<TGenerics, { Value: any }>>
   getCanColumnFilter: () => boolean
   getCanGlobalFilter: () => boolean
   getColumnFilterIndex: () => number
@@ -77,7 +77,7 @@ export type FiltersColumn<TGenerics extends AnyGenerics> = {
 
 export type FiltersOptions<TGenerics extends AnyGenerics> = {
   filterFromLeafRows?: boolean
-  filterTypes?: TGenerics['FilterFns']
+  filterFns?: TGenerics['FilterFns']
   enableFilters?: boolean
   // Column
   onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
@@ -139,7 +139,7 @@ export const Filters = {
     TGenerics extends AnyGenerics
   >(): FiltersColumnDef<TGenerics> => {
     return {
-      filterType: 'auto',
+      filterFn: 'auto',
     }
   },
 
@@ -217,7 +217,7 @@ export const Filters = {
     )
 
     return {
-      filterType: column.filterType,
+      filterFn: column.filterFn,
       getCanColumnFilter: () => instance.getColumnCanColumnFilter(column.id),
       getCanGlobalFilter: () => instance.getColumnCanGlobalFilter(column.id),
       getColumnFilterIndex: () => instance.getColumnFilterIndex(column.id),
@@ -269,48 +269,48 @@ export const Filters = {
         const value = firstRow?.values[columnId]
 
         if (typeof value === 'string') {
-          return filterTypes.includesString
+          return filterFns.includesString
         }
 
         if (typeof value === 'number') {
-          return filterTypes.betweenNumberRange
+          return filterFns.betweenNumberRange
         }
 
         if (value !== null && typeof value === 'object') {
-          return filterTypes.equals
+          return filterFns.equals
         }
 
         if (Array.isArray(value)) {
-          return filterTypes.arrIncludes
+          return filterFns.arrIncludes
         }
 
-        return filterTypes.weakEquals
+        return filterFns.weakEquals
       },
       getGlobalAutoFilterFn: () => {
-        return filterTypes.includesString
+        return filterFns.includesString
       },
       getColumnFilterFn: columnId => {
         const column = instance.getColumn(columnId)
-        const userFilterTypes = instance.options.filterTypes
+        const userFilterTypes = instance.options.filterFns
 
         if (!column) {
           throw new Error()
         }
 
-        return isFunction(column.filterType)
-          ? column.filterType
-          : column.filterType === 'auto'
+        return isFunction(column.filterFn)
+          ? column.filterFn
+          : column.filterFn === 'auto'
           ? instance.getColumnAutoFilterFn(columnId)
           : (userFilterTypes as Record<string, any>)?.[
-              column.filterType as string
+              column.filterFn as string
             ] ??
-            (filterTypes[
-              column.filterType as BuiltInFilterType
+            (filterFns[
+              column.filterFn as BuiltInFilterType
             ] as FilterFn<TGenerics>)
       },
 
       getGlobalFilterFn: () => {
-        const { filterTypes: userFilterTypes, globalFilterType } =
+        const { filterFns: userFilterTypes, globalFilterType } =
           instance.options
 
         return isFunction(globalFilterType)
@@ -320,7 +320,7 @@ export const Filters = {
           : (userFilterTypes as Record<string, any>)?.[
               globalFilterType as string
             ] ??
-            (filterTypes[
+            (filterFns[
               globalFilterType as BuiltInFilterType
             ] as FilterFn<TGenerics>)
       },

package/src/features/Grouping.ts

@@ -1,5 +1,5 @@
 import { RowModel } from '..'
-import { BuiltInAggregationType, aggregationTypes } from '../aggregationTypes'
+import { BuiltInAggregationType, aggregationFns } from '../aggregationFns'
 import {
   Cell,
   Column,
@@ -46,7 +46,7 @@ export type GroupingTableState = {
 }
 
 export type GroupingColumnDef<TGenerics extends AnyGenerics> = {
-  aggregationType?: AggregationType<Overwrite<TGenerics, { Value: any }>>
+  aggregationFn?: AggregationType<Overwrite<TGenerics, { Value: any }>>
   aggregateValue?: (columnValue: unknown) => any
   aggregatedCell?: Renderable<
     TGenerics,
@@ -63,7 +63,7 @@ export type GroupingColumnDef<TGenerics extends AnyGenerics> = {
 }
 
 export type GroupingColumn<TGenerics extends AnyGenerics> = {
-  aggregationType?: AggregationType<Overwrite<TGenerics, { Value: any }>>
+  aggregationFn?: AggregationType<Overwrite<TGenerics, { Value: any }>>
   getCanGroup: () => boolean
   getIsGrouped: () => boolean
   getGroupedIndex: () => number
@@ -94,7 +94,7 @@ export type ColumnDefaultOptions = {
 }
 
 export type GroupingOptions<TGenerics extends AnyGenerics> = {
-  aggregationTypes?: TGenerics['AggregationFns']
+  aggregationFns?: TGenerics['AggregationFns']
   onGroupingChange?: OnChangeFn<GroupingState>
   autoResetGrouping?: boolean
   enableGrouping?: boolean
@@ -110,7 +110,7 @@ export type GroupingColumnMode = false | 'reorder' | 'remove'
 
 export type ToggleGroupingProps = {
   title?: string
-  onClick?: (event: MouseEvent | TouchEvent) => void
+  onClick?: (event: unknown) => void
 }
 
 export type GroupingInstance<TGenerics extends AnyGenerics> = {
@@ -144,7 +144,7 @@ export const Grouping = {
     TGenerics extends AnyGenerics
   >(): GroupingColumnDef<TGenerics> => {
     return {
-      aggregationType: 'auto',
+      aggregationFn: 'auto',
     }
   },
 
@@ -169,7 +169,7 @@ export const Grouping = {
     instance: TableInstance<TGenerics>
   ): GroupingColumn<TGenerics> => {
     return {
-      aggregationType: column.aggregationType,
+      aggregationFn: column.aggregationFn,
       getCanGroup: () => instance.getColumnCanGroup(column.id),
       getGroupedIndex: () => instance.getColumnGroupedIndex(column.id),
       getIsGrouped: () => instance.getColumnIsGrouped(column.id),
@@ -210,32 +210,32 @@ export const Grouping = {
         const value = firstRow?.values[columnId]
 
         if (typeof value === 'number') {
-          return aggregationTypes.sum
+          return aggregationFns.sum
         }
 
         if (Object.prototype.toString.call(value) === '[object Date]') {
-          return aggregationTypes.extent
+          return aggregationFns.extent
         }
 
-        return aggregationTypes.count
+        return aggregationFns.count
       },
       getColumnAggregationFn: columnId => {
         const column = instance.getColumn(columnId)
-        const userAggregationTypes = instance.options.aggregationTypes
+        const userAggregationTypes = instance.options.aggregationFns
 
         if (!column) {
           throw new Error()
         }
 
-        return isFunction(column.aggregationType)
-          ? column.aggregationType
-          : column.aggregationType === 'auto'
+        return isFunction(column.aggregationFn)
+          ? column.aggregationFn
+          : column.aggregationFn === 'auto'
           ? instance.getColumnAutoAggregationFn(columnId)
           : (userAggregationTypes as Record<string, any>)?.[
-              column.aggregationType as string
+              column.aggregationFn as string
             ] ??
-            (aggregationTypes[
-              column.aggregationType as BuiltInAggregationType
+            (aggregationFns[
+              column.aggregationFn as BuiltInAggregationType
             ] as AggregationFn<TGenerics>)
       },
 
@@ -290,7 +290,7 @@ export const Grouping = {
         const initialProps: ToggleGroupingProps = {
           title: canGroup ? 'Toggle Grouping' : undefined,
           onClick: canGroup
-            ? (e: MouseEvent | TouchEvent) => {
+            ? (e: unknown) => {
                 column.toggleGrouping?.()
               }
             : undefined,

package/src/features/RowSelection.ts

@@ -28,8 +28,8 @@ export type RowSelectionOptions<TGenerics extends AnyGenerics> = {
   //   | ((
   //       row: Row<TGenerics>
   //     ) => boolean)
-  // isAdditiveSelectEvent?: (e: MouseEvent | TouchEvent) => boolean
-  // isInclusiveSelectEvent?: (e: MouseEvent | TouchEvent) => boolean
+  // isAdditiveSelectEvent?: (e: unknown) => boolean
+  // isInclusiveSelectEvent?: (e: unknown) => boolean
   // selectRowsFn?: (
   //   instance: TableInstance<
   //     TData,
@@ -43,7 +43,7 @@ export type RowSelectionOptions<TGenerics extends AnyGenerics> = {
 }
 
 type ToggleRowSelectedProps = {
-  onChange?: (e: MouseEvent | TouchEvent) => void
+  onChange?: (e: unknown) => void
   checked?: boolean
   title?: string
   indeterminate?: boolean
@@ -116,8 +116,8 @@ export const RowSelection = {
       enableMultiRowSelection: true,
       enableSubRowSelection: true,
       // enableGroupingRowSelection: false,
-      // isAdditiveSelectEvent: (e: MouseEvent | TouchEvent) => !!e.metaKey,
-      // isInclusiveSelectEvent: (e: MouseEvent | TouchEvent) => !!e.shiftKey,
+      // isAdditiveSelectEvent: (e: unknown) => !!e.metaKey,
+      // isInclusiveSelectEvent: (e: unknown) => !!e.shiftKey,
     }
   },
 
@@ -473,8 +473,10 @@ export const RowSelection = {
 
         const initialProps: ToggleRowSelectedProps = {
           onChange: canSelect
-            ? (e: MouseEvent | TouchEvent) => {
-                row.toggleSelected((e.target as HTMLInputElement).checked)
+            ? (e: unknown) => {
+                row.toggleSelected(
+                  ((e as MouseEvent).target as HTMLInputElement).checked
+                )
               }
             : undefined,
           checked: isSelected,
@@ -504,9 +506,9 @@ export const RowSelection = {
         const isAllRowsSelected = instance.getIsAllRowsSelected()
 
         const initialProps: ToggleRowSelectedProps = {
-          onChange: (e: MouseEvent | TouchEvent) => {
+          onChange: (e: unknown) => {
             instance.toggleAllRowsSelected(
-              (e.target as HTMLInputElement).checked
+              ((e as MouseEvent).target as HTMLInputElement).checked
             )
           },
           checked: isAllRowsSelected,
@@ -522,9 +524,9 @@ export const RowSelection = {
         const isAllPageRowsSelected = instance.getIsAllPageRowsSelected()
 
         const initialProps: ToggleRowSelectedProps = {
-          onChange: (e: MouseEvent | TouchEvent) => {
+          onChange: (e: unknown) => {
             instance.toggleAllPageRowsSelected(
-              (e.target as HTMLInputElement).checked
+              ((e as MouseEvent).target as HTMLInputElement).checked
             )
           },
           checked: isAllPageRowsSelected,