@tanstack/table-core 9.0.0-alpha.33 → 9.0.0-alpha.36

package/src/core/table/coreTablesFeature.types.ts

@@ -1,17 +1,65 @@
-import type { ReadonlyStore, Store } from '@tanstack/store'
+import type { Atom, ReadonlyAtom, ReadonlyStore, Store } from '@tanstack/store'
 import type { CoreFeatures } from '../coreFeatures'
 import type { RowModelFns } from '../../types/RowModelFns'
 import type { RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { CachedRowModels, CreateRowModels_All } from '../../types/RowModel'
 import type { TableOptions } from '../../types/TableOptions'
-import type { TableState } from '../../types/TableState'
+import type { TableState, TableState_All } from '../../types/TableState'
 
 export interface TableMeta<
   TFeatures extends TableFeatures,
   TData extends RowData,
 > {}
 
+/**
+ * A map of writable atoms, one per `TableState` slice. These are the internal
+ * writable atoms that the library always writes to via `makeStateUpdater`.
+ */
+export type BaseAtoms<TFeatures extends TableFeatures> = {
+  [K in keyof TableState<TFeatures>]-?: Atom<TableState<TFeatures>[K]>
+}
+
+/**
+ * A map of readonly derived atoms, one per `TableState` slice. Each derives
+ * from its corresponding `baseAtom` plus, optionally, a per-slice external
+ * atom or external state value.
+ *
+ * Precedence: `options.atoms[key]` > `options.state[key]` > `baseAtoms[key]`.
+ */
+export type Atoms<TFeatures extends TableFeatures> = {
+  [K in keyof TableState<TFeatures>]-?: ReadonlyAtom<TableState<TFeatures>[K]>
+}
+
+/**
+ * A map of optional external atoms, one per `TableState` slice. Consumers can
+ * provide their own writable atom for any state slice to take over ownership
+ * of that slice.
+ */
+export type ExternalAtoms<TFeatures extends TableFeatures> = Partial<{
+  [K in keyof TableState<TFeatures>]: Atom<TableState<TFeatures>[K]>
+}>
+
+/**
+ * Internal "all features" flat variants of the atom types. `Table_Internal`
+ * uses these so feature code (written generically over `TFeatures`) can access
+ * any slice atom (e.g. `table.atoms.columnPinning`) without TypeScript
+ * narrowing away slices that aren't in the current `TFeatures` union.
+ *
+ * Keys are optional: feature code can read atoms from slices it doesn't own,
+ * but those slices may not be registered on the current table. Consumers must
+ * use optional chaining (`table.atoms.columnPinning?.get() ?? default`).
+ */
+export type BaseAtoms_All = {
+  [K in keyof TableState_All]?: Atom<TableState_All[K]>
+}
+export type Atoms_All = {
+  [K in keyof TableState_All]?: ReadonlyAtom<TableState_All[K]>
+}
+export type ExternalAtoms_All = Partial<{
+  [K in keyof TableState_All]: Atom<TableState_All[K]>
+}>
+
 export interface TableOptions_Table<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -24,6 +72,14 @@ export interface TableOptions_Table<
    * The row model options that you want to enable for the table.
    */
   _rowModels?: CreateRowModels_All<TFeatures, TData>
+  /**
+   * Optionally, provide your own external writable atoms for individual state slices.
+   * When an atom is provided for a given slice, it takes precedence over `options.state[key]`
+   * and the internal base atom for that slice. Writes originating from the library are
+   * still routed through the internal base atom; consumers are responsible for
+   * mirroring changes back to their external atom via the corresponding `onXChange` callback.
+   */
+  atoms?: ExternalAtoms<TFeatures>
   /**
    * Set this option to override any of the `autoReset...` feature options.
    */
@@ -52,10 +108,6 @@ export interface TableOptions_Table<
    * Pass in individual self-managed state to the table.
    */
   state?: Partial<TableState<TFeatures>>
-  /**
-   * Optionally, provide your own external TanStack Store instance if you want to manage the table state externally.
-   */
-  store?: Store<TableState<TFeatures>>
 }
 
 export interface Table_CoreProperties<
@@ -91,9 +143,16 @@ export interface Table_CoreProperties<
    */
   _rowPrototype?: object
   /**
-   * The base store for the table. This can be used to write to the table state.
+   * The internal writable atoms for each `TableState` slice. This is the library's
+   * single write surface — all state mutations from features land here.
+   */
+  baseAtoms: BaseAtoms<TFeatures>
+  /**
+   * The readonly derived atoms for each `TableState` slice. Each derives from
+   * its corresponding `baseAtom` plus, optionally, a per-slice external atom or
+   * external state value (precedence: external atom > external state > base atom).
    */
-  baseStore: Store<TableState<TFeatures>>
+  atoms: Atoms<TFeatures>
   /**
    * The base store for the table options.
    */
@@ -107,7 +166,8 @@ export interface Table_CoreProperties<
    */
   readonly options: TableOptions<TFeatures, TData>
   /**
-   * Where the table state is stored.
+   * The readonly flat store for the table state. Derives from `table.atoms`
+   * only; never reads external state directly.
    */
   store: ReadonlyStore<TableState<TFeatures>>
 }

package/src/core/table/coreTablesFeature.utils.ts

@@ -1,4 +1,5 @@
-import { functionalUpdate } from '../../utils'
+import { batch } from '@tanstack/store'
+import { cloneState, functionalUpdate } from '../../utils'
 import type { RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { Table_Internal } from '../../types/Table'
@@ -8,7 +9,12 @@ export function table_reset<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>): void {
-  table.baseStore.setState(() => structuredClone(table.initialState))
+  const snap = cloneState(table.initialState)
+  batch(() => {
+    for (const key of Object.keys(snap) as Array<keyof typeof snap>) {
+      ;(table.baseAtoms as any)[key].set(snap[key] as any)
+    }
+  })
 }
 
 export function table_mergeOptions<

package/src/features/column-faceting/columnFacetingFeature.ts

@@ -39,8 +39,8 @@ export function constructColumnFacetingFeature<
         column_getFacetedRowModel: {
           memoDeps: () => [
             table.getPreFilteredRowModel().rows,
-            table.store.state.columnFilters,
-            table.store.state.globalFilter,
+            table.atoms.columnFilters?.get(),
+            table.atoms.globalFilter?.get(),
             table.getFilteredRowModel().rows,
           ],
           fn: (column) => column_getFacetedRowModel(column, column.table),
@@ -75,8 +75,8 @@ export function constructColumnFacetingFeature<
         table_getGlobalFacetedRowModel: {
           memoDeps: () => [
             table.getPreFilteredRowModel().rows,
-            table.store.state.columnFilters,
-            table.store.state.globalFilter,
+            table.atoms.columnFilters?.get(),
+            table.atoms.globalFilter?.get(),
             table.getFilteredRowModel().rows,
           ],
           fn: () => table_getGlobalFacetedRowModel(table),

package/src/features/column-faceting/createFacetedRowModel.ts

@@ -25,8 +25,8 @@ export function createFacetedRowModel<
       fnName: 'createFacetedRowModel',
       memoDeps: () => [
         table.getPreFilteredRowModel(),
-        table.store.state.columnFilters,
-        table.store.state.globalFilter,
+        table.atoms.columnFilters?.get(),
+        table.atoms.globalFilter?.get(),
         table.getFilteredRowModel(),
       ],
       fn: (preRowModel, columnFilters, globalFilter) =>

package/src/features/column-filtering/columnFilteringFeature.utils.ts

@@ -1,4 +1,4 @@
-import { functionalUpdate, isFunction } from '../../utils'
+import { cloneState, functionalUpdate, isFunction } from '../../utils'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { Table_Internal } from '../../types/Table'
@@ -9,7 +9,7 @@ import type {
 } from './columnFilteringFeature.types'
 
 export function getDefaultColumnFiltersState(): ColumnFiltersState {
-  return structuredClone([])
+  return []
 }
 
 export function column_getAutoFilterFn<
@@ -100,8 +100,9 @@ export function column_getFilterValue<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(column: Column_Internal<TFeatures, TData, TValue>) {
-  return column.table.store.state.columnFilters?.find((d) => d.id === column.id)
-    ?.value
+  return column.table.atoms.columnFilters
+    ?.get()
+    ?.find((d) => d.id === column.id)?.value
 }
 
 export function column_getFilterIndex<
@@ -110,9 +111,9 @@ export function column_getFilterIndex<
   TValue extends CellData = CellData,
 >(column: Column_Internal<TFeatures, TData, TValue>): number {
   return (
-    column.table.store.state.columnFilters?.findIndex(
-      (d) => d.id === column.id,
-    ) ?? -1
+    column.table.atoms.columnFilters
+      ?.get()
+      ?.findIndex((d) => d.id === column.id) ?? -1
   )
 }
 
@@ -187,7 +188,7 @@ export function table_resetColumnFilters<
 >(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
   table_setColumnFilters(
     table,
-    defaultState ? [] : (table.initialState.columnFilters ?? []),
+    defaultState ? [] : cloneState(table.initialState.columnFilters ?? []),
   )
 }
 

package/src/features/column-filtering/createFilteredRowModel.ts

@@ -34,8 +34,8 @@ export function createFilteredRowModel<
       fnName: 'table.getFilteredRowModel',
       memoDeps: () => [
         table.getPreFilteredRowModel(),
-        table.store.state.columnFilters,
-        table.store.state.globalFilter,
+        table.atoms.columnFilters?.get(),
+        table.atoms.globalFilter?.get(),
       ],
       fn: () => _createFilteredRowModel(table),
       onAfterUpdate: () => table_autoResetPageIndex(table),
@@ -48,7 +48,8 @@ function _createFilteredRowModel<
   TData extends RowData = any,
 >(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {
   const rowModel = table.getPreFilteredRowModel()
-  const { columnFilters, globalFilter } = table.store.state
+  const columnFilters = table.atoms.columnFilters?.get()
+  const globalFilter = table.atoms.globalFilter?.get()
 
   if (!rowModel.rows.length || (!columnFilters?.length && !globalFilter)) {
     for (const row of rowModel.flatRows as Array<

package/src/features/column-grouping/columnGroupingFeature.utils.ts

@@ -1,4 +1,4 @@
-import { isFunction } from '../../utils'
+import { cloneState, isFunction } from '../../utils'
 import { table_getColumn } from '../../core/columns/coreColumnsFeature.utils'
 import type { Column_Internal } from '../../types/Column'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
@@ -13,7 +13,7 @@ import type {
 } from './columnGroupingFeature.types'
 
 export function getDefaultGroupingState(): GroupingState {
-  return structuredClone([])
+  return []
 }
 
 export function column_toggleGrouping<
@@ -48,7 +48,7 @@ export function column_getIsGrouped<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(column: Column_Internal<TFeatures, TData, TValue>): boolean {
-  return !!column.table.store.state.grouping?.includes(column.id)
+  return !!column.table.atoms.grouping?.get()?.includes(column.id)
 }
 
 export function column_getGroupedIndex<
@@ -56,7 +56,7 @@ export function column_getGroupedIndex<
   TData extends RowData,
   TValue extends CellData = CellData,
 >(column: Column_Internal<TFeatures, TData, TValue>): number {
-  return column.table.store.state.grouping?.indexOf(column.id) ?? -1
+  return column.table.atoms.grouping?.get()?.indexOf(column.id) ?? -1
 }
 
 export function column_getToggleGroupingHandler<
@@ -123,7 +123,7 @@ export function table_resetGrouping<
 >(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
   table_setGrouping(
     table,
-    defaultState ? [] : (table.initialState.grouping ?? []),
+    defaultState ? [] : cloneState(table.initialState.grouping ?? []),
   )
 }
 

package/src/features/column-grouping/createGroupedRowModel.ts

@@ -34,7 +34,7 @@ export function createGroupedRowModel<
       table,
       fnName: 'table.getGroupedRowModel',
       memoDeps: () => [
-        table.store.state.grouping,
+        table.atoms.grouping?.get(),
         table.getPreGroupedRowModel(),
       ],
       fn: () => _createGroupedRowModel(table),
@@ -51,7 +51,7 @@ function _createGroupedRowModel<
   TData extends RowData = any,
 >(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {
   const rowModel = table.getPreGroupedRowModel()
-  const grouping = table.store.state.grouping
+  const grouping = table.atoms.grouping?.get()
 
   if (!rowModel.rows.length || !grouping?.length) {
     rowModel.rows.forEach((row) => {

package/src/features/column-ordering/columnOrderingFeature.ts

@@ -55,9 +55,9 @@ export function constructColumnOrderingFeature<
           fn: (column, position) => column_getIndex(column, position),
           memoDeps: (column, position) => [
             position,
-            column.table.store.state.columnOrder,
-            column.table.store.state.columnPinning,
-            column.table.store.state.grouping,
+            column.table.atoms.columnOrder?.get(),
+            column.table.atoms.columnPinning?.get(),
+            column.table.atoms.grouping?.get(),
           ],
         },
         column_getIsFirstColumn: {
@@ -80,8 +80,8 @@ export function constructColumnOrderingFeature<
         table_getOrderColumnsFn: {
           fn: () => table_getOrderColumnsFn(table),
           memoDeps: () => [
-            table.store.state.columnOrder,
-            table.store.state.grouping,
+            table.atoms.columnOrder?.get(),
+            table.atoms.grouping?.get(),
             table.options.groupedColumnMode,
           ],
         },

package/src/features/column-ordering/columnOrderingFeature.utils.ts

@@ -1,4 +1,5 @@
 import { table_getPinnedVisibleLeafColumns } from '../column-pinning/columnPinningFeature.utils'
+import { cloneState } from '../../utils'
 import type { GroupingState } from '../column-grouping/columnGroupingFeature.types'
 import type { CellData, RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
@@ -8,7 +9,7 @@ import type { ColumnPinningPosition } from '../column-pinning/columnPinningFeatu
 import type { ColumnOrderState } from './columnOrderingFeature.types'
 
 export function getDefaultColumnOrderState(): ColumnOrderState {
-  return structuredClone([])
+  return []
 }
 
 export function column_getIndex<
@@ -60,7 +61,7 @@ export function table_resetColumnOrder<
 >(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
   table_setColumnOrder(
     table,
-    defaultState ? [] : (table.initialState.columnOrder ?? []),
+    defaultState ? [] : cloneState(table.initialState.columnOrder ?? []),
   )
 }
 
@@ -68,7 +69,7 @@ export function table_getOrderColumnsFn<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>) {
-  const { columnOrder = [] } = table.store.state
+  const columnOrder = table.atoms.columnOrder?.get()
 
   return (columns: Array<Column_Internal<TFeatures, TData, unknown>>) => {
     // Sort grouped columns to the start of the column list
@@ -76,7 +77,7 @@ export function table_getOrderColumnsFn<
     let orderedColumns: Array<Column_Internal<TFeatures, TData, unknown>> = []
 
     // If there is no order, return the normal columns
-    if (!columnOrder.length) {
+    if (!columnOrder?.length) {
       orderedColumns = columns
     } else {
       const columnOrderCopy = [...columnOrder]
@@ -110,7 +111,7 @@ export function orderColumns<
   table: Table_Internal<TFeatures, TData>,
   leafColumns: Array<Column_Internal<TFeatures, TData, unknown>>,
 ) {
-  const grouping = table.store.state.grouping ?? ([] as GroupingState)
+  const grouping = table.atoms.grouping?.get() ?? ([] as GroupingState)
   const { groupedColumnMode } = table.options
 
   if (!grouping.length || !groupedColumnMode) {

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

@@ -70,6 +70,7 @@ export function constructColumnPinningFeature<
           ...getDefaultColumnPinningState(),
           ...initialState.columnPinning,
         },
+        ...initialState,
       }
     },
 
@@ -102,24 +103,24 @@ export function constructColumnPinningFeature<
           fn: (row) => row_getCenterVisibleCells(row),
           memoDeps: (row) => [
             row.getAllCells(),
-            row.table.store.state.columnPinning,
-            row.table.store.state.columnVisibility,
+            row.table.atoms.columnPinning?.get(),
+            row.table.atoms.columnVisibility?.get(),
           ],
         },
         row_getLeftVisibleCells: {
           fn: (row) => row_getLeftVisibleCells(row),
           memoDeps: (row) => [
             row.getAllCells(),
-            row.table.store.state.columnPinning?.left,
-            row.table.store.state.columnVisibility,
+            row.table.atoms.columnPinning?.get()?.left,
+            row.table.atoms.columnVisibility?.get(),
           ],
         },
         row_getRightVisibleCells: {
           fn: (row) => row_getRightVisibleCells(row),
           memoDeps: (row) => [
             row.getAllCells(),
-            row.table.store.state.columnPinning?.right,
-            row.table.store.state.columnVisibility,
+            row.table.atoms.columnPinning?.get()?.right,
+            row.table.atoms.columnVisibility?.get(),
           ],
         },
       })
@@ -146,8 +147,8 @@ export function constructColumnPinningFeature<
               'getVisibleLeafColumns',
               table_getVisibleLeafColumns,
             ),
-            table.store.state.columnPinning?.left,
-            table.store.state.columnOrder,
+            table.atoms.columnPinning?.get()?.left,
+            table.atoms.columnOrder?.get(),
           ],
         },
         table_getCenterHeaderGroups: {
@@ -159,8 +160,8 @@ export function constructColumnPinningFeature<
               'getVisibleLeafColumns',
               table_getVisibleLeafColumns,
             ),
-            table.store.state.columnPinning,
-            table.store.state.columnOrder,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnOrder?.get(),
           ],
         },
         table_getRightHeaderGroups: {
@@ -172,8 +173,8 @@ export function constructColumnPinningFeature<
               'getVisibleLeafColumns',
               table_getVisibleLeafColumns,
             ),
-            table.store.state.columnPinning?.right,
-            table.store.state.columnOrder,
+            table.atoms.columnPinning?.get()?.right,
+            table.atoms.columnOrder?.get(),
           ],
         },
         // footer groups
@@ -274,21 +275,21 @@ export function constructColumnPinningFeature<
           fn: () => table_getLeftLeafColumns(table),
           memoDeps: () => [
             table.options.columns,
-            table.store.state.columnPinning,
+            table.atoms.columnPinning?.get(),
           ],
         },
         table_getRightLeafColumns: {
           fn: () => table_getRightLeafColumns(table),
           memoDeps: () => [
             table.options.columns,
-            table.store.state.columnPinning,
+            table.atoms.columnPinning?.get(),
           ],
         },
         table_getCenterLeafColumns: {
           fn: () => table_getCenterLeafColumns(table),
           memoDeps: () => [
             table.options.columns,
-            table.store.state.columnPinning,
+            table.atoms.columnPinning?.get(),
           ],
         },
         // visible leaf columns
@@ -296,24 +297,24 @@ export function constructColumnPinningFeature<
           fn: () => table_getLeftVisibleLeafColumns(table),
           memoDeps: () => [
             table.options.columns,
-            table.store.state.columnPinning,
-            table.store.state.columnVisibility,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
           ],
         },
         table_getCenterVisibleLeafColumns: {
           fn: () => table_getCenterVisibleLeafColumns(table),
           memoDeps: () => [
             table.options.columns,
-            table.store.state.columnPinning,
-            table.store.state.columnVisibility,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
           ],
         },
         table_getRightVisibleLeafColumns: {
           fn: () => table_getRightVisibleLeafColumns(table),
           memoDeps: () => [
             table.options.columns,
-            table.store.state.columnPinning,
-            table.store.state.columnVisibility,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
           ],
         },
       })

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

@@ -4,7 +4,7 @@ import {
   table_getVisibleLeafColumns,
 } from '../column-visibility/columnVisibilityFeature.utils'
 import { buildHeaderGroups } from '../../core/headers/buildHeaderGroups'
-import { callMemoOrStaticFn } from '../../utils'
+import { callMemoOrStaticFn, cloneState } from '../../utils'
 import type { HeaderGroup } from '../../types/HeaderGroup'
 import type { Cell } from '../../types/Cell'
 import type { Row } from '../../types/Row'
@@ -20,10 +20,10 @@ import type {
 // State
 
 export function getDefaultColumnPinningState(): ColumnPinningState {
-  return structuredClone({
+  return {
     left: [],
     right: [],
-  })
+  }
 }
 
 // Column APIs
@@ -92,7 +92,7 @@ export function column_getIsPinned<
   const leafColumnIds = column.getLeafColumns().map((d) => d.id)
 
   const { left, right } =
-    column.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    column.table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
 
   const isLeft = leafColumnIds.some((d) => left.includes(d))
   const isRight = leafColumnIds.some((d) => right.includes(d))
@@ -108,7 +108,7 @@ export function column_getPinnedIndex<
   const position = column_getIsPinned(column)
 
   return position
-    ? (column.table.store.state.columnPinning?.[position].indexOf(column.id) ??
+    ? (column.table.atoms.columnPinning?.get()?.[position].indexOf(column.id) ??
         -1)
     : 0
 }
@@ -125,7 +125,7 @@ export function row_getCenterVisibleCells<
     row_getAllVisibleCells,
   )
   const { left, right } =
-    row.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    row.table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   const leftAndRight: Array<string> = [...left, ...right]
   return allCells.filter((d) => !leftAndRight.includes(d.column.id))
 }
@@ -140,7 +140,7 @@ export function row_getLeftVisibleCells<
     row_getAllVisibleCells,
   )
   const { left } =
-    row.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    row.table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   const cells = left
     .map((columnId) => allCells.find((cell) => cell.column.id === columnId)!)
     .filter(Boolean)
@@ -161,7 +161,7 @@ export function row_getRightVisibleCells<
     row_getAllVisibleCells,
   )
   const { right } =
-    row.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    row.table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   const cells = right
     .map((columnId) => allCells.find((cell) => cell.column.id === columnId)!)
     .filter(Boolean)
@@ -192,7 +192,9 @@ export function table_resetColumnPinning<
     table,
     defaultState
       ? getDefaultColumnPinningState()
-      : (table.initialState.columnPinning ?? getDefaultColumnPinningState()),
+      : cloneState(
+          table.initialState.columnPinning ?? getDefaultColumnPinningState(),
+        ),
   )
 }
 
@@ -200,7 +202,7 @@ export function table_getIsSomeColumnsPinned<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>, position?: ColumnPinningPosition) {
-  const pinningState = table.store.state.columnPinning
+  const pinningState = table.atoms.columnPinning?.get()
 
   if (!position) {
     return Boolean(pinningState?.left.length || pinningState?.right.length)
@@ -221,7 +223,7 @@ export function table_getLeftHeaderGroups<
     table_getVisibleLeafColumns,
   ) as Array<Column_Internal<TFeatures, TData, unknown>>
   const { left } =
-    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
 
   const orderedLeafColumns = left
     .map((columnId) => leafColumns.find((d) => d.id === columnId)!)
@@ -241,7 +243,7 @@ export function table_getRightHeaderGroups<
     table_getVisibleLeafColumns,
   ) as unknown as Array<Column_Internal<TFeatures, TData, unknown>>
   const { right } =
-    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
 
   const orderedLeafColumns = right
     .map((columnId) => leafColumns.find((d) => d.id === columnId)!)
@@ -263,7 +265,7 @@ export function table_getCenterHeaderGroups<
     table_getVisibleLeafColumns,
   ) as unknown as Array<Column_Internal<TFeatures, TData, unknown>>
   const { left, right } =
-    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   const leftAndRight: Array<string> = [...left, ...right]
 
   leafColumns = leafColumns.filter(
@@ -402,7 +404,7 @@ export function table_getLeftLeafColumns<
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>) {
   const { left } =
-    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   return left
     .map(
       (columnId) =>
@@ -416,7 +418,7 @@ export function table_getRightLeafColumns<
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>) {
   const { right } =
-    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   return right
     .map(
       (columnId) =>
@@ -430,7 +432,7 @@ export function table_getCenterLeafColumns<
   TData extends RowData,
 >(table: Table_Internal<TFeatures, TData>) {
   const { left, right } =
-    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+    table.atoms.columnPinning?.get() ?? getDefaultColumnPinningState()
   const leftAndRight: Array<string> = [...left, ...right]
   return table.getAllLeafColumns().filter((d) => !leftAndRight.includes(d.id))
 }