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

package/src/features/Headers.ts

@@ -1,29 +1,12 @@
 import {
-  Cell,
   Column,
   CoreHeader,
-  FooterGroupProps,
-  FooterProps,
-  Getter,
   Header,
   HeaderGroup,
-  HeaderGroupProps,
-  HeaderProps,
   TableGenerics,
-  PropGetterValue,
   TableInstance,
-  Row,
 } from '../types'
-import { propGetter, memo } from '../utils'
-import { ColumnSizing } from './ColumnSizing'
-
-export type HeadersRow<TGenerics extends TableGenerics> = {
-  _getAllVisibleCells: () => Cell<TGenerics>[]
-  getVisibleCells: () => Cell<TGenerics>[]
-  getLeftVisibleCells: () => Cell<TGenerics>[]
-  getCenterVisibleCells: () => Cell<TGenerics>[]
-  getRightVisibleCells: () => Cell<TGenerics>[]
-}
+import { memo } from '../utils'
 
 export type HeadersInstance<TGenerics extends TableGenerics> = {
   createHeader: (
@@ -32,6 +15,7 @@ export type HeadersInstance<TGenerics extends TableGenerics> = {
       id?: string
       isPlaceholder?: boolean
       placeholderId?: string
+      index: number
       depth: number
     }
   ) => Header<TGenerics>
@@ -56,117 +40,12 @@ export type HeadersInstance<TGenerics extends TableGenerics> = {
   getRightLeafHeaders: () => Header<TGenerics>[]
 
   getHeader: (id: string) => Header<TGenerics>
-
-  getHeaderGroupProps: <TGetter extends Getter<HeaderGroupProps>>(
-    id: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<HeaderGroupProps, TGetter>
-  getFooterGroupProps: <TGetter extends Getter<FooterGroupProps>>(
-    id: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<FooterGroupProps, TGetter>
-  getHeaderProps: <TGetter extends Getter<HeaderProps>>(
-    headerId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<HeaderProps, TGetter>
-  getFooterProps: <TGetter extends Getter<FooterProps>>(
-    headerId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<FooterProps, TGetter>
-  getTotalWidth: () => number
 }
 
 //
 
 export const Headers = {
-  createRow: <TGenerics extends TableGenerics>(
-    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: 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)
-
-          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 TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): HeadersInstance<TGenerics> => {
     return {
@@ -176,6 +55,7 @@ export const Headers = {
           id?: string
           isPlaceholder?: boolean
           placeholderId?: string
+          index: number
           depth: number
         }
       ) => {
@@ -184,20 +64,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
               }
             }
 
@@ -205,6 +87,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>[] = []
 
@@ -219,10 +110,6 @@ export const Headers = {
 
             return leafHeaders as Header<TGenerics>[]
           },
-          getHeaderProps: userProps =>
-            instance.getHeaderProps(header.id, userProps)!,
-          getFooterProps: userProps =>
-            instance.getFooterProps(header.id, userProps)!,
           renderHeader: () =>
             column.header
               ? instance.render(column.header, {
@@ -241,11 +128,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
@@ -531,77 +418,6 @@ export const Headers = {
 
         return header
       },
-
-      getHeaderGroupProps: (id, userProps) => {
-        const headerGroup = instance.getHeaderGroups().find(d => d.id === id)
-
-        if (!headerGroup) {
-          return
-        }
-
-        return propGetter(
-          {
-            key: headerGroup.id,
-            role: 'row',
-          },
-          userProps
-        )
-      },
-
-      getFooterGroupProps: (id, userProps) => {
-        const headerGroup = instance.getFooterGroups().find(d => d.id === id)
-
-        if (!headerGroup) {
-          return
-        }
-
-        const initialProps = {
-          key: headerGroup.id,
-          role: 'row',
-        }
-
-        return propGetter(initialProps, userProps)
-      },
-
-      getHeaderProps: (id, userProps) => {
-        const header = instance.getHeader(id)
-
-        if (!header) {
-          throw new Error()
-        }
-
-        const initialProps: HeaderProps = {
-          key: header.id,
-          role: 'columnheader',
-          colSpan: header.colSpan,
-          rowSpan: header.rowSpan,
-        }
-
-        return propGetter(initialProps, userProps)
-      },
-
-      getFooterProps: (id, userProps) => {
-        const header = instance.getHeader(id)
-
-        const initialProps: FooterProps = {
-          key: header.id,
-          role: 'columnfooter',
-          colSpan: header.colSpan,
-          rowSpan: header.rowSpan,
-        }
-
-        return propGetter(initialProps, userProps)
-      },
-
-      getTotalWidth: () => {
-        let width = 0
-
-        instance.getVisibleLeafColumns().forEach(column => {
-          width += column.getWidth() ?? 0
-        })
-
-        return width
-      },
     }
   },
 }
@@ -645,20 +461,16 @@ export function buildHeaderGroups<TGenerics extends TableGenerics>(
       depth,
       id: [headerFamily, `${depth}`].filter(Boolean).join('_'),
       headers: [],
-      getHeaderGroupProps: getterValue =>
-        instance.getHeaderGroupProps(`${depth}`, getterValue)!,
-      getFooterGroupProps: getterValue =>
-        instance.getFooterGroupProps(`${depth}`, getterValue)!,
     }
 
     // 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
 
@@ -674,41 +486,45 @@ export function buildHeaderGroups<TGenerics extends TableGenerics>(
         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

@@ -49,7 +49,7 @@ export const Ordering = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnOrderInstance<TGenerics> => {
     return {

package/src/features/Pagination.ts

@@ -4,6 +4,7 @@ import {
   TableInstance,
   RowModel,
   Updater,
+  TableFeature,
 } from '../types'
 import { functionalUpdate, makeStateUpdater, memo } from '../utils'
 
@@ -17,7 +18,12 @@ export type PaginationTableState = {
   pagination: PaginationState
 }
 
+export type PaginationInitialTableState = {
+  pagination?: Partial<PaginationState>
+}
+
 export type PaginationOptions<TGenerics extends TableGenerics> = {
+  manualPagination?: boolean
   onPaginationChange?: OnChangeFn<PaginationState>
   autoResetPageIndex?: boolean
   getPaginationRowModel?: (
@@ -52,13 +58,14 @@ export type PaginationInstance<TGenerics extends TableGenerics> = {
 
 //
 
-export const Pagination = {
-  getInitialState: (): PaginationTableState => {
+export const Pagination: TableFeature = {
+  getInitialState: (initialState): PaginationTableState => {
     return {
       pagination: {
         pageCount: -1,
         pageIndex: 0,
         pageSize: 10,
+        ...initialState?.pagination,
       },
     }
   },
@@ -72,7 +79,7 @@ export const Pagination = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): PaginationInstance<TGenerics> => {
     let registered = false
@@ -218,7 +225,10 @@ export const Pagination = {
             instance.options.getPaginationRowModel(instance)
         }
 
-        if (!instance._getPaginationRowModel) {
+        if (
+          instance.options.manualPagination ||
+          !instance._getPaginationRowModel
+        ) {
           return instance.getPrePaginationRowModel()
         }
 

package/src/features/Pinning.ts

@@ -4,10 +4,12 @@ import {
   TableInstance,
   Column,
   TableGenerics,
+  Row,
+  Cell,
 } from '../types'
-import { functionalUpdate, makeStateUpdater } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
-type ColumnPinningPosition = false | 'left' | 'right'
+export type ColumnPinningPosition = false | 'left' | 'right'
 
 export type ColumnPinningState = {
   left?: string[]
@@ -39,6 +41,18 @@ export type ColumnPinningColumn = {
   pin: (position: ColumnPinningPosition) => void
 }
 
+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
@@ -47,6 +61,9 @@ export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
   getColumnIsPinned: (columnId: string) => ColumnPinningPosition
   getColumnPinnedIndex: (columnId: string) => number
   getIsSomeColumnsPinned: () => boolean
+  getLeftLeafColumns: () => Column<TGenerics>[]
+  getRightLeafColumns: () => Column<TGenerics>[]
+  getCenterLeafColumns: () => Column<TGenerics>[]
 }
 
 //
@@ -81,7 +98,129 @@ export const Pinning = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  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 {
@@ -176,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,
+        }
+      ),
     }
   },
 }