@tanstack/table-core 8.0.13 → 8.1.1

package/src/core/{instance.ts → table.ts}

@@ -4,15 +4,15 @@ import {
   Updater,
   TableOptionsResolved,
   TableState,
-  TableInstance,
-  Renderable,
-  TableGenerics,
+  Table,
+  ColumnDefTemplate,
   InitialTableState,
   Row,
   Column,
   RowModel,
   ColumnDef,
   TableOptions,
+  RowData,
 } from '../types'
 
 //
@@ -32,14 +32,14 @@ import { Sorting } from '../features/Sorting'
 import { Visibility } from '../features/Visibility'
 
 export type TableFeature = {
-  getDefaultOptions?: (instance: any) => any
+  getDefaultOptions?: (table: any) => any
   getInitialState?: (initialState?: InitialTableState) => any
-  createInstance?: (instance: any) => any
+  createTable?: (table: any) => any
   getDefaultColumnDef?: () => any
-  createColumn?: (column: any, instance: any) => any
-  createHeader?: (column: any, instance: any) => any
-  createCell?: (cell: any, column: any, row: any, instance: any) => any
-  createRow?: (row: any, instance: any) => any
+  createColumn?: (column: any, table: any) => any
+  createHeader?: (column: any, table: any) => any
+  createCell?: (cell: any, column: any, row: any, table: any) => any
+  createRow?: (row: any, table: any) => any
 }
 
 const features = [
@@ -60,11 +60,10 @@ const features = [
 
 export type CoreTableState = {}
 
-export type CoreOptions<TGenerics extends TableGenerics> = {
-  data: TGenerics['Row'][]
+export type CoreOptions<TData extends RowData> = {
+  data: TData[]
   state: Partial<TableState>
   onStateChange: (updater: Updater<TableState>) => void
-  render: TGenerics['Renderer']
   debugAll?: boolean
   debugTable?: boolean
   debugHeaders?: boolean
@@ -73,72 +72,57 @@ export type CoreOptions<TGenerics extends TableGenerics> = {
   initialState?: InitialTableState
   autoResetAll?: boolean
   mergeOptions?: (
-    defaultOptions: TableOptions<TGenerics>,
-    options: Partial<TableOptions<TGenerics>>
-  ) => TableOptions<TGenerics>
-  meta?: TGenerics['TableMeta']
-  getCoreRowModel: (instance: TableInstance<any>) => () => RowModel<any>
-  getSubRows?: (
-    originalRow: TGenerics['Row'],
-    index: number
-  ) => undefined | TGenerics['Row'][]
-  getRowId?: (
-    originalRow: TGenerics['Row'],
-    index: number,
-    parent?: Row<TGenerics>
-  ) => string
-  columns: ColumnDef<TGenerics>[]
-  defaultColumn?: Partial<ColumnDef<TGenerics>>
+    defaultOptions: TableOptions<TData>,
+    options: Partial<TableOptions<TData>>
+  ) => TableOptions<TData>
+  meta?: unknown
+  getCoreRowModel: (table: Table<any>) => () => RowModel<any>
+  getSubRows?: (originalRow: TData, index: number) => undefined | TData[]
+  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
+  columns: ColumnDef<TData>[]
+  defaultColumn?: Partial<ColumnDef<TData>>
   renderFallbackValue: any
 }
 
-export type CoreInstance<TGenerics extends TableGenerics> = {
+export type CoreInstance<TData extends RowData> = {
   initialState: TableState
   reset: () => void
-  options: RequiredKeys<TableOptionsResolved<TGenerics>, 'state'>
-  setOptions: (newOptions: Updater<TableOptionsResolved<TGenerics>>) => void
+  options: RequiredKeys<TableOptionsResolved<TData>, 'state'>
+  setOptions: (newOptions: Updater<TableOptionsResolved<TData>>) => void
   getState: () => TableState
   setState: (updater: Updater<TableState>) => void
   _features: readonly TableFeature[]
   _queue: (cb: () => void) => void
-  _render: <TProps>(
-    template: Renderable<TGenerics, TProps>,
-    props: TProps
-  ) => string | null | TGenerics['Rendered']
-  _getRowId: (
-    _: TGenerics['Row'],
-    index: number,
-    parent?: Row<TGenerics>
-  ) => string
-  getCoreRowModel: () => RowModel<TGenerics>
-  _getCoreRowModel?: () => RowModel<TGenerics>
-  getRowModel: () => RowModel<TGenerics>
-  getRow: (id: string) => Row<TGenerics>
-  _getDefaultColumnDef: () => Partial<ColumnDef<TGenerics>>
-  _getColumnDefs: () => ColumnDef<TGenerics>[]
-  _getAllFlatColumnsById: () => Record<string, Column<TGenerics>>
-  getAllColumns: () => Column<TGenerics>[]
-  getAllFlatColumns: () => Column<TGenerics>[]
-  getAllLeafColumns: () => Column<TGenerics>[]
-  getColumn: (columnId: string) => Column<TGenerics>
+  _getRowId: (_: TData, index: number, parent?: Row<TData>) => string
+  getCoreRowModel: () => RowModel<TData>
+  _getCoreRowModel?: () => RowModel<TData>
+  getRowModel: () => RowModel<TData>
+  getRow: (id: string) => Row<TData>
+  _getDefaultColumnDef: () => Partial<ColumnDef<TData>>
+  _getColumnDefs: () => ColumnDef<TData>[]
+  _getAllFlatColumnsById: () => Record<string, Column<TData>>
+  getAllColumns: () => Column<TData>[]
+  getAllFlatColumns: () => Column<TData>[]
+  getAllLeafColumns: () => Column<TData>[]
+  getColumn: (columnId: string) => Column<TData>
 }
 
-export function createTableInstance<TGenerics extends TableGenerics>(
-  options: TableOptionsResolved<TGenerics>
-): TableInstance<TGenerics> {
+export function createTable<TData extends RowData>(
+  options: TableOptionsResolved<TData>
+): Table<TData> {
   if (options.debugAll || options.debugTable) {
     console.info('Creating Table Instance...')
   }
 
-  let instance = { _features: features } as unknown as TableInstance<TGenerics>
+  let table = { _features: features } as unknown as Table<TData>
 
-  const defaultOptions = instance._features.reduce((obj, feature) => {
-    return Object.assign(obj, feature.getDefaultOptions?.(instance))
-  }, {}) as TableOptionsResolved<TGenerics>
+  const defaultOptions = table._features.reduce((obj, feature) => {
+    return Object.assign(obj, feature.getDefaultOptions?.(table))
+  }, {}) as TableOptionsResolved<TData>
 
-  const mergeOptions = (options: TableOptionsResolved<TGenerics>) => {
-    if (instance.options.mergeOptions) {
-      return instance.options.mergeOptions(defaultOptions, options)
+  const mergeOptions = (options: TableOptionsResolved<TData>) => {
+    if (table.options.mergeOptions) {
+      return table.options.mergeOptions(defaultOptions, options)
     }
 
     return {
@@ -154,14 +138,14 @@ export function createTableInstance<TGenerics extends TableGenerics>(
     ...(options.initialState ?? {}),
   } as TableState
 
-  instance._features.forEach(feature => {
+  table._features.forEach(feature => {
     initialState = feature.getInitialState?.(initialState) ?? initialState
   })
 
   const queued: (() => void)[] = []
   let queuedTimeout = false
 
-  const coreInstance: CoreInstance<TGenerics> = {
+  const coreInstance: CoreInstance<TData> = {
     _features: features,
     options: {
       ...defaultOptions,
@@ -191,59 +175,44 @@ export function createTableInstance<TGenerics extends TableGenerics>(
       }
     },
     reset: () => {
-      instance.setState(instance.initialState)
+      table.setState(table.initialState)
     },
     setOptions: updater => {
-      const newOptions = functionalUpdate(updater, instance.options)
-      instance.options = mergeOptions(newOptions) as RequiredKeys<
-        TableOptionsResolved<TGenerics>,
+      const newOptions = functionalUpdate(updater, table.options)
+      table.options = mergeOptions(newOptions) as RequiredKeys<
+        TableOptionsResolved<TData>,
         'state'
       >
     },
-    _render: (template, props) => {
-      if (typeof instance.options.render === 'function') {
-        return instance.options.render(template, props)
-      }
-
-      if (typeof template === 'function') {
-        return (template as Function)(props)
-      }
-
-      return template
-    },
 
     getState: () => {
-      return instance.options.state as TableState
+      return table.options.state as TableState
     },
 
     setState: (updater: Updater<TableState>) => {
-      instance.options.onStateChange?.(updater)
+      table.options.onStateChange?.(updater)
     },
 
-    _getRowId: (
-      row: TGenerics['Row'],
-      index: number,
-      parent?: Row<TGenerics>
-    ) =>
-      instance.options.getRowId?.(row, index, parent) ??
+    _getRowId: (row: TData, index: number, parent?: Row<TData>) =>
+      table.options.getRowId?.(row, index, parent) ??
       `${parent ? [parent.id, index].join('.') : index}`,
 
     getCoreRowModel: () => {
-      if (!instance._getCoreRowModel) {
-        instance._getCoreRowModel = instance.options.getCoreRowModel(instance)
+      if (!table._getCoreRowModel) {
+        table._getCoreRowModel = table.options.getCoreRowModel(table)
       }
 
-      return instance._getCoreRowModel()
+      return table._getCoreRowModel!()
     },
 
     // The final calls start at the bottom of the model,
     // expanded rows, which then work their way up
 
     getRowModel: () => {
-      return instance.getPaginationRowModel()
+      return table.getPaginationRowModel()
     },
     getRow: (id: string) => {
-      const row = instance.getRowModel().rowsById[id]
+      const row = table.getRowModel().rowsById[id]
 
       if (!row) {
         if (process.env.NODE_ENV !== 'production') {
@@ -255,38 +224,38 @@ export function createTableInstance<TGenerics extends TableGenerics>(
       return row
     },
     _getDefaultColumnDef: memo(
-      () => [instance.options.defaultColumn],
+      () => [table.options.defaultColumn],
       defaultColumn => {
-        defaultColumn = (defaultColumn ?? {}) as Partial<ColumnDef<TGenerics>>
+        defaultColumn = (defaultColumn ?? {}) as Partial<ColumnDef<TData>>
 
         return {
           header: props => props.header.column.id,
           footer: props => props.header.column.id,
-          cell: props => props.getValue()?.toString?.() ?? null,
-          ...instance._features.reduce((obj, feature) => {
+          cell: props => (props.renderValue() as any)?.toString?.() ?? null,
+          ...table._features.reduce((obj, feature) => {
             return Object.assign(obj, feature.getDefaultColumnDef?.())
           }, {}),
           ...defaultColumn,
-        } as Partial<ColumnDef<TGenerics>>
+        } as Partial<ColumnDef<TData>>
       },
       {
-        debug: () => instance.options.debugAll ?? instance.options.debugColumns,
+        debug: () => table.options.debugAll ?? table.options.debugColumns,
         key: process.env.NODE_ENV === 'development' && 'getDefaultColumnDef',
       }
     ),
 
-    _getColumnDefs: () => instance.options.columns,
+    _getColumnDefs: () => table.options.columns,
 
     getAllColumns: memo(
-      () => [instance._getColumnDefs()],
+      () => [table._getColumnDefs()],
       columnDefs => {
         const recurseColumns = (
-          columnDefs: ColumnDef<TGenerics>[],
-          parent?: Column<TGenerics>,
+          columnDefs: ColumnDef<TData>[],
+          parent?: Column<TData>,
           depth = 0
-        ): Column<TGenerics>[] => {
+        ): Column<TData>[] => {
           return columnDefs.map(columnDef => {
-            const column = createColumn(instance, columnDef, depth, parent)
+            const column = createColumn(table, columnDef, depth, parent)
 
             column.columns = columnDef.columns
               ? recurseColumns(columnDef.columns, column, depth + 1)
@@ -300,12 +269,12 @@ export function createTableInstance<TGenerics extends TableGenerics>(
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllColumns',
-        debug: () => instance.options.debugAll ?? instance.options.debugColumns,
+        debug: () => table.options.debugAll ?? table.options.debugColumns,
       }
     ),
 
     getAllFlatColumns: memo(
-      () => [instance.getAllColumns()],
+      () => [table.getAllColumns()],
       allColumns => {
         return allColumns.flatMap(column => {
           return column.getFlatColumns()
@@ -313,38 +282,38 @@ export function createTableInstance<TGenerics extends TableGenerics>(
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllFlatColumns',
-        debug: () => instance.options.debugAll ?? instance.options.debugColumns,
+        debug: () => table.options.debugAll ?? table.options.debugColumns,
       }
     ),
 
     _getAllFlatColumnsById: memo(
-      () => [instance.getAllFlatColumns()],
+      () => [table.getAllFlatColumns()],
       flatColumns => {
         return flatColumns.reduce((acc, column) => {
           acc[column.id] = column
           return acc
-        }, {} as Record<string, Column<TGenerics>>)
+        }, {} as Record<string, Column<TData>>)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById',
-        debug: () => instance.options.debugAll ?? instance.options.debugColumns,
+        debug: () => table.options.debugAll ?? table.options.debugColumns,
       }
     ),
 
     getAllLeafColumns: memo(
-      () => [instance.getAllColumns(), instance._getOrderColumnsFn()],
+      () => [table.getAllColumns(), table._getOrderColumnsFn()],
       (allColumns, orderColumns) => {
         let leafColumns = allColumns.flatMap(column => column.getLeafColumns())
         return orderColumns(leafColumns)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllLeafColumns',
-        debug: () => instance.options.debugAll ?? instance.options.debugColumns,
+        debug: () => table.options.debugAll ?? table.options.debugColumns,
       }
     ),
 
     getColumn: columnId => {
-      const column = instance._getAllFlatColumnsById()[columnId]
+      const column = table._getAllFlatColumnsById()[columnId]
 
       if (!column) {
         if (process.env.NODE_ENV !== 'production') {
@@ -357,11 +326,11 @@ export function createTableInstance<TGenerics extends TableGenerics>(
     },
   }
 
-  Object.assign(instance, coreInstance)
+  Object.assign(table, coreInstance)
 
-  instance._features.forEach(feature => {
-    return Object.assign(instance, feature.createInstance?.(instance))
+  table._features.forEach(feature => {
+    return Object.assign(table, feature.createTable?.(table))
   })
 
-  return instance
+  return table
 }

package/src/features/ColumnSizing.ts

@@ -1,10 +1,11 @@
-import { TableFeature } from '../core/instance'
+import { TableFeature } from '../core/table'
 import {
+  RowData,
   Column,
   Header,
   OnChangeFn,
   TableGenerics,
-  TableInstance,
+  Table,
   Updater,
 } from '../types'
 import { makeStateUpdater } from '../utils'
@@ -43,7 +44,7 @@ export type ColumnSizingDefaultOptions = {
   onColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState>
 }
 
-export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
+export type ColumnSizingInstance = {
   setColumnSizing: (updater: Updater<ColumnSizingState>) => void
   setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
   resetColumnSizing: (defaultState?: boolean) => void
@@ -61,7 +62,7 @@ export type ColumnSizingColumnDef = {
   maxSize?: number
 }
 
-export type ColumnSizingColumn<TGenerics extends TableGenerics> = {
+export type ColumnSizingColumn = {
   getSize: () => number
   getStart: (position?: ColumnPinningPosition) => number
   getCanResize: () => boolean
@@ -69,7 +70,7 @@ export type ColumnSizingColumn<TGenerics extends TableGenerics> = {
   resetSize: () => void
 }
 
-export type ColumnSizingHeader<TGenerics extends TableGenerics> = {
+export type ColumnSizingHeader = {
   getSize: () => number
   getStart: (position?: ColumnPinningPosition) => number
   getResizeHandler: () => (event: unknown) => void
@@ -104,23 +105,23 @@ export const ColumnSizing: TableFeature = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends TableGenerics>(
-    instance: TableInstance<TGenerics>
+  getDefaultOptions: <TData extends RowData>(
+    table: Table<TData>
   ): ColumnSizingDefaultOptions => {
     return {
       columnResizeMode: 'onEnd',
-      onColumnSizingChange: makeStateUpdater('columnSizing', instance),
-      onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', instance),
+      onColumnSizingChange: makeStateUpdater('columnSizing', table),
+      onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', table),
     }
   },
 
-  createColumn: <TGenerics extends TableGenerics>(
-    column: Column<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingColumn<TGenerics> => {
+  createColumn: <TData extends RowData>(
+    column: Column<TData>,
+    table: Table<TData>
+  ): ColumnSizingColumn => {
     return {
       getSize: () => {
-        const columnSize = instance.getState().columnSizing[column.id]
+        const columnSize = table.getState().columnSizing[column.id]
 
         return Math.min(
           Math.max(
@@ -132,10 +133,10 @@ export const ColumnSizing: TableFeature = {
       },
       getStart: position => {
         const columns = !position
-          ? instance.getVisibleLeafColumns()
+          ? table.getVisibleLeafColumns()
           : position === 'left'
-          ? instance.getLeftVisibleLeafColumns()
-          : instance.getRightVisibleLeafColumns()
+          ? table.getLeftVisibleLeafColumns()
+          : table.getRightVisibleLeafColumns()
 
         const index = columns.findIndex(d => d.id === column.id)
 
@@ -150,33 +151,31 @@ export const ColumnSizing: TableFeature = {
         return 0
       },
       resetSize: () => {
-        instance.setColumnSizing(({ [column.id]: _, ...rest }) => {
+        table.setColumnSizing(({ [column.id]: _, ...rest }) => {
           return rest
         })
       },
       getCanResize: () => {
         return (
           (column.columnDef.enableResizing ?? true) &&
-          (instance.options.enableColumnResizing ?? true)
+          (table.options.enableColumnResizing ?? true)
         )
       },
       getIsResizing: () => {
-        return (
-          instance.getState().columnSizingInfo.isResizingColumn === column.id
-        )
+        return table.getState().columnSizingInfo.isResizingColumn === column.id
       },
     }
   },
 
-  createHeader: <TGenerics extends TableGenerics>(
-    header: Header<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingHeader<TGenerics> => {
+  createHeader: <TData extends RowData>(
+    header: Header<TData>,
+    table: Table<TData>
+  ): ColumnSizingHeader => {
     return {
       getSize: () => {
         let sum = 0
 
-        const recurse = (header: Header<TGenerics>) => {
+        const recurse = (header: Header<TData>) => {
           if (header.subHeaders.length) {
             header.subHeaders.forEach(recurse)
           } else {
@@ -198,7 +197,7 @@ export const ColumnSizing: TableFeature = {
         return 0
       },
       getResizeHandler: () => {
-        const column = instance.getColumn(header.column.id)
+        const column = table.getColumn(header.column.id)
         const canResize = column.getCanResize()
 
         return (e: unknown) => {
@@ -237,7 +236,7 @@ export const ColumnSizing: TableFeature = {
 
             let newColumnSizing: ColumnSizingState = {}
 
-            instance.setColumnSizingInfo(old => {
+            table.setColumnSizingInfo(old => {
               const deltaOffset = clientXPos - (old?.startOffset ?? 0)
               const deltaPercentage = Math.max(
                 deltaOffset / (old?.startSize ?? 0),
@@ -259,10 +258,10 @@ export const ColumnSizing: TableFeature = {
             })
 
             if (
-              instance.options.columnResizeMode === 'onChange' ||
+              table.options.columnResizeMode === 'onChange' ||
               eventType === 'end'
             ) {
-              instance.setColumnSizing(old => ({
+              table.setColumnSizing(old => ({
                 ...old,
                 ...newColumnSizing,
               }))
@@ -275,7 +274,7 @@ export const ColumnSizing: TableFeature = {
           const onEnd = (clientXPos?: number) => {
             updateOffset('end', clientXPos)
 
-            instance.setColumnSizingInfo(old => ({
+            table.setColumnSizingInfo(old => ({
               ...old,
               isResizingColumn: false,
               startOffset: null,
@@ -333,7 +332,7 @@ export const ColumnSizing: TableFeature = {
             )
           }
 
-          instance.setColumnSizingInfo(old => ({
+          table.setColumnSizingInfo(old => ({
             ...old,
             startOffset: clientX,
             startSize,
@@ -347,41 +346,40 @@ export const ColumnSizing: TableFeature = {
     }
   },
 
-  createInstance: <TGenerics extends TableGenerics>(
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingInstance<TGenerics> => {
+  createTable: <TData extends RowData>(
+    table: Table<TData>
+  ): ColumnSizingInstance => {
     return {
-      setColumnSizing: updater =>
-        instance.options.onColumnSizingChange?.(updater),
+      setColumnSizing: updater => table.options.onColumnSizingChange?.(updater),
       setColumnSizingInfo: updater =>
-        instance.options.onColumnSizingInfoChange?.(updater),
+        table.options.onColumnSizingInfoChange?.(updater),
       resetColumnSizing: defaultState => {
-        instance.setColumnSizing(
-          defaultState ? {} : instance.initialState.columnSizing ?? {}
+        table.setColumnSizing(
+          defaultState ? {} : table.initialState.columnSizing ?? {}
         )
       },
       resetHeaderSizeInfo: defaultState => {
-        instance.setColumnSizingInfo(
+        table.setColumnSizingInfo(
           defaultState
             ? getDefaultColumnSizingInfoState()
-            : instance.initialState.columnSizingInfo ??
+            : table.initialState.columnSizingInfo ??
                 getDefaultColumnSizingInfoState()
         )
       },
       getTotalSize: () =>
-        instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        table.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
           return sum + header.getSize()
         }, 0) ?? 0,
       getLeftTotalSize: () =>
-        instance.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        table.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
           return sum + header.getSize()
         }, 0) ?? 0,
       getCenterTotalSize: () =>
-        instance.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        table.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
           return sum + header.getSize()
         }, 0) ?? 0,
       getRightTotalSize: () =>
-        instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
+        table.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
           return sum + header.getSize()
         }, 0) ?? 0,
     }