@tanstack/table-core 8.0.0-alpha.9 → 8.0.0-beta.0

package/src/features/Grouping.ts

@@ -1,331 +1,257 @@
-import React, { MouseEvent, TouchEvent } from 'react'
 import { RowModel } from '..'
-import { BuiltInAggregationType, aggregationTypes } from '../aggregationTypes'
+import { BuiltInAggregationFn, aggregationFns } from '../aggregationFns'
+import { TableFeature } from '../core/instance'
 import {
   Cell,
   Column,
-  Getter,
   OnChangeFn,
-  PropGetterValue,
   TableInstance,
   Row,
   Updater,
-  PartialGenerics,
+  Renderable,
+  TableGenerics,
 } from '../types'
-import {
-  functionalUpdate,
-  isFunction,
-  makeStateUpdater,
-  memo,
-  Overwrite,
-  propGetter,
-} from '../utils'
+import { isFunction, makeStateUpdater, Overwrite } from '../utils'
 
 export type GroupingState = string[]
 
-export type AggregationFn<TGenerics extends PartialGenerics> = (
-  leafValues: TGenerics['Row'][],
-  childValues: TGenerics['Row'][]
+export type GroupingTableState = {
+  grouping: GroupingState
+}
+
+export type AggregationFn<TGenerics extends TableGenerics> = (
+  columnId: string,
+  leafRows: Row<TGenerics>[],
+  childRows: Row<TGenerics>[]
 ) => any
 
-export type CustomAggregationTypes<TGenerics extends PartialGenerics> = Record<
+export type CustomAggregationFns<TGenerics extends TableGenerics> = Record<
   string,
   AggregationFn<TGenerics>
 >
 
-export type AggregationType<TGenerics extends PartialGenerics> =
+export type AggregationFnOption<TGenerics extends TableGenerics> =
   | 'auto'
-  | BuiltInAggregationType
+  | BuiltInAggregationFn
   | keyof TGenerics['AggregationFns']
   | AggregationFn<TGenerics>
 
-export type GroupingTableState = {
-  grouping: GroupingState
-}
-
-export type GroupingColumnDef<TGenerics extends PartialGenerics> = {
-  aggregationType?: AggregationType<Overwrite<TGenerics, { Value: any }>>
-  aggregateValue?: (columnValue: unknown) => any
-  renderAggregatedCell?: () => React.ReactNode
+export type GroupingColumnDef<TGenerics extends TableGenerics> = {
+  aggregationFn?: AggregationFnOption<Overwrite<TGenerics, { Value: any }>>
+  aggregatedCell?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      row: Row<TGenerics>
+      column: Column<TGenerics>
+      cell: Cell<TGenerics>
+      getValue: () => TGenerics['Value']
+    }
+  >
   enableGrouping?: boolean
-  defaultCanGroup?: boolean
 }
 
-export type GroupingColumn<TGenerics extends PartialGenerics> = {
-  aggregationType?: AggregationType<Overwrite<TGenerics, { Value: any }>>
+export type GroupingColumn<TGenerics extends TableGenerics> = {
+  aggregationFn?: AggregationFnOption<Overwrite<TGenerics, { Value: any }>>
   getCanGroup: () => boolean
   getIsGrouped: () => boolean
   getGroupedIndex: () => number
   toggleGrouping: () => void
-  getToggleGroupingProps: <TGetter extends Getter<ToggleGroupingProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleGroupingProps, TGetter>
+  getToggleGroupingHandler: () => () => void
+  getAutoAggregationFn: () => AggregationFn<TGenerics> | undefined
+  getAggregationFn: () => AggregationFn<TGenerics> | undefined
 }
 
 export type GroupingRow = {
   groupingColumnId?: string
   groupingValue?: any
   getIsGrouped: () => boolean
+  _groupingValuesCache: Record<string, any>
 }
 
-export type GroupingCell = {
+export type GroupingCell<TGenerics extends TableGenerics> = {
   getIsGrouped: () => boolean
   getIsPlaceholder: () => boolean
   getIsAggregated: () => boolean
+  renderAggregatedCell: () => string | null | TGenerics['Rendered']
 }
 
 export type ColumnDefaultOptions = {
   // Column
   onGroupingChange: OnChangeFn<GroupingState>
-  autoResetGrouping: boolean
   enableGrouping: boolean
 }
 
-export type GroupingOptions<TGenerics extends PartialGenerics> = {
-  aggregationTypes?: TGenerics['AggregationFns']
+export type GroupingOptions<TGenerics extends TableGenerics> = {
+  manualGrouping?: boolean
+  aggregationFns?: TGenerics['AggregationFns']
   onGroupingChange?: OnChangeFn<GroupingState>
-  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'
 }
 
 export type GroupingColumnMode = false | 'reorder' | 'remove'
 
-export type ToggleGroupingProps = {
-  title?: string
-  onClick?: (event: MouseEvent | TouchEvent) => void
-}
-
-export type GroupingInstance<TGenerics extends PartialGenerics> = {
-  _notifyGroupingReset: () => void
-  getColumnAutoAggregationFn: (
-    columnId: string
-  ) => AggregationFn<TGenerics> | undefined
-  getColumnAggregationFn: (
-    columnId: string
-  ) => AggregationFn<TGenerics> | undefined
+export type GroupingInstance<TGenerics extends TableGenerics> = {
   setGrouping: (updater: Updater<GroupingState>) => void
-  resetGrouping: () => void
-  toggleColumnGrouping: (columnId: string) => void
-  getColumnCanGroup: (columnId: string) => boolean
-  getColumnIsGrouped: (columnId: string) => boolean
-  getColumnGroupedIndex: (columnId: string) => number
-  getToggleGroupingProps: <TGetter extends Getter<ToggleGroupingProps>>(
-    columnId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleGroupingProps, TGetter>
-  getRowIsGrouped: (rowId: string) => boolean
+  resetGrouping: (defaultState?: boolean) => void
   getPreGroupedRowModel: () => RowModel<TGenerics>
   getGroupedRowModel: () => RowModel<TGenerics>
+  _getGroupedRowModel?: () => RowModel<TGenerics>
 }
 
 //
 
-export const Grouping = {
-  getDefaultColumn: <
-    TGenerics extends PartialGenerics
+export const Grouping: TableFeature = {
+  getDefaultColumnDef: <
+    TGenerics extends TableGenerics
   >(): GroupingColumnDef<TGenerics> => {
     return {
-      aggregationType: 'auto',
+      aggregationFn: 'auto',
     }
   },
 
-  getInitialState: (): GroupingTableState => {
+  getInitialState: (state): GroupingTableState => {
     return {
       grouping: [],
+      ...state,
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): GroupingOptions<TGenerics> => {
     return {
       onGroupingChange: makeStateUpdater('grouping', instance),
-      autoResetGrouping: true,
       groupedColumnMode: 'reorder',
     }
   },
 
-  createColumn: <TGenerics extends PartialGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): GroupingColumn<TGenerics> => {
     return {
-      aggregationType: column.aggregationType,
-      getCanGroup: () => instance.getColumnCanGroup(column.id),
-      getGroupedIndex: () => instance.getColumnGroupedIndex(column.id),
-      getIsGrouped: () => instance.getColumnIsGrouped(column.id),
-      toggleGrouping: () => instance.toggleColumnGrouping(column.id),
-      getToggleGroupingProps: userProps =>
-        instance.getToggleGroupingProps(column.id, userProps),
-    }
-  },
+      toggleGrouping: () => {
+        instance.setGrouping(old => {
+          // Find any existing grouping for this column
+          if (old?.includes(column.id)) {
+            return old.filter(d => d !== column.id)
+          }
 
-  getInstance: <TGenerics extends PartialGenerics>(
-    instance: TableInstance<TGenerics>
-  ): GroupingInstance<TGenerics> => {
-    let registered = false
+          return [...(old ?? []), column.id]
+        })
+      },
 
-    return {
-      _notifyGroupingReset: () => {
-        if (!registered) {
-          registered = true
-          return
-        }
+      getCanGroup: () => {
+        return (
+          column.columnDef.enableGrouping ??
+          true ??
+          instance.options.enableGrouping ??
+          true ??
+          !!column.accessorFn
+        )
+      },
 
-        if (instance.options.autoResetAll === false) {
-          return
-        }
+      getIsGrouped: () => {
+        return instance.getState().grouping?.includes(column.id)
+      },
 
-        if (
-          instance.options.autoResetAll === true ||
-          instance.options.autoResetGrouping
-        ) {
-          instance.resetGrouping()
+      getGroupedIndex: () => instance.getState().grouping?.indexOf(column.id),
+
+      getToggleGroupingHandler: () => {
+        const canGroup = column.getCanGroup()
+
+        return () => {
+          if (!canGroup) return
+          column.toggleGrouping()
         }
       },
-      getColumnAutoAggregationFn: columnId => {
+      getAutoAggregationFn: () => {
         const firstRow = instance.getCoreRowModel().flatRows[0]
 
-        const value = firstRow?.values[columnId]
+        const value = firstRow?.getValue(column.id)
 
         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
+      getAggregationFn: () => {
+        const userAggregationFns = instance.options.aggregationFns
 
         if (!column) {
           throw new Error()
         }
 
-        return isFunction(column.aggregationType)
-          ? column.aggregationType
-          : column.aggregationType === 'auto'
-          ? instance.getColumnAutoFilterFn(columnId)
-          : (userAggregationTypes as Record<string, any>)?.[
-              column.aggregationType as string
+        return isFunction(column.aggregationFn)
+          ? column.aggregationFn
+          : column.aggregationFn === 'auto'
+          ? column.getAutoAggregationFn()
+          : (userAggregationFns as Record<string, any>)?.[
+              column.aggregationFn as string
             ] ??
-            (aggregationTypes[
-              column.aggregationType as BuiltInAggregationType
+            (aggregationFns[
+              column.aggregationFn as BuiltInAggregationFn
             ] as AggregationFn<TGenerics>)
       },
+    }
+  },
 
-      setGrouping: updater =>
-        instance.options.onGroupingChange?.(
-          updater,
-          functionalUpdate(updater, instance.getState().grouping)
-        ),
-
-      toggleColumnGrouping: columnId => {
-        instance.setGrouping(old => {
-          // Find any existing grouping for this column
-          if (old?.includes(columnId)) {
-            return old.filter(d => d !== columnId)
-          }
-
-          return [...(old ?? []), columnId]
-        })
-      },
-
-      getColumnCanGroup: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): GroupingInstance<TGenerics> => {
+    return {
+      setGrouping: updater => instance.options.onGroupingChange?.(updater),
 
-        return (
-          column.enableGrouping ??
-          instance.options.enableGrouping ??
-          column.defaultCanGroup ??
-          !!column.accessorFn
+      resetGrouping: defaultState => {
+        instance.setGrouping(
+          defaultState ? [] : instance.initialState?.grouping ?? []
         )
       },
 
-      getColumnIsGrouped: columnId => {
-        return instance.getState().grouping?.includes(columnId)
-      },
-
-      getColumnGroupedIndex: columnId =>
-        instance.getState().grouping?.indexOf(columnId),
-
-      resetGrouping: () => {
-        instance.setGrouping(instance.initialState?.grouping ?? [])
-      },
-
-      getToggleGroupingProps: (columnId, userProps) => {
-        const column = instance.getColumn(columnId)
-
-        const canGroup = column.getCanGroup()
+      getPreGroupedRowModel: () => instance.getSortedRowModel(),
+      getGroupedRowModel: () => {
+        if (
+          !instance._getGroupedRowModel &&
+          instance.options.getGroupedRowModel
+        ) {
+          instance._getGroupedRowModel =
+            instance.options.getGroupedRowModel(instance)
+        }
 
-        const initialProps: ToggleGroupingProps = {
-          title: canGroup ? 'Toggle Grouping' : undefined,
-          onClick: canGroup
-            ? (e: MouseEvent | TouchEvent) => {
-                e.persist()
-                column.toggleGrouping?.()
-              }
-            : undefined,
+        if (instance.options.manualGrouping || !instance._getGroupedRowModel) {
+          return instance.getPreGroupedRowModel()
         }
 
-        return propGetter(initialProps, userProps)
+        return instance._getGroupedRowModel()
       },
-
-      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
-          }
-
-          return groupRowsFn(instance, rowModel)
-        },
-        {
-          key: 'getGroupedRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => instance._notifyExpandedReset(),
-        }
-      ),
     }
   },
 
-  createRow: <TGenerics extends PartialGenerics>(
-    row: Row<TGenerics>,
-    instance: TableInstance<TGenerics>
+  createRow: <TGenerics extends TableGenerics>(
+    row: Row<TGenerics>
   ): GroupingRow => {
     return {
-      getIsGrouped: () => instance.getRowIsGrouped(row.id),
+      getIsGrouped: () => !!row.groupingColumnId,
+      _groupingValuesCache: {},
     }
   },
 
-  createCell: <TGenerics extends PartialGenerics>(
-    cell: Cell<TGenerics> & GroupingCell,
+  createCell: <TGenerics extends TableGenerics>(
+    cell: Cell<TGenerics>,
     column: Column<TGenerics>,
     row: Row<TGenerics>,
-    _instance: TableInstance<TGenerics>
-  ): GroupingCell => {
+    instance: TableInstance<TGenerics>
+  ): GroupingCell<TGenerics> => {
     return {
       getIsGrouped: () =>
         column.getIsGrouped() && column.id === row.groupingColumnId,
@@ -334,30 +260,44 @@ export const Grouping = {
         !cell.getIsGrouped() &&
         !cell.getIsPlaceholder() &&
         row.subRows?.length > 1,
+      renderAggregatedCell: () => {
+        const template =
+          column.columnDef.aggregatedCell ?? column.columnDef.cell
+
+        return template
+          ? instance._render(template, {
+              instance,
+              column,
+              row,
+              cell,
+              getValue: cell.getValue,
+            })
+          : null
+      },
     }
   },
+}
 
-  orderColumns: <TGenerics extends PartialGenerics>(
-    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

@@ -1,21 +1,22 @@
-import { functionalUpdate, makeStateUpdater, memo } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
 import {
   TableInstance,
   OnChangeFn,
   Updater,
   Column,
-  PartialGenerics,
+  TableGenerics,
 } from '../types'
 
-import { Grouping } from './Grouping'
-
-export type ColumnOrderState = string[]
+import { Grouping, orderColumns } from './Grouping'
+import { TableFeature } from '../core/instance'
 
 export type ColumnOrderTableState = {
   columnOrder: ColumnOrderState
 }
 
+export type ColumnOrderState = string[]
+
 export type ColumnOrderOptions = {
   onColumnOrderChange?: OnChangeFn<ColumnOrderState>
 }
@@ -24,22 +25,25 @@ export type ColumnOrderDefaultOptions = {
   onColumnOrderChange: OnChangeFn<ColumnOrderState>
 }
 
-export type ColumnOrderInstance<TGenerics extends PartialGenerics> = {
+export type ColumnOrderInstance<TGenerics extends TableGenerics> = {
   setColumnOrder: (updater: Updater<ColumnOrderState>) => void
-  resetColumnOrder: () => void
-  getOrderColumnsFn: () => (columns: Column<TGenerics>[]) => Column<TGenerics>[]
+  resetColumnOrder: (defaultState?: boolean) => void
+  _getOrderColumnsFn: () => (
+    columns: Column<TGenerics>[]
+  ) => Column<TGenerics>[]
 }
 
 //
 
-export const Ordering = {
-  getInitialState: (): ColumnOrderTableState => {
+export const Ordering: TableFeature = {
+  getInitialState: (state): ColumnOrderTableState => {
     return {
       columnOrder: [],
+      ...state,
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnOrderDefaultOptions => {
     return {
@@ -47,19 +51,18 @@ export const Ordering = {
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnOrderInstance<TGenerics> => {
     return {
       setColumnOrder: updater =>
-        instance.options.onColumnOrderChange?.(
-          updater,
-          functionalUpdate(updater, instance.getState().columnOrder)
-        ),
-      resetColumnOrder: () => {
-        instance.setColumnOrder(instance.initialState.columnOrder ?? [])
+        instance.options.onColumnOrderChange?.(updater),
+      resetColumnOrder: defaultState => {
+        instance.setColumnOrder(
+          defaultState ? [] : instance.initialState.columnOrder ?? []
+        )
       },
-      getOrderColumnsFn: memo(
+      _getOrderColumnsFn: memo(
         () => [
           instance.getState().columnOrder,
           instance.getState().grouping,
@@ -96,14 +99,10 @@ export const Ordering = {
             orderedColumns = [...orderedColumns, ...columnsCopy]
           }
 
-          return Grouping.orderColumns(
-            orderedColumns,
-            grouping,
-            groupedColumnMode
-          )
+          return orderColumns(orderedColumns, grouping, groupedColumnMode)
         },
         {
-          key: 'getOrderColumnsFn',
+          key: process.env.NODE_ENV === 'development' && 'getOrderColumnsFn',
           // debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),