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

package/src/features/Headers.ts

@@ -9,30 +9,21 @@ import {
   HeaderGroup,
   HeaderGroupProps,
   HeaderProps,
-  AnyGenerics,
-  PartialGenerics,
+  TableGenerics,
   PropGetterValue,
   TableInstance,
   Row,
 } from '../types'
 import { propGetter, memo } from '../utils'
-import { ColumnSizing } from './ColumnSizing'
-
-export type HeadersRow<TGenerics extends AnyGenerics> = {
-  _getAllVisibleCells: () => Cell<TGenerics>[]
-  getVisibleCells: () => Cell<TGenerics>[]
-  getLeftVisibleCells: () => Cell<TGenerics>[]
-  getCenterVisibleCells: () => Cell<TGenerics>[]
-  getRightVisibleCells: () => Cell<TGenerics>[]
-}
 
-export type HeadersInstance<TGenerics extends AnyGenerics> = {
+export type HeadersInstance<TGenerics extends TableGenerics> = {
   createHeader: (
     column: Column<TGenerics>,
     options: {
       id?: string
       isPlaceholder?: boolean
       placeholderId?: string
+      index: number
       depth: number
     }
   ) => Header<TGenerics>
@@ -74,100 +65,12 @@ export type HeadersInstance<TGenerics extends AnyGenerics> = {
     headerId: string,
     userProps?: TGetter
   ) => undefined | PropGetterValue<FooterProps, TGetter>
-  getTotalWidth: () => number
 }
 
 //
 
 export const Headers = {
-  createRow: <TGenerics extends AnyGenerics>(
-    row: Row<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): HeadersRow<TGenerics> => {
-    return {
-      _getAllVisibleCells: memo(
-        () => [
-          row
-            .getAllCells()
-            .filter(cell => cell.column.getIsVisible())
-            .map(d => d.id)
-            .join('_'),
-        ],
-        _ => {
-          return row.getAllCells().filter(cell => cell.column.getIsVisible())
-        },
-        {
-          key: 'row._getAllVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getVisibleCells: memo(
-        () => [
-          row.getLeftVisibleCells(),
-          row.getCenterVisibleCells(),
-          row.getRightVisibleCells(),
-        ],
-        (left, center, right) => [...left, ...center, ...right],
-        {
-          key: 'row.getVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getCenterVisibleCells: memo(
-        () => [
-          row._getAllVisibleCells(),
-          instance.getState().columnPinning.left,
-          instance.getState().columnPinning.right,
-        ],
-        (allCells, left, right) => {
-          const leftAndRight = [...(left ?? []), ...(right ?? [])]
-
-          return allCells.filter(d => !leftAndRight.includes(d.columnId))
-        },
-        {
-          key: 'row.getCenterVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getLeftVisibleCells: memo(
-        () => [
-          row._getAllVisibleCells(),
-          instance.getState().columnPinning.left,
-          ,
-        ],
-        (allCells, left) => {
-          const cells = (left ?? [])
-            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
-            .filter(Boolean)
-
-          return cells
-        },
-        {
-          key: 'row.getLeftVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-      getRightVisibleCells: memo(
-        () => [
-          row._getAllVisibleCells(),
-          instance.getState().columnPinning.right,
-        ],
-        (allCells, right) => {
-          const cells = (right ?? [])
-            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
-            .filter(Boolean)
-
-          return cells
-        },
-        {
-          key: 'row.getRightVisibleCells',
-          debug: () => instance.options.debugAll ?? instance.options.debugRows,
-        }
-      ),
-    }
-  },
-
-  getInstance: <TGenerics extends AnyGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): HeadersInstance<TGenerics> => {
     return {
@@ -177,6 +80,7 @@ export const Headers = {
           id?: string
           isPlaceholder?: boolean
           placeholderId?: string
+          index: number
           depth: number
         }
       ) => {
@@ -185,20 +89,22 @@ export const Headers = {
         let header: CoreHeader<TGenerics> = {
           id,
           column,
+          index: options.index,
           isPlaceholder: options.isPlaceholder,
           placeholderId: options.placeholderId,
           depth: options.depth,
           subHeaders: [],
           colSpan: 0,
           rowSpan: 0,
-          getWidth: () => {
+          headerGroup: null!,
+          getSize: () => {
             let sum = 0
 
             const recurse = (header: CoreHeader<TGenerics>) => {
               if (header.subHeaders.length) {
                 header.subHeaders.forEach(recurse)
               } else {
-                sum += header.column.getWidth() ?? 0
+                sum += header.column.getSize() ?? 0
               }
             }
 
@@ -206,6 +112,15 @@ export const Headers = {
 
             return sum
           },
+          getStart: () => {
+            if (header.index > 0) {
+              const prevSiblingHeader =
+                header.headerGroup.headers[header.index - 1]
+              return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
+            }
+
+            return 0
+          },
           getLeafHeaders: (): Header<TGenerics>[] => {
             const leafHeaders: CoreHeader<TGenerics>[] = []
 
@@ -242,11 +157,11 @@ export const Headers = {
               : null,
         }
 
-        // Yes, we have to convert instance to unknown, because we know more than the compiler here.
-        return Object.assign(
-          header,
-          ColumnSizing.createHeader(header as Header<TGenerics>, instance)
-        ) as Header<TGenerics>
+        instance._features.forEach(feature => {
+          Object.assign(header, feature.createHeader?.(header, instance))
+        })
+
+        return header as Header<TGenerics>
       },
 
       // Header Groups
@@ -593,21 +508,11 @@ export const Headers = {
 
         return propGetter(initialProps, userProps)
       },
-
-      getTotalWidth: () => {
-        let width = 0
-
-        instance.getVisibleLeafColumns().forEach(column => {
-          width += column.getWidth() ?? 0
-        })
-
-        return width
-      },
     }
   },
 }
 
-export function buildHeaderGroups<TGenerics extends AnyGenerics>(
+export function buildHeaderGroups<TGenerics extends TableGenerics>(
   allColumns: Column<TGenerics>[],
   columnsToGroup: Column<TGenerics>[],
   instance: TableInstance<TGenerics>,
@@ -653,13 +558,13 @@ export function buildHeaderGroups<TGenerics extends AnyGenerics>(
     }
 
     // The parent columns we're going to scan next
-    const parentHeaders: Header<TGenerics>[] = []
+    const pendingParentHeaders: Header<TGenerics>[] = []
 
     // Scan each column for parents
     headersToGroup.forEach(headerToGroup => {
       // What is the latest (last) parent column?
 
-      const latestParentHeader = [...parentHeaders].reverse()[0]
+      const latestPendingParentHeader = [...pendingParentHeaders].reverse()[0]
 
       const isLeafHeader = headerToGroup.column.depth === headerGroup.depth
 
@@ -675,41 +580,45 @@ export function buildHeaderGroups<TGenerics extends AnyGenerics>(
         isPlaceholder = true
       }
 
-      const header = instance.createHeader(column, {
-        id: [headerFamily, depth, column.id, headerToGroup?.id]
-          .filter(Boolean)
-          .join('_'),
-        isPlaceholder,
-        placeholderId: isPlaceholder
-          ? `${parentHeaders.filter(d => d.column === column).length}`
-          : undefined,
-        depth,
-      })
-
-      if (!latestParentHeader || latestParentHeader.column !== header.column) {
-        header.subHeaders.push(headerToGroup)
-        parentHeaders.push(header)
+      if (latestPendingParentHeader?.column === column) {
+        // This column is repeated. Add it as a sub header to the next batch
+        latestPendingParentHeader.subHeaders.push(headerToGroup)
       } else {
-        latestParentHeader.subHeaders.push(headerToGroup)
-      }
+        // This is a new header. Let's create it
+        const header = instance.createHeader(column, {
+          id: [headerFamily, depth, column.id, headerToGroup?.id]
+            .filter(Boolean)
+            .join('_'),
+          isPlaceholder,
+          placeholderId: isPlaceholder
+            ? `${pendingParentHeaders.filter(d => d.column === column).length}`
+            : undefined,
+          depth,
+          index: pendingParentHeaders.length,
+        })
 
-      // if (!headerToGroup.isPlaceholder) {
-      //   headerToGroup.column.header = headerToGroup;
-      // }
+        // Add the headerToGroup as a subHeader of the new header
+        header.subHeaders.push(headerToGroup)
+        // Add the new header to the pendingParentHeaders to get grouped
+        // in the next batch
+        pendingParentHeaders.push(header)
+      }
 
       headerGroup.headers.push(headerToGroup)
+      headerToGroup.headerGroup = headerGroup
     })
 
     headerGroups.push(headerGroup)
 
     if (depth > 0) {
-      createHeaderGroup(parentHeaders, depth - 1)
+      createHeaderGroup(pendingParentHeaders, depth - 1)
     }
   }
 
-  const bottomHeaders = columnsToGroup.map(column =>
+  const bottomHeaders = columnsToGroup.map((column, index) =>
     instance.createHeader(column, {
       depth: maxDepth,
+      index,
     })
   )
 

package/src/features/Ordering.ts

@@ -5,8 +5,7 @@ import {
   OnChangeFn,
   Updater,
   Column,
-  AnyGenerics,
-  PartialGenerics,
+  TableGenerics,
 } from '../types'
 
 import { Grouping } from './Grouping'
@@ -25,10 +24,12 @@ export type ColumnOrderDefaultOptions = {
   onColumnOrderChange: OnChangeFn<ColumnOrderState>
 }
 
-export type ColumnOrderInstance<TGenerics extends AnyGenerics> = {
+export type ColumnOrderInstance<TGenerics extends TableGenerics> = {
   setColumnOrder: (updater: Updater<ColumnOrderState>) => void
   resetColumnOrder: () => void
-  getOrderColumnsFn: () => (columns: Column<TGenerics>[]) => Column<TGenerics>[]
+  _getOrderColumnsFn: () => (
+    columns: Column<TGenerics>[]
+  ) => Column<TGenerics>[]
 }
 
 //
@@ -40,7 +41,7 @@ export const Ordering = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends AnyGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnOrderDefaultOptions => {
     return {
@@ -48,7 +49,7 @@ export const Ordering = {
     }
   },
 
-  getInstance: <TGenerics extends AnyGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnOrderInstance<TGenerics> => {
     return {
@@ -57,7 +58,7 @@ export const Ordering = {
       resetColumnOrder: () => {
         instance.setColumnOrder(instance.initialState.columnOrder ?? [])
       },
-      getOrderColumnsFn: memo(
+      _getOrderColumnsFn: memo(
         () => [
           instance.getState().columnOrder,
           instance.getState().grouping,

package/src/features/Pagination.ts

@@ -1,7 +1,6 @@
 import {
   OnChangeFn,
-  AnyGenerics,
-  PartialGenerics,
+  TableGenerics,
   TableInstance,
   RowModel,
   Updater,
@@ -18,7 +17,7 @@ export type PaginationTableState = {
   pagination: PaginationState
 }
 
-export type PaginationOptions<TGenerics extends AnyGenerics> = {
+export type PaginationOptions<TGenerics extends TableGenerics> = {
   onPaginationChange?: OnChangeFn<PaginationState>
   autoResetPageIndex?: boolean
   getPaginationRowModel?: (
@@ -31,7 +30,7 @@ export type PaginationDefaultOptions = {
   autoResetPageIndex: boolean
 }
 
-export type PaginationInstance<TGenerics extends AnyGenerics> = {
+export type PaginationInstance<TGenerics extends TableGenerics> = {
   queueResetPageIndex: () => void
   setPagination: (updater: Updater<PaginationState>) => void
   resetPagination: () => void
@@ -64,7 +63,7 @@ export const Pagination = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends AnyGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): PaginationDefaultOptions => {
     return {
@@ -73,7 +72,7 @@ export const Pagination = {
     }
   },
 
-  getInstance: <TGenerics extends AnyGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): PaginationInstance<TGenerics> => {
     let registered = false

package/src/features/Pinning.ts

@@ -3,12 +3,13 @@ import {
   Updater,
   TableInstance,
   Column,
-  AnyGenerics,
-  PartialGenerics,
+  TableGenerics,
+  Row,
+  Cell,
 } from '../types'
-import { functionalUpdate, makeStateUpdater } from '../utils'
+import { functionalUpdate, makeStateUpdater, memo } from '../utils'
 
-type ColumnPinningPosition = false | 'left' | 'right'
+export type ColumnPinningPosition = false | 'left' | 'right'
 
 export type ColumnPinningState = {
   left?: string[]
@@ -40,7 +41,19 @@ export type ColumnPinningColumn = {
   pin: (position: ColumnPinningPosition) => void
 }
 
-export type ColumnPinningInstance<TGenerics extends AnyGenerics> = {
+export type ColumnPinningRow<TGenerics extends TableGenerics> = {
+  getLeftVisibleCells: () => Cell<TGenerics>[]
+  getCenterVisibleCells: () => Cell<TGenerics>[]
+  getRightVisibleCells: () => Cell<TGenerics>[]
+}
+
+export type ColumnPinningCell<TGenerics extends TableGenerics> = {
+  getLeftVisibleCells: () => Cell<TGenerics>[]
+  getCenterVisibleCells: () => Cell<TGenerics>[]
+  getRightVisibleCells: () => Cell<TGenerics>[]
+}
+
+export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
   resetColumnPinning: () => void
   pinColumn: (columnId: string, position: ColumnPinningPosition) => void
@@ -48,6 +61,9 @@ export type ColumnPinningInstance<TGenerics extends AnyGenerics> = {
   getColumnIsPinned: (columnId: string) => ColumnPinningPosition
   getColumnPinnedIndex: (columnId: string) => number
   getIsSomeColumnsPinned: () => boolean
+  getLeftLeafColumns: () => Column<TGenerics>[]
+  getRightLeafColumns: () => Column<TGenerics>[]
+  getCenterLeafColumns: () => Column<TGenerics>[]
 }
 
 //
@@ -62,7 +78,7 @@ export const Pinning = {
     }
   },
 
-  getDefaultOptions: <TGenerics extends AnyGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnPinningDefaultOptions => {
     return {
@@ -70,7 +86,7 @@ export const Pinning = {
     }
   },
 
-  createColumn: <TGenerics extends AnyGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): ColumnPinningColumn => {
@@ -82,7 +98,129 @@ export const Pinning = {
     }
   },
 
-  getInstance: <TGenerics extends AnyGenerics>(
+  createRow: <TGenerics extends TableGenerics>(
+    row: Row<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): ColumnPinningRow<TGenerics> => {
+    return {
+      getCenterVisibleCells: memo(
+        () => [
+          row._getAllVisibleCells(),
+          instance.getState().columnPinning.left,
+          instance.getState().columnPinning.right,
+        ],
+        (allCells, left, right) => {
+          const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
+
+          return allCells.filter(d => !leftAndRight.includes(d.columnId))
+        },
+        {
+          key: 'row.getCenterVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getLeftVisibleCells: memo(
+        () => [
+          row._getAllVisibleCells(),
+          instance.getState().columnPinning.left,
+          ,
+        ],
+        (allCells, left) => {
+          const cells = (left ?? [])
+            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
+            .filter(Boolean)
+            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
+
+          return cells
+        },
+        {
+          key: 'row.getLeftVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getRightVisibleCells: memo(
+        () => [
+          row._getAllVisibleCells(),
+          instance.getState().columnPinning.right,
+        ],
+        (allCells, right) => {
+          const cells = (right ?? [])
+            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
+            .filter(Boolean)
+            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
+
+          return cells
+        },
+        {
+          key: 'row.getRightVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+    }
+  },
+
+  createCell: <TGenerics extends TableGenerics>(
+    cell: Cell<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): ColumnPinningCell<TGenerics> => {
+    return {
+      getCenterVisibleCells: memo(
+        () => [
+          cell.row._getAllVisibleCells(),
+          instance.getState().columnPinning.left,
+          instance.getState().columnPinning.right,
+        ],
+        (allCells, left, right) => {
+          const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
+
+          return allCells.filter(d => !leftAndRight.includes(d.columnId))
+        },
+        {
+          key: 'row.getCenterVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getLeftVisibleCells: memo(
+        () => [
+          cell.row._getAllVisibleCells(),
+          instance.getState().columnPinning.left,
+          ,
+        ],
+        (allCells, left) => {
+          const cells = (left ?? [])
+            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
+            .filter(Boolean)
+            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
+
+          return cells
+        },
+        {
+          key: 'row.getLeftVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getRightVisibleCells: memo(
+        () => [
+          cell.row._getAllVisibleCells(),
+          instance.getState().columnPinning.right,
+        ],
+        (allCells, right) => {
+          const cells = (right ?? [])
+            .map(columnId => allCells.find(cell => cell.columnId === columnId)!)
+            .filter(Boolean)
+            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
+
+          return cells
+        },
+        {
+          key: 'row.getRightVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+    }
+  },
+
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnPinningInstance<TGenerics> => {
     return {
@@ -177,6 +315,58 @@ export const Pinning = {
 
         return Boolean(left?.length || right?.length)
       },
+
+      getLeftLeafColumns: memo(
+        () => [
+          instance.getAllLeafColumns(),
+          instance.getState().columnPinning.left,
+        ],
+        (allColumns, left) => {
+          return (left ?? [])
+            .map(columnId => allColumns.find(column => column.id === columnId)!)
+            .filter(Boolean)
+        },
+        {
+          key: 'getLeftLeafColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getRightLeafColumns: memo(
+        () => [
+          instance.getAllLeafColumns(),
+          instance.getState().columnPinning.right,
+        ],
+        (allColumns, right) => {
+          return (right ?? [])
+            .map(columnId => allColumns.find(column => column.id === columnId)!)
+            .filter(Boolean)
+        },
+        {
+          key: 'getRightLeafColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getCenterLeafColumns: memo(
+        () => [
+          instance.getAllLeafColumns(),
+          instance.getState().columnPinning.left,
+          instance.getState().columnPinning.right,
+        ],
+        (allColumns, left, right) => {
+          const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
+
+          return allColumns.filter(d => !leftAndRight.includes(d.id))
+        },
+        {
+          key: 'getCenterLeafColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
     }
   },
 }