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

package/package.json

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

package/src/core.ts

@@ -1,18 +1,14 @@
-import { functionalUpdate, propGetter, RequiredKeys } from './utils'
+import { functionalUpdate, RequiredKeys } from './utils'
 
 import {
   Updater,
-  Options,
+  TableOptions,
   TableState,
-  ColumnDef,
-  TableProps,
-  TableBodyProps,
-  PropGetter,
   TableInstance,
   Renderable,
-  UseRenderer,
   TableFeature,
   TableGenerics,
+  InitialTableState,
 } from './types'
 
 import { Columns } from './features/Columns'
@@ -40,42 +36,38 @@ export type CoreOptions<TGenerics extends TableGenerics> = {
   data: TGenerics['Row'][]
   state: Partial<TableState>
   onStateChange: (updater: Updater<TableState>) => void
-  render: TGenerics['Render']
+  render: TGenerics['Renderer']
   debugAll?: boolean
   debugTable?: boolean
   debugHeaders?: boolean
   debugColumns?: boolean
   debugRows?: boolean
-  initialState?: Partial<TableState>
+  initialState?: InitialTableState
   autoResetAll?: boolean
-  mergeOptions?: (
-    defaultOptions: TableFeature,
-    options: Partial<Options<TGenerics>>
-  ) => Options<TGenerics>
+  mergeOptions?: <T>(defaultOptions: T, options: Partial<T>) => T
   meta?: TGenerics['TableMeta']
 }
 
 export type TableCore<TGenerics extends TableGenerics> = {
+  // generics: TGenerics
   initialState: TableState
   reset: () => void
-  options: RequiredKeys<Options<TGenerics>, 'state'>
-  setOptions: (newOptions: Updater<Options<TGenerics>>) => void
+  options: RequiredKeys<TableOptions<TGenerics>, 'state'>
+  setOptions: (newOptions: Updater<TableOptions<TGenerics>>) => void
   queue: (cb: () => void) => void
   willUpdate: () => void
   getState: () => TableState
   setState: (updater: Updater<TableState>) => void
-  getTableProps: PropGetter<TableProps>
-  getTableBodyProps: PropGetter<TableBodyProps>
   render: <TProps>(
     template: Renderable<TGenerics, TProps>,
     props: TProps
-  ) => string | null | ReturnType<UseRenderer<TGenerics>>
+  ) => string | null | TGenerics['Rendered']
   getOverallProgress: () => number
   _features: readonly TableFeature[]
 }
 
 export function createTableInstance<TGenerics extends TableGenerics>(
-  options: Options<TGenerics>
+  options: TableOptions<TGenerics>
 ): TableInstance<TGenerics> {
   if (options.debugAll || options.debugTable) {
     console.info('Creating Table Instance...')
@@ -102,14 +94,23 @@ export function createTableInstance<TGenerics extends TableGenerics>(
 
   const defaultOptions = instance._features.reduce((obj, feature) => {
     return Object.assign(obj, feature.getDefaultOptions?.(instance))
-  }, {})
+  }, {}) as TableOptions<TGenerics>
 
-  const buildOptions = (options: Options<TGenerics>) => ({
+  const mergeOptions = (options: TableOptions<TGenerics>) => {
+    if (instance.options.mergeOptions) {
+      return instance.options.mergeOptions(defaultOptions, options)
+    }
+
+    return {
+      ...defaultOptions,
+      ...options,
+    }
+  }
+
+  instance.options = {
     ...defaultOptions,
     ...options,
-  })
-
-  instance.options = buildOptions(options)
+  }
 
   const coreInitialState: CoreTableState = {
     coreProgress: 1,
@@ -117,10 +118,10 @@ export function createTableInstance<TGenerics extends TableGenerics>(
 
   const initialState = {
     ...coreInitialState,
+    ...(options.initialState ?? {}),
     ...instance._features.reduce((obj, feature) => {
-      return Object.assign(obj, feature.getInitialState?.())
+      return Object.assign(obj, feature.getInitialState?.(options.initialState))
     }, {}),
-    ...(options.initialState ?? {}),
   } as TableState
 
   const queued: (() => void)[] = []
@@ -151,14 +152,7 @@ export function createTableInstance<TGenerics extends TableGenerics>(
     },
     setOptions: updater => {
       const newOptions = functionalUpdate(updater, instance.options)
-      if (instance.options.mergeOptions) {
-        instance.options = instance.options.mergeOptions(
-          defaultOptions,
-          newOptions
-        )
-      } else {
-        instance.options = buildOptions(newOptions)
-      }
+      instance.options = mergeOptions(newOptions)
     },
     render: (template, props) => {
       if (typeof instance.options.render === 'function') {
@@ -180,24 +174,6 @@ export function createTableInstance<TGenerics extends TableGenerics>(
       instance.options.onStateChange?.(updater)
     },
 
-    getTableProps: userProps => {
-      return propGetter(
-        {
-          role: 'table',
-        },
-        userProps
-      )
-    },
-
-    getTableBodyProps: userProps => {
-      return propGetter(
-        {
-          role: 'rowgroup',
-        },
-        userProps
-      )
-    },
-
     getOverallProgress: () => {
       const { coreProgress, columnFiltersProgress, globalFilterProgress } =
         instance.getState()

package/src/createTable.ts

@@ -6,9 +6,9 @@ import {
   AccessorFn,
   AnyRender,
   TableGenerics,
-  Options,
+  TableOptions,
 } from './types'
-import { IfDefined, Overwrite, PartialKeys } from './utils'
+import { IfDefined, Overwrite } from './utils'
 
 export type TableFactory<TGenerics extends TableGenerics> =
   () => Table<TGenerics>
@@ -25,12 +25,16 @@ export type CreateTableOptions<
     filterFns?: TFilterFns
     sortingFns?: TSortingFns
     aggregationFns?: TAggregationFns
-  } & Omit<Options<TGenerics>, 'filterFns' | 'sortingFns' | 'aggregationFns'>
+  } & Omit<
+    TableOptions<TGenerics>,
+    'filterFns' | 'sortingFns' | 'aggregationFns'
+  >
 >
 
 export type Table<TGenerics extends TableGenerics> = {
   generics: TGenerics
-  options: Partial<Options<TGenerics>>
+  options: Partial<TableOptions<TGenerics>>
+  setGenerics: <T extends TableGenerics>() => Table<T>
   setRowType: <TRow>() => Table<Overwrite<TGenerics, { Row: TRow }>>
   setTableMetaType: <TTableMeta>() => Table<
     Overwrite<TGenerics, { TableMeta: TTableMeta }>
@@ -60,9 +64,6 @@ export type Table<TGenerics extends TableGenerics> = {
       }
     >
   >
-  createColumns: <TColumnDef extends ColumnDef<any>>(
-    columns: TColumnDef[]
-  ) => TColumnDef[]
   createGroup: (
     column: Overwrite<
       | Overwrite<
@@ -87,12 +88,7 @@ export type Table<TGenerics extends TableGenerics> = {
     >
   ) => ColumnDef<TGenerics>
   createDisplayColumn: (
-    column: Overwrite<
-      PartialKeys<ColumnDef<TGenerics>, 'accessorFn' | 'accessorKey'>,
-      {
-        columns?: ColumnDef<any>[]
-      }
-    >
+    column: Omit<ColumnDef<TGenerics>, 'columns'>
   ) => ColumnDef<TGenerics>
   createDataColumn: <
     TAccessor extends AccessorFn<TGenerics['Row']> | keyof TGenerics['Row']
@@ -124,9 +120,9 @@ export type Table<TGenerics extends TableGenerics> = {
 
 //
 
-export function createTableFactory<TRender extends AnyRender>(opts: {
-  render: TRender
-}): () => Table<{ Render: TRender }> {
+export function createTableFactory<TRenderer extends AnyRender>(opts: {
+  render: TRenderer
+}): () => Table<{ Renderer: TRenderer; Rendered: ReturnType<TRenderer> }> {
   return () => createTable(undefined, undefined, opts)
 }
 
@@ -144,6 +140,7 @@ function createTable<TGenerics extends TableGenerics>(
         throw new Error('')
       })(),
     },
+    setGenerics: () => table as any,
     setRowType: () => table as any,
     setTableMetaType: () => table as any,
     setColumnMetaType: () => table as any,
@@ -152,7 +149,6 @@ function createTable<TGenerics extends TableGenerics>(
         ...options,
         ...newOptions,
       } as any),
-    createColumns: columns => columns,
     createDisplayColumn: column => ({ ...column, columnDefType: 'display' }),
     createGroup: column => ({ ...column, columnDefType: 'group' } as any),
     createDataColumn: (accessor, column): any => {

package/src/features/Cells.ts

@@ -5,11 +5,8 @@ import {
   Row,
   Column,
   CoreCell,
-  Getter,
-  CellProps,
-  PropGetterValue,
 } from '../types'
-import { memo, propGetter } from '../utils'
+import { memo } from '../utils'
 
 export type CellsRow<TGenerics extends TableGenerics> = {
   getAllCells: () => Cell<TGenerics>[]
@@ -23,11 +20,6 @@ export type CellsInstance<TGenerics extends TableGenerics> = {
     value: any
   ) => Cell<TGenerics>
   getCell: (rowId: string, columnId: string) => Cell<TGenerics>
-  getCellProps: <TGetter extends Getter<CellProps>>(
-    rowId: string,
-    columnId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<CellProps, TGetter>
 }
 
 //
@@ -83,8 +75,6 @@ export const Cells = {
           row,
           column,
           value,
-          getCellProps: userProps =>
-            instance.getCellProps(row.id, column.id, userProps)!,
           renderCell: () =>
             column.cell
               ? instance.render(column.cell, {
@@ -135,22 +125,6 @@ export const Cells = {
 
         return cell
       },
-
-      getCellProps: (rowId, columnId, userProps) => {
-        const cell = instance.getCell(rowId, columnId)
-
-        if (!cell) {
-          return
-        }
-
-        return propGetter(
-          {
-            key: cell.id,
-            role: 'gridcell',
-          },
-          userProps
-        )
-      },
     }
   },
 }

package/src/features/ColumnSizing.ts

@@ -1,14 +1,13 @@
 import {
   Column,
-  Getter,
   Header,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Updater,
+  TableFeature,
 } from '../types'
-import { makeStateUpdater, propGetter } from '../utils'
+import { makeStateUpdater } from '../utils'
 import { ColumnPinningPosition } from './Pinning'
 
 //
@@ -44,14 +43,6 @@ export type ColumnSizingDefaultOptions = {
   onColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState>
 }
 
-export type ColumnResizerProps = {
-  title?: string
-  onMouseDown?: (e: MouseEvent) => void
-  onTouchStart?: (e: TouchEvent) => void
-  draggable?: boolean
-  role?: string
-}
-
 export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
   getColumnSize: (columnId: string) => number
   getColumnStart: (columnId: string, position?: ColumnPinningPosition) => number
@@ -63,10 +54,7 @@ export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
   resetHeaderSizeInfo: () => void
   getColumnCanResize: (columnId: string) => boolean
   getHeaderCanResize: (headerId: string) => boolean
-  getHeaderResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
-    headerId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
+  getResizeHandler: (headerId: string) => (event: unknown) => void
   getColumnIsResizing: (columnId: string) => boolean
   getHeaderIsResizing: (headerId: string) => boolean
   getTotalSize: () => number
@@ -94,9 +82,7 @@ export type ColumnSizingColumn<TGenerics extends TableGenerics> = {
 export type ColumnSizingHeader<TGenerics extends TableGenerics> = {
   getCanResize: () => boolean
   getIsResizing: () => boolean
-  getResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
+  getResizeHandler: () => (event: unknown) => void
   resetSize: () => void
 }
 
@@ -108,7 +94,7 @@ export const defaultColumnSizing = {
   maxSize: Number.MAX_SAFE_INTEGER,
 }
 
-export const ColumnSizing = {
+export const ColumnSizing: TableFeature = {
   getDefaultColumn: (): ColumnSizingColumnDef => {
     return defaultColumnSizing
   },
@@ -157,8 +143,7 @@ export const ColumnSizing = {
       getIsResizing: () => instance.getColumnIsResizing(header.column.id),
       getCanResize: () => instance.getColumnCanResize(header.column.id),
       resetSize: () => instance.resetColumnSize(header.column.id),
-      getResizerProps: userProps =>
-        instance.getHeaderResizerProps(header.id, userProps),
+      getResizeHandler: () => instance.getResizeHandler(header.id),
     }
   },
 
@@ -274,14 +259,18 @@ export const ColumnSizing = {
 
         return instance.getColumnIsResizing(header.column.id)
       },
-
-      getHeaderResizerProps: (headerId, userProps) => {
+      getResizeHandler: (headerId: string) => {
         const header = instance.getHeader(headerId)
         const column = instance.getColumn(header.column.id)
-
         const canResize = column.getCanResize()
 
-        const onResizeStart = (e: unknown) => {
+        return (e: unknown) => {
+          if (!canResize) {
+            return
+          }
+
+          ;(e as any).persist?.()
+
           if (isTouchStartEvent(e)) {
             // lets not respond to multiple touches (e.g. 2 or 3 fingers)
             if (e.touches && e.touches.length > 1) {
@@ -427,26 +416,7 @@ export const ColumnSizing = {
             isResizingColumn: column.id,
           }))
         }
-
-        const initialProps: ColumnResizerProps = canResize
-          ? {
-              title: 'Toggle Grouping',
-              draggable: false,
-              role: 'separator',
-              onMouseDown: (e: MouseEvent) => {
-                ;(e as any).persist?.()
-                onResizeStart(e)
-              },
-              onTouchStart: (e: TouchEvent) => {
-                ;(e as any).persist?.()
-                onResizeStart(e)
-              },
-            }
-          : {}
-
-        return propGetter(initialProps, userProps)
       },
-
       getTotalSize: () =>
         instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
           return sum + header.getSize()

package/src/features/Columns.ts

@@ -1,4 +1,3 @@
-import { features } from 'process'
 import {
   Cell,
   Column,
@@ -12,7 +11,6 @@ import {
   HeaderRenderProps,
 } from '../types'
 import { memo } from '../utils'
-import { ColumnPinningPosition } from './Pinning'
 
 export type CoreColumnDefType = 'data' | 'display' | 'group'
 

package/src/features/Expanding.ts

@@ -1,14 +1,12 @@
 import { RowModel } from '..'
 import {
-  Getter,
   OnChangeFn,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
   Row,
   Updater,
 } from '../types'
-import { makeStateUpdater, propGetter } from '../utils'
+import { makeStateUpdater } from '../utils'
 
 export type ExpandedStateList = Record<string, boolean>
 export type ExpandedState = true | Record<string, boolean>
@@ -20,9 +18,7 @@ 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> = {
@@ -40,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
@@ -54,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
@@ -201,7 +187,7 @@ export const Expanding = {
           instance.getRowCanExpand(id)
         )
       },
-      getToggleExpandedProps: (rowId, userProps) => {
+      getToggleExpandedHandler: rowId => {
         const row = instance.getRow(rowId)
 
         if (!row) {
@@ -210,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
@@ -303,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/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 = {
@@ -108,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: (
@@ -127,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>
@@ -174,8 +154,8 @@ 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)!,
     }
   },
 
@@ -278,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,