@tanstack/table-core 8.0.0-alpha.53 → 8.0.0-alpha.57

package/src/features/Columns.ts

@@ -0,0 +1,290 @@
+import { features } from 'process'
+import {
+  Cell,
+  Column,
+  Header,
+  TableGenerics,
+  TableInstance,
+  Row,
+  AccessorFn,
+  ColumnDef,
+  Renderable,
+  HeaderRenderProps,
+} from '../types'
+import { memo } from '../utils'
+import { ColumnPinningPosition } from './Pinning'
+
+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

@@ -2,8 +2,7 @@ import { RowModel } from '..'
 import {
   Getter,
   OnChangeFn,
-  AnyGenerics,
-  PartialGenerics,
+  TableGenerics,
   PropGetterValue,
   TableInstance,
   Row,
@@ -26,7 +25,7 @@ export type ExpandedRow = {
   ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
 }
 
-export type ExpandedOptions<TGenerics extends AnyGenerics> = {
+export type ExpandedOptions<TGenerics extends TableGenerics> = {
   onExpandedChange?: OnChangeFn<ExpandedState>
   autoResetExpanded?: boolean
   enableExpanded?: boolean
@@ -45,7 +44,7 @@ export type ToggleExpandedProps = {
   onClick?: (event: unknown) => void
 }
 
-export type ExpandedInstance<TGenerics extends AnyGenerics> = {
+export type ExpandedInstance<TGenerics extends TableGenerics> = {
   queueResetExpanded: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
   toggleRowExpanded: (rowId: string, expanded?: boolean) => void
@@ -78,7 +77,7 @@ export const Expanding = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends AnyGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ExpandedOptions<TGenerics> => {
     return {
@@ -89,7 +88,7 @@ export const Expanding = {
     }
   },
 
-  getInstance: <TGenerics extends AnyGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ExpandedInstance<TGenerics> => {
     let registered = false
@@ -291,7 +290,7 @@ export const Expanding = {
     }
   },
 
-  createRow: <TGenerics extends AnyGenerics>(
+  createRow: <TGenerics extends TableGenerics>(
     row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
   ): ExpandedRow => {

package/src/features/Filters.ts

@@ -3,8 +3,7 @@ import { BuiltInFilterFn, filterFns } from '../filterFns'
 import {
   Column,
   OnChangeFn,
-  AnyGenerics,
-  PartialGenerics,
+  TableGenerics,
   TableInstance,
   Row,
   Updater,
@@ -35,28 +34,28 @@ export type ColumnFilter = {
 A filter function is any function that takes an array of rows and returns an array of rows. Because filter functions can be used for both column and global filters, they are passed an array of columnIds to filter on. 
 */
 
-export type FilterFn<TGenerics extends AnyGenerics> = {
+export type FilterFn<TGenerics extends TableGenerics> = {
   (rows: Row<TGenerics>[], columnIds: string[], filterValue: any): any
   autoRemove?: ColumnFilterAutoRemoveTestFn<TGenerics>
 }
 
-export type ColumnFilterAutoRemoveTestFn<TGenerics extends AnyGenerics> = (
+export type ColumnFilterAutoRemoveTestFn<TGenerics extends TableGenerics> = (
   value: unknown,
   column?: Column<TGenerics>
 ) => boolean
 
-export type CustomFilterFns<TGenerics extends AnyGenerics> = Record<
+export type CustomFilterFns<TGenerics extends TableGenerics> = Record<
   string,
   FilterFn<TGenerics>
 >
 
-export type FilterFnOption<TGenerics extends AnyGenerics> =
+export type FilterFnOption<TGenerics extends TableGenerics> =
   | 'auto'
   | BuiltInFilterFn
   | keyof TGenerics['FilterFns']
   | FilterFn<TGenerics>
 
-export type FiltersColumnDef<TGenerics extends AnyGenerics> = {
+export type FiltersColumnDef<TGenerics extends TableGenerics> = {
   filterFn?: FilterFnOption<Overwrite<TGenerics, { Value: any }>>
   enableAllFilters?: boolean
   enableColumnFilter?: boolean
@@ -66,7 +65,7 @@ export type FiltersColumnDef<TGenerics extends AnyGenerics> = {
   defaultCanGlobalFilter?: boolean
 }
 
-export type FiltersColumn<TGenerics extends AnyGenerics> = {
+export type FiltersColumn<TGenerics extends TableGenerics> = {
   filterFn: FilterFnOption<Overwrite<TGenerics, { Value: any }>>
   getCanColumnFilter: () => boolean
   getCanGlobalFilter: () => boolean
@@ -79,7 +78,7 @@ export type FiltersColumn<TGenerics extends AnyGenerics> = {
   getPreFilteredMinMaxValues: () => [any, any]
 }
 
-export type FiltersOptions<TGenerics extends AnyGenerics> = {
+export type FiltersOptions<TGenerics extends TableGenerics> = {
   filterFromLeafRows?: boolean
   filterFns?: TGenerics['FilterFns']
   enableFilters?: boolean
@@ -101,7 +100,7 @@ export type FiltersOptions<TGenerics extends AnyGenerics> = {
   getColumnCanGlobalFilterFn?: (column: Column<TGenerics>) => boolean
 }
 
-export type FiltersInstance<TGenerics extends AnyGenerics> = {
+export type FiltersInstance<TGenerics extends TableGenerics> = {
   queueResetFilters: () => void
   getColumnAutoFilterFn: (columnId: string) => FilterFn<TGenerics> | undefined
 
@@ -136,7 +135,7 @@ export type FiltersInstance<TGenerics extends AnyGenerics> = {
 
 export const Filters = {
   getDefaultColumn: <
-    TGenerics extends AnyGenerics
+    TGenerics extends TableGenerics
   >(): FiltersColumnDef<TGenerics> => {
     return {
       filterFn: 'auto',
@@ -152,7 +151,7 @@ export const Filters = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends AnyGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): FiltersOptions<TGenerics> => {
     return {
@@ -172,7 +171,7 @@ export const Filters = {
     }
   },
 
-  createColumn: <TGenerics extends AnyGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): FiltersColumn<TGenerics> => {
@@ -231,7 +230,7 @@ export const Filters = {
     }
   },
 
-  getInstance: <TGenerics extends AnyGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): FiltersInstance<TGenerics> => {
     let registered = false
@@ -498,7 +497,7 @@ export const Filters = {
   },
 }
 
-export function shouldAutoRemoveFilter<TGenerics extends AnyGenerics>(
+export function shouldAutoRemoveFilter<TGenerics extends TableGenerics>(
   filterFn?: FilterFn<TGenerics>,
   value?: any,
   column?: Column<TGenerics>

package/src/features/Grouping.ts

@@ -9,10 +9,9 @@ import {
   TableInstance,
   Row,
   Updater,
-  PartialGenerics,
   Renderable,
   UseRenderer,
-  AnyGenerics,
+  TableGenerics,
 } from '../types'
 import {
   functionalUpdate,
@@ -25,17 +24,17 @@ import {
 
 export type GroupingState = string[]
 
-export type AggregationFn<TGenerics extends AnyGenerics> = (
+export type AggregationFn<TGenerics extends TableGenerics> = (
   getLeafValues: () => TGenerics['Row'][],
   getChildValues: () => TGenerics['Row'][]
 ) => any
 
-export type CustomAggregationFns<TGenerics extends AnyGenerics> = Record<
+export type CustomAggregationFns<TGenerics extends TableGenerics> = Record<
   string,
   AggregationFn<TGenerics>
 >
 
-export type AggregationFnOption<TGenerics extends AnyGenerics> =
+export type AggregationFnOption<TGenerics extends TableGenerics> =
   | 'auto'
   | BuiltInAggregationFn
   | keyof TGenerics['AggregationFns']
@@ -45,7 +44,7 @@ export type GroupingTableState = {
   grouping: GroupingState
 }
 
-export type GroupingColumnDef<TGenerics extends AnyGenerics> = {
+export type GroupingColumnDef<TGenerics extends TableGenerics> = {
   aggregationFn?: AggregationFnOption<Overwrite<TGenerics, { Value: any }>>
   aggregateValue?: (columnValue: unknown) => any
   aggregatedCell?: Renderable<
@@ -62,7 +61,7 @@ export type GroupingColumnDef<TGenerics extends AnyGenerics> = {
   defaultCanGroup?: boolean
 }
 
-export type GroupingColumn<TGenerics extends AnyGenerics> = {
+export type GroupingColumn<TGenerics extends TableGenerics> = {
   aggregationFn?: AggregationFnOption<Overwrite<TGenerics, { Value: any }>>
   getCanGroup: () => boolean
   getIsGrouped: () => boolean
@@ -79,7 +78,7 @@ export type GroupingRow = {
   getIsGrouped: () => boolean
 }
 
-export type GroupingCell<TGenerics extends AnyGenerics> = {
+export type GroupingCell<TGenerics extends TableGenerics> = {
   getIsGrouped: () => boolean
   getIsPlaceholder: () => boolean
   getIsAggregated: () => boolean
@@ -93,7 +92,7 @@ export type ColumnDefaultOptions = {
   enableGrouping: boolean
 }
 
-export type GroupingOptions<TGenerics extends AnyGenerics> = {
+export type GroupingOptions<TGenerics extends TableGenerics> = {
   aggregationFns?: TGenerics['AggregationFns']
   onGroupingChange?: OnChangeFn<GroupingState>
   autoResetGrouping?: boolean
@@ -113,7 +112,7 @@ export type ToggleGroupingProps = {
   onClick?: (event: unknown) => void
 }
 
-export type GroupingInstance<TGenerics extends AnyGenerics> = {
+export type GroupingInstance<TGenerics extends TableGenerics> = {
   queueResetGrouping: () => void
   getColumnAutoAggregationFn: (
     columnId: string
@@ -141,7 +140,7 @@ export type GroupingInstance<TGenerics extends AnyGenerics> = {
 
 export const Grouping = {
   getDefaultColumn: <
-    TGenerics extends AnyGenerics
+    TGenerics extends TableGenerics
   >(): GroupingColumnDef<TGenerics> => {
     return {
       aggregationFn: 'auto',
@@ -154,7 +153,7 @@ export const Grouping = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends AnyGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): GroupingOptions<TGenerics> => {
     return {
@@ -164,7 +163,7 @@ export const Grouping = {
     }
   },
 
-  createColumn: <TGenerics extends AnyGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): GroupingColumn<TGenerics> => {
@@ -179,7 +178,7 @@ export const Grouping = {
     }
   },
 
-  getInstance: <TGenerics extends AnyGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): GroupingInstance<TGenerics> => {
     let registered = false
@@ -316,7 +315,7 @@ export const Grouping = {
     }
   },
 
-  createRow: <TGenerics extends AnyGenerics>(
+  createRow: <TGenerics extends TableGenerics>(
     row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
   ): GroupingRow => {
@@ -325,7 +324,7 @@ export const Grouping = {
     }
   },
 
-  createCell: <TGenerics extends AnyGenerics>(
+  createCell: <TGenerics extends TableGenerics>(
     cell: Cell<TGenerics>,
     column: Column<TGenerics>,
     row: Row<TGenerics>,
@@ -355,7 +354,7 @@ export const Grouping = {
     }
   },
 
-  orderColumns: <TGenerics extends AnyGenerics>(
+  orderColumns: <TGenerics extends TableGenerics>(
     leafColumns: Column<TGenerics>[],
     grouping: string[],
     groupedColumnMode?: GroupingColumnMode