work on memo stuff more

Author: KevinVandy

examples/lit/basic/src/main.ts

@@ -113,8 +113,6 @@ class LitTableExample extends LitElement {
       debugTable: true,
     })
 
-    console.log(table)
-
     return html`
       <table>
         <thead>

examples/react/column-ordering/src/main.tsx

@@ -103,8 +103,6 @@ function App() {
     )
   }
 
-  console.log(table.getFlatHeaders())
-
   return (
     <div className="p-2">
       <div className="inline-block border border-black shadow rounded">

packages/table-core/src/core/columns/Columns.utils.ts

@@ -1,5 +1,5 @@
+import { callMemoOrStaticFn, isDev } from '../../utils'
 import { table_getOrderColumnsFn } from '../../features/column-ordering/ColumnOrdering.utils'
-import { isDev } from '../../utils'
 import { constructColumn } from './constructColumn'
 import type { Table_Internal } from '../../types/Table'
 import type { CellData, RowData } from '../../types/type-utils'
@@ -33,7 +33,10 @@ export function column_getLeafColumns<
       (col) => col.getLeafColumns(), // recursive
     )
 
-    return table_getOrderColumnsFn(column.table)(leafColumns as any) as any
+    return callMemoOrStaticFn(
+      column.table,
+      table_getOrderColumnsFn,
+    )(leafColumns as any) as any
   }
 
   return [column]
@@ -132,7 +135,10 @@ export function table_getAllLeafColumns<
   const leafColumns = table.getAllColumns().flatMap(
     (c) => c.getLeafColumns(), // recursive
   )
-  return table_getOrderColumnsFn(table)(leafColumns)
+  return callMemoOrStaticFn(
+    table,
+    table_getOrderColumnsFn,
+  )(leafColumns as any) as any
 }
 
 export function table_getColumn<

packages/table-core/src/core/table/Tables.types.ts

@@ -53,6 +53,12 @@ export interface TableOptions_Table<
    * [Guide](https://tanstack.com/table/v8/docs/guide/tables)
    */
   debugAll?: boolean
+  /**
+   * Set this option to `true` to output cache debugging information to the console.
+   * [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcache)
+   * [Guide](https://tanstack.com/table/v8/docs/guide/tables)
+   */
+  debugCache?: boolean
   /**
    * Set this option to `true` to output table debugging information to the console.
    * [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugtable)

packages/table-core/src/features/column-ordering/ColumnOrdering.utils.ts

@@ -1,4 +1,4 @@
-import { column_getVisibleLeafColumns } from '../column-visibility/ColumnVisibility.utils'
+import { table_getPinnedVisibleLeafColumns } from '../column-pinning/ColumnPinning.utils'
 import type { GroupingState } from '../column-grouping/ColumnGrouping.types'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
@@ -19,7 +19,8 @@ export function column_getIndex<
   column: Column<TFeatures, TData, TValue>,
   position?: ColumnPinningPosition | 'center',
 ) {
-  const columns = column_getVisibleLeafColumns(column.table, position)
+  const { table } = column
+  const columns = table_getPinnedVisibleLeafColumns(table, position)
   return columns.findIndex((d) => d.id === column.id)
 }
 
@@ -31,7 +32,7 @@ export function column_getIsFirstColumn<
   column: Column<TFeatures, TData, TValue>,
   position?: ColumnPinningPosition | 'center',
 ) {
-  const columns = column_getVisibleLeafColumns(column.table, position)
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
   return columns[0]?.id === column.id
 }
 
@@ -43,7 +44,7 @@ export function column_getIsLastColumn<
   column: Column<TFeatures, TData, TValue>,
   position?: ColumnPinningPosition | 'center',
 ) {
-  const columns = column_getVisibleLeafColumns(column.table, position)
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
   return columns[columns.length - 1]?.id === column.id
 }
 

packages/table-core/src/features/column-pinning/ColumnPinning.types.ts

@@ -225,4 +225,16 @@ export interface Table_ColumnPinning<
    * [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
    */
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
+  /**
+   *
+   */
+  getPinnedLeafColumns: (
+    position: ColumnPinningPosition | 'center',
+  ) => Array<Column<TFeatures, TData, unknown>>
+  /**
+   *
+   */
+  getPinnedVisibleLeafColumns: (
+    position: ColumnPinningPosition | 'center',
+  ) => Array<Column<TFeatures, TData, unknown>>
 }

packages/table-core/src/features/column-pinning/ColumnPinning.utils.ts

@@ -4,6 +4,7 @@ import {
   table_getVisibleLeafColumns,
 } from '../column-visibility/ColumnVisibility.utils'
 import { buildHeaderGroups } from '../../core/headers/buildHeaderGroups'
+import { callMemoOrStaticFn } from '../../utils'
 import type { Row } from '../../types/Row'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
@@ -346,7 +347,7 @@ export function table_getLeftLeafColumns<
   return left
     .map(
       (columnId) =>
-        table.getAllColumns().find((column) => column.id === columnId)!,
+        table.getAllLeafColumns().find((column) => column.id === columnId)!,
     )
     .filter(Boolean)
 }
@@ -360,7 +361,7 @@ export function table_getRightLeafColumns<
   return right
     .map(
       (columnId) =>
-        table.getAllColumns().find((column) => column.id === columnId)!,
+        table.getAllLeafColumns().find((column) => column.id === columnId)!,
     )
     .filter(Boolean)
 }
@@ -372,7 +373,23 @@ export function table_getCenterLeafColumns<
   const { left, right } =
     table.options.state?.columnPinning ?? getDefaultColumnPinningState()
   const leftAndRight: Array<string> = [...left, ...right]
-  return table.getAllColumns().filter((d) => !leftAndRight.includes(d.id))
+  return table.getAllLeafColumns().filter((d) => !leftAndRight.includes(d.id))
+}
+
+export function table_getPinnedLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  position: ColumnPinningPosition | 'center',
+) {
+  return !position
+    ? table.getAllLeafColumns()
+    : position === 'left'
+      ? callMemoOrStaticFn(table, table_getLeftLeafColumns)
+      : position === 'right'
+        ? callMemoOrStaticFn(table, table_getRightLeafColumns)
+        : callMemoOrStaticFn(table, table_getCenterLeafColumns)
 }
 
 // visible leaf columns
@@ -403,3 +420,19 @@ export function table_getCenterVisibleLeafColumns<
     column_getIsVisible(column),
   )
 }
+
+export function table_getPinnedVisibleLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  return !position
+    ? callMemoOrStaticFn(table, table_getVisibleLeafColumns)
+    : position === 'left'
+      ? callMemoOrStaticFn(table, table_getLeftVisibleLeafColumns)
+      : position === 'right'
+        ? callMemoOrStaticFn(table, table_getRightVisibleLeafColumns)
+        : callMemoOrStaticFn(table, table_getCenterVisibleLeafColumns)
+}

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

@@ -1,5 +1,5 @@
-import { assignAPIs, makeStateUpdater } from '../../utils'
-import { column_getVisibleLeafColumns } from '../column-visibility/ColumnVisibility.utils'
+import { assignAPIs, callMemoOrStaticFn, makeStateUpdater } from '../../utils'
+import { table_getPinnedVisibleLeafColumns } from '../column-pinning/ColumnPinning.utils'
 import {
   column_getAfter,
   column_getSize,
@@ -21,13 +21,12 @@ import type { TableState_All } from '../../types/TableState'
 import type {
   ColumnDef_ColumnSizing,
   ColumnSizingDefaultOptions,
-  Column_ColumnSizing,
   Header_ColumnSizing,
 } from './ColumnSizing.types'
 import type { CellData, RowData } from '../../types/type-utils'
 import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
 import type { Header } from '../../types/Header'
-import type { Column } from '../../types/Column'
+import type { Column_Internal } from '../../types/Column'
 
 /**
  * The Column Sizing feature adds column sizing state and APIs to the table, header, and column objects.
@@ -66,7 +65,7 @@ export const ColumnSizing: TableFeature = {
     TData extends RowData,
     TValue extends CellData = CellData,
   >(
-    column: Column<TFeatures, TData, TValue> & Partial<Column_ColumnSizing>,
+    column: Column_Internal<TFeatures, TData, TValue>,
   ): void => {
     assignAPIs(column, [
       {
@@ -76,15 +75,23 @@ export const ColumnSizing: TableFeature = {
         fn: (position) => column_getStart(column, position),
         memoDeps: (position) => [
           position,
-          column_getVisibleLeafColumns(column.table, position),
+          callMemoOrStaticFn(
+            column.table,
+            table_getPinnedVisibleLeafColumns,
+            position
+          ),
           column.table.options.state?.columnSizing,
         ],
       },
       {
         fn: (position) => column_getAfter(column, position),
         memoDeps: (position) => [
           position,
-          column_getVisibleLeafColumns(column.table, position),
+          callMemoOrStaticFn(
+            column.table,
+            table_getPinnedVisibleLeafColumns,
+            position,
+          ),
           column.table.options.state?.columnSizing,
         ],
       },

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

@@ -1,19 +1,18 @@
 import {
   table_getCenterHeaderGroups,
   table_getLeftHeaderGroups,
+  table_getPinnedVisibleLeafColumns,
   table_getRightHeaderGroups,
 } from '../column-pinning/ColumnPinning.utils'
 import { column_getIndex } from '../column-ordering/ColumnOrdering.utils'
-import { column_getVisibleLeafColumns } from '../column-visibility/ColumnVisibility.utils'
+import { callMemoOrStaticFn } from '../../utils'
+import type { ColumnPinningPosition } from '../column-pinning/ColumnPinning.types'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { Table_Internal } from '../../types/Table'
 import type { Header } from '../../types/Header'
-import type { Column } from '../../types/Column'
-import type {
-  ColumnDef_ColumnSizing,
-  ColumnSizingState,
-} from './ColumnSizing.types'
+import type { Column_Internal } from '../../types/Column'
+import type { ColumnSizingState } from './ColumnSizing.types'
 
 export function getDefaultColumnSizingState(): ColumnSizingState {
   return structuredClone({})
@@ -31,11 +30,7 @@ export function column_getSize<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
->(
-  column: Column<TFeatures, TData, TValue> & {
-    columnDef: ColumnDef_ColumnSizing
-  },
-): number {
+>(column: Column_Internal<TFeatures, TData, TValue>): number {
   const defaultSizes = getDefaultColumnSizingColumnDef()
   const columnSize = column.table.options.state?.columnSizing?.[column.id]
 
@@ -53,13 +48,18 @@ export function column_getStart<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TData, TValue> & {
-    columnDef: ColumnDef_ColumnSizing
-  },
-  position?: false | 'left' | 'right' | 'center',
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position: ColumnPinningPosition | 'center',
 ): number {
-  return column_getVisibleLeafColumns(column.table, position)
-    .slice(0, column_getIndex(column, position))
+  const { table } = column
+  const visibleLeafColumns = callMemoOrStaticFn(
+    table,
+    table_getPinnedVisibleLeafColumns,
+    position,
+  )
+
+  return visibleLeafColumns
+    .slice(0, callMemoOrStaticFn(column, column_getIndex, position))
     .reduce((sum, c) => sum + column_getSize(c), 0)
 }
 
@@ -68,19 +68,26 @@ export function column_getAfter<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(
-  column: Column<TFeatures, TData, TValue>,
-  position?: false | 'left' | 'right' | 'center',
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position: ColumnPinningPosition | 'center',
 ): number {
-  return column_getVisibleLeafColumns(column.table, position)
-    .slice(column_getIndex(column, position) + 1)
+  const { table } = column
+  const visibleLeafColumns = callMemoOrStaticFn(
+    table,
+    table_getPinnedVisibleLeafColumns,
+    position,
+  )
+
+  return visibleLeafColumns
+    .slice(callMemoOrStaticFn(column, column_getIndex, position) + 1)
     .reduce((sum, c) => sum + column_getSize(c), 0)
 }
 
 export function column_resetSize<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
->(column: Column<TFeatures, TData, TValue>) {
+>(column: Column_Internal<TFeatures, TData, TValue>) {
   table_setColumnSizing(column.table, ({ [column.id]: _, ...rest }) => {
     return rest
   })

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

@@ -68,6 +68,11 @@ export const ColumnVisibility: TableFeature = {
     assignAPIs(column, [
       {
         fn: () => column_getIsVisible(column),
+        memoDeps: () => [
+          column.table.options.columns,
+          column.table.options.state?.columnVisibility,
+          column.columns,
+        ],
       },
       {
         fn: () => column_getCanHide(column),