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

package/src/features/Cells.ts

@@ -0,0 +1,156 @@
+import {
+  Cell,
+  TableGenerics,
+  TableInstance,
+  Row,
+  Column,
+  CoreCell,
+  Getter,
+  CellProps,
+  PropGetterValue,
+} from '../types'
+import { memo, propGetter } from '../utils'
+
+export type CellsRow<TGenerics extends TableGenerics> = {
+  getAllCells: () => Cell<TGenerics>[]
+  getAllCellsByColumnId: () => Record<string, Cell<TGenerics>>
+}
+
+export type CellsInstance<TGenerics extends TableGenerics> = {
+  createCell: (
+    row: Row<TGenerics>,
+    column: Column<TGenerics>,
+    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>
+}
+
+//
+
+export const Cells = {
+  createRow: <TGenerics extends TableGenerics>(
+    row: Row<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): CellsRow<TGenerics> => {
+    return {
+      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,
+        }
+      ),
+
+      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,
+        }
+      ),
+    }
+  },
+
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): CellsInstance<TGenerics> => {
+    return {
+      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,
+        }
+
+        instance._features.forEach(feature => {
+          Object.assign(
+            cell,
+            feature.createCell?.(
+              cell as Cell<TGenerics>,
+              column,
+              row as Row<TGenerics>,
+              instance
+            )
+          )
+        }, {})
+
+        return cell as Cell<TGenerics>
+      },
+
+      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
+      },
+
+      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

@@ -9,10 +9,16 @@ import {
   Updater,
 } from '../types'
 import { makeStateUpdater, propGetter } from '../utils'
+import { ColumnPinningPosition } from './Pinning'
 
 //
 
-export type ColumnSizing = Record<string, number>
+export type ColumnSizingTableState = {
+  columnSizing: ColumnSizingState
+  columnSizingInfo: ColumnSizingInfoState
+}
+
+export type ColumnSizingState = Record<string, number>
 
 export type ColumnSizingInfoState = {
   startOffset: null | number
@@ -23,23 +29,18 @@ export type ColumnSizingInfoState = {
   columnSizingStart: [string, number][]
 }
 
-export type ColumnSizingTableState = {
-  columnSizing: ColumnSizing
-  columnSizingInfo: ColumnSizingInfoState
-}
-
 export type ColumnResizeMode = 'onChange' | 'onEnd'
 
 export type ColumnSizingOptions = {
   enableColumnResizing?: boolean
   columnResizeMode?: ColumnResizeMode
-  onColumnSizingChange?: OnChangeFn<ColumnSizing>
+  onColumnSizingChange?: OnChangeFn<ColumnSizingState>
   onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>
 }
 
 export type ColumnSizingDefaultOptions = {
   columnResizeMode: ColumnResizeMode
-  onColumnSizingChange: OnChangeFn<ColumnSizing>
+  onColumnSizingChange: OnChangeFn<ColumnSizingState>
   onColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState>
 }
 
@@ -52,8 +53,9 @@ export type ColumnResizerProps = {
 }
 
 export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
-  getColumnWidth: (columnId: string) => number
-  setColumnSizing: (updater: Updater<ColumnSizing>) => void
+  getColumnSize: (columnId: string) => number
+  getColumnStart: (columnId: string, position?: ColumnPinningPosition) => number
+  setColumnSizing: (updater: Updater<ColumnSizingState>) => void
   setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
   resetColumnSizing: () => void
   resetColumnSize: (columnId: string) => void
@@ -67,17 +69,23 @@ export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
   ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
   getColumnIsResizing: (columnId: string) => boolean
   getHeaderIsResizing: (headerId: string) => boolean
+  getTotalSize: () => number
+  getLeftTotalSize: () => number
+  getCenterTotalSize: () => number
+  getRightTotalSize: () => number
 }
 
 export type ColumnSizingColumnDef = {
   enableResizing?: boolean
   defaultCanResize?: boolean
-  width?: number
-  minWidth?: number
-  maxWidth?: number
+  size?: number
+  minSize?: number
+  maxSize?: number
 }
 
 export type ColumnSizingColumn<TGenerics extends TableGenerics> = {
+  getSize: () => number
+  getStart: (position?: ColumnPinningPosition) => number
   getCanResize: () => boolean
   getIsResizing: () => boolean
   resetSize: () => void
@@ -95,9 +103,9 @@ export type ColumnSizingHeader<TGenerics extends TableGenerics> = {
 //
 
 export const defaultColumnSizing = {
-  width: 150,
-  minWidth: 20,
-  maxWidth: Number.MAX_SAFE_INTEGER,
+  size: 150,
+  minSize: 20,
+  maxSize: Number.MAX_SAFE_INTEGER,
 }
 
 export const ColumnSizing = {
@@ -128,11 +136,37 @@ export const ColumnSizing = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
+    column: Column<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): ColumnSizingColumn<TGenerics> => {
+    return {
+      getSize: () => instance.getColumnSize(column.id),
+      getStart: position => instance.getColumnStart(column.id, position),
+      getIsResizing: () => instance.getColumnIsResizing(column.id),
+      getCanResize: () => instance.getColumnCanResize(column.id),
+      resetSize: () => instance.resetColumnSize(column.id),
+    }
+  },
+
+  createHeader: <TGenerics extends TableGenerics>(
+    header: Header<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): ColumnSizingHeader<TGenerics> => {
+    return {
+      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),
+    }
+  },
+
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnSizingInstance<TGenerics> => {
     return {
-      getColumnWidth: (columnId: string) => {
+      getColumnSize: (columnId: string) => {
         const column = instance.getColumn(columnId)
 
         if (!column) {
@@ -143,12 +177,38 @@ export const ColumnSizing = {
 
         return Math.min(
           Math.max(
-            column.minWidth ?? defaultColumnSizing.minWidth,
-            columnSize ?? column.width ?? defaultColumnSizing.width
+            column.minSize ?? defaultColumnSizing.minSize,
+            columnSize ?? column.size ?? defaultColumnSizing.size
           ),
-          column.maxWidth ?? defaultColumnSizing.maxWidth
+          column.maxSize ?? defaultColumnSizing.maxSize
         )
       },
+      getColumnStart: (columnId, position) => {
+        const column = instance.getColumn(columnId)
+
+        if (!column) {
+          throw new Error()
+        }
+
+        const columns = !position
+          ? instance.getVisibleLeafColumns()
+          : position === 'left'
+          ? instance.getLeftVisibleLeafColumns()
+          : instance.getRightVisibleLeafColumns()
+
+        const index = columns.findIndex(d => d.id === columnId)
+
+        if (index > 0) {
+          const prevSiblingColumn = columns[index - 1]
+
+          return (
+            instance.getColumnStart(prevSiblingColumn.id, position) +
+            prevSiblingColumn.getSize()
+          )
+        }
+
+        return 0
+      },
       setColumnSizing: updater =>
         instance.options.onColumnSizingChange?.(updater),
       setColumnSizingInfo: updater =>
@@ -231,11 +291,11 @@ export const ColumnSizing = {
 
           const header = headerId ? instance.getHeader(headerId) : undefined
 
-          const startSize = header ? header.getWidth() : column.getWidth()
+          const startSize = header ? header.getSize() : column.getSize()
 
           const columnSizingStart: [string, number][] = header
-            ? header.getLeafHeaders().map(d => [d.column.id, d.getWidth()])
-            : [[column.id, column.getWidth()]]
+            ? header.getLeafHeaders().map(d => [d.column.id, d.getSize()])
+            : [[column.id, column.getSize()]]
 
           const clientX = isTouchStartEvent(e)
             ? Math.round(e.touches[0].clientX)
@@ -249,7 +309,7 @@ export const ColumnSizing = {
               return
             }
 
-            let newColumnSizing: ColumnSizing = {}
+            let newColumnSizing: ColumnSizingState = {}
 
             instance.setColumnSizingInfo(old => {
               const deltaOffset = clientXPos - (old?.startOffset ?? 0)
@@ -258,11 +318,10 @@ export const ColumnSizing = {
                 -0.999999
               )
 
-              old.columnSizingStart.forEach(([columnId, headerWidth]) => {
+              old.columnSizingStart.forEach(([columnId, headerSize]) => {
                 newColumnSizing[columnId] =
                   Math.round(
-                    Math.max(headerWidth + headerWidth * deltaPercentage, 0) *
-                      100
+                    Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
                   ) / 100
               })
 
@@ -387,30 +446,23 @@ export const ColumnSizing = {
 
         return propGetter(initialProps, userProps)
       },
-    }
-  },
 
-  createColumn: <TGenerics extends TableGenerics>(
-    column: Column<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingColumn<TGenerics> => {
-    return {
-      getIsResizing: () => instance.getColumnIsResizing(column.id),
-      getCanResize: () => instance.getColumnCanResize(column.id),
-      resetSize: () => instance.resetColumnSize(column.id),
-    }
-  },
-
-  createHeader: <TGenerics extends TableGenerics>(
-    header: Header<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingHeader<TGenerics> => {
-    return {
-      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),
+      getTotalSize: () =>
+        instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
+      getLeftTotalSize: () =>
+        instance.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
+      getCenterTotalSize: () =>
+        instance.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
+      getRightTotalSize: () =>
+        instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
     }
   },
 }

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
+      },
+    }
+  },
+}