@tanstack/table-core 9.0.0-beta.2 → 9.0.0-beta.21

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

@@ -13,7 +13,7 @@ import type { Row } from '../../types/Row'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { Table_Internal } from '../../types/Table'
-import type { Column_Internal } from '../../types/Column'
+import type { Column, Column_Internal } from '../../types/Column'
 import type {
   ColumnPinningPosition,
   ColumnPinningState,
@@ -230,7 +230,7 @@ export function row_getLeftVisibleCells<
     const cell = allVisibleCells[columnId]
     if (cell) {
       // Assign position property directly to preserve prototype chain
-      cell.position = 'left'
+      ;(cell as any).position = 'left'
       cells.push(cell)
     }
   }
@@ -266,7 +266,7 @@ export function row_getRightVisibleCells<
     const cell = allVisibleCells[columnId]
     if (cell) {
       // Assign position property directly to preserve prototype chain
-      cell.position = 'right'
+      ;(cell as any).position = 'right'
       cells.push(cell)
     }
   }
@@ -364,15 +364,11 @@ export function table_getLeftHeaderGroups<
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>) {
   const allColumns = table.getAllColumns()
-  const leafColumnsById = table.getAllLeafColumnsById() as Record<
-    string,
-    Column_Internal<TFeatures, TData, unknown>
-  >
+  const leafColumnsById = table.getAllLeafColumnsById()
   const { left } =
     table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
 
-  const orderedLeafColumns: Array<Column_Internal<TFeatures, TData, unknown>> =
-    []
+  const orderedLeafColumns: Array<Column<TFeatures, TData, unknown>> = []
   for (let i = 0; i < left.length; i++) {
     const column = leafColumnsById[left[i]!]
     if (
@@ -402,15 +398,11 @@ export function table_getRightHeaderGroups<
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>) {
   const allColumns = table.getAllColumns()
-  const leafColumnsById = table.getAllLeafColumnsById() as Record<
-    string,
-    Column_Internal<TFeatures, TData, unknown>
-  >
+  const leafColumnsById = table.getAllLeafColumnsById()
   const { right } =
     table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
 
-  const orderedLeafColumns: Array<Column_Internal<TFeatures, TData, unknown>> =
-    []
+  const orderedLeafColumns: Array<Column<TFeatures, TData, unknown>> = []
   for (let i = 0; i < right.length; i++) {
     const column = leafColumnsById[right[i]!]
     if (
@@ -446,7 +438,7 @@ export function table_getCenterHeaderGroups<
     table,
     'getVisibleLeafColumns',
     table_getVisibleLeafColumns,
-  ) as unknown as Array<Column_Internal<TFeatures, TData, unknown>>
+  )
   const { left, right } =
     table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   const leftAndRight: Array<string> = [...left, ...right]
@@ -550,7 +542,7 @@ export function table_getLeftFlatHeaders<
   for (let i = 0; i < leftHeaderGroups.length; i++) {
     const headers = leftHeaderGroups[i]!.headers
     for (let j = 0; j < headers.length; j++) {
-      result.push(headers[j])
+      result.push(headers[j]!)
     }
   }
   return result
@@ -579,7 +571,7 @@ export function table_getRightFlatHeaders<
   for (let i = 0; i < rightHeaderGroups.length; i++) {
     const headers = rightHeaderGroups[i]!.headers
     for (let j = 0; j < headers.length; j++) {
-      result.push(headers[j])
+      result.push(headers[j]!)
     }
   }
   return result
@@ -608,7 +600,7 @@ export function table_getCenterFlatHeaders<
   for (let i = 0; i < centerHeaderGroups.length; i++) {
     const headers = centerHeaderGroups[i]!.headers
     for (let j = 0; j < headers.length; j++) {
-      result.push(headers[j])
+      result.push(headers[j]!)
     }
   }
   return result

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

@@ -11,89 +11,55 @@ import {
   table_resetHeaderSizeInfo,
   table_setColumnResizing,
 } from './columnResizingFeature.utils'
-import type { RowData } from '../../types/type-utils'
-import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
-// import type {
-//   Column_ColumnResizing,
-//   Header_ColumnResizing,
-//   TableOptions_ColumnResizing,
-//   TableState_ColumnResizing,
-//   Table_ColumnResizing,
-// } from './columnResizingFeature.types'
-
-export interface ColumnResizingFeatureConstructors<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> {
-  // Column: Column_ColumnResizing
-  // Header: Header_ColumnResizing
-  // Table: Table_ColumnResizing
-  // TableOptions: TableOptions_ColumnResizing
-  // TableState: TableState_ColumnResizing
-}
+import type { TableFeature } from '../../types/TableFeatures'
 
 /**
- * Creates the stock column resizing feature.
- *
- * The returned feature registers its state defaults, option defaults, and instance APIs so it can be included in a `tableFeatures({ ... })` call.
+ * Feature that adds column resizing state, options, and resize handlers.
  */
-export function constructColumnResizingFeature<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(): TableFeature<ColumnResizingFeatureConstructors<TFeatures, TData>> {
-  return {
-    getInitialState: (initialState) => {
-      return {
-        columnResizing: getDefaultColumnResizingState(),
-        ...initialState,
-      }
-    },
+export const columnResizingFeature: TableFeature = {
+  getInitialState: (initialState) => {
+    return {
+      columnResizing: getDefaultColumnResizingState(),
+      ...initialState,
+    }
+  },
 
-    getDefaultTableOptions: (table) => {
-      return {
-        columnResizeMode: 'onEnd',
-        columnResizeDirection: 'ltr',
-        onColumnResizingChange: makeStateUpdater('columnResizing', table),
-      }
-    },
+  getDefaultTableOptions: (table) => {
+    return {
+      columnResizeMode: 'onEnd',
+      columnResizeDirection: 'ltr',
+      onColumnResizingChange: makeStateUpdater('columnResizing', table),
+    }
+  },
 
-    assignColumnPrototype: (prototype, table) => {
-      assignPrototypeAPIs('columnResizingFeature', prototype, table, {
-        column_getCanResize: {
-          fn: (column) => column_getCanResize(column),
-        },
-        column_getIsResizing: {
-          fn: (column) => column_getIsResizing(column),
-        },
-      })
-    },
+  assignColumnPrototype: (prototype, table) => {
+    assignPrototypeAPIs('columnResizingFeature', prototype, table, {
+      column_getCanResize: {
+        fn: (column) => column_getCanResize(column),
+      },
+      column_getIsResizing: {
+        fn: (column) => column_getIsResizing(column),
+      },
+    })
+  },
 
-    assignHeaderPrototype: (prototype, table) => {
-      assignPrototypeAPIs('columnResizingFeature', prototype, table, {
-        header_getResizeHandler: {
-          fn: (header, _contextDocument) =>
-            header_getResizeHandler(header, _contextDocument),
-        },
-      })
-    },
+  assignHeaderPrototype: (prototype, table) => {
+    assignPrototypeAPIs('columnResizingFeature', prototype, table, {
+      header_getResizeHandler: {
+        fn: (header, _contextDocument) =>
+          header_getResizeHandler(header, _contextDocument),
+      },
+    })
+  },
 
-    constructTableAPIs: (table) => {
-      assignTableAPIs('columnResizingFeature', table, {
-        table_setColumnResizing: {
-          fn: (updater) => table_setColumnResizing(table, updater),
-        },
-        table_resetHeaderSizeInfo: {
-          fn: (defaultState) => table_resetHeaderSizeInfo(table, defaultState),
-        },
-      })
-    },
-  }
+  constructTableAPIs: (table) => {
+    assignTableAPIs('columnResizingFeature', table, {
+      table_setColumnResizing: {
+        fn: (updater) => table_setColumnResizing(table, updater),
+      },
+      table_resetHeaderSizeInfo: {
+        fn: (defaultState) => table_resetHeaderSizeInfo(table, defaultState),
+      },
+    })
+  },
 }
-
-/**
- * The stock column resizing feature.
- *
- * Register this feature with `columnSizingFeature` to add resize interaction
- * state and APIs for drag-based column resizing.
- */
-export const columnResizingFeature = constructColumnResizingFeature()

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,7 +123,7 @@ 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') {
@@ -164,10 +164,9 @@ export function header_getResizeHandler<
         column.table.options.columnResizeMode === 'onChange' ||
         eventType === 'end'
       ) {
-        table_setColumnSizing(column.table, (old) => ({
-          ...old,
-          ...newColumnSizing,
-        }))
+        table_setColumnSizing(column.table, (old) =>
+          Object.assign(makeObjectMap<number>(), old, newColumnSizing),
+        )
       }
     }
 

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

@@ -19,164 +19,127 @@ import {
   table_resetColumnSizing,
   table_setColumnSizing,
 } from './columnSizingFeature.utils'
-import type { RowData } from '../../types/type-utils'
-import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
-// import type {
-//   ColumnDef_ColumnSizing,
-//   Column_ColumnSizing,
-//   Header_ColumnSizing,
-//   TableOptions_ColumnSizing,
-//   TableState_ColumnSizing,
-//   Table_ColumnSizing,
-// } from './columnSizingFeature.types'
-
-export interface ColumnSizingFeatureConstructors<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> {
-  // ColumnDef: ColumnDef_ColumnSizing
-  // Column: Column_ColumnSizing
-  // Header: Header_ColumnSizing
-  // Table: Table_ColumnSizing
-  // TableOptions: TableOptions_ColumnSizing
-  // TableState: TableState_ColumnSizing
-}
+import type { TableFeature } from '../../types/TableFeatures'
 
 /**
- * Creates the stock column sizing feature.
- *
- * The returned feature registers its state defaults, option defaults, and instance APIs so it can be included in a `tableFeatures({ ... })` call.
+ * Feature that adds column sizing state, defaults, and size measurement APIs.
  */
-export function constructColumnSizingFeature<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(): TableFeature<ColumnSizingFeatureConstructors<TFeatures, TData>> {
-  return {
-    getInitialState: (initialState) => {
-      return {
-        columnSizing: getDefaultColumnSizingState(),
-        ...initialState,
-      }
-    },
+export const columnSizingFeature: TableFeature = {
+  getInitialState: (initialState) => {
+    return {
+      columnSizing: getDefaultColumnSizingState(),
+      ...initialState,
+    }
+  },
 
-    getDefaultColumnDef: () => {
-      return getDefaultColumnSizingColumnDef()
-    },
+  getDefaultColumnDef: () => {
+    return getDefaultColumnSizingColumnDef()
+  },
 
-    getDefaultTableOptions: (table) => {
-      return {
-        onColumnSizingChange: makeStateUpdater('columnSizing', table),
-      }
-    },
+  getDefaultTableOptions: (table) => {
+    return {
+      onColumnSizingChange: makeStateUpdater('columnSizing', table),
+    }
+  },
 
-    assignColumnPrototype: (prototype, table) => {
-      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,
-            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),
-        },
-      })
-    },
+  assignColumnPrototype: (prototype, table) => {
+    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,
+          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),
+      },
+    })
+  },
 
-    assignHeaderPrototype: (prototype, table) => {
-      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(),
-          ],
-        },
-      })
-    },
+  assignHeaderPrototype: (prototype, table) => {
+    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(),
+        ],
+      },
+    })
+  },
 
-    constructTableAPIs: (table) => {
-      assignTableAPIs('columnSizingFeature', table, {
-        table_setColumnSizing: {
-          fn: (updater) => table_setColumnSizing(table, updater),
-        },
-        table_resetColumnSizing: {
-          fn: (defaultState) => table_resetColumnSizing(table, defaultState),
-        },
-        table_getTotalSize: {
-          fn: () => table_getTotalSize(table),
-          memoDeps: () => [
-            table.atoms.columnSizing?.get(),
-            table.getHeaderGroups(),
-          ],
-        },
-        table_getLeftTotalSize: {
-          fn: () => table_getLeftTotalSize(table),
-          memoDeps: () => [
-            table.atoms.columnSizing?.get(),
-            table.getHeaderGroups(),
-          ],
-        },
-        table_getCenterTotalSize: {
-          fn: () => table_getCenterTotalSize(table),
-          memoDeps: () => [
-            table.atoms.columnSizing?.get(),
-            table.getHeaderGroups(),
-          ],
-        },
-        table_getRightTotalSize: {
-          fn: () => table_getRightTotalSize(table),
-          memoDeps: () => [
-            table.atoms.columnSizing?.get(),
-            table.getHeaderGroups(),
-          ],
-        },
-      })
-    },
-  }
+  constructTableAPIs: (table) => {
+    assignTableAPIs('columnSizingFeature', table, {
+      table_setColumnSizing: {
+        fn: (updater) => table_setColumnSizing(table, updater),
+      },
+      table_resetColumnSizing: {
+        fn: (defaultState) => table_resetColumnSizing(table, defaultState),
+      },
+      table_getTotalSize: {
+        fn: () => table_getTotalSize(table),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+      table_getLeftTotalSize: {
+        fn: () => table_getLeftTotalSize(table),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+      table_getCenterTotalSize: {
+        fn: () => table_getCenterTotalSize(table),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+      table_getRightTotalSize: {
+        fn: () => table_getRightTotalSize(table),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+    })
+  },
 }
-
-/**
- * The stock column sizing feature.
- *
- * Register this feature to add column width state and table, header, and column
- * APIs for reading and resetting sizes. Column drag resizing lives in
- * `columnResizingFeature`.
- */
-export const columnSizingFeature = constructColumnSizingFeature()

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

@@ -5,7 +5,12 @@ import {
   table_getRightHeaderGroups,
 } from '../column-pinning/columnPinningFeature.utils'
 import { column_getIndex } from '../column-ordering/columnOrderingFeature.utils'
-import { callMemoOrStaticFn, cloneState } from '../../utils'
+import {
+  callMemoOrStaticFn,
+  cloneState,
+  hasOwn,
+  makeObjectMap,
+} from '../../utils'
 import type { ColumnPinningPosition } from '../column-pinning/columnPinningFeature.types'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
@@ -26,7 +31,7 @@ import type { ColumnSizingState } from './columnSizingFeature.types'
  * ```
  */
 export function getDefaultColumnSizingState(): ColumnSizingState {
-  return {}
+  return makeObjectMap()
 }
 
 /**
@@ -66,7 +71,11 @@ export function column_getSize<
   TValue extends CellData = CellData,
 >(column: Column_Internal<TFeatures, TData, TValue>): number {
   const defaultSizes = getDefaultColumnSizingColumnDef()
-  const columnSize = column.table.atoms.columnSizing?.get()?.[column.id]
+  const columnSizing = column.table.atoms.columnSizing?.get()
+  const columnSize =
+    columnSizing && hasOwn(columnSizing, column.id)
+      ? columnSizing[column.id]
+      : undefined
 
   return Math.min(
     Math.max(
@@ -174,7 +183,15 @@ export function column_resetSize<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(column: Column_Internal<TFeatures, TData, TValue>) {
-  table_setColumnSizing(column.table, ({ [column.id]: _, ...rest }) => {
+  table_setColumnSizing(column.table, (old) => {
+    const rest = makeObjectMap<number>()
+    const columnIds = Object.keys(old)
+    for (let i = 0; i < columnIds.length; i++) {
+      const columnId = columnIds[i]!
+      if (columnId !== column.id) {
+        rest[columnId] = old[columnId]!
+      }
+    }
     return rest
   })
 }
@@ -280,7 +297,12 @@ export function table_resetColumnSizing<
 >(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
   table_setColumnSizing(
     table,
-    defaultState ? {} : cloneState(table.initialState.columnSizing ?? {}),
+    defaultState
+      ? makeObjectMap()
+      : Object.assign(
+          makeObjectMap<number>(),
+          cloneState(table.initialState.columnSizing ?? {}),
+        ),
   )
 }