@tanstack/table-core 8.11.8 → 8.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/table-core",
-  "version": "8.11.8",
+  "version": "8.12.0",
   "description": "Headless UI for building powerful tables & datagrids for TS/JS.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/core/cell.ts

@@ -1,5 +1,5 @@
 import { RowData, Cell, Column, Row, Table } from '../types'
-import { Getter, memo } from '../utils'
+import { Getter, getMemoOptions, memo } from '../utils'
 
 export interface CellContext<TData extends RowData, TValue> {
   cell: Cell<TData, TValue>
@@ -74,10 +74,7 @@ export function createCell<TData extends RowData, TValue>(
         getValue: cell.getValue,
         renderValue: cell.renderValue,
       }),
-      {
-        key: process.env.NODE_ENV === 'development' && 'cell.getContext',
-        debug: () => table.options.debugAll,
-      }
+      getMemoOptions(table.options, 'debugCells', 'cell.getContext')
     ),
   }
 

package/src/core/column.ts

@@ -6,7 +6,7 @@ import {
   RowData,
   ColumnDefResolved,
 } from '../types'
-import { memo } from '../utils'
+import { getMemoOptions, memo } from '../utils'
 
 export interface CoreColumn<TData extends RowData, TValue> {
   /**
@@ -137,10 +137,7 @@ export function createColumn<TData extends RowData, TValue>(
           ...column.columns?.flatMap(d => d.getFlatColumns()),
         ]
       },
-      {
-        key: process.env.NODE_ENV === 'production' && 'column.getFlatColumns',
-        debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      getMemoOptions(table.options, 'debugColumns', 'column.getFlatColumns')
     ),
     getLeafColumns: memo(
       () => [table._getOrderColumnsFn()],
@@ -155,10 +152,7 @@ export function createColumn<TData extends RowData, TValue>(
 
         return [column as Column<TData, TValue>]
       },
-      {
-        key: process.env.NODE_ENV === 'production' && 'column.getLeafColumns',
-        debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      getMemoOptions(table.options, 'debugColumns', 'column.getLeafColumns')
     ),
   }
 

package/src/core/headers.ts

@@ -1,7 +1,9 @@
 import { RowData, Column, Header, HeaderGroup, Table } from '../types'
-import { memo } from '../utils'
+import { getMemoOptions, memo } from '../utils'
 import { TableFeature } from './table'
 
+const debug = 'debugHeaders'
+
 export interface CoreHeaderGroup<TData extends RowData> {
   depth: number
   headers: Header<TData, unknown>[]
@@ -288,10 +290,7 @@ export const Headers: TableFeature = {
 
         return headerGroups
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getHeaderGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getHeaderGroups')
     )
 
     table.getCenterHeaderGroups = memo(
@@ -307,10 +306,7 @@ export const Headers: TableFeature = {
         )
         return buildHeaderGroups(allColumns, leafColumns, table, 'center')
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getCenterHeaderGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getCenterHeaderGroups')
     )
 
     table.getLeftHeaderGroups = memo(
@@ -327,10 +323,7 @@ export const Headers: TableFeature = {
 
         return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'left')
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getLeftHeaderGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getLeftHeaderGroups')
     )
 
     table.getRightHeaderGroups = memo(
@@ -347,10 +340,7 @@ export const Headers: TableFeature = {
 
         return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'right')
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getRightHeaderGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getRightHeaderGroups')
     )
 
     // Footer Groups
@@ -360,10 +350,7 @@ export const Headers: TableFeature = {
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getFooterGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getFooterGroups')
     )
 
     table.getLeftFooterGroups = memo(
@@ -371,10 +358,7 @@ export const Headers: TableFeature = {
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getLeftFooterGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getLeftFooterGroups')
     )
 
     table.getCenterFooterGroups = memo(
@@ -382,10 +366,7 @@ export const Headers: TableFeature = {
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getCenterFooterGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getCenterFooterGroups')
     )
 
     table.getRightFooterGroups = memo(
@@ -393,10 +374,7 @@ export const Headers: TableFeature = {
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getRightFooterGroups',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getRightFooterGroups')
     )
 
     // Flat Headers
@@ -410,10 +388,7 @@ export const Headers: TableFeature = {
           })
           .flat()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getFlatHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getFlatHeaders')
     )
 
     table.getLeftFlatHeaders = memo(
@@ -425,10 +400,7 @@ export const Headers: TableFeature = {
           })
           .flat()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getLeftFlatHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getLeftFlatHeaders')
     )
 
     table.getCenterFlatHeaders = memo(
@@ -440,10 +412,7 @@ export const Headers: TableFeature = {
           })
           .flat()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getCenterFlatHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getCenterFlatHeaders')
     )
 
     table.getRightFlatHeaders = memo(
@@ -455,10 +424,7 @@ export const Headers: TableFeature = {
           })
           .flat()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getRightFlatHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getRightFlatHeaders')
     )
 
     // Leaf Headers
@@ -468,10 +434,7 @@ export const Headers: TableFeature = {
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getCenterLeafHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getCenterLeafHeaders')
     )
 
     table.getLeftLeafHeaders = memo(
@@ -479,10 +442,7 @@ export const Headers: TableFeature = {
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getLeftLeafHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getLeftLeafHeaders')
     )
 
     table.getRightLeafHeaders = memo(
@@ -490,10 +450,7 @@ export const Headers: TableFeature = {
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getRightLeafHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getRightLeafHeaders')
     )
 
     table.getLeafHeaders = memo(
@@ -513,10 +470,7 @@ export const Headers: TableFeature = {
           })
           .flat()
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getLeafHeaders',
-        debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      getMemoOptions(table.options, debug, 'getLeafHeaders')
     )
   },
 }

package/src/core/row.ts

@@ -1,5 +1,5 @@
 import { RowData, Cell, Row, Table } from '../types'
-import { flattenBy, memo } from '../utils'
+import { flattenBy, getMemoOptions, memo } from '../utils'
 import { createCell } from './cell'
 
 export interface CoreRow<TData extends RowData> {
@@ -174,10 +174,7 @@ export const createRow = <TData extends RowData>(
           return createCell(table, row as Row<TData>, column, column.id)
         })
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'row.getAllCells',
-        debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      getMemoOptions(table.options, 'debugRows', 'getAllCells')
     ),
 
     _getAllCellsByColumnId: memo(
@@ -191,11 +188,7 @@ export const createRow = <TData extends RowData>(
           {} as Record<string, Cell<TData, unknown>>
         )
       },
-      {
-        key:
-          process.env.NODE_ENV === 'production' && 'row.getAllCellsByColumnId',
-        debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      getMemoOptions(table.options, 'debugRows', 'getAllCellsByColumnId')
     ),
   }
 

package/src/core/table.ts

@@ -1,4 +1,4 @@
-import { functionalUpdate, memo, RequiredKeys } from '../utils'
+import { functionalUpdate, getMemoOptions, memo, RequiredKeys } from '../utils'
 
 import {
   Updater,
@@ -87,6 +87,12 @@ export interface CoreOptions<TData extends RowData> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
    */
   debugAll?: boolean
+  /**
+   * Set this option to `true` to output cell debugging information to the console.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcells]
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
+   */
+  debugCells?: boolean
   /**
    * Set this option to `true` to output column debugging information to the console.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcolumns)
@@ -422,10 +428,7 @@ export function createTable<TData extends RowData>(
           ...defaultColumn,
         } as Partial<ColumnDef<TData, unknown>>
       },
-      {
-        debug: () => table.options.debugAll ?? table.options.debugColumns,
-        key: process.env.NODE_ENV === 'development' && 'getDefaultColumnDef',
-      }
+      getMemoOptions(options, 'debugColumns', '_getDefaultColumnDef')
     ),
 
     _getColumnDefs: () => table.options.columns,
@@ -456,10 +459,7 @@ export function createTable<TData extends RowData>(
 
         return recurseColumns(columnDefs)
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getAllColumns',
-        debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      getMemoOptions(options, 'debugColumns', 'getAllColumns')
     ),
 
     getAllFlatColumns: memo(
@@ -469,10 +469,7 @@ export function createTable<TData extends RowData>(
           return column.getFlatColumns()
         })
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getAllFlatColumns',
-        debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      getMemoOptions(options, 'debugColumns', 'getAllFlatColumns')
     ),
 
     _getAllFlatColumnsById: memo(
@@ -486,10 +483,7 @@ export function createTable<TData extends RowData>(
           {} as Record<string, Column<TData, unknown>>
         )
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById',
-        debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      getMemoOptions(options, 'debugColumns', 'getAllFlatColumnsById')
     ),
 
     getAllLeafColumns: memo(
@@ -498,10 +492,7 @@ export function createTable<TData extends RowData>(
         let leafColumns = allColumns.flatMap(column => column.getLeafColumns())
         return orderColumns(leafColumns)
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getAllLeafColumns',
-        debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      getMemoOptions(options, 'debugColumns', 'getAllLeafColumns')
     ),
 
     getColumn: columnId => {

package/src/features/ColumnSizing.ts

@@ -1,6 +1,7 @@
+import { _getVisibleLeafColumns } from '..'
 import { TableFeature } from '../core/table'
 import { RowData, Column, Header, OnChangeFn, Table, Updater } from '../types'
-import { makeStateUpdater } from '../utils'
+import { getMemoOptions, makeStateUpdater, memo } from '../utils'
 import { ColumnPinningPosition } from './Pinning'
 
 //
@@ -164,11 +165,15 @@ export interface ColumnSizingColumn {
    */
   getSize: () => number
   /**
-   * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding headers.
+   * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding (left) headers in relation to the current column.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#getstart)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
    */
-  getStart: (position?: ColumnPinningPosition) => number
+  getStart: (position?: ColumnPinningPosition | 'center') => number
+  /**
+   * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all succeeding (right) headers in relation to the current column.
+   */
+  getAfter: (position?: ColumnPinningPosition | 'center') => number
   /**
    * Resets the column to its initial size.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#resetsize)
@@ -257,25 +262,33 @@ export const ColumnSizing: TableFeature = {
         column.columnDef.maxSize ?? defaultColumnSizing.maxSize
       )
     }
-    column.getStart = position => {
-      const columns = !position
-        ? table.getVisibleLeafColumns()
-        : position === 'left'
-          ? table.getLeftVisibleLeafColumns()
-          : table.getRightVisibleLeafColumns()
-
-      const index = columns.findIndex(d => d.id === column.id)
 
-      if (index > 0) {
-        const prevSiblingColumn = columns[index - 1]!
+    column.getStart = memo(
+      position => [
+        position,
+        _getVisibleLeafColumns(table, position),
+        table.getState().columnSizing,
+      ],
+      (position, columns) =>
+        columns
+          .slice(0, column.getIndex(position))
+          .reduce((sum, column) => sum + column.getSize(), 0),
+      getMemoOptions(table.options, 'debugColumns', 'getStart')
+    )
+
+    column.getAfter = memo(
+      position => [
+        position,
+        _getVisibleLeafColumns(table, position),
+        table.getState().columnSizing,
+      ],
+      (position, columns) =>
+        columns
+          .slice(column.getIndex(position) + 1)
+          .reduce((sum, column) => sum + column.getSize(), 0),
+      getMemoOptions(table.options, 'debugColumns', 'getAfter')
+    )
 
-        return (
-          prevSiblingColumn.getStart(position) + prevSiblingColumn.getSize()
-        )
-      }
-
-      return 0
-    }
     column.resetSize = () => {
       table.setColumnSizing(({ [column.id]: _, ...rest }) => {
         return rest

package/src/features/Ordering.ts

@@ -1,9 +1,10 @@
-import { makeStateUpdater, memo } from '../utils'
+import { getMemoOptions, makeStateUpdater, memo } from '../utils'
 
 import { Table, OnChangeFn, Updater, Column, RowData } from '../types'
 
 import { orderColumns } from './Grouping'
 import { TableFeature } from '../core/table'
+import { ColumnPinningPosition, _getVisibleLeafColumns } from '..'
 
 export interface ColumnOrderTableState {
   columnOrder: ColumnOrderState
@@ -20,6 +21,27 @@ export interface ColumnOrderOptions {
   onColumnOrderChange?: OnChangeFn<ColumnOrderState>
 }
 
+export interface ColumnOrderColumn {
+  /**
+   * Returns the index of the column in the order of the visible columns. Optionally pass a `position` parameter to get the index of the column in a sub-section of the table
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-ordering#getindex)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-ordering)
+   */
+  getIndex: (position?: ColumnPinningPosition | 'center') => number
+  /**
+   * Returns `true` if the column is the first column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the first in a sub-section of the table.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-ordering#getisfirstcolumn)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-ordering)
+   */
+  getIsFirstColumn: (position?: ColumnPinningPosition | 'center') => boolean
+  /**
+   * Returns `true` if the column is the last column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the last in a sub-section of the table.
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-ordering#getislastcolumn)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-ordering)
+   */
+  getIsLastColumn: (position?: ColumnPinningPosition | 'center') => boolean
+}
+
 export interface ColumnOrderDefaultOptions {
   onColumnOrderChange: OnChangeFn<ColumnOrderState>
 }
@@ -60,6 +82,25 @@ export const Ordering: TableFeature = {
     }
   },
 
+  createColumn: <TData extends RowData>(
+    column: Column<TData, unknown>,
+    table: Table<TData>
+  ): void => {
+    column.getIndex = memo(
+      position => [_getVisibleLeafColumns(table, position)],
+      columns => columns.findIndex(d => d.id === column.id),
+      getMemoOptions(table.options, 'debugColumns', 'getIndex')
+    )
+    column.getIsFirstColumn = position => {
+      const columns = _getVisibleLeafColumns(table, position)
+      return columns[0]?.id === column.id
+    }
+    column.getIsLastColumn = position => {
+      const columns = _getVisibleLeafColumns(table, position)
+      return columns[columns.length - 1]?.id === column.id
+    }
+  },
+
   createTable: <TData extends RowData>(table: Table<TData>): void => {
     table.setColumnOrder = updater =>
       table.options.onColumnOrderChange?.(updater)
@@ -74,43 +115,41 @@ export const Ordering: TableFeature = {
         table.getState().grouping,
         table.options.groupedColumnMode,
       ],
-      (columnOrder, grouping, groupedColumnMode) => columns => {
-        // Sort grouped columns to the start of the column list
-        // before the headers are built
-        let orderedColumns: Column<TData, unknown>[] = []
-
-        // If there is no order, return the normal columns
-        if (!columnOrder?.length) {
-          orderedColumns = columns
-        } else {
-          const columnOrderCopy = [...columnOrder]
-
-          // If there is an order, make a copy of the columns
-          const columnsCopy = [...columns]
-
-          // And make a new ordered array of the columns
-
-          // Loop over the columns and place them in order into the new array
-          while (columnsCopy.length && columnOrderCopy.length) {
-            const targetColumnId = columnOrderCopy.shift()
-            const foundIndex = columnsCopy.findIndex(
-              d => d.id === targetColumnId
-            )
-            if (foundIndex > -1) {
-              orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!)
+      (columnOrder, grouping, groupedColumnMode) =>
+        (columns: Column<TData, unknown>[]) => {
+          // Sort grouped columns to the start of the column list
+          // before the headers are built
+          let orderedColumns: Column<TData, unknown>[] = []
+
+          // If there is no order, return the normal columns
+          if (!columnOrder?.length) {
+            orderedColumns = columns
+          } else {
+            const columnOrderCopy = [...columnOrder]
+
+            // If there is an order, make a copy of the columns
+            const columnsCopy = [...columns]
+
+            // And make a new ordered array of the columns
+
+            // Loop over the columns and place them in order into the new array
+            while (columnsCopy.length && columnOrderCopy.length) {
+              const targetColumnId = columnOrderCopy.shift()
+              const foundIndex = columnsCopy.findIndex(
+                d => d.id === targetColumnId
+              )
+              if (foundIndex > -1) {
+                orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!)
+              }
             }
-          }
 
-          // If there are any columns left, add them to the end
-          orderedColumns = [...orderedColumns, ...columnsCopy]
-        }
+            // If there are any columns left, add them to the end
+            orderedColumns = [...orderedColumns, ...columnsCopy]
+          }
 
-        return orderColumns(orderedColumns, grouping, groupedColumnMode)
-      },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getOrderColumnsFn',
-        // debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+          return orderColumns(orderedColumns, grouping, groupedColumnMode)
+        },
+      getMemoOptions(table.options, 'debugTable', '_getOrderColumnsFn')
     )
   },
 }

package/src/features/Pagination.ts

@@ -1,6 +1,11 @@
 import { TableFeature } from '../core/table'
 import { OnChangeFn, Table, RowModel, Updater, RowData } from '../types'
-import { functionalUpdate, makeStateUpdater, memo } from '../utils'
+import {
+  functionalUpdate,
+  getMemoOptions,
+  makeStateUpdater,
+  memo,
+} from '../utils'
 
 export interface PaginationState {
   pageIndex: number
@@ -290,10 +295,7 @@ export const Pagination: TableFeature = {
         }
         return pageOptions
       },
-      {
-        key: process.env.NODE_ENV === 'development' && 'getPageOptions',
-        debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      getMemoOptions(table.options, 'debugTable', 'getPageOptions')
     )
 
     table.getCanPreviousPage = () => table.getState().pagination.pageIndex > 0