@tanstack/table-core 8.0.0-alpha.55 → 8.0.0-alpha.59

package/src/features/Columns.ts

@@ -0,0 +1,288 @@
+import {
+  Cell,
+  Column,
+  Header,
+  TableGenerics,
+  TableInstance,
+  Row,
+  AccessorFn,
+  ColumnDef,
+  Renderable,
+  HeaderRenderProps,
+} from '../types'
+import { memo } from '../utils'
+
+export type CoreColumnDefType = 'data' | 'display' | 'group'
+
+export type CoreColumnDef<TGenerics extends TableGenerics> = {
+  id: string
+  accessorKey?: string & keyof TGenerics['Row']
+  accessorFn?: AccessorFn<TGenerics['Row']>
+  columns?: ColumnDef<TGenerics>[]
+  header?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      header: Header<TGenerics>
+      column: Column<TGenerics>
+    }
+  >
+  footer?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      header: Header<TGenerics>
+      column: Column<TGenerics>
+    }
+  >
+  cell?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      row: Row<TGenerics>
+      column: Column<TGenerics>
+      cell: Cell<TGenerics>
+      value: TGenerics['Value']
+    }
+  >
+  meta?: TGenerics['ColumnMeta']
+}
+
+export type CoreColumn<TGenerics extends TableGenerics> = {
+  id: string
+  depth: number
+  accessorFn?: AccessorFn<TGenerics['Row']>
+  columnDef: ColumnDef<TGenerics>
+  columnDefType: CoreColumnDefType
+  columns: Column<TGenerics>[]
+  parent?: Column<TGenerics>
+  getFlatColumns: () => Column<TGenerics>[]
+  getLeafColumns: () => Column<TGenerics>[]
+}
+
+export type ColumnsOptions<TGenerics extends TableGenerics> = {
+  columns: ColumnDef<TGenerics>[]
+  defaultColumn?: Partial<ColumnDef<TGenerics>>
+}
+
+export type ColumnsInstance<TGenerics extends TableGenerics> = {
+  getDefaultColumn: () => Partial<ColumnDef<TGenerics>>
+  getColumnDefs: () => ColumnDef<TGenerics>[]
+  createColumn: (
+    columnDef: ColumnDef<TGenerics>,
+    depth: number,
+    parent?: Column<TGenerics>
+  ) => Column<TGenerics>
+  getAllColumns: () => Column<TGenerics>[]
+  getAllFlatColumns: () => Column<TGenerics>[]
+  getAllFlatColumnsById: () => Record<string, Column<TGenerics>>
+  getAllLeafColumns: () => Column<TGenerics>[]
+  getColumn: (columnId: string) => Column<TGenerics>
+}
+
+//
+
+export const Columns = {
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): ColumnsInstance<TGenerics> => {
+    return {
+      getDefaultColumn: memo(
+        () => [instance.options.defaultColumn],
+        defaultColumn => {
+          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,
+            ...instance._features.reduce((obj, feature) => {
+              return Object.assign(obj, feature.getDefaultColumn?.())
+            }, {}),
+            ...defaultColumn,
+          } as Partial<ColumnDef<TGenerics>>
+        },
+        {
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+          key: 'getDefaultColumn',
+        }
+      ),
+
+      getColumnDefs: () => instance.options.columns,
+
+      createColumn: (
+        columnDef: ColumnDef<TGenerics> & { columnDefType?: CoreColumnDefType },
+        depth: number,
+        parent
+      ) => {
+        const defaultColumn = instance.getDefaultColumn()
+
+        let id =
+          columnDef.id ??
+          columnDef.accessorKey ??
+          (typeof columnDef.header === 'string' ? columnDef.header : undefined)
+
+        let accessorFn: AccessorFn<TGenerics['Row']> | undefined
+
+        if (columnDef.accessorFn) {
+          accessorFn = columnDef.accessorFn
+        } else if (columnDef.accessorKey) {
+          accessorFn = (originalRow?: TGenerics['Row']) =>
+            (originalRow as any)[columnDef.accessorKey]
+        }
+
+        if (!id) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error(
+              columnDef.accessorFn
+                ? `Columns require an id when using an accessorFn`
+                : `Columns require an id when using a non-string header`
+            )
+          }
+          throw new Error()
+        }
+
+        let column: CoreColumn<TGenerics> = {
+          ...defaultColumn,
+          ...columnDef,
+          id: `${id}`,
+          accessorFn,
+          parent: parent as any,
+          depth,
+          columnDef,
+          columnDefType: columnDef.columnDefType as CoreColumnDefType,
+          columns: [],
+          getFlatColumns: memo(
+            () => [true],
+            () => {
+              return [
+                column as Column<TGenerics>,
+                ...column.columns?.flatMap(d => d.getFlatColumns()),
+              ]
+            },
+            {
+              key: 'column.getFlatColumns',
+              debug: () =>
+                instance.options.debugAll ?? instance.options.debugColumns,
+            }
+          ),
+          getLeafColumns: memo(
+            () => [instance._getOrderColumnsFn()],
+            orderColumns => {
+              if (column.columns?.length) {
+                let leafColumns = column.columns.flatMap(column =>
+                  column.getLeafColumns()
+                )
+
+                return orderColumns(leafColumns)
+              }
+
+              return [column as Column<TGenerics>]
+            },
+            {
+              key: 'column.getLeafColumns',
+              debug: () =>
+                instance.options.debugAll ?? instance.options.debugColumns,
+            }
+          ),
+        }
+
+        column = instance._features.reduce((obj, feature) => {
+          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.
+        return column as Column<TGenerics>
+      },
+
+      getAllColumns: memo(
+        () => [instance.getColumnDefs()],
+        columnDefs => {
+          const recurseColumns = (
+            columnDefs: ColumnDef<TGenerics>[],
+            parent?: Column<TGenerics>,
+            depth = 0
+          ): Column<TGenerics>[] => {
+            return columnDefs.map(columnDef => {
+              const column = instance.createColumn(columnDef, depth, parent)
+
+              column.columns = columnDef.columns
+                ? recurseColumns(columnDef.columns, column, depth + 1)
+                : []
+
+              return column
+            })
+          }
+
+          return recurseColumns(columnDefs)
+        },
+        {
+          key: 'getAllColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getAllFlatColumns: memo(
+        () => [instance.getAllColumns()],
+        allColumns => {
+          return allColumns.flatMap(column => {
+            return column.getFlatColumns()
+          })
+        },
+        {
+          key: 'getAllFlatColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getAllFlatColumnsById: memo(
+        () => [instance.getAllFlatColumns()],
+        flatColumns => {
+          return flatColumns.reduce((acc, column) => {
+            acc[column.id] = column
+            return acc
+          }, {} as Record<string, Column<TGenerics>>)
+        },
+        {
+          key: 'getAllFlatColumnsById',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getAllLeafColumns: memo(
+        () => [instance.getAllColumns(), instance._getOrderColumnsFn()],
+        (allColumns, orderColumns) => {
+          let leafColumns = allColumns.flatMap(column =>
+            column.getLeafColumns()
+          )
+          return orderColumns(leafColumns)
+        },
+        {
+          key: 'getAllLeafColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getColumn: columnId => {
+        const column = instance.getAllFlatColumnsById()[columnId]
+
+        if (!column) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[Table] Column with id ${columnId} does not exist.`)
+          }
+          throw new Error()
+        }
+
+        return column
+      },
+    }
+  },
+}

package/src/features/Expanding.ts

@@ -1,14 +1,12 @@
 import { RowModel } from '..'
 import {
-  Getter,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Row,
   Updater,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater } from '../utils'
 
 export type ExpandedStateList = Record<string, boolean>
 export type ExpandedState = true | Record<string, boolean>
@@ -20,12 +18,11 @@ export type ExpandedRow = {
   toggleExpanded: (expanded?: boolean) => void
   getIsExpanded: () => boolean
   getCanExpand: () => boolean
-  getToggleExpandedProps: <TGetter extends Getter<ToggleExpandedProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
+  getToggleExpandedHandler: () => () => void
 }
 
 export type ExpandedOptions<TGenerics extends TableGenerics> = {
+  manualExpanding?: boolean
   onExpandedChange?: OnChangeFn<ExpandedState>
   autoResetExpanded?: boolean
   enableExpanded?: boolean
@@ -39,11 +36,6 @@ export type ExpandedOptions<TGenerics extends TableGenerics> = {
   paginateExpandedRows?: boolean
 }
 
-export type ToggleExpandedProps = {
-  title?: string
-  onClick?: (event: unknown) => void
-}
-
 export type ExpandedInstance<TGenerics extends TableGenerics> = {
   queueResetExpanded: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
@@ -53,13 +45,8 @@ export type ExpandedInstance<TGenerics extends TableGenerics> = {
   getRowCanExpand: (rowId: string) => boolean
   getCanSomeRowsExpand: () => boolean
   getIsRowExpanded: (rowId: string) => boolean
-  getToggleExpandedProps: <TGetter extends Getter<ToggleExpandedProps>>(
-    rowId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
-  getToggleAllRowsExpandedProps: <TGetter extends Getter<ToggleExpandedProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
+  getToggleExpandedHandler: (rowId: string) => undefined | (() => void)
+  getToggleAllRowsExpandedHandler: () => (event: unknown) => void
   getIsSomeRowsExpanded: () => boolean
   getIsAllRowsExpanded: () => boolean
   getExpandedDepth: () => number
@@ -88,7 +75,7 @@ export const Expanding = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ExpandedInstance<TGenerics> => {
     let registered = false
@@ -200,7 +187,7 @@ export const Expanding = {
           instance.getRowCanExpand(id)
         )
       },
-      getToggleExpandedProps: (rowId, userProps) => {
+      getToggleExpandedHandler: rowId => {
         const row = instance.getRow(rowId)
 
         if (!row) {
@@ -209,28 +196,16 @@ export const Expanding = {
 
         const canExpand = instance.getRowCanExpand(rowId)
 
-        const initialProps: ToggleExpandedProps = {
-          title: canExpand ? 'Toggle Expanded' : undefined,
-          onClick: canExpand
-            ? (e: unknown) => {
-                ;(e as any).persist?.()
-                instance.toggleRowExpanded(rowId)
-              }
-            : undefined,
+        return () => {
+          if (!canExpand) return
+          instance.toggleRowExpanded(rowId)
         }
-
-        return propGetter(initialProps, userProps)
       },
-      getToggleAllRowsExpandedProps: userProps => {
-        const initialProps: ToggleExpandedProps = {
-          title: 'Toggle All Expanded',
-          onClick: (e: unknown) => {
-            ;(e as any).persist?.()
-            instance.toggleAllRowsExpanded()
-          },
+      getToggleAllRowsExpandedHandler: () => {
+        return (e: unknown) => {
+          ;(e as any).persist?.()
+          instance.toggleAllRowsExpanded()
         }
-
-        return propGetter(initialProps, userProps)
       },
       getIsSomeRowsExpanded: () => {
         const expanded = instance.getState().expanded
@@ -281,7 +256,10 @@ export const Expanding = {
             instance.options.getExpandedRowModel(instance)
         }
 
-        if (!instance._getExpandedRowModel) {
+        if (
+          instance.options.manualExpanding ||
+          !instance._getExpandedRowModel
+        ) {
           return instance.getPreExpandedRowModel()
         }
 
@@ -299,8 +277,8 @@ export const Expanding = {
         void instance.toggleRowExpanded(row.id, expanded),
       getIsExpanded: () => instance.getIsRowExpanded(row.id),
       getCanExpand: () => row.subRows && !!row.subRows.length,
-      getToggleExpandedProps: userProps =>
-        instance.getToggleExpandedProps(row.id, userProps),
+      getToggleExpandedHandler: () =>
+        instance.getToggleExpandedHandler(row.id)!,
     }
   },
 }

package/src/features/Filters.ts

@@ -83,6 +83,7 @@ export type FiltersOptions<TGenerics extends TableGenerics> = {
   filterFns?: TGenerics['FilterFns']
   enableFilters?: boolean
   // Column
+  manualColumnFiltering?: boolean
   onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
   autoResetColumnFilters?: boolean
   enableColumnFilters?: boolean
@@ -90,6 +91,7 @@ export type FiltersOptions<TGenerics extends TableGenerics> = {
     instance: TableInstance<TGenerics>
   ) => () => RowModel<TGenerics>
   // Global
+  manualGlobalFiltering?: boolean
   globalFilterFn?: FilterFnOption<TGenerics>
   onGlobalFilterChange?: OnChangeFn<any>
   autoResetGlobalFilter?: boolean
@@ -230,7 +232,7 @@ export const Filters = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): FiltersInstance<TGenerics> => {
     let registered = false
@@ -471,7 +473,10 @@ export const Filters = {
             instance.options.getColumnFilteredRowModel(instance)
         }
 
-        if (!instance._getColumnFilteredRowModel) {
+        if (
+          instance.options.manualColumnFiltering ||
+          !instance._getColumnFilteredRowModel
+        ) {
           return instance.getPreColumnFilteredRowModel()
         }
 
@@ -487,7 +492,10 @@ export const Filters = {
             instance.options.getGlobalFilteredRowModel(instance)
         }
 
-        if (!instance._getGlobalFilteredRowModel) {
+        if (
+          instance.options.manualGlobalFiltering ||
+          !instance._getGlobalFilteredRowModel
+        ) {
           return instance.getPreGlobalFilteredRowModel()
         }
 

package/src/features/Grouping.ts

@@ -3,24 +3,14 @@ import { BuiltInAggregationFn, aggregationFns } from '../aggregationFns'
 import {
   Cell,
   Column,
-  Getter,
   OnChangeFn,
-  PropGetterValue,
   TableInstance,
   Row,
   Updater,
   Renderable,
-  UseRenderer,
   TableGenerics,
 } from '../types'
-import {
-  functionalUpdate,
-  isFunction,
-  makeStateUpdater,
-  memo,
-  Overwrite,
-  propGetter,
-} from '../utils'
+import { isFunction, makeStateUpdater, Overwrite } from '../utils'
 
 export type GroupingState = string[]
 
@@ -67,9 +57,7 @@ export type GroupingColumn<TGenerics extends TableGenerics> = {
   getIsGrouped: () => boolean
   getGroupedIndex: () => number
   toggleGrouping: () => void
-  getToggleGroupingProps: <TGetter extends Getter<ToggleGroupingProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleGroupingProps, TGetter>
+  getToggleGroupingHandler: () => () => void
 }
 
 export type GroupingRow = {
@@ -82,7 +70,7 @@ export type GroupingCell<TGenerics extends TableGenerics> = {
   getIsGrouped: () => boolean
   getIsPlaceholder: () => boolean
   getIsAggregated: () => boolean
-  renderAggregatedCell: () => string | null | ReturnType<UseRenderer<TGenerics>>
+  renderAggregatedCell: () => string | null | TGenerics['Rendered']
 }
 
 export type ColumnDefaultOptions = {
@@ -93,6 +81,7 @@ export type ColumnDefaultOptions = {
 }
 
 export type GroupingOptions<TGenerics extends TableGenerics> = {
+  manualGrouping?: boolean
   aggregationFns?: TGenerics['AggregationFns']
   onGroupingChange?: OnChangeFn<GroupingState>
   autoResetGrouping?: boolean
@@ -107,11 +96,6 @@ export type GroupingOptions<TGenerics extends TableGenerics> = {
 
 export type GroupingColumnMode = false | 'reorder' | 'remove'
 
-export type ToggleGroupingProps = {
-  title?: string
-  onClick?: (event: unknown) => void
-}
-
 export type GroupingInstance<TGenerics extends TableGenerics> = {
   queueResetGrouping: () => void
   getColumnAutoAggregationFn: (
@@ -126,10 +110,7 @@ export type GroupingInstance<TGenerics extends TableGenerics> = {
   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>
+  getToggleGroupingHandler: (columnId: string) => undefined | (() => void)
   getRowIsGrouped: (rowId: string) => boolean
   getPreGroupedRowModel: () => RowModel<TGenerics>
   getGroupedRowModel: () => RowModel<TGenerics>
@@ -173,12 +154,12 @@ export const Grouping = {
       getGroupedIndex: () => instance.getColumnGroupedIndex(column.id),
       getIsGrouped: () => instance.getColumnIsGrouped(column.id),
       toggleGrouping: () => instance.toggleColumnGrouping(column.id),
-      getToggleGroupingProps: userProps =>
-        instance.getToggleGroupingProps(column.id, userProps),
+      getToggleGroupingHandler: () =>
+        instance.getToggleGroupingHandler(column.id)!,
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): GroupingInstance<TGenerics> => {
     let registered = false
@@ -277,21 +258,14 @@ export const Grouping = {
         instance.setGrouping(instance.initialState?.grouping ?? [])
       },
 
-      getToggleGroupingProps: (columnId, userProps) => {
+      getToggleGroupingHandler: columnId => {
         const column = instance.getColumn(columnId)
-
         const canGroup = column.getCanGroup()
 
-        const initialProps: ToggleGroupingProps = {
-          title: canGroup ? 'Toggle Grouping' : undefined,
-          onClick: canGroup
-            ? (e: unknown) => {
-                column.toggleGrouping?.()
-              }
-            : undefined,
+        return () => {
+          if (!canGroup) return
+          column.toggleGrouping?.()
         }
-
-        return propGetter(initialProps, userProps)
       },
 
       getRowIsGrouped: rowId => !!instance.getRow(rowId)?.groupingColumnId,
@@ -306,7 +280,7 @@ export const Grouping = {
             instance.options.getGroupedRowModel(instance)
         }
 
-        if (!instance._getGroupedRowModel) {
+        if (instance.options.manualGrouping || !instance._getGroupedRowModel) {
           return instance.getPreGroupedRowModel()
         }