@tanstack/table-core 9.0.0-beta.26 → 9.0.0-beta.28

package/src/features/column-faceting/columnFacetingFeature.utils.ts

@@ -1,3 +1,4 @@
+import { makeObjectMap } from '../../utils'
 import type { CellData, RowData } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { RowModel } from '../../core/row-models/coreRowModelsFeature.types'
@@ -23,9 +24,16 @@ export function column_getFacetedMinMaxValues<
   column: Column_Internal<TFeatures, TData, TValue>,
   table: Table_Internal<TFeatures, TData>,
 ): [number, number] | undefined {
-  const facetedMinMaxValuesFn =
-    table.options.features.facetedMinMaxValues?.(table, column.id) ??
-    (() => undefined)
+  const facetedMinMaxValues = (table._rowModels.facetedMinMaxValues ??=
+    makeObjectMap())
+  let facetedMinMaxValuesFn = facetedMinMaxValues[column.id]
+
+  if (!facetedMinMaxValuesFn) {
+    facetedMinMaxValuesFn = facetedMinMaxValues[column.id] =
+      table.options.features.facetedMinMaxValues?.(table, column.id) ??
+      (() => undefined)
+  }
+
   return facetedMinMaxValuesFn()
 }
 
@@ -49,9 +57,17 @@ export function column_getFacetedRowModel<
   column: Column_Internal<TFeatures, TData, TValue> | undefined,
   table: Table_Internal<TFeatures, TData>,
 ): RowModel<TFeatures, TData> {
-  const facetedRowModelFn =
-    table.options.features.facetedRowModel?.(table, column?.id ?? '') ??
-    (() => table.getPreFilteredRowModel())
+  const columnId = column?.id ?? ''
+  const facetedRowModels = (table._rowModels.facetedRowModels ??=
+    makeObjectMap())
+  let facetedRowModelFn = facetedRowModels[columnId]
+
+  if (!facetedRowModelFn) {
+    facetedRowModelFn = facetedRowModels[columnId] =
+      table.options.features.facetedRowModel?.(table, columnId) ??
+      (() => table.getPreFilteredRowModel())
+  }
+
   return facetedRowModelFn()
 }
 
@@ -74,9 +90,16 @@ export function column_getFacetedUniqueValues<
   column: Column_Internal<TFeatures, TData, TValue>,
   table: Table_Internal<TFeatures, TData>,
 ): Map<any, number> {
-  const facetedUniqueValuesFn =
-    table.options.features.facetedUniqueValues?.(table, column.id) ??
-    (() => new Map<any, number>())
+  const facetedUniqueValues = (table._rowModels.facetedUniqueValues ??=
+    makeObjectMap())
+  let facetedUniqueValuesFn = facetedUniqueValues[column.id]
+
+  if (!facetedUniqueValuesFn) {
+    facetedUniqueValuesFn = facetedUniqueValues[column.id] =
+      table.options.features.facetedUniqueValues?.(table, column.id) ??
+      (() => new Map<any, number>())
+  }
+
   return facetedUniqueValuesFn()
 }
 
@@ -95,9 +118,13 @@ export function table_getGlobalFacetedMinMaxValues<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>): undefined | [number, number] {
-  const facetedMinMaxValuesFn =
-    table.options.features.facetedMinMaxValues?.(table, '__global__') ??
-    (() => undefined)
+  if (!table._rowModels.globalFacetedMinMaxValues) {
+    table._rowModels.globalFacetedMinMaxValues =
+      table.options.features.facetedMinMaxValues?.(table, '__global__') ??
+      (() => undefined)
+  }
+
+  const facetedMinMaxValuesFn = table._rowModels.globalFacetedMinMaxValues
   return facetedMinMaxValuesFn()
 }
 
@@ -117,9 +144,13 @@ export function table_getGlobalFacetedRowModel<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {
-  const facetedRowModelFn =
-    table.options.features.facetedRowModel?.(table, '__global__') ??
-    (() => table.getPreFilteredRowModel())
+  if (!table._rowModels.globalFacetedRowModel) {
+    table._rowModels.globalFacetedRowModel =
+      table.options.features.facetedRowModel?.(table, '__global__') ??
+      (() => table.getPreFilteredRowModel())
+  }
+
+  const facetedRowModelFn = table._rowModels.globalFacetedRowModel
   return facetedRowModelFn()
 }
 
@@ -138,8 +169,12 @@ export function table_getGlobalFacetedUniqueValues<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>): Map<any, number> {
-  const facetedUniqueValuesFn =
-    table.options.features.facetedUniqueValues?.(table, '__global__') ??
-    (() => new Map())
+  if (!table._rowModels.globalFacetedUniqueValues) {
+    table._rowModels.globalFacetedUniqueValues =
+      table.options.features.facetedUniqueValues?.(table, '__global__') ??
+      (() => new Map())
+  }
+
+  const facetedUniqueValuesFn = table._rowModels.globalFacetedUniqueValues
   return facetedUniqueValuesFn()
 }

package/src/features/column-faceting/createFacetedRowModel.ts

@@ -69,6 +69,10 @@ function _createFacetedRowModel<
   }
   if (globalFilter) filterableIds.push('__global__')
 
+  if (!filterableIds.length) {
+    return preRowModel
+  }
+
   const filterRowsImpl = (
     row: Row<TFeatures, TData> & Partial<Row_ColumnFiltering<TFeatures, TData>>,
   ) => {

package/src/features/column-faceting/createFacetedUniqueValues.ts

@@ -51,14 +51,11 @@ function _createFacetedUniqueValues<
 
     for (let j = 0; j < values.length; j++) {
       const value = values[j]
-      if (facetedUniqueValues.has(value)) {
-        facetedUniqueValues.set(
-          value,
-          (facetedUniqueValues.get(value) ?? 0) + 1,
-        )
-      } else {
-        facetedUniqueValues.set(value, 1)
-      }
+      const previousValue = facetedUniqueValues.get(value)
+      facetedUniqueValues.set(
+        value,
+        previousValue === undefined ? 1 : previousValue + 1,
+      )
     }
   }
 

package/src/features/column-ordering/columnOrderingFeature.ts

@@ -41,6 +41,7 @@ export const columnOrderingFeature: TableFeature = {
           column.table.atoms.columnPinning?.get(),
           column.table.atoms.grouping?.get(),
           column.table.atoms.columnVisibility?.get(),
+          column.table.options.groupedColumnMode,
         ],
       },
       column_getIsFirstColumn: {

package/src/features/column-pinning/columnPinningFeature.ts

@@ -257,6 +257,8 @@ export const columnPinningFeature: TableFeature = {
           table.options.columns,
           table.atoms.columnPinning?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
         ],
       },
       table_getRightLeafColumns: {
@@ -265,6 +267,8 @@ export const columnPinningFeature: TableFeature = {
           table.options.columns,
           table.atoms.columnPinning?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
         ],
       },
       table_getCenterLeafColumns: {
@@ -273,6 +277,8 @@ export const columnPinningFeature: TableFeature = {
           table.options.columns,
           table.atoms.columnPinning?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
         ],
       },
       table_getPinnedLeafColumns: {
@@ -287,6 +293,8 @@ export const columnPinningFeature: TableFeature = {
           table.atoms.columnPinning?.get(),
           table.atoms.columnVisibility?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
         ],
       },
       table_getCenterVisibleLeafColumns: {
@@ -296,6 +304,8 @@ export const columnPinningFeature: TableFeature = {
           table.atoms.columnPinning?.get(),
           table.atoms.columnVisibility?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
         ],
       },
       table_getRightVisibleLeafColumns: {
@@ -305,6 +315,8 @@ export const columnPinningFeature: TableFeature = {
           table.atoms.columnPinning?.get(),
           table.atoms.columnVisibility?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
         ],
       },
       table_getPinnedVisibleLeafColumns: {

package/src/features/column-resizing/columnResizingFeature.utils.ts

@@ -130,60 +130,112 @@ export function header_getResizeHandler<
         return
       }
 
-      table_setColumnResizing(column.table, (old) => {
-        const deltaDirection =
-          column.table.options.columnResizeDirection === 'rtl' ? -1 : 1
-        const deltaOffset =
-          (clientXPos - (old.startOffset ?? 0)) * deltaDirection
-        const startSize = old.startSize ?? 0
-        const deltaPercentage = Math.max(
-          startSize > 0 ? deltaOffset / startSize : 0,
-          -0.999999,
-        )
-
-        old.columnSizingStart.forEach(([columnId, headerSize]) => {
-          newColumnSizing[columnId] =
-            Math.round(
-              Math.max(
-                headerSize > 0
-                  ? headerSize + headerSize * deltaPercentage
-                  : deltaOffset / old.columnSizingStart.length,
-                0,
-              ) * 100,
-            ) / 100
+      const table = column.table
+      const isCommit =
+        table.options.columnResizeMode === 'onChange' || eventType === 'end'
+
+      // one notification flush per tick instead of two
+      table._reactivity.batch(() => {
+        table_setColumnResizing(table, (old) => {
+          const deltaDirection =
+            table.options.columnResizeDirection === 'rtl' ? -1 : 1
+          const deltaOffset =
+            (clientXPos - (old.startOffset ?? 0)) * deltaDirection
+          const startSize = old.startSize ?? 0
+          const deltaPercentage = Math.max(
+            startSize > 0 ? deltaOffset / startSize : 0,
+            -0.999999,
+          )
+
+          // new sizes are only read at commit and are recomputed from
+          // absolute positions each time, so skip them on onEnd-mode moves
+          if (isCommit) {
+            const columnSizingStart = old.columnSizingStart
+            for (let i = 0; i < columnSizingStart.length; i++) {
+              const entry = columnSizingStart[i]!
+              const headerSize = entry[1]
+              newColumnSizing[entry[0]] =
+                Math.round(
+                  Math.max(
+                    headerSize > 0
+                      ? headerSize + headerSize * deltaPercentage
+                      : deltaOffset / columnSizingStart.length,
+                    0,
+                  ) * 100,
+                ) / 100
+            }
+          }
+
+          return {
+            ...old,
+            deltaOffset,
+            deltaPercentage,
+          }
         })
 
-        return {
-          ...old,
-          deltaOffset,
-          deltaPercentage,
+        if (isCommit) {
+          table_setColumnSizing(table, (old) =>
+            Object.assign(makeObjectMap<number>(), old, newColumnSizing),
+          )
         }
       })
+    }
 
-      if (
-        column.table.options.columnResizeMode === 'onChange' ||
-        eventType === 'end'
-      ) {
-        table_setColumnSizing(column.table, (old) =>
-          Object.assign(makeObjectMap<number>(), old, newColumnSizing),
-        )
+    // Pointer devices can report at several times the display refresh rate,
+    // and every update between frames is overwritten by the next one. Apply
+    // the first move of a frame immediately, then coalesce the rest into one
+    // update per animation frame.
+    let moveRafId: number | null = null
+    let hasPendingMove = false
+    let latestMoveX: number | undefined
+
+    const flushMove = () => {
+      if (hasPendingMove) {
+        hasPendingMove = false
+        updateOffset('move', latestMoveX)
+        moveRafId = requestAnimationFrame(flushMove)
+      } else {
+        moveRafId = null
       }
     }
 
-    const onMove = (clientXPos?: number) => updateOffset('move', clientXPos)
+    const onMove = (clientXPos?: number) => {
+      latestMoveX = clientXPos
+      if (typeof requestAnimationFrame !== 'function') {
+        updateOffset('move', clientXPos)
+        return
+      }
+      if (moveRafId !== null) {
+        hasPendingMove = true
+        return
+      }
+      updateOffset('move', clientXPos)
+      moveRafId = requestAnimationFrame(flushMove)
+    }
 
     const onEnd = (clientXPos?: number) => {
-      updateOffset('end', clientXPos)
-
-      table_setColumnResizing(column.table, (old) => ({
-        ...old,
-        isResizingColumn: false,
-        startOffset: null,
-        startSize: null,
-        deltaOffset: null,
-        deltaPercentage: null,
-        columnSizingStart: [],
-      }))
+      if (moveRafId !== null) {
+        cancelAnimationFrame(moveRafId)
+        moveRafId = null
+        hasPendingMove = false
+      }
+
+      // batch the 'end' commit and the reset into one notification flush
+      column.table._reactivity.batch(() => {
+        // touchend events carry no touch position, so fall back to the last
+        // observed move position for the final commit
+        updateOffset('end', clientXPos ?? latestMoveX)
+
+        table_setColumnResizing(column.table, (old) => ({
+          ...old,
+          isResizingColumn: false,
+          startOffset: null,
+          startSize: null,
+          deltaOffset: null,
+          deltaPercentage: null,
+          columnSizingStart: [],
+        }))
+      })
     }
 
     const contextDocument =

package/src/features/column-sizing/columnSizingFeature.ts

@@ -13,6 +13,7 @@ import {
   header_getSize,
   header_getStart,
   table_getCenterTotalSize,
+  table_getColumnOffsets,
   table_getLeftTotalSize,
   table_getRightTotalSize,
   table_getTotalSize,
@@ -51,27 +52,13 @@ export const columnSizingFeature: TableFeature = {
           table.atoms.columnSizing?.get()?.[column.id], // just this column's size state
         ],
       },
+      // O(1) lookups into the memoized table-level offsets, so no per-column
+      // memos here
       column_getStart: {
         fn: (column, position) => column_getStart(column, position),
-        memoDeps: (column, position) => [
-          position,
-          table.options.columns,
-          table.atoms.columnSizing?.get(),
-          table.atoms.columnOrder?.get(),
-          table.atoms.columnPinning?.get(),
-          table.atoms.columnVisibility?.get(),
-        ],
       },
       column_getAfter: {
         fn: (column, position) => column_getAfter(column, position),
-        memoDeps: (column, position) => [
-          position,
-          table.options.columns,
-          table.atoms.columnSizing?.get(),
-          table.atoms.columnOrder?.get(),
-          table.atoms.columnPinning?.get(),
-          table.atoms.columnVisibility?.get(),
-        ],
       },
       column_resetSize: {
         fn: (column) => column_resetSize(column),
@@ -92,13 +79,14 @@ export const columnSizingFeature: TableFeature = {
       },
       header_getStart: {
         fn: (header) => header_getStart(header),
-        memoDeps: (header, position) => [
-          position,
+        memoDeps: () => [
           table.options.columns,
           table.atoms.columnSizing?.get(),
           table.atoms.columnOrder?.get(),
           table.atoms.columnPinning?.get(),
           table.atoms.columnVisibility?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
         ],
       },
     })
@@ -106,6 +94,18 @@ export const columnSizingFeature: TableFeature = {
 
   constructTableAPIs: (table) => {
     assignTableAPIs('columnSizingFeature', table, {
+      table_getColumnOffsets: {
+        fn: () => table_getColumnOffsets(table),
+        memoDeps: () => [
+          table.options.columns,
+          table.atoms.columnSizing?.get(),
+          table.atoms.columnOrder?.get(),
+          table.atoms.columnPinning?.get(),
+          table.atoms.columnVisibility?.get(),
+          table.atoms.grouping?.get(),
+          table.options.groupedColumnMode,
+        ],
+      },
       table_setColumnSizing: {
         fn: (updater) => table_setColumnSizing(table, updater),
       },

package/src/features/column-sizing/columnSizingFeature.types.ts

@@ -7,6 +7,38 @@ export interface TableState_ColumnSizing {
 
 export type ColumnSizingState = Record<string, number>
 
+export interface ColumnOffsets {
+  /**
+   * Offset from the start edge of the region to each column's start edge,
+   * keyed by column id.
+   */
+  starts: Record<string, number>
+  /**
+   * Offset from the end edge of the region to each column's end edge, keyed by
+   * column id.
+   */
+  afters: Record<string, number>
+}
+
+export interface ColumnOffsetsByPosition {
+  /**
+   * Offsets across all visible leaf columns, ignoring pinning regions.
+   */
+  all: ColumnOffsets
+  /**
+   * Offsets within the center (unpinned) region.
+   */
+  center: ColumnOffsets
+  /**
+   * Offsets within the left pinned region.
+   */
+  left: ColumnOffsets
+  /**
+   * Offsets within the right pinned region.
+   */
+  right: ColumnOffsets
+}
+
 export interface TableOptions_ColumnSizing {
   /**
    * Called with an updater when committed column sizing state changes. Pair
@@ -26,6 +58,13 @@ export interface Table_ColumnSizing {
    * Sums the current sizes of visible center-region leaf columns.
    */
   getCenterTotalSize: () => number
+  /**
+   * Returns memoized column offset maps (start and after offsets keyed by
+   * column id) for each pinning region plus the full visible leaf column list.
+   *
+   * Backs `column.getStart()` and `column.getAfter()` with O(1) lookups.
+   */
+  getColumnOffsets: () => ColumnOffsetsByPosition
   /**
    * Sums the current sizes of visible left-pinned leaf columns.
    */

package/src/features/column-sizing/columnSizingFeature.utils.ts

@@ -4,7 +4,6 @@ import {
   table_getPinnedVisibleLeafColumns,
   table_getRightHeaderGroups,
 } from '../column-pinning/columnPinningFeature.utils'
-import { column_getIndex } from '../column-ordering/columnOrderingFeature.utils'
 import {
   callMemoOrStaticFn,
   cloneState,
@@ -17,7 +16,11 @@ import type { TableFeatures } from '../../types/TableFeatures'
 import type { Table_Internal } from '../../types/Table'
 import type { Header } from '../../types/Header'
 import type { Column_Internal } from '../../types/Column'
-import type { ColumnSizingState } from './columnSizingFeature.types'
+import type {
+  ColumnOffsets,
+  ColumnOffsetsByPosition,
+  ColumnSizingState,
+} from './columnSizingFeature.types'
 
 /**
  * Creates the default committed column sizing state.
@@ -86,6 +89,85 @@ export function column_getSize<
   )
 }
 
+function buildColumnOffsets<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(columns: Array<Column_Internal<TFeatures, TData, unknown>>): ColumnOffsets {
+  const starts = makeObjectMap<number>()
+  const afters = makeObjectMap<number>()
+  const sizes = new Array<number>(columns.length)
+
+  let start = 0
+  for (let i = 0; i < columns.length; i++) {
+    const column = columns[i]!
+    const size = callMemoOrStaticFn(column, 'getSize', column_getSize)
+    sizes[i] = size
+    starts[column.id] = start
+    start += size
+  }
+
+  let after = 0
+  for (let i = columns.length - 1; i >= 0; i--) {
+    afters[columns[i]!.id] = after
+    after += sizes[i]!
+  }
+
+  return { starts, afters }
+}
+
+/**
+ * Builds start and after offset maps for every visible leaf column, computed
+ * once per pinning region plus the full visible list.
+ *
+ * A single table-level memo of this result backs all `column.getStart()` and
+ * `column.getAfter()` calls with O(1) lookups.
+ *
+ * @example
+ * ```ts
+ * const offsets = table_getColumnOffsets(table)
+ * const leftOffset = offsets.left.starts[column.id]
+ * ```
+ */
+export function table_getColumnOffsets<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>): ColumnOffsetsByPosition {
+  return {
+    all: buildColumnOffsets(
+      table_getPinnedVisibleLeafColumns(table) as Array<
+        Column_Internal<TFeatures, TData, unknown>
+      >,
+    ),
+    center: buildColumnOffsets(
+      table_getPinnedVisibleLeafColumns(table, 'center') as Array<
+        Column_Internal<TFeatures, TData, unknown>
+      >,
+    ),
+    left: buildColumnOffsets(
+      table_getPinnedVisibleLeafColumns(table, 'left') as Array<
+        Column_Internal<TFeatures, TData, unknown>
+      >,
+    ),
+    right: buildColumnOffsets(
+      table_getPinnedVisibleLeafColumns(table, 'right') as Array<
+        Column_Internal<TFeatures, TData, unknown>
+      >,
+    ),
+  }
+}
+
+function toOffsetsKey(
+  position: ColumnPinningPosition | 'center' | undefined,
+): keyof ColumnOffsetsByPosition {
+  return position === 'left'
+    ? 'left'
+    : position === 'right'
+      ? 'right'
+      : position === 'center'
+        ? 'center'
+        : 'all' // undefined | false use the full visible list
+}
+
 /**
  * Computes the offset from the start edge of a pinning region to this column.
  *
@@ -103,28 +185,14 @@ export function column_getStart<
   TValue extends CellData = CellData,
 >(
   column: Column_Internal<TFeatures, TData, TValue>,
-  position: ColumnPinningPosition | 'center',
+  position?: ColumnPinningPosition | 'center',
 ): number {
-  const index = callMemoOrStaticFn(
-    column,
-    'getIndex',
-    column_getIndex,
-    position,
-  )
-  if (index <= 0) return 0
-
-  const visibleLeafColumns = callMemoOrStaticFn(
+  const offsets = callMemoOrStaticFn(
     column.table,
-    'getPinnedVisibleLeafColumns',
-    table_getPinnedVisibleLeafColumns,
-    position,
-  )
-
-  const prevColumn = visibleLeafColumns[index - 1]!
-  return (
-    callMemoOrStaticFn(prevColumn, 'getStart', column_getStart, position) +
-    callMemoOrStaticFn(prevColumn, 'getSize', column_getSize)
+    'getColumnOffsets',
+    table_getColumnOffsets,
   )
+  return offsets[toOffsetsKey(position)].starts[column.id] ?? 0
 }
 
 /**
@@ -144,27 +212,14 @@ export function column_getAfter<
   TValue extends CellData = CellData,
 >(
   column: Column_Internal<TFeatures, TData, TValue>,
-  position: ColumnPinningPosition | 'center',
+  position?: ColumnPinningPosition | 'center',
 ): number {
-  const visibleLeafColumns = callMemoOrStaticFn(
+  const offsets = callMemoOrStaticFn(
     column.table,
-    'getPinnedVisibleLeafColumns',
-    table_getPinnedVisibleLeafColumns,
-    position,
-  )
-  const index = callMemoOrStaticFn(
-    column,
-    'getIndex',
-    column_getIndex,
-    position,
-  )
-  if (index < 0 || index >= visibleLeafColumns.length - 1) return 0
-
-  const nextColumn = visibleLeafColumns[index + 1]!
-  return (
-    callMemoOrStaticFn(nextColumn, 'getSize', column_getSize) +
-    callMemoOrStaticFn(nextColumn, 'getAfter', column_getAfter, position)
+    'getColumnOffsets',
+    table_getColumnOffsets,
   )
+  return offsets[toOffsetsKey(position)].afters[column.id] ?? 0
 }
 
 /**