@tanstack/table-core 9.0.0-beta.23 → 9.0.0-beta.27

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
 }
 
 /**

package/src/features/column-visibility/columnVisibilityFeature.ts

@@ -88,7 +88,9 @@ export const columnVisibilityFeature: TableFeature = {
         memoDeps: () => [
           table.atoms.columnVisibility?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
           table.options.columns,
+          table.options.groupedColumnMode,
         ],
       },
       table_getVisibleLeafColumns: {
@@ -96,7 +98,9 @@ export const columnVisibilityFeature: TableFeature = {
         memoDeps: () => [
           table.atoms.columnVisibility?.get(),
           table.atoms.columnOrder?.get(),
+          table.atoms.grouping?.get(),
           table.options.columns,
+          table.options.groupedColumnMode,
         ],
       },
       table_setColumnVisibility: {

package/src/features/column-visibility/columnVisibilityFeature.utils.ts

@@ -72,6 +72,9 @@ export function column_getIsVisible<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(column: Column_Internal<TFeatures, TData, TValue>): boolean {
+  const columnVisibility = column.table.atoms.columnVisibility?.get()
+  if (!columnVisibility) return true
+
   const childColumns = column.columns
   if (childColumns.length) {
     return childColumns.some((childColumn) =>
@@ -79,9 +82,8 @@ export function column_getIsVisible<
     )
   }
 
-  const columnVisibility = column.table.atoms.columnVisibility?.get()
   return (
-    (columnVisibility && hasOwn(columnVisibility, column.id)
+    (hasOwn(columnVisibility, column.id)
       ? columnVisibility[column.id]
       : undefined) ?? true
   )

package/src/features/row-selection/rowSelectionFeature.ts

@@ -61,9 +61,19 @@ export const rowSelectionFeature: TableFeature = {
       },
       row_getIsSomeSelected: {
         fn: (row) => row_getIsSomeSelected(row),
+        memoDeps: (row) => [
+          row.subRows,
+          row.table.atoms.rowSelection?.get(),
+          row.table.options.enableRowSelection,
+        ],
       },
       row_getIsAllSubRowsSelected: {
         fn: (row) => row_getIsAllSubRowsSelected(row),
+        memoDeps: (row) => [
+          row.subRows,
+          row.table.atoms.rowSelection?.get(),
+          row.table.options.enableRowSelection,
+        ],
       },
       row_getCanSelect: {
         fn: (row) => row_getCanSelect(row),

package/src/features/row-selection/rowSelectionFeature.utils.ts

@@ -416,7 +416,11 @@ export function table_getIsSomePageRowsSelected<
   return table
     .getPaginatedRowModel()
     .flatRows.filter((row) => row_getCanSelect(row))
-    .some((row) => row_getIsSelected(row) || row_getIsSomeSelected(row))
+    .some(
+      (row) =>
+        row_getIsSelected(row) ||
+        callMemoOrStaticFn(row, 'getIsSomeSelected', row_getIsSomeSelected),
+    )
 }
 
 /**
@@ -497,10 +501,6 @@ export function row_toggleSelected<
   table_setRowSelection(row.table, (old) => {
     value = typeof value !== 'undefined' ? value : !isSelected
 
-    if (row_getCanSelect(row) && isSelected === value) {
-      return old
-    }
-
     const rowSelection = Object.assign(makeObjectMap<true>(), old)
 
     mutateRowIsSelected(
@@ -787,13 +787,15 @@ export function isSubRowSelected<
 
   const rowSelection = row.table.atoms.rowSelection?.get() ?? {}
 
-  let allChildrenSelected = true
   let someSelected = false
+  let allChildrenSelected = true
+
+  for (let i = 0; i < row.subRows.length; i++) {
+    const subRow = row.subRows[i]!
 
-  row.subRows.forEach((subRow) => {
     // Bail out early if we know both of these
     if (someSelected && !allChildrenSelected) {
-      return
+      break
     }
 
     if (row_getCanSelect(subRow)) {
@@ -816,8 +818,7 @@ export function isSubRowSelected<
         allChildrenSelected = false
       }
     }
-  })
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   return allChildrenSelected ? 'all' : someSelected ? 'some' : false
 }