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

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

@@ -0,0 +1,130 @@
+import {
+  Cell,
+  TableGenerics,
+  TableInstance,
+  Row,
+  Column,
+  CoreCell,
+} from '../types'
+import { memo } 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>
+}
+
+//
+
+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,
+          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
+      },
+    }
+  },
+}

package/src/features/ColumnSizing.ts

@@ -1,23 +1,23 @@
 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'
 
 //
 
 export type ColumnSizingTableState = {
-  columnSizing: ColumnSizing
+  columnSizing: ColumnSizingState
   columnSizingInfo: ColumnSizingInfoState
 }
 
-export type ColumnSizing = Record<string, number>
+export type ColumnSizingState = Record<string, number>
 
 export type ColumnSizingInfoState = {
   startOffset: null | number
@@ -33,27 +33,20 @@ 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>
 }
 
-export type ColumnResizerProps = {
-  title?: string
-  onMouseDown?: (e: MouseEvent) => void
-  onTouchStart?: (e: TouchEvent) => void
-  draggable?: boolean
-  role?: string
-}
-
 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
@@ -61,23 +54,26 @@ 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
+  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
@@ -86,21 +82,19 @@ 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
 }
 
 //
 
 export const defaultColumnSizing = {
-  width: 150,
-  minWidth: 20,
-  maxWidth: Number.MAX_SAFE_INTEGER,
+  size: 150,
+  minSize: 20,
+  maxSize: Number.MAX_SAFE_INTEGER,
 }
 
-export const ColumnSizing = {
+export const ColumnSizing: TableFeature = {
   getDefaultColumn: (): ColumnSizingColumnDef => {
     return defaultColumnSizing
   },
@@ -128,11 +122,36 @@ 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),
+      getResizeHandler: () => instance.getResizeHandler(header.id),
+    }
+  },
+
+  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 +162,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 =>
@@ -214,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) {
@@ -231,11 +280,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 +298,7 @@ export const ColumnSizing = {
               return
             }
 
-            let newColumnSizing: ColumnSizing = {}
+            let newColumnSizing: ColumnSizingState = {}
 
             instance.setColumnSizingInfo(old => {
               const deltaOffset = clientXPos - (old?.startOffset ?? 0)
@@ -258,11 +307,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
               })
 
@@ -368,49 +416,23 @@ 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)
       },
-    }
-  },
-
-  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,
     }
   },
 }