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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.53",
+  "version": "8.0.0-alpha.57",
   "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,39 +1,23 @@
-import {
-  flattenBy,
-  functionalUpdate,
-  propGetter,
-  memo,
-  RequiredKeys,
-} from './utils'
+import { functionalUpdate, propGetter, RequiredKeys } from './utils'
 
 import {
   Updater,
-  PropGetterValue,
   Options,
   TableState,
   ColumnDef,
-  Row,
-  Column,
-  Cell,
-  Header,
-  AccessorFn,
-  HeaderRenderProps,
   TableProps,
   TableBodyProps,
   PropGetter,
-  Getter,
-  RowProps,
-  CellProps,
   TableInstance,
-  RowValues,
-  CoreCell,
   Renderable,
   UseRenderer,
-  RowModel,
   TableFeature,
-  AnyGenerics,
+  TableGenerics,
 } from './types'
 
+import { Columns } from './features/Columns'
+import { Rows } from './features/Rows'
+import { Cells } from './features/Cells'
 import { ColumnSizing } from './features/ColumnSizing'
 import { Expanding } from './features/Expanding'
 import { Filters } from './features/Filters'
@@ -45,51 +29,24 @@ import { RowSelection } from './features/RowSelection'
 import { Sorting } from './features/Sorting'
 import { Visibility } from './features/Visibility'
 import { Headers } from './features/Headers'
+//
 import { mean } from './aggregationFns'
 
-const features: TableFeature[] = [
-  Headers,
-  Visibility,
-  Ordering,
-  Pinning,
-  Filters,
-  Sorting,
-  Grouping,
-  Expanding,
-  Pagination,
-  RowSelection,
-  ColumnSizing,
-]
-
 export type CoreTableState = {
   coreProgress: number
 }
 
-export type CoreOptions<TGenerics extends AnyGenerics> = {
+export type CoreOptions<TGenerics extends TableGenerics> = {
   data: TGenerics['Row'][]
-  columns: ColumnDef<TGenerics>[]
   state: Partial<TableState>
   onStateChange: (updater: Updater<TableState>) => void
   render: TGenerics['Render']
-  getCoreRowModel: (
-    instance: TableInstance<TGenerics>
-  ) => () => RowModel<TGenerics>
   debugAll?: boolean
   debugTable?: boolean
   debugHeaders?: boolean
   debugColumns?: boolean
   debugRows?: boolean
-  defaultColumn?: Partial<ColumnDef<TGenerics>>
   initialState?: Partial<TableState>
-  getSubRows?: (
-    originalRow: TGenerics['Row'],
-    index: number
-  ) => TGenerics['Row'][]
-  getRowId?: (
-    originalRow: TGenerics['Row'],
-    index: number,
-    parent?: Row<TGenerics>
-  ) => string
   autoResetAll?: boolean
   mergeOptions?: (
     defaultOptions: TableFeature,
@@ -98,137 +55,26 @@ export type CoreOptions<TGenerics extends AnyGenerics> = {
   meta?: TGenerics['TableMeta']
 }
 
-export type TableCore<TGenerics extends AnyGenerics> = {
+export type TableCore<TGenerics extends TableGenerics> = {
   initialState: TableState
   reset: () => void
   options: RequiredKeys<Options<TGenerics>, 'state'>
   setOptions: (newOptions: Updater<Options<TGenerics>>) => void
   queue: (cb: () => void) => void
   willUpdate: () => void
-  getRowId: (
-    _: TGenerics['Row'],
-    index: number,
-    parent?: Row<TGenerics>
-  ) => string
   getState: () => TableState
   setState: (updater: Updater<TableState>) => void
-  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>
-  getTotalWidth: () => number
-  createCell: (
-    row: Row<TGenerics>,
-    column: Column<TGenerics>,
-    value: any
-  ) => Cell<TGenerics>
-  createRow: (
-    id: string,
-    original: TGenerics['Row'] | undefined,
-    rowIndex: number,
-    depth: number,
-    values: Record<string, any>
-  ) => Row<TGenerics>
-  getCoreRowModel: () => RowModel<TGenerics>
-  _getCoreRowModel?: () => RowModel<TGenerics>
-  getRowModel: () => RowModel<TGenerics>
-  getRow: (id: string) => Row<TGenerics>
-  getCell: (rowId: string, columnId: string) => Cell<TGenerics>
   getTableProps: PropGetter<TableProps>
   getTableBodyProps: PropGetter<TableBodyProps>
-  getRowProps: <TGetter extends Getter<RowProps>>(
-    rowId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<RowProps, TGetter>
-  getCellProps: <TGetter extends Getter<CellProps>>(
-    rowId: string,
-    columnId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<CellProps, TGetter>
-  getTableWidth: () => number
-  getLeftTableWidth: () => number
-  getCenterTableWidth: () => number
-  getRightTableWidth: () => number
   render: <TProps>(
     template: Renderable<TGenerics, TProps>,
     props: TProps
   ) => string | null | ReturnType<UseRenderer<TGenerics>>
   getOverallProgress: () => number
+  _features: readonly TableFeature[]
 }
 
-export type CoreRow<TGenerics extends AnyGenerics> = {
-  id: string
-  index: number
-  original?: TGenerics['Row']
-  depth: number
-  values: RowValues
-  subRows: Row<TGenerics>[]
-  getLeafRows: () => Row<TGenerics>[]
-  getRowProps: PropGetter<RowProps>
-  originalSubRows?: TGenerics['Row'][]
-  getAllCells: () => Cell<TGenerics>[]
-  getAllCellsByColumnId: () => Record<string, Cell<TGenerics>>
-}
-
-export type CoreColumnDef<TGenerics extends AnyGenerics> = {
-  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']
-}
-// & GeneratedProperties<true>
-
-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>
-  getFlatColumns: () => Column<TGenerics>[]
-  getLeafColumns: () => Column<TGenerics>[]
-}
-
-export function createTableInstance<TGenerics extends AnyGenerics>(
+export function createTableInstance<TGenerics extends TableGenerics>(
   options: Options<TGenerics>
 ): TableInstance<TGenerics> {
   if (options.debugAll || options.debugTable) {
@@ -237,7 +83,24 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
 
   let instance = {} as TableInstance<TGenerics>
 
-  const defaultOptions = features.reduce((obj, feature) => {
+  instance._features = [
+    Columns,
+    Rows,
+    Cells,
+    Headers,
+    Visibility,
+    Ordering,
+    Pinning,
+    Filters,
+    Sorting,
+    Grouping,
+    Expanding,
+    Pagination,
+    RowSelection,
+    ColumnSizing,
+  ] as const
+
+  const defaultOptions = instance._features.reduce((obj, feature) => {
     return Object.assign(obj, feature.getDefaultOptions?.(instance))
   }, {})
 
@@ -254,7 +117,7 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
 
   const initialState = {
     ...coreInitialState,
-    ...features.reduce((obj, feature) => {
+    ...instance._features.reduce((obj, feature) => {
       return Object.assign(obj, feature.getInitialState?.())
     }, {}),
     ...(options.initialState ?? {}),
@@ -265,9 +128,9 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
 
   const finalInstance: TableInstance<TGenerics> = {
     ...instance,
-    ...features.reduce((obj, feature) => {
-      return Object.assign(obj, feature.getInstance?.(instance))
-    }, {}),
+    ...(instance._features.reduce((obj, feature) => {
+      return Object.assign(obj, feature.createInstance?.(instance))
+    }, {}) as unknown as TableInstance<TGenerics>),
     queue: cb => {
       queued.push(cb)
       if (!queuedTimeout) {
@@ -309,10 +172,6 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
       return template
     },
 
-    getRowId: (row: TGenerics['Row'], index: number, parent?: Row<TGenerics>) =>
-      instance.options.getRowId?.(row, index, parent) ??
-      `${parent ? [parent.id, index].join('.') : index}`,
-
     getState: () => {
       return instance.options.state as TableState
     },
@@ -321,339 +180,6 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
       instance.options.onStateChange?.(updater)
     },
 
-    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,
-          ...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: [],
-        getWidth: () => instance.getColumnWidth(column.id),
-        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 = 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
-    },
-
-    createCell: (row, column, value) => {
-      const cell: CoreCell<TGenerics> = {
-        id: `${row.id}_${column.id}`,
-        rowId: row.id,
-        columnId: column.id,
-        row,
-        column,
-        value,
-        getCellProps: userProps =>
-          instance.getCellProps(row.id, column.id, userProps)!,
-        renderCell: () =>
-          column.cell
-            ? instance.render(column.cell, {
-                instance,
-                column,
-                row,
-                cell: cell as Cell<TGenerics>,
-                value,
-              })
-            : null,
-      }
-
-      features.forEach(feature => {
-        Object.assign(
-          cell,
-          feature.createCell?.(
-            cell as Cell<TGenerics>,
-            column,
-            row as Row<TGenerics>,
-            instance
-          )
-        )
-      }, {})
-
-      return cell as Cell<TGenerics>
-    },
-
-    createRow: (id, original, rowIndex, depth, values) => {
-      let row: CoreRow<TGenerics> = {
-        id,
-        index: rowIndex,
-        original,
-        depth,
-        values,
-        subRows: [],
-        getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
-        getRowProps: userProps => instance.getRowProps(row.id, userProps)!,
-        getAllCells: undefined!,
-        getAllCellsByColumnId: undefined!,
-      }
-
-      row.getAllCells = memo(
-        () => [instance.getAllLeafColumns()],
-        leafColumns => {
-          return leafColumns.map(column => {
-            return instance.createCell(
-              row as Row<TGenerics>,
-              column,
-              row.values[column.id]
-            )
-          })
-        },
-        {
-          key: process.env.NODE_ENV !== 'production' ? 'row.getAllCells' : '',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      )
-
-      row.getAllCellsByColumnId = memo(
-        () => [row.getAllCells()],
-        allCells => {
-          return allCells.reduce((acc, cell) => {
-            acc[cell.columnId] = cell
-            return acc
-          }, {} as Record<string, Cell<TGenerics>>)
-        },
-        {
-          key: 'row.getAllCellsByColumnId',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      )
-
-      for (let i = 0; i < features.length; i++) {
-        const feature = features[i]
-        Object.assign(row, feature.createRow?.(row, instance))
-      }
-
-      return row as Row<TGenerics>
-    },
-
-    getCoreRowModel: () => {
-      if (!instance._getCoreRowModel) {
-        instance._getCoreRowModel = instance.options.getCoreRowModel(instance)
-      }
-
-      return instance._getCoreRowModel()
-    },
-
-    // The final calls start at the bottom of the model,
-    // expanded rows, which then work their way up
-
-    getRowModel: () => {
-      return instance.getPaginationRowModel()
-    },
-
-    getRow: (id: string) => {
-      const row = instance.getRowModel().rowsById[id]
-
-      if (!row) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error(`getRow expected an ID, but got ${id}`)
-        }
-        throw new Error()
-      }
-
-      return row
-    },
-
-    getCell: (rowId: string, columnId: string) => {
-      const row = instance.getRow(rowId)
-
-      if (!row) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error(`[Table] could not find row with id ${rowId}`)
-        }
-        throw new Error()
-      }
-
-      const cell = row.getAllCellsByColumnId()[columnId]
-
-      if (!cell) {
-        if (process.env.NODE_ENV !== 'production') {
-          throw new Error(
-            `[Table] could not find cell ${columnId} in row ${rowId}`
-          )
-        }
-        throw new Error()
-      }
-
-      return cell
-    },
-
     getTableProps: userProps => {
       return propGetter(
         {
@@ -672,54 +198,6 @@ export function createTableInstance<TGenerics extends AnyGenerics>(
       )
     },
 
-    getRowProps: (rowId, userProps) => {
-      const row = instance.getRow(rowId)
-      if (!row) {
-        return
-      }
-
-      return propGetter(
-        {
-          key: row.id,
-          role: 'row',
-        },
-        userProps
-      )
-    },
-
-    getCellProps: (rowId, columnId, userProps) => {
-      const cell = instance.getCell(rowId, columnId)
-
-      if (!cell) {
-        return
-      }
-
-      return propGetter(
-        {
-          key: cell.id,
-          role: 'gridcell',
-        },
-        userProps
-      )
-    },
-
-    getTableWidth: () =>
-      instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
-        return sum + header.getWidth()
-      }, 0) ?? 0,
-    getLeftTableWidth: () =>
-      instance.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
-        return sum + header.getWidth()
-      }, 0) ?? 0,
-    getCenterTableWidth: () =>
-      instance.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
-        return sum + header.getWidth()
-      }, 0) ?? 0,
-    getRightTableWidth: () =>
-      instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
-        return sum + header.getWidth()
-      }, 0) ?? 0,
-
     getOverallProgress: () => {
       const { coreProgress, columnFiltersProgress, globalFilterProgress } =
         instance.getState()