@tanstack/table-core 8.0.0-alpha.23 → 8.0.0-alpha.26

package/package.json

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

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,7 +148,7 @@ 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']
@@ -161,13 +162,10 @@ export type CoreRow<TGenerics extends PartialGenerics> = {
   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,11 +197,14 @@ export type CoreColumnDef<TGenerics extends PartialGenerics> = {
 }
 // & GeneratedProperties<true>
 
-export type CoreColumn<TGenerics extends PartialGenerics> = {
+export type CoreColumnDefType = 'data' | 'display' | 'group'
+
+export type CoreColumn<TGenerics extends AnyGenerics> = {
   id: string
   depth: number
   accessorFn?: AccessorFn<TGenerics['Row']>
   columnDef: ColumnDef<TGenerics>
+  columnDefType: CoreColumnDefType
   getWidth: () => number
   columns: Column<TGenerics>[]
   parent?: Column<TGenerics>
@@ -211,7 +212,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 +222,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 +234,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 +242,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 +289,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>>
@@ -301,7 +302,11 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
 
     getColumnDefs: () => instance.options.columns,
 
-    createColumn: (columnDef, depth: number, parent) => {
+    createColumn: (
+      columnDef: ColumnDef<TGenerics> & { columnDefType?: CoreColumnDefType },
+      depth: number,
+      parent
+    ) => {
       const defaultColumn = instance.getDefaultColumn()
 
       let id =
@@ -330,7 +335,6 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
       }
 
       let column: CoreColumn<TGenerics> = {
-        ...defaultColumnSizing,
         ...defaultColumn,
         ...columnDef,
         id: `${id}`,
@@ -338,6 +342,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         parent: parent as any,
         depth,
         columnDef,
+        columnDefType: columnDef.columnDefType as CoreColumnDefType,
         columns: [],
         getWidth: () => instance.getColumnWidth(column.id),
         getFlatColumns: memo(
@@ -376,10 +381,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 +467,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 +492,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>,
@@ -567,7 +551,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>

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!,
@@ -127,11 +133,12 @@ function _createTable<TGenerics extends PartialGenerics>(
       },
     },
     createColumns: columns => columns,
-    createDisplayColumn: column => column as any,
-    createGroup: column => column as any,
+    createDisplayColumn: column => ({ ...column, columnDefType: 'display' }),
+    createGroup: column => ({ ...column, columnDefType: 'group' } as any),
     createDataColumn: (accessor, column): any => {
       column = {
         ...column,
+        columnDefType: 'data',
         id: column.id,
       }
 

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 => {

package/src/features/Filters.ts

@@ -24,17 +24,17 @@ export type ColumnFilter = {
 
 export type ColumnFiltersState = ColumnFilter[]
 
-export type FilterFn<TGenerics extends PartialGenerics> = {
+export type FilterFn<TGenerics extends AnyGenerics> = {
   (rows: Row<TGenerics>[], columnIds: string[], filterValue: any): any
   autoRemove?: ColumnFilterAutoRemoveTestFn<TGenerics>
 }
 
-export type ColumnFilterAutoRemoveTestFn<TGenerics extends PartialGenerics> = (
+export type ColumnFilterAutoRemoveTestFn<TGenerics extends AnyGenerics> = (
   value: unknown,
   column?: Column<TGenerics>
 ) => boolean
 
-export type CustomFilterTypes<TGenerics extends PartialGenerics> = Record<
+export type CustomFilterTypes<TGenerics extends AnyGenerics> = Record<
   string,
   FilterFn<TGenerics>
 >
@@ -44,13 +44,13 @@ export type FiltersTableState = {
   globalFilter: any
 }
 
-export type FilterType<TGenerics extends PartialGenerics> =
+export type FilterType<TGenerics extends AnyGenerics> =
   | 'auto'
   | BuiltInFilterType
   | TGenerics['FilterFns']
   | FilterFn<TGenerics>
 
-export type FiltersColumnDef<TGenerics extends PartialGenerics> = {
+export type FiltersColumnDef<TGenerics extends AnyGenerics> = {
   filterType?: FilterType<Overwrite<TGenerics, { Value: any }>>
   enableAllFilters?: boolean
   enableColumnFilter?: boolean
@@ -60,7 +60,7 @@ export type FiltersColumnDef<TGenerics extends PartialGenerics> = {
   defaultCanGlobalFilter?: boolean
 }
 
-export type FiltersColumn<TGenerics extends PartialGenerics> = {
+export type FiltersColumn<TGenerics extends AnyGenerics> = {
   filterType: FilterType<Overwrite<TGenerics, { Value: any }>>
   getCanColumnFilter: () => boolean
   getCanGlobalFilter: () => boolean
@@ -73,7 +73,7 @@ export type FiltersColumn<TGenerics extends PartialGenerics> = {
   getPreFilteredMinMaxValues: () => [any, any]
 }
 
-export type FiltersOptions<TGenerics extends PartialGenerics> = {
+export type FiltersOptions<TGenerics extends AnyGenerics> = {
   filterFromLeafRows?: boolean
   filterTypes?: TGenerics['FilterFns']
   enableFilters?: boolean
@@ -98,7 +98,7 @@ export type FiltersOptions<TGenerics extends PartialGenerics> = {
   getColumnCanGlobalFilterFn?: (column: Column<TGenerics>) => boolean
 }
 
-export type FiltersInstance<TGenerics extends PartialGenerics> = {
+export type FiltersInstance<TGenerics extends AnyGenerics> = {
   _notifyFiltersReset: () => void
   getColumnAutoFilterFn: (columnId: string) => FilterFn<TGenerics> | undefined
 
@@ -135,7 +135,7 @@ export type FiltersInstance<TGenerics extends PartialGenerics> = {
 
 export const Filters = {
   getDefaultColumn: <
-    TGenerics extends PartialGenerics
+    TGenerics extends AnyGenerics
   >(): FiltersColumnDef<TGenerics> => {
     return {
       filterType: 'auto',
@@ -149,7 +149,7 @@ export const Filters = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends AnyGenerics>(
     instance: TableInstance<TGenerics>
   ): FiltersOptions<TGenerics> => {
     return {
@@ -169,7 +169,7 @@ export const Filters = {
     }
   },
 
-  createColumn: <TGenerics extends PartialGenerics>(
+  createColumn: <TGenerics extends AnyGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): FiltersColumn<TGenerics> => {
@@ -228,7 +228,7 @@ export const Filters = {
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  getInstance: <TGenerics extends AnyGenerics>(
     instance: TableInstance<TGenerics>
   ): FiltersInstance<TGenerics> => {
     let registered = false
@@ -553,7 +553,7 @@ export const Filters = {
   },
 }
 
-export function shouldAutoRemoveFilter<TGenerics extends PartialGenerics>(
+export function shouldAutoRemoveFilter<TGenerics extends AnyGenerics>(
   filterFn?: FilterFn<TGenerics>,
   value?: any,
   column?: Column<TGenerics>