fix: Column size performance improvements

examples/react/column-resizing-performant/src/main.tsx

@@ -119,7 +119,7 @@ function App() {
           Regenerate Data
         </button>
         <button onClick={() => stressTest()} className="demo-button">
-          Stress Test (5k rows)
+          Stress Test (2k rows)
         </button>
       </div>
       <div className="spacer-md" />

examples/vue/virtualized-infinite-scrolling/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/match-sorter-utils": "^9.0.0-alpha.4",
     "@tanstack/vue-query": "^5.100.10",
     "@tanstack/vue-store": "^0.11.0",
     "@tanstack/vue-table": "^9.0.0-alpha.45",

packages/table-core/src/features/column-ordering/columnOrderingFeature.ts

@@ -63,6 +63,7 @@ export function constructColumnOrderingFeature<
             column.table.atoms.columnOrder?.get(),
             column.table.atoms.columnPinning?.get(),
             column.table.atoms.grouping?.get(),
+            column.table.atoms.columnVisibility?.get(),
           ],
         },
         column_getIsFirstColumn: {

packages/table-core/src/features/column-pinning/columnPinningFeature.ts

@@ -301,11 +301,7 @@ export function constructColumnPinningFeature<
         },
         table_getPinnedLeafColumns: {
           fn: (position) => table_getPinnedLeafColumns(table, position),
-          memoDeps: (position) => [
-            position,
-            table.options.columns,
-            table.atoms.columnPinning?.get(),
-          ],
+          // must not memo here as it's just a shortcut function
         },
         // visible leaf columns
         table_getLeftVisibleLeafColumns: {
@@ -334,12 +330,7 @@ export function constructColumnPinningFeature<
         },
         table_getPinnedVisibleLeafColumns: {
           fn: (position) => table_getPinnedVisibleLeafColumns(table, position),
-          memoDeps: (position) => [
-            position,
-            table.options.columns,
-            table.atoms.columnPinning?.get(),
-            table.atoms.columnVisibility?.get(),
-          ],
+          // must not memo here as it's just a shortcut function
         },
       })
     },

packages/table-core/src/features/column-sizing/columnSizingFeature.ts

@@ -1,10 +1,8 @@
 import {
   assignPrototypeAPIs,
   assignTableAPIs,
-  callMemoOrStaticFn,
   makeStateUpdater,
 } from '../../utils'
-import { table_getPinnedVisibleLeafColumns } from '../column-pinning/columnPinningFeature.utils'
 import {
   column_getAfter,
   column_getSize,
@@ -75,31 +73,31 @@ export function constructColumnSizingFeature<
       assignPrototypeAPIs('columnSizingFeature', prototype, table, {
         column_getSize: {
           fn: (column) => column_getSize(column),
+          memoDeps: (column) => [
+            table.options.columns,
+            table.atoms.columnSizing?.get()?.[column.id], // just this column's size state
+          ],
         },
         column_getStart: {
           fn: (column, position) => column_getStart(column, position),
           memoDeps: (column, position) => [
             position,
-            callMemoOrStaticFn(
-              column.table,
-              'getPinnedVisibleLeafColumns',
-              table_getPinnedVisibleLeafColumns,
-              position,
-            ),
-            column.table.atoms.columnSizing?.get(),
+            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,
-            callMemoOrStaticFn(
-              column.table,
-              'getPinnedVisibleLeafColumns',
-              table_getPinnedVisibleLeafColumns,
-              position,
-            ),
-            column.table.atoms.columnSizing?.get(),
+            table.options.columns,
+            table.atoms.columnSizing?.get(),
+            table.atoms.columnOrder?.get(),
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
           ],
         },
         column_resetSize: {
@@ -112,9 +110,23 @@ export function constructColumnSizingFeature<
       assignPrototypeAPIs('columnSizingFeature', prototype, table, {
         header_getSize: {
           fn: (header) => header_getSize(header),
+          memoDeps: (header) => [
+            table.options.columns,
+            header.column.columns.length > 0
+              ? table.atoms.columnSizing?.get() // must be all columns (sum child columns)
+              : table.atoms.columnSizing?.get()?.[header.column.id], // can just check it's associated column size state
+          ],
         },
         header_getStart: {
           fn: (header) => header_getStart(header),
+          memoDeps: (header, position) => [
+            position,
+            table.options.columns,
+            table.atoms.columnSizing?.get(),
+            table.atoms.columnOrder?.get(),
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+          ],
         },
       })
     },

packages/table-core/src/features/column-sizing/columnSizingFeature.utils.ts

@@ -91,16 +91,26 @@ export function column_getStart<
   column: Column_Internal<TFeatures, TData, TValue>,
   position: ColumnPinningPosition | 'center',
 ): number {
+  const index = callMemoOrStaticFn(
+    column,
+    'getIndex',
+    column_getIndex,
+    position,
+  )
+  if (index <= 0) return 0
+
   const visibleLeafColumns = callMemoOrStaticFn(
     column.table,
     'getPinnedVisibleLeafColumns',
     table_getPinnedVisibleLeafColumns,
     position,
   )
 
-  return visibleLeafColumns
-    .slice(0, callMemoOrStaticFn(column, 'getIndex', column_getIndex, position))
-    .reduce((sum: number, c) => sum + column_getSize(c), 0)
+  const prevColumn = visibleLeafColumns[index - 1]!
+  return (
+    callMemoOrStaticFn(prevColumn, 'getStart', column_getStart, position) +
+    callMemoOrStaticFn(prevColumn, 'getSize', column_getSize)
+  )
 }
 
 /**
@@ -127,12 +137,19 @@ export function column_getAfter<
     table_getPinnedVisibleLeafColumns,
     position,
   )
+  const index = callMemoOrStaticFn(
+    column,
+    'getIndex',
+    column_getIndex,
+    position,
+  )
+  if (index < 0 || index >= visibleLeafColumns.length - 1) return 0
 
-  return visibleLeafColumns
-    .slice(
-      callMemoOrStaticFn(column, 'getIndex', column_getIndex, position) + 1,
-    )
-    .reduce((sum: number, c) => sum + column_getSize(c), 0)
+  const nextColumn = visibleLeafColumns[index + 1]!
+  return (
+    callMemoOrStaticFn(nextColumn, 'getSize', column_getSize) +
+    callMemoOrStaticFn(nextColumn, 'getAfter', column_getAfter, position)
+  )
 }
 
 /**
@@ -204,7 +221,8 @@ export function header_getStart<
     const prevSiblingHeader = header.headerGroup?.headers[header.index - 1]
     if (prevSiblingHeader) {
       return (
-        header_getStart(prevSiblingHeader) + header_getSize(prevSiblingHeader)
+        callMemoOrStaticFn(prevSiblingHeader, 'getStart', header_getStart) +
+        callMemoOrStaticFn(prevSiblingHeader, 'getSize', header_getSize)
       )
     }
   }

packages/table-core/src/features/column-visibility/columnVisibilityFeature.ts

@@ -70,8 +70,8 @@ export function constructColumnVisibilityFeature<
         column_getIsVisible: {
           fn: (column) => column_getIsVisible(column),
           memoDeps: (column) => [
-            column.table.options.columns,
-            column.table.atoms.columnVisibility?.get(),
+            table.options.columns,
+            table.atoms.columnVisibility?.get(),
             column.columns,
           ],
         },
@@ -93,8 +93,8 @@ export function constructColumnVisibilityFeature<
           fn: (row) => row_getVisibleCells(row),
           memoDeps: (row) => [
             row.getAllCells(),
-            row.table.atoms.columnPinning?.get(),
-            row.table.atoms.columnVisibility?.get(),
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
           ],
         },
       })

packages/table-core/src/features/column-visibility/columnVisibilityFeature.utils.ts

@@ -139,19 +139,30 @@ export function row_getVisibleCells<
     row.table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   if (!left.length && !right.length) return cells // no pinning, return early
 
-  // re-order cells for column pinning
-  const leftCells = []
-  const rightCells = []
-  const centerCells = []
+  const cellsByColumnId = new Map<string, Cell<TFeatures, TData, unknown>>()
+  for (const cell of cells) cellsByColumnId.set(cell.column.id, cell)
+
+  const leftCells: Array<Cell<TFeatures, TData, unknown>> = []
+  for (const columnId of left) {
+    const cell = cellsByColumnId.get(columnId)
+    if (cell) leftCells.push(cell)
+  }
+
+  const rightCells: Array<Cell<TFeatures, TData, unknown>> = []
+  for (const columnId of right) {
+    const cell = cellsByColumnId.get(columnId)
+    if (cell) rightCells.push(cell)
+  }
+
+  // Center cells: visible cells in natural column order, minus pinned ones.
+  const leftSet = new Set(left)
+  const rightSet = new Set(right)
+  const centerCells: Array<Cell<TFeatures, TData, unknown>> = []
   for (const cell of cells) {
-    if (left.includes(cell.column.id)) {
-      leftCells.push(cell)
-    } else if (right.includes(cell.column.id)) {
-      rightCells.push(cell)
-    } else {
-      centerCells.push(cell)
-    }
+    const id = cell.column.id
+    if (!leftSet.has(id) && !rightSet.has(id)) centerCells.push(cell)
   }
+
   return [...leftCells, ...centerCells, ...rightCells]
 }