@tanstack/angular-table 9.0.0-alpha.45 → 9.0.0-alpha.47

package/dist/types/tanstack-angular-table.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { Type, ComponentMirror, OutputEmitterRef, InputSignal, Injector, createComponent, Binding, TemplateRef, InjectionToken, Signal, ValueEqualityFn } from '@angular/core';
-import { TableFeatures, RowData, CellData, Cell, Header, CellContext, HeaderContext, TableState, Table, TableOptions, Column, Row, IdentifiedColumnDef, AccessorFn, DeepKeys, DeepValue, AccessorFnColumnDef, AccessorKeyColumnDef, ColumnDef, DisplayColumnDef, GroupColumnDef } from '@tanstack/table-core';
+import { Type, ComponentMirror, OutputEmitterRef, InputSignal, Injector, createComponent, Binding, TemplateRef, InjectionToken, Signal } from '@angular/core';
+import { TableFeatures, RowData, CellData, Cell, Header, CellContext, HeaderContext, Table, TableOptions, Column, Row, IdentifiedColumnDef, AccessorFn, DeepKeys, DeepValue, AccessorFnColumnDef, AccessorKeyColumnDef, ColumnDef, DisplayColumnDef, GroupColumnDef } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
 import { Atom, ReadonlyAtom, Store, ReadonlyStore } from '@tanstack/angular-store';
+export { shallow } from '@tanstack/angular-store';
 
 /**
  * Simplified directive wrapper of `*flexRender`.
@@ -361,43 +362,7 @@ declare class FlexRenderDirective<TFeatures extends TableFeatures, TRowData exte
 }
 
 type SubscribeSource<TValue> = Atom<TValue> | ReadonlyAtom<TValue> | Store<TValue> | ReadonlyStore<TValue>;
-/**
- * Store mode: pass `selector` (required) to project from full table state.
- * Source mode: pass `source` (atom or store); omit `selector` for the whole value
- * (identity), or pass `selector` to project. Split overloads match React `Subscribe`
- * inference.
- */
-interface AngularTableComputed<TFeatures extends TableFeatures> {
-    <TSourceValue>(props: {
-        source: SubscribeSource<TSourceValue>;
-        selector?: undefined;
-        equal?: ValueEqualityFn<TSourceValue>;
-    }): Signal<Readonly<TSourceValue>>;
-    <TSourceValue, TSubSelected>(props: {
-        source: SubscribeSource<TSourceValue>;
-        selector: (state: TSourceValue) => TSubSelected;
-        equal?: ValueEqualityFn<TSubSelected>;
-    }): Signal<Readonly<TSubSelected>>;
-    <TSubSelected>(props: {
-        selector: (state: TableState<TFeatures>) => TSubSelected;
-        equal?: ValueEqualityFn<TSubSelected>;
-    }): Signal<Readonly<TSubSelected>>;
-}
-type AngularTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Table<TFeatures, TData> & {
-    /**
-     * The selected state from the table store, based on the selector provided.
-     */
-    readonly state: Signal<Readonly<TSelected>>;
-    /**
-     * A signal that returns the entire table instance. Will update on table/options change.
-     */
-    readonly value: Signal<AngularTable<TFeatures, TData, TSelected>>;
-    /**
-     * Creates a computed that subscribe to changes in the table store with a custom selector.
-     * Default equality function is "shallow".
-     */
-    computed: AngularTableComputed<TFeatures>;
-};
+type AngularTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData>;
 /**
  * Creates and returns an Angular-reactive table instance.
  *
@@ -454,7 +419,7 @@ type AngularTable<TFeatures extends TableFeatures, TData extends RowData, TSelec
  *
  * @returns An Angular-reactive TanStack Table instance.
  */
-declare function injectTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(options: () => TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): AngularTable<TFeatures, TData, TSelected>;
+declare function injectTable<TFeatures extends TableFeatures, TData extends RowData>(options: () => TableOptions<TFeatures, TData>): AngularTable<TFeatures, TData>;
 
 /**
  * DI context shape for a TanStack Table cell.
@@ -635,15 +600,15 @@ declare const TanStackTableToken: InjectionToken<Signal<any>>;
  * }
  * ```
  */
-declare class TanStackTable<TFeatures extends TableFeatures, TData extends RowData, TSelected extends {} = TableState<TFeatures>> {
+declare class TanStackTable<TFeatures extends TableFeatures, TData extends RowData> {
     /**
      * The current TanStack Table instance.
      *
      * Provided as a required signal input so DI consumers always read the latest value.
      */
-    readonly table: i0.InputSignal<AngularTable<TFeatures, TData, TSelected>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TanStackTable<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackTable<any, any, any>, "[tanStackTable]", ["table"], { "table": { "alias": "tanStackTable"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly table: i0.InputSignal<AngularTable<TFeatures, TData>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TanStackTable<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackTable<any, any>, "[tanStackTable]", ["table"], { "table": { "alias": "tanStackTable"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Injects the current TanStack Table instance signal.
@@ -652,7 +617,7 @@ declare class TanStackTable<TFeatures extends TableFeatures, TData extends RowDa
  * - there is a nearest `[tanStackTable]` directive in the DI tree, or
  * - the caller is rendered via `*flexRender` with render props containing `table`
  */
-declare function injectTableContext<TFeatures extends TableFeatures, TData extends RowData, TSelected extends {} = TableState<TFeatures>>(): Signal<AngularTable<TFeatures, TData, TSelected>>;
+declare function injectTableContext<TFeatures extends TableFeatures, TData extends RowData>(): Signal<AngularTable<TFeatures, TData>>;
 
 type RenderableComponent = Type<any> | (<T extends NonNullable<unknown>>(props: T) => FlexRenderContent<T>);
 /**
@@ -739,7 +704,7 @@ type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCe
 /**
  * Extended table API returned by useAppTable with all App wrapper components
  */
-type AppAngularTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends Record<string, RenderableComponent>, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = AngularTable<TFeatures, TData, TSelected> & NoInfer<TTableComponents> & {
+type AppAngularTable<TFeatures extends TableFeatures, TData extends RowData, TTableComponents extends Record<string, RenderableComponent>, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = AngularTable<TFeatures, TData> & NoInfer<TTableComponents> & {
     appCell: <TValue>(cell: Cell<TFeatures, TData, TValue>) => Cell<TFeatures, TData, TValue> & NoInfer<TCellComponents>;
     appHeader: <TValue>(header: Header<TFeatures, TData, TValue>) => Header<TFeatures, TData, TValue> & NoInfer<THeaderComponents>;
     appFooter: <TValue>(footer: Header<TFeatures, TData, TValue>) => Header<TFeatures, TData, TValue> & NoInfer<THeaderComponents>;
@@ -778,8 +743,27 @@ type CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents ext
     injectTableCellContext: <TValue extends CellData = CellData, TRowData extends RowData = RowData>() => Signal<Cell<TFeatures, TRowData, TValue>>;
     injectFlexRenderHeaderContext: <TData extends RowData, TValue extends CellData>() => HeaderContext<TFeatures, TData, TValue>;
     injectFlexRenderCellContext: <TData extends RowData, TValue extends CellData>() => CellContext<TFeatures, TData, TValue>;
-    injectAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: () => Omit<TableOptions<TFeatures, TData>, '_features' | '_rowModels'>, selector?: (state: TableState<TFeatures>) => TSelected) => AppAngularTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    injectAppTable: <TData extends RowData>(tableOptions: () => Omit<TableOptions<TFeatures, TData>, '_features' | '_rowModels'>) => AppAngularTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
 };
+/**
+ * Creates app-scoped Angular table helpers with features, row models, and
+ * renderable component maps pre-bound.
+ *
+ * Use this when an app or design system wants typed `injectAppTable`,
+ * pre-bound column helpers, and typed table/cell/header context injection
+ * helpers without repeating the same feature and component generics.
+ *
+ * @example
+ * ```ts
+ * const { injectAppTable, createAppColumnHelper } = createTableHook({
+ *   _features,
+ *   _rowModels: {},
+ *   tableComponents: {},
+ *   cellComponents: {},
+ *   headerComponents: {},
+ * })
+ * ```
+ */
 declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, RenderableComponent>, const TCellComponents extends Record<string, RenderableComponent>, const THeaderComponents extends Record<string, RenderableComponent>>({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }: CreateTableContextOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
 
 /**
@@ -793,4 +777,4 @@ declare function createTableHook<TFeatures extends TableFeatures, const TTableCo
 declare const FlexRender: readonly [typeof FlexRenderDirective, typeof FlexRenderCell];
 
 export { FlexRender, FlexRenderCell, FlexRenderComponentInstance, FlexRenderComponentProps, FlexRenderDirective, TanStackTable, TanStackTableCell, TanStackTableCellToken, TanStackTableHeader, TanStackTableHeaderToken, TanStackTableToken, createTableHook, flexRenderComponent, injectFlexRenderContext, injectTable, injectTableCellContext, injectTableContext, injectTableHeaderContext };
-export type { AngularTable, AngularTableComputed, AppAngularTable, AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, CreateTableContextOptions, CreateTableHookResult, FlexRenderComponent, FlexRenderContent, FlexRenderInputContent, RenderableComponent, SubscribeSource, TanStackTableCellContext, TanStackTableHeaderContext };
+export type { AngularTable, AppAngularTable, AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, CreateTableContextOptions, CreateTableHookResult, FlexRenderComponent, FlexRenderContent, FlexRenderInputContent, RenderableComponent, SubscribeSource, TanStackTableCellContext, TanStackTableHeaderContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-table",
-  "version": "9.0.0-alpha.45",
+  "version": "9.0.0-alpha.47",
   "description": "Headless UI for building powerful tables & datagrids for Angular.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -51,13 +51,13 @@
   "dependencies": {
     "@tanstack/angular-store": "^0.11.0",
     "tslib": "^2.8.1",
-    "@tanstack/table-core": "9.0.0-alpha.43"
+    "@tanstack/table-core": "9.0.0-alpha.47"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^2.5.0",
-    "@analogjs/vitest-angular": "^2.5.0",
-    "@angular/core": "^21.2.11",
-    "@angular/platform-browser": "^21.2.11",
+    "@analogjs/vite-plugin-angular": "^2.5.1",
+    "@analogjs/vitest-angular": "^2.5.1",
+    "@angular/core": "^21.2.12",
+    "@angular/platform-browser": "^21.2.12",
     "ng-packagr": "^21.2.3",
     "typescript": "6.0.3"
   },

package/src/flex-render/flexRenderComponentFactory.ts

@@ -11,6 +11,10 @@ import {
 } from '@angular/core'
 import { FlexRenderComponent } from './flexRenderComponent'
 
+/**
+ * Creates and manages Angular component instances used by flex-rendered table
+ * content.
+ */
 @Injectable()
 export class FlexRenderComponentFactory {
   readonly #viewContainerRef: ViewContainerRef
@@ -46,6 +50,12 @@ export class FlexRenderComponentFactory {
   }
 }
 
+/**
+ * Runtime wrapper around an Angular component rendered by `FlexRenderDirective`.
+ *
+ * It diffs inputs and outputs across table updates so component renderers can
+ * be reused instead of recreated on every cell/header render.
+ */
 export class FlexRenderComponentRef<T> {
   readonly #keyValueDiffersFactory: KeyValueDiffers
   #componentData: FlexRenderComponent<T>

package/src/flex-render/view.ts

@@ -15,6 +15,13 @@ export type FlexRenderTypedContent =
   | { kind: 'templateRef'; content: TemplateRef<unknown> }
   | { kind: 'component'; content: Type<unknown> }
 
+/**
+ * Normalizes arbitrary Angular flex-render content into the renderer's internal
+ * tagged representation.
+ *
+ * This lets the directive decide whether to reuse, update, or recreate an
+ * embedded view or component view.
+ */
 export function mapToFlexRenderTypedContent(
   content: FlexRenderContent<any>,
 ): FlexRenderTypedContent {
@@ -80,6 +87,12 @@ export abstract class FlexRenderView<
   abstract unmount(): void
 }
 
+/**
+ * Tracks an Angular embedded template view rendered by `FlexRenderDirective`.
+ *
+ * Template views receive updated props through their proxied context and can be
+ * reused while the rendered content kind stays compatible.
+ */
 export class FlexRenderTemplateView extends FlexRenderView<
   EmbeddedViewRef<unknown>,
   Extract<FlexRenderTypedContent, { kind: 'primitive' | 'templateRef' }>
@@ -132,6 +145,12 @@ export class FlexRenderTemplateView extends FlexRenderView<
   }
 }
 
+/**
+ * Tracks an Angular component view rendered by `FlexRenderDirective`.
+ *
+ * Component views own input/output updates for `flexRenderComponent(...)`
+ * results and component classes rendered directly from column definitions.
+ */
 export class FlexRenderComponentView extends FlexRenderView<
   FlexRenderComponentRef<unknown>,
   Extract<FlexRenderTypedContent, { kind: 'component' | 'flexRenderComponent' }>

package/src/helpers/createTableHook.ts

@@ -243,11 +243,10 @@ export type AppColumnHelper<
 export type AppAngularTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected,
   TTableComponents extends Record<string, RenderableComponent>,
   TCellComponents extends Record<string, RenderableComponent>,
   THeaderComponents extends Record<string, RenderableComponent>,
-> = AngularTable<TFeatures, TData, TSelected> &
+> = AngularTable<TFeatures, TData> &
   NoInfer<TTableComponents> & {
     appCell: <TValue>(
       cell: Cell<TFeatures, TData, TValue>,
@@ -333,22 +332,39 @@ export type CreateTableHookResult<
     TData extends RowData,
     TValue extends CellData,
   >() => CellContext<TFeatures, TData, TValue>
-  injectAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(
+  injectAppTable: <TData extends RowData>(
     tableOptions: () => Omit<
       TableOptions<TFeatures, TData>,
       '_features' | '_rowModels'
     >,
-    selector?: (state: TableState<TFeatures>) => TSelected,
   ) => AppAngularTable<
     TFeatures,
     TData,
-    TSelected,
     TTableComponents,
     TCellComponents,
     THeaderComponents
   >
 }
 
+/**
+ * Creates app-scoped Angular table helpers with features, row models, and
+ * renderable component maps pre-bound.
+ *
+ * Use this when an app or design system wants typed `injectAppTable`,
+ * pre-bound column helpers, and typed table/cell/header context injection
+ * helpers without repeating the same feature and component generics.
+ *
+ * @example
+ * ```ts
+ * const { injectAppTable, createAppColumnHelper } = createTableHook({
+ *   _features,
+ *   _rowModels: {},
+ *   tableComponents: {},
+ *   cellComponents: {},
+ *   headerComponents: {},
+ * })
+ * ```
+ */
 export function createTableHook<
   TFeatures extends TableFeatures,
   const TTableComponents extends Record<string, RenderableComponent>,
@@ -412,11 +428,9 @@ export function createTableHook<
       TableOptions<TFeatures, TData>,
       '_features' | '_rowModels'
     >,
-    selector?: (state: TableState<TFeatures>) => TSelected,
   ): AppAngularTable<
     TFeatures,
     TData,
-    TSelected,
     TTableComponents,
     TCellComponents,
     THeaderComponents
@@ -445,8 +459,8 @@ export function createTableHook<
       },
     }
 
-    return injectTable<TFeatures, TData, TSelected>(() => {
-      const options = {
+    return injectTable<TFeatures, TData>(() => {
+      return {
         ...defaultTableOptions,
         ...tableOptions(),
         _features: {
@@ -454,8 +468,7 @@ export function createTableHook<
           appTableFeatures,
         },
       } as TableOptions<TFeatures, TData>
-      return options
-    }, selector) as AngularTable<any, any>
+    }) as AngularTable<any, any>
   }
 
   function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<

package/src/helpers/table.ts

@@ -1,5 +1,5 @@
 import { Directive, InjectionToken, inject, input } from '@angular/core'
-import { RowData, TableFeatures, TableState } from '@tanstack/table-core'
+import { RowData, TableFeatures } from '@tanstack/table-core'
 import { AngularTable } from '../injectTable'
 import type { Signal } from '@angular/core'
 
@@ -59,14 +59,13 @@ export const TanStackTableToken = new InjectionToken<
 export class TanStackTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected extends {} = TableState<TFeatures>,
 > {
   /**
    * The current TanStack Table instance.
    *
    * Provided as a required signal input so DI consumers always read the latest value.
    */
-  readonly table = input.required<AngularTable<TFeatures, TData, TSelected>>({
+  readonly table = input.required<AngularTable<TFeatures, TData>>({
     alias: 'tanStackTable',
   })
 }
@@ -81,7 +80,6 @@ export class TanStackTable<
 export function injectTableContext<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected extends {} = TableState<TFeatures>,
->(): Signal<AngularTable<TFeatures, TData, TSelected>> {
+>(): Signal<AngularTable<TFeatures, TData>> {
   return inject(TanStackTableToken)
 }

package/src/index.ts

@@ -22,3 +22,5 @@ export * from './helpers/flexRenderCell'
  * @see {@link FlexRenderDirective} and {@link FlexRenderCell} for more details on the directives included in this export.
  */
 export const FlexRender = [FlexRenderDirective, FlexRenderCell] as const
+
+export { shallow } from '@tanstack/angular-store'

package/src/injectTable.ts

@@ -1,13 +1,12 @@
 import {
   Injector,
+  NgZone,
   assertInInjectionContext,
-  computed,
   effect,
   inject,
   untracked,
 } from '@angular/core'
 import { constructTable } from '@tanstack/table-core'
-import { injectSelector, shallow } from '@tanstack/angular-store'
 import { lazyInit } from './lazySignalInitializer'
 import { angularReactivity } from './reactivity'
 import type {
@@ -21,9 +20,7 @@ import type {
   Table,
   TableFeatures,
   TableOptions,
-  TableState,
 } from '@tanstack/table-core'
-import type { Signal, ValueEqualityFn } from '@angular/core'
 
 export type SubscribeSource<TValue> =
   | Atom<TValue>
@@ -31,48 +28,10 @@ export type SubscribeSource<TValue> =
   | Store<TValue>
   | ReadonlyStore<TValue>
 
-/**
- * Store mode: pass `selector` (required) to project from full table state.
- * Source mode: pass `source` (atom or store); omit `selector` for the whole value
- * (identity), or pass `selector` to project. Split overloads match React `Subscribe`
- * inference.
- */
-export interface AngularTableComputed<TFeatures extends TableFeatures> {
-  <TSourceValue>(props: {
-    source: SubscribeSource<TSourceValue>
-    selector?: undefined
-    equal?: ValueEqualityFn<TSourceValue>
-  }): Signal<Readonly<TSourceValue>>
-  <TSourceValue, TSubSelected>(props: {
-    source: SubscribeSource<TSourceValue>
-    selector: (state: TSourceValue) => TSubSelected
-    equal?: ValueEqualityFn<TSubSelected>
-  }): Signal<Readonly<TSubSelected>>
-  <TSubSelected>(props: {
-    selector: (state: TableState<TFeatures>) => TSubSelected
-    equal?: ValueEqualityFn<TSubSelected>
-  }): Signal<Readonly<TSubSelected>>
-}
-
 export type AngularTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
-> = Table<TFeatures, TData> & {
-  /**
-   * The selected state from the table store, based on the selector provided.
-   */
-  readonly state: Signal<Readonly<TSelected>>
-  /**
-   * A signal that returns the entire table instance. Will update on table/options change.
-   */
-  readonly value: Signal<AngularTable<TFeatures, TData, TSelected>>
-  /**
-   * Creates a computed that subscribe to changes in the table store with a custom selector.
-   * Default equality function is "shallow".
-   */
-  computed: AngularTableComputed<TFeatures>
-}
+> = Table<TFeatures, TData>
 
 /**
  * Creates and returns an Angular-reactive table instance.
@@ -133,68 +92,42 @@ export type AngularTable<
 export function injectTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 >(
   options: () => TableOptions<TFeatures, TData>,
-  selector?: (state: TableState<TFeatures>) => TSelected,
-): AngularTable<TFeatures, TData, TSelected> {
+): AngularTable<TFeatures, TData> {
   assertInInjectionContext(injectTable)
   const injector = inject(Injector)
+  const ngZone = inject(NgZone)
 
-  return lazyInit(() => {
-    const table = constructTable({
-      ...options(),
-      _features: {
-        coreReativityFeature: angularReactivity(injector),
-        ...options()._features,
-      },
-    }) as AngularTable<TFeatures, TData, TSelected>
-
-    let isMount = true
-    effect(
-      () => {
-        const newOptions = options()
-        if (isMount) {
-          isMount = false
-          return
-        }
-        untracked(() =>
-          table.setOptions((previous) => ({
-            ...previous,
-            ...newOptions,
-          })),
-        )
-      },
-      { injector, debugName: 'tableOptionsUpdate' },
-    )
-
-    table.computed = function Subscribe(props: {
-      source?: SubscribeSource<unknown>
-      selector?: (state: unknown) => unknown
-      equal?: ValueEqualityFn<unknown>
-    }) {
-      const source = props.source ?? table.store
-      return injectSelector(source, props.selector as never, {
-        compare: props.equal ?? shallow,
-        injector,
+  return ngZone.runOutsideAngular(() =>
+    lazyInit(() => {
+      const table = constructTable({
+        ...options(),
+        _features: {
+          coreReativityFeature: angularReactivity(injector),
+          ...options()._features,
+        },
       })
-    } as AngularTableComputed<TFeatures>
-
-    Object.defineProperty(table, 'state', {
-      value: computed(() => selector?.(table.store.get()) ?? table.store.get()),
-    })
 
-    Object.defineProperty(table, 'value', {
-      value: computed(
+      let isMount = true
+      effect(
         () => {
-          table.store.get()
-          table.optionsStore!.get()
-          return table
+          const newOptions = options()
+          if (isMount) {
+            isMount = false
+            return
+          }
+          untracked(() =>
+            table.setOptions((previous) => ({
+              ...previous,
+              ...newOptions,
+            })),
+          )
         },
-        { equal: () => false },
-      ),
-    })
+        { injector, debugName: 'tableOptionsUpdate' },
+      )
 
-    return table
-  })
+      return table
+    }),
+  )
 }

package/src/reactivity.ts

@@ -1,4 +1,4 @@
-import { computed, signal, untracked } from '@angular/core'
+import { NgZone, computed, signal, untracked } from '@angular/core'
 import { toObservable } from '@angular/core/rxjs-interop'
 import type { Atom, Observer, ReadonlyAtom } from '@tanstack/angular-store'
 import type {
@@ -40,9 +40,19 @@ function signalToWritableAtom<T>(
   })
 }
 
+/**
+ * Creates the table-core reactivity bindings used by the Angular adapter.
+ *
+ * Readonly table atoms are backed by Angular `computed` signals and writable
+ * atoms by Angular `signal`. Subscriptions bridge through `toObservable` with
+ * the caller's injector so table APIs can be consumed from Angular `computed`
+ * and `effect` calls.
+ */
 export function angularReactivity(injector: Injector): TableReactivityBindings {
+  const ngZone = injector.get(NgZone)
   return {
     createOptionsStore: true,
+    schedule: (fn) => ngZone.runOutsideAngular(() => queueMicrotask(fn)),
     createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {
       const signal = computed(() => fn(), {
         equal: options?.compare,