@tanstack/angular-table 9.0.0-alpha.13 → 9.0.0-alpha.17

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

@@ -1,6 +1,6 @@
 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, Table, TableFeature, TableState, TableOptions, Column, Row, AccessorFn, DeepKeys, DeepValue, IdentifiedColumnDef, AccessorFnColumnDef, AccessorKeyColumnDef, ColumnDef, DisplayColumnDef, GroupColumnDef } from '@tanstack/table-core';
+import { TableFeatures, RowData, CellData, Cell, Header, CellContext, HeaderContext, TableState, Table, TableOptions, Column, Row, AccessorFn, DeepKeys, DeepValue, IdentifiedColumnDef, AccessorFnColumnDef, AccessorKeyColumnDef, ColumnDef, DisplayColumnDef, GroupColumnDef } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
 
 /**
@@ -359,101 +359,20 @@ declare class FlexRenderDirective<TFeatures extends TableFeatures, TRowData exte
     static ɵdir: i0.ɵɵDirectiveDeclaration<FlexRenderDirective<any, any, any, any>, "ng-template[flexRender]", never, { "content": { "alias": "flexRender"; "required": false; "isSignal": true; }; "props": { "alias": "flexRenderProps"; "required": false; "isSignal": true; }; "injector": { "alias": "flexRenderInjector"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare module '@tanstack/table-core' {
-    interface TableOptions_Plugins<TFeatures extends TableFeatures, TData extends RowData> extends TableOptions_AngularReactivity {
-    }
-    interface Table_Plugins<TFeatures extends TableFeatures, TData extends RowData> extends Table_AngularReactivity<TFeatures, TData> {
-    }
-}
-/**
- * Predicate used to skip/ignore a property name when applying Angular reactivity.
- *
- * Returning `true` means the property should NOT be wrapped/made reactive.
- */
-type SkipPropertyFn = (property: string) => boolean;
-/**
- * Fine-grained configuration for Angular reactivity.
- *
- * Each key controls whether prototype methods/getters on the corresponding TanStack Table
- * objects are wrapped with signal-aware access.
- *
- * - `true` enables wrapping using the default skip rules.
- * - `false` disables wrapping entirely for that object type.
- * - a function allows customizing the skip rules (see {@link SkipPropertyFn}).
- *
- * @example
- * ```ts
- * const table = injectTable(() => {
- *  // ...table options,
- *  reactivity: {
- *    // fine-grained control over which table objects have reactive properties,
- *    // and which properties are wrapped
- *    header: true,
- *    column: true,
- *    row: true,
- *    cell: true,
- *  }
- * })
- * ```
- */
-interface AngularReactivityFlags {
-    /** Controls reactive wrapping for `Header` instances. */
-    header: boolean | SkipPropertyFn;
-    /** Controls reactive wrapping for `Column` instances. */
-    column: boolean | SkipPropertyFn;
-    /** Controls reactive wrapping for `Row` instances. */
-    row: boolean | SkipPropertyFn;
-    /** Controls reactive wrapping for `Cell` instances. */
-    cell: boolean | SkipPropertyFn;
-}
-/**
- * Table option extension for Angular reactivity.
- *
- * Available on `createTable` options via module augmentation in this file.
- */
-interface TableOptions_AngularReactivity {
-    /**
-     * Enables/disables and configures Angular reactivity on table-related prototypes.
-     *
-     * If omitted, defaults are provided by the feature.
-     */
-    reactivity?: Partial<AngularReactivityFlags>;
-}
-/**
- * Table API extension for Angular reactivity.
- *
- * Added to the table instance via module augmentation.
- */
-interface Table_AngularReactivity<TFeatures extends TableFeatures, TData extends RowData> {
-    /**
-     * Returns a table signal that updates whenever the table state or options changes.
-     */
-    get: Signal<Table<TFeatures, TData>>;
-}
-/**
- * Type map describing what this feature adds to TanStack Table constructors.
- */
-interface AngularReactivityFeatureConstructors<TFeatures extends TableFeatures, TData extends RowData> {
-    TableOptions: TableOptions_AngularReactivity;
-    Table: Table_AngularReactivity<TFeatures, TData>;
-}
-/**
- * Angular reactivity feature that add reactive signal supports in table core instance.
- * This is used internally by the Angular table adapter `injectTable`.
- *
- * @private
- */
-declare const angularReactivityFeature: TableFeature<AngularReactivityFeatureConstructors<TableFeatures, RowData>>;
-
 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>>;
     /**
-     * Subscribe to changes in the table store with a custom selector.
+     * 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".
      */
-    Subscribe: <TSubSelected = {}>(props: {
+    computed: <TSubSelected = {}>(props: {
         selector: (state: TableState<TFeatures>) => TSubSelected;
         equal?: ValueEqualityFn<TSubSelected>;
     }) => Signal<Readonly<TSubSelected>>;
@@ -852,5 +771,5 @@ 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, angularReactivityFeature, createTableHook, flexRenderComponent, injectFlexRenderContext, injectTable, injectTableCellContext, injectTableContext, injectTableHeaderContext };
-export type { AngularReactivityFlags, AngularTable, AppAngularTable, AppCellContext, AppColumnHelper, AppHeaderContext, CreateTableContextOptions, CreateTableHookResult, FlexRenderComponent, FlexRenderContent, FlexRenderInputContent, TanStackTableCellContext, TanStackTableHeaderContext };
+export { FlexRender, FlexRenderCell, FlexRenderComponentInstance, FlexRenderComponentProps, FlexRenderDirective, TanStackTable, TanStackTableCell, TanStackTableCellToken, TanStackTableHeader, TanStackTableHeaderToken, TanStackTableToken, createTableHook, flexRenderComponent, injectFlexRenderContext, injectTable, injectTableCellContext, injectTableContext, injectTableHeaderContext };
+export type { AngularTable, AppAngularTable, AppCellContext, AppColumnHelper, AppHeaderContext, CreateTableContextOptions, CreateTableHookResult, FlexRenderComponent, FlexRenderContent, FlexRenderInputContent, TanStackTableCellContext, TanStackTableHeaderContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-table",
-  "version": "9.0.0-alpha.13",
+  "version": "9.0.0-alpha.17",
   "description": "Headless UI for building powerful tables & datagrids for Angular.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -40,9 +40,9 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/angular-store": "^0.9.1",
+    "@tanstack/angular-store": "^0.9.2",
     "tslib": "^2.8.1",
-    "@tanstack/table-core": "9.0.0-alpha.13"
+    "@tanstack/table-core": "9.0.0-alpha.16"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.2.2",

package/src/index.ts

@@ -3,7 +3,6 @@ import { FlexRenderDirective } from './flexRender'
 
 export * from '@tanstack/table-core'
 
-export * from './angularReactivityFeature'
 export * from './flexRender'
 export * from './injectTable'
 export * from './flex-render/flexRenderComponent'

package/src/injectTable.ts

@@ -2,13 +2,17 @@ import {
   Injector,
   assertInInjectionContext,
   computed,
+  effect,
   inject,
+  signal,
   untracked,
 } from '@angular/core'
-import { constructTable } from '@tanstack/table-core'
+import {
+  constructReactivityFeature,
+  constructTable,
+} from '@tanstack/table-core'
 import { injectStore } from '@tanstack/angular-store'
 import { lazyInit } from './lazySignalInitializer'
-import { angularReactivityFeature } from './angularReactivityFeature'
 import type {
   RowData,
   Table,
@@ -28,9 +32,14 @@ export type AngularTable<
    */
   readonly state: Signal<Readonly<TSelected>>
   /**
-   * Subscribe to changes in the table store with a custom selector.
+   * 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".
    */
-  Subscribe: <TSubSelected = {}>(props: {
+  computed: <TSubSelected = {}>(props: {
     selector: (state: TableState<TFeatures>) => TSubSelected
     equal?: ValueEqualityFn<TSubSelected>
   }) => Signal<Readonly<TSubSelected>>
@@ -103,6 +112,10 @@ export function injectTable<
 ): AngularTable<TFeatures, TData, TSelected> {
   assertInInjectionContext(injectTable)
   const injector = inject(Injector)
+  const stateNotifier = signal(0)
+  const angularReactivityFeature = constructReactivityFeature({
+    stateNotifier: () => stateNotifier(),
+  })
 
   return lazyInit(() => {
     const resolvedOptions: TableOptions<TFeatures, TData> = {
@@ -113,19 +126,22 @@ export function injectTable<
       },
     } as TableOptions<TFeatures, TData>
 
-    const table: AngularTable<TFeatures, TData, TSelected> = constructTable(
-      resolvedOptions,
-    ) as AngularTable<TFeatures, TData, TSelected>
+    const table = constructTable(resolvedOptions) as AngularTable<
+      TFeatures,
+      TData,
+      TSelected
+    >
+    const tableState = injectStore(table.store, (state) => state, { injector })
+    const tableOptions = injectStore(table.optionsStore, (state) => state, {
+      injector,
+    })
 
     const updatedOptions = computed<TableOptions<TFeatures, TData>>(() => {
       const tableOptionsValue = options()
       const result: TableOptions<TFeatures, TData> = {
-        ...table.options,
+        ...untracked(() => table.options),
         ...tableOptionsValue,
-        _features: {
-          ...tableOptionsValue._features,
-          angularReactivityFeature,
-        },
+        _features: { ...tableOptionsValue._features, angularReactivityFeature },
       }
       if (tableOptionsValue.state) {
         result.state = tableOptionsValue.state
@@ -133,25 +149,25 @@ export function injectTable<
       return result
     })
 
-    const tableState = injectStore(
-      table.store,
-      (state: TableState<TFeatures>) => state,
-      { injector },
+    effect(
+      () => {
+        const newOptions = updatedOptions()
+        untracked(() => table.setOptions(newOptions))
+      },
+      { injector, debugName: 'tableOptionsUpdate' },
     )
 
-    const tableSignalNotifier = computed(
+    let isMount = true
+    effect(
       () => {
-        tableState()
-        table.setOptions(updatedOptions())
-        untracked(() => table.baseStore.setState((prev) => ({ ...prev })))
-        return table
+        void [tableOptions(), tableState()]
+        if (!isMount) untracked(() => stateNotifier.update((n) => n + 1))
+        isMount && (isMount = false)
       },
-      { equal: () => false },
+      { injector, debugName: 'tableStateNotifier' },
     )
 
-    table.setTableNotifier(tableSignalNotifier)
-
-    table.Subscribe = function Subscribe<TSubSelected = {}>(props: {
+    table.computed = function Subscribe<TSubSelected = {}>(props: {
       selector: (state: TableState<TFeatures>) => TSubSelected
       equal?: ValueEqualityFn<TSubSelected>
     }) {
@@ -165,6 +181,14 @@ export function injectTable<
       value: injectStore(table.store, selector, { injector }),
     })
 
+    Object.defineProperty(table, 'value', {
+      value: computed(() => {
+        tableOptions()
+        tableState()
+        return table
+      }),
+    })
+
     return table
   })
 }

package/src/angularReactivityFeature.ts

@@ -1,231 +0,0 @@
-import { computed, signal } from '@angular/core'
-import { setReactivePropertiesOnObject } from './reactivityUtils'
-import type { Signal } from '@angular/core'
-import type {
-  RowData,
-  Table,
-  TableFeature,
-  TableFeatures,
-} from '@tanstack/table-core'
-
-declare module '@tanstack/table-core' {
-  interface TableOptions_Plugins<
-    TFeatures extends TableFeatures,
-    TData extends RowData,
-  > extends TableOptions_AngularReactivity {}
-
-  interface Table_Plugins<
-    TFeatures extends TableFeatures,
-    TData extends RowData,
-  > extends Table_AngularReactivity<TFeatures, TData> {}
-}
-
-/**
- * Predicate used to skip/ignore a property name when applying Angular reactivity.
- *
- * Returning `true` means the property should NOT be wrapped/made reactive.
- */
-type SkipPropertyFn = (property: string) => boolean
-
-/**
- * Fine-grained configuration for Angular reactivity.
- *
- * Each key controls whether prototype methods/getters on the corresponding TanStack Table
- * objects are wrapped with signal-aware access.
- *
- * - `true` enables wrapping using the default skip rules.
- * - `false` disables wrapping entirely for that object type.
- * - a function allows customizing the skip rules (see {@link SkipPropertyFn}).
- *
- * @example
- * ```ts
- * const table = injectTable(() => {
- *  // ...table options,
- *  reactivity: {
- *    // fine-grained control over which table objects have reactive properties,
- *    // and which properties are wrapped
- *    header: true,
- *    column: true,
- *    row: true,
- *    cell: true,
- *  }
- * })
- * ```
- */
-export interface AngularReactivityFlags {
-  /** Controls reactive wrapping for `Header` instances. */
-  header: boolean | SkipPropertyFn
-  /** Controls reactive wrapping for `Column` instances. */
-  column: boolean | SkipPropertyFn
-  /** Controls reactive wrapping for `Row` instances. */
-  row: boolean | SkipPropertyFn
-  /** Controls reactive wrapping for `Cell` instances. */
-  cell: boolean | SkipPropertyFn
-}
-
-/**
- * Table option extension for Angular reactivity.
- *
- * Available on `createTable` options via module augmentation in this file.
- */
-interface TableOptions_AngularReactivity {
-  /**
-   * Enables/disables and configures Angular reactivity on table-related prototypes.
-   *
-   * If omitted, defaults are provided by the feature.
-   */
-  reactivity?: Partial<AngularReactivityFlags>
-}
-
-/**
- * Table API extension for Angular reactivity.
- *
- * Added to the table instance via module augmentation.
- */
-interface Table_AngularReactivity<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> {
-  /**
-   * Returns a table signal that updates whenever the table state or options changes.
-   */
-  get: Signal<Table<TFeatures, TData>>
-  /**
-   * Sets the reactive notifier that powers {@link get}.
-   *
-   * @internal Used by the Angular table adapter to connect its notifier to the core table.
-   */
-  setTableNotifier: (signal: Signal<Table<TFeatures, TData>>) => void
-}
-
-/**
- * Type map describing what this feature adds to TanStack Table constructors.
- */
-interface AngularReactivityFeatureConstructors<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> {
-  TableOptions: TableOptions_AngularReactivity
-  Table: Table_AngularReactivity<TFeatures, TData>
-}
-
-/**
- * Resolves the user-provided `reactivity.*` config to a skip predicate.
- *
- * - `false` is handled by callers (feature method returns early)
- * - `true` selects the default predicate
- * - a function overrides the default predicate
- */
-const getUserSkipPropertyFn = (
-  value: undefined | null | boolean | SkipPropertyFn,
-  defaultPropertyFn: SkipPropertyFn,
-) => {
-  if (typeof value === 'boolean') {
-    return defaultPropertyFn
-  }
-
-  return value ?? defaultPropertyFn
-}
-
-function constructAngularReactivityFeature<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(): TableFeature<AngularReactivityFeatureConstructors<TFeatures, TData>> {
-  return {
-    getDefaultTableOptions(table) {
-      return {
-        reactivity: {
-          header: true,
-          column: true,
-          row: true,
-          cell: true,
-        },
-      }
-    },
-    constructTableAPIs: (table) => {
-      const rootNotifier = signal<Signal<any> | null>(null)
-      table.setTableNotifier = (notifier) => rootNotifier.set(notifier)
-      table.get = computed(() => rootNotifier()!(), { equal: () => false })
-      setReactivePropertiesOnObject(table.get, table, {
-        overridePrototype: false,
-        skipProperty: skipBaseProperties,
-      })
-    },
-
-    assignCellPrototype: (prototype, table) => {
-      if (table.options.reactivity?.cell === false) {
-        return
-      }
-      setReactivePropertiesOnObject(table.get, prototype, {
-        skipProperty: getUserSkipPropertyFn(
-          table.options.reactivity?.cell,
-          skipBaseProperties,
-        ),
-        overridePrototype: true,
-      })
-    },
-
-    assignColumnPrototype: (prototype, table) => {
-      if (table.options.reactivity?.column === false) {
-        return
-      }
-      setReactivePropertiesOnObject(table.get, prototype, {
-        skipProperty: getUserSkipPropertyFn(
-          table.options.reactivity?.cell,
-          skipBaseProperties,
-        ),
-        overridePrototype: true,
-      })
-    },
-
-    assignHeaderPrototype: (prototype, table) => {
-      if (table.options.reactivity?.header === false) {
-        return
-      }
-      setReactivePropertiesOnObject(table.get, prototype, {
-        skipProperty: getUserSkipPropertyFn(
-          table.options.reactivity?.cell,
-          skipBaseProperties,
-        ),
-        overridePrototype: true,
-      })
-    },
-
-    assignRowPrototype: (prototype, table) => {
-      if (table.options.reactivity?.row === false) {
-        return
-      }
-      setReactivePropertiesOnObject(table.get, prototype, {
-        skipProperty: getUserSkipPropertyFn(
-          table.options.reactivity?.cell,
-          skipBaseProperties,
-        ),
-        overridePrototype: true,
-      })
-    },
-  }
-}
-
-/**
- * Angular reactivity feature that add reactive signal supports in table core instance.
- * This is used internally by the Angular table adapter `injectTable`.
- *
- * @private
- */
-export const angularReactivityFeature = constructAngularReactivityFeature()
-
-/**
- * Default predicate used to skip base/non-reactive properties.
- */
-function skipBaseProperties(property: string): boolean {
-  return (
-    // equals `getContext`
-    property === 'getContext' ||
-    // start with `_`
-    property[0] === '_' ||
-    // doesn't start with `get`, but faster
-    !(property[0] === 'g' && property[1] === 'e' && property[2] === 't') ||
-    // ends with `Handler`
-    property.endsWith('Handler')
-  )
-}