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

package/src/createTable.ts

@@ -1,17 +1,24 @@
 import { CustomFilterFns, FilterFn } from './features/Filters'
 import { AggregationFn, CustomAggregationFns } from './features/Grouping'
 import { CustomSortingFns, SortingFn } from './features/Sorting'
-import { ColumnDef, AccessorFn, AnyRender, AnyGenerics, Options } from './types'
+import {
+  ColumnDef,
+  AccessorFn,
+  AnyRender,
+  TableGenerics,
+  Options,
+} from './types'
 import { IfDefined, Overwrite, PartialKeys } from './utils'
 
-export type TableFactory<TGenerics extends AnyGenerics> = () => Table<TGenerics>
+export type TableFactory<TGenerics extends TableGenerics> =
+  () => Table<TGenerics>
 
 export type CreateTableOptions<
   TRender extends AnyRender,
   TFilterFns extends CustomFilterFns<any>,
   TSortingFns extends CustomSortingFns<any>,
   TAggregationFns extends CustomAggregationFns<any>,
-  TGenerics extends AnyGenerics
+  TGenerics extends TableGenerics
 > = Partial<
   {
     render?: TRender
@@ -21,7 +28,7 @@ export type CreateTableOptions<
   } & Omit<Options<TGenerics>, 'filterFns' | 'sortingFns' | 'aggregationFns'>
 >
 
-export type Table<TGenerics extends AnyGenerics> = {
+export type Table<TGenerics extends TableGenerics> = {
   generics: TGenerics
   options: Partial<Options<TGenerics>>
   setRowType: <TRow>() => Table<Overwrite<TGenerics, { Row: TRow }>>
@@ -125,7 +132,7 @@ export function createTableFactory<TRender extends AnyRender>(opts: {
 
 // A lot of returns in here are `as any` for a reason. Unless you
 // can find a better way to do this, then don't worry about them
-function createTable<TGenerics extends AnyGenerics>(
+function createTable<TGenerics extends TableGenerics>(
   _?: undefined,
   __?: undefined,
   options?: CreateTableOptions<any, any, any, any, TGenerics>

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

@@ -3,17 +3,22 @@ import {
   Getter,
   Header,
   OnChangeFn,
-  AnyGenerics,
-  PartialGenerics,
+  TableGenerics,
   PropGetterValue,
   TableInstance,
   Updater,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+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
@@ -24,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,9 +52,10 @@ export type ColumnResizerProps = {
   role?: string
 }
 
-export type ColumnSizingInstance<TGenerics extends AnyGenerics> = {
-  getColumnWidth: (columnId: string) => number
-  setColumnSizing: (updater: Updater<ColumnSizing>) => void
+export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
+  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
@@ -68,23 +69,29 @@ export type ColumnSizingInstance<TGenerics extends AnyGenerics> = {
   ) => 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 AnyGenerics> = {
+export type ColumnSizingColumn<TGenerics extends TableGenerics> = {
+  getSize: () => number
+  getStart: (position?: ColumnPinningPosition) => number
   getCanResize: () => boolean
   getIsResizing: () => boolean
   resetSize: () => void
 }
 
-export type ColumnSizingHeader<TGenerics extends AnyGenerics> = {
+export type ColumnSizingHeader<TGenerics extends TableGenerics> = {
   getCanResize: () => boolean
   getIsResizing: () => boolean
   getResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
@@ -96,9 +103,9 @@ export type ColumnSizingHeader<TGenerics extends AnyGenerics> = {
 //
 
 export const defaultColumnSizing = {
-  width: 150,
-  minWidth: 20,
-  maxWidth: Number.MAX_SAFE_INTEGER,
+  size: 150,
+  minSize: 20,
+  maxSize: Number.MAX_SAFE_INTEGER,
 }
 
 export const ColumnSizing = {
@@ -119,7 +126,7 @@ export const ColumnSizing = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends AnyGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnSizingDefaultOptions => {
     return {
@@ -129,11 +136,37 @@ export const ColumnSizing = {
     }
   },
 
-  getInstance: <TGenerics extends AnyGenerics>(
+  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) {
@@ -144,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 =>
@@ -232,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)
@@ -250,7 +309,7 @@ export const ColumnSizing = {
               return
             }
 
-            let newColumnSizing: ColumnSizing = {}
+            let newColumnSizing: ColumnSizingState = {}
 
             instance.setColumnSizingInfo(old => {
               const deltaOffset = clientXPos - (old?.startOffset ?? 0)
@@ -259,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
               })
 
@@ -388,30 +446,23 @@ export const ColumnSizing = {
 
         return propGetter(initialProps, userProps)
       },
-    }
-  },
 
-  createColumn: <TGenerics extends AnyGenerics>(
-    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 AnyGenerics>(
-    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,
     }
   },
 }