@tanstack/table-core 9.0.0-beta.5 → 9.0.0-beta.51

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

@@ -54,11 +54,8 @@ export interface Table_ColumnResizing {
   resetHeaderSizeInfo: (defaultState?: boolean) => void
   /**
    * Updates transient resize interaction state with a next state or updater function.
-   *
-   * The lowercase `c` in this API name matches the current generated v9 table
-   * API for the `columnResizing` state slice.
    */
-  setcolumnResizing: (updater: Updater<columnResizingState>) => void
+  setColumnResizing: (updater: Updater<columnResizingState>) => void
 }
 
 export interface ColumnDef_ColumnResizing {

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

@@ -3,7 +3,7 @@ import {
   header_getSize,
   table_setColumnSizing,
 } from '../column-sizing/columnSizingFeature.utils'
-import { cloneState } from '../../utils'
+import { cloneState, makeObjectMap } from '../../utils'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { Table_Internal } from '../../types/Table'
@@ -123,68 +123,119 @@ export function header_getResizeHandler<
       ? Math.round(event.touches[0]!.clientX)
       : (event as MouseEvent).clientX
 
-    const newColumnSizing: ColumnSizingState = {}
+    const newColumnSizing: ColumnSizingState = makeObjectMap()
 
     const updateOffset = (eventType: 'move' | 'end', clientXPos?: number) => {
       if (typeof clientXPos !== 'number') {
         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) => ({
-          ...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 =
@@ -212,17 +263,29 @@ export function header_getResizeHandler<
         return false
       },
       upHandler: (e: TouchEvent) => {
-        contextDocument?.removeEventListener(
-          'touchmove',
-          touchEvents.moveHandler,
-        )
-        contextDocument?.removeEventListener('touchend', touchEvents.upHandler)
+        removeTouchEvents()
         if (e.cancelable) {
           e.preventDefault()
           e.stopPropagation()
         }
         onEnd(e.touches[0]?.clientX)
       },
+      // the browser fires touchcancel instead of touchend when it takes over
+      // the gesture (system gesture, scroll takeover, tab switch); without
+      // this the non-passive touchmove listener stays on the document forever
+      cancelHandler: () => {
+        removeTouchEvents()
+        onEnd()
+      },
+    }
+
+    const removeTouchEvents = () => {
+      contextDocument?.removeEventListener('touchmove', touchEvents.moveHandler)
+      contextDocument?.removeEventListener('touchend', touchEvents.upHandler)
+      contextDocument?.removeEventListener(
+        'touchcancel',
+        touchEvents.cancelHandler,
+      )
     }
 
     const passiveIfSupported = passiveEventSupported()
@@ -240,6 +303,11 @@ export function header_getResizeHandler<
         touchEvents.upHandler,
         passiveIfSupported,
       )
+      contextDocument?.addEventListener(
+        'touchcancel',
+        touchEvents.cancelHandler,
+        passiveIfSupported,
+      )
     } else {
       contextDocument?.addEventListener(
         'mousemove',

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

@@ -13,8 +13,9 @@ import {
   header_getSize,
   header_getStart,
   table_getCenterTotalSize,
-  table_getLeftTotalSize,
-  table_getRightTotalSize,
+  table_getColumnOffsets,
+  table_getEndTotalSize,
+  table_getStartTotalSize,
   table_getTotalSize,
   table_resetColumnSizing,
   table_setColumnSizing,
@@ -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),
       },
@@ -119,8 +119,8 @@ export const columnSizingFeature: TableFeature = {
           table.getHeaderGroups(),
         ],
       },
-      table_getLeftTotalSize: {
-        fn: () => table_getLeftTotalSize(table),
+      table_getStartTotalSize: {
+        fn: () => table_getStartTotalSize(table),
         memoDeps: () => [
           table.atoms.columnSizing?.get(),
           table.getHeaderGroups(),
@@ -133,8 +133,8 @@ export const columnSizingFeature: TableFeature = {
           table.getHeaderGroups(),
         ],
       },
-      table_getRightTotalSize: {
-        fn: () => table_getRightTotalSize(table),
+      table_getEndTotalSize: {
+        fn: () => table_getEndTotalSize(table),
         memoDeps: () => [
           table.atoms.columnSizing?.get(),
           table.getHeaderGroups(),

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

@@ -7,6 +7,44 @@ 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 logical start pinned region.
+   *
+   * In LTR languages/layouts, start usually corresponds to left. In RTL
+   * languages/layouts, start usually corresponds to right.
+   */
+  start: ColumnOffsets
+  /**
+   * Offsets within the logical end pinned region.
+   *
+   * In LTR languages/layouts, end usually corresponds to right. In RTL
+   * languages/layouts, end usually corresponds to left.
+   */
+  end: ColumnOffsets
+}
+
 export interface TableOptions_ColumnSizing {
   /**
    * Called with an updater when committed column sizing state changes. Pair
@@ -27,13 +65,20 @@ export interface Table_ColumnSizing {
    */
   getCenterTotalSize: () => number
   /**
-   * Sums the current sizes of visible left-pinned leaf columns.
+   * 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 logical start-pinned leaf columns.
    */
-  getLeftTotalSize: () => number
+  getStartTotalSize: () => number
   /**
-   * Sums the current sizes of visible right-pinned leaf columns.
+   * Sums the current sizes of visible logical end-pinned leaf columns.
    */
-  getRightTotalSize: () => number
+  getEndTotalSize: () => number
   /**
    * Sums the current sizes of all visible leaf columns.
    */
@@ -68,8 +113,8 @@ export interface Column_ColumnSizing {
   /**
    * Measures the offset from this column's end edge to the end of its region.
    *
-   * Pass a pinned region to measure within that region. The value is the sum
-   * of visible leaf column sizes after this column.
+   * Pass a pinned region to measure within that logical region. The value is
+   * the sum of visible leaf column sizes after this column.
    */
   getAfter: (position?: ColumnPinningPosition | 'center') => number
   /**
@@ -80,8 +125,8 @@ export interface Column_ColumnSizing {
    * Measures the offset from the start of this column's region to its start
    * edge.
    *
-   * Pass a pinned region to measure within that region. The value is the sum
-   * of visible leaf column sizes before this column.
+   * Pass a pinned region to measure within that logical region. The value is
+   * the sum of visible leaf column sizes before this column.
    */
   getStart: (position?: ColumnPinningPosition | 'center') => number
   /**