@tanstack/angular-table 9.0.0-alpha.1 → 9.0.0-alpha.11

package/dist/fesm2022/tanstack-angular-table.mjs

@@ -1,308 +1,1439 @@
 import * as i0 from '@angular/core';
-import { untracked, computed, inject, Injector, ComponentRef, ChangeDetectorRef, EmbeddedViewRef, TemplateRef, ViewContainerRef, Directive, Inject, Input, InjectionToken, signal } from '@angular/core';
-import { createTable } from '@tanstack/table-core';
+import { InjectionToken, input, inject, Directive, reflectComponentType, TemplateRef, Type, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, runInInjectionContext, computed, effect, untracked, Injector, ViewContainerRef, DestroyRef, isSignal, signal, assertInInjectionContext } from '@angular/core';
+import { getMemoFnMeta, $internalMemoFnMeta, constructTable, createColumnHelper } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
+import { injectStore } from '@tanstack/angular-store';
 
 /**
- * Implementation from @tanstack/angular-query
- * {@link https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/util/lazy-init/lazy-init.ts}
+ * Injection token that provides access to the current {@link AngularTable} instance.
+ *
+ * This token is provided by the {@link TanStackTable} directive.
  */
-function lazyInit(initializer) {
-    let object = null;
-    const initializeObject = () => {
-        if (!object) {
-            object = untracked(() => initializer());
+const TanStackTableToken = new InjectionToken('[TanStack Table] Table Context');
+/**
+ * Provides a TanStack Table instance (`AngularTable`) in Angular DI.
+ *
+ * The table can be injected by:
+ * - any descendant of an element using `[tanStackTable]="..."`
+ * - any component instantiated by `*flexRender` when the render props contains `table`
+ *
+ * @example
+ * ```html
+ * <div [tanStackTable]="table">
+ *   <app-pagination />
+ * </div>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-pagination',
+ *   template: `
+ *     <button (click)="prev()" [disabled]="!table().getCanPreviousPage()">Prev</button>
+ *     <button (click)="next()" [disabled]="!table().getCanNextPage()">Next</button>
+ *   `,
+ * })
+ * export class PaginationComponent {
+ *   readonly table = injectTableContext()
+ *
+ *   prev() {
+ *     this.table().previousPage()
+ *   }
+ *   next() {
+ *     this.table().nextPage()
+ *   }
+ * }
+ * ```
+ */
+class TanStackTable {
+    /**
+     * The current TanStack Table instance.
+     *
+     * Provided as a required signal input so DI consumers always read the latest value.
+     */
+    table = input.required({ ...(ngDevMode ? { debugName: "table" } : {}), alias: 'tanStackTable' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TanStackTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TanStackTable, isStandalone: true, selector: "[tanStackTable]", inputs: { table: { classPropertyName: "table", publicName: "tanStackTable", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: TanStackTableToken,
+                useFactory: () => inject(TanStackTable).table,
+            },
+        ], exportAs: ["table"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TanStackTable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tanStackTable]',
+                    exportAs: 'table',
+                    providers: [
+                        {
+                            provide: TanStackTableToken,
+                            useFactory: () => inject(TanStackTable).table,
+                        },
+                    ],
+                }]
+        }], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "tanStackTable", required: true }] }] } });
+/**
+ * Injects the current TanStack Table instance signal.
+ *
+ * Available when:
+ * - there is a nearest `[tanStackTable]` directive in the DI tree, or
+ * - the caller is rendered via `*flexRender` with render props containing `table`
+ */
+function injectTableContext() {
+    return inject(TanStackTableToken);
+}
+
+/**
+ * Injection token that provides access to the current cell.
+ *
+ * This token is provided by the {@link TanStackTableCell} directive.
+ */
+const TanStackTableCellToken = new InjectionToken('[TanStack Table] CellContext');
+/**
+ * Provides a TanStack Table `Cell` instance in Angular DI.
+ *
+ * The cell can be injected by:
+ * - any descendant of an element using `[tanStackTableCell]="..."`
+ * - any component instantiated by `*flexRender` when the render props contains `cell`
+ *
+ * @example
+ * Inject from the nearest `[tanStackTableCell]`:
+ * ```html
+ * <td [tanStackTableCell]="cell">
+ *   <app-cell-actions />
+ * </td>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-cell-actions',
+ *   template: `{{ cell().id }}`,
+ * })
+ * export class CellActionsComponent {
+ *   readonly cell = injectTableCellContext()
+ * }
+ * ```
+ *
+ * @example
+ * Inject inside a component rendered via `flexRender`:
+ * ```ts
+ * @Component({
+ *   selector: 'app-price-cell',
+ *   template: `{{ cell().getValue() }}`,
+ * })
+ * export class PriceCellComponent {
+ *   readonly cell = injectTableCellContext()
+ * }
+ * ```
+ */
+class TanStackTableCell {
+    /**
+     * The current TanStack Table cell.
+     *
+     * Provided as a required signal input so DI consumers always read the latest value.
+     */
+    cell = input.required({ ...(ngDevMode ? { debugName: "cell" } : {}), alias: 'tanStackTableCell' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TanStackTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TanStackTableCell, isStandalone: true, selector: "[tanStackTableCell]", inputs: { cell: { classPropertyName: "cell", publicName: "tanStackTableCell", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: TanStackTableCellToken,
+                useFactory: () => inject(TanStackTableCell).cell,
+            },
+        ], exportAs: ["cell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TanStackTableCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tanStackTableCell]',
+                    exportAs: 'cell',
+                    providers: [
+                        {
+                            provide: TanStackTableCellToken,
+                            useFactory: () => inject(TanStackTableCell).cell,
+                        },
+                    ],
+                }]
+        }], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "tanStackTableCell", required: true }] }] } });
+/**
+ * Injects the current TanStack Table cell signal.
+ *
+ * Available when:
+ * - there is a nearest `[tanStackTableCell]` directive in the DI tree, or
+ * - the caller is rendered via `*flexRender` with render props containing `cell`
+ */
+function injectTableCellContext() {
+    return inject(TanStackTableCellToken);
+}
+
+/**
+ * Injection token that provides access to the current header.
+ *
+ * This token is provided by the {@link TanStackTableHeader} directive.
+ */
+const TanStackTableHeaderToken = new InjectionToken('[TanStack Table] HeaderContext');
+/**
+ * Provides a TanStack Table `Header` instance in Angular DI.
+ *
+ * The header can be injected by:
+ * - any descendant of an element using `[tanStackTableHeader]="..."`
+ * - any component instantiated by `*flexRender` when the render props contains `header`
+ *
+ * @example
+ * ```html
+ * <th [tanStackTableHeader]="header">
+ *   <app-sort-indicator />
+ * </th>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-sort-indicator',
+ *   template: `
+ *     <button (click)="toggle()">
+ *       {{ header().column.id }}
+ *     </button>
+ *   `,
+ * })
+ * export class SortIndicatorComponent {
+ *   readonly header = injectTableHeaderContext()
+ *
+ *   toggle() {
+ *     this.header().column.toggleSorting()
+ *   }
+ * }
+ * ```
+ */
+class TanStackTableHeader {
+    /**
+     * The current TanStack Table header.
+     *
+     * Provided as a required signal input so DI consumers always read the latest value.
+     */
+    header = input.required({ ...(ngDevMode ? { debugName: "header" } : {}), alias: 'tanStackTableHeader' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TanStackTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TanStackTableHeader, isStandalone: true, selector: "[tanStackTableHeader]", inputs: { header: { classPropertyName: "header", publicName: "tanStackTableHeader", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: TanStackTableHeaderToken,
+                useFactory: () => inject(TanStackTableHeader).header,
+            },
+        ], exportAs: ["header"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TanStackTableHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tanStackTableHeader]',
+                    exportAs: 'header',
+                    providers: [
+                        {
+                            provide: TanStackTableHeaderToken,
+                            useFactory: () => inject(TanStackTableHeader).header,
+                        },
+                    ],
+                }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "tanStackTableHeader", required: true }] }] } });
+/**
+ * Injects the current TanStack Table header signal.
+ *
+ * Available when:
+ * - there is a nearest `[tanStackTableHeader]` directive in the DI tree, or
+ * - the caller is rendered via `*flexRender` with render props containing `header`
+ */
+function injectTableHeaderContext() {
+    return inject(TanStackTableHeaderToken);
+}
+
+const FlexRenderComponentProps = new InjectionToken('[@tanstack/angular-table] Flex render component context props');
+/**
+ * Inject the flex render context props.
+ *
+ * Can be used in components rendered via FlexRender directives.
+ */
+function injectFlexRenderContext() {
+    return inject(FlexRenderComponentProps);
+}
+
+/**
+ * Flags used to manage and optimize the rendering lifecycle of the content of the cell
+ * while using {@link FlexViewRenderer}.
+ */
+const FlexRenderFlags = {
+    /**
+     * Indicates that the view is being created for the first time or will be cleared during the next update phase.
+     * This is the initial state and will transition after the first ngDoCheck.
+     */
+    ViewFirstRender: 1 << 0,
+    /**
+     * Indicates the `content` property has been modified or the view requires a complete re-render.
+     * When this flag is enabled, the view will be cleared and recreated from scratch.
+     */
+    ContentChanged: 1 << 1,
+    /**
+     * Indicates that the `props` property reference has changed.
+     * When this flag is enabled, the view context is updated based on the type of the content.
+     *
+     * For Component view, inputs will be updated and view will be marked as dirty.
+     * For TemplateRef and primitive values, view will be marked as dirty
+     */
+    PropsReferenceChanged: 1 << 2,
+    /**
+     * Indicates that the current rendered view needs to be checked for changes.
+     * This will be set to true when `content(props)` result has changed or during
+     * forced update
+     */
+    Dirty: 1 << 3,
+    /**
+     * Indicates that the first render effect has been checked at least one time.
+     */
+    RenderEffectChecked: 1 << 4,
+};
+
+/**
+ * Helper function to create a {@link FlexRenderComponent} instance, with better type-safety.
+ *
+ * @example
+ * ```ts
+ * import {flexRenderComponent} from '@tanstack/angular-table'
+ * import {inputBinding, outputBinding} from '@angular/core';
+ *
+ * const columns = [
+ *   {
+ *     cell: ({ row }) => {
+ *        return flexRenderComponent(MyComponent, {
+ *          inputs: { value: mySignalValue() },
+ *          outputs: { valueChange: (val) => {} }
+ *          // or using angular native createComponent#binding api
+ *          bindings: [
+ *            inputBinding('value', mySignalValue),
+ *            outputBinding('valueChange', value => {
+ *              console.log("my value changed to", value)
+ *            })
+ *          ]
+ *        })
+ *     },
+ *   },
+ * ]
+ * ```
+ */
+function flexRenderComponent(component, options) {
+    const { inputs, injector, outputs, directives, bindings } = options ?? {};
+    return new FlexRenderComponentInstance(component, inputs, injector, outputs, directives, bindings);
+}
+/**
+ * Wrapper class for a component that will be used as content for {@link FlexRenderDirective}
+ *
+ * Prefer {@link flexRenderComponent} helper for better type-safety
+ */
+class FlexRenderComponentInstance {
+    component;
+    inputs;
+    injector;
+    outputs;
+    directives;
+    bindings;
+    mirror;
+    allowedInputNames = [];
+    allowedOutputNames = [];
+    constructor(component, inputs, injector, outputs, directives, bindings) {
+        this.component = component;
+        this.inputs = inputs;
+        this.injector = injector;
+        this.outputs = outputs;
+        this.directives = directives;
+        this.bindings = bindings;
+        const mirror = reflectComponentType(component);
+        if (!mirror) {
+            throw new Error(`[@tanstack-table/angular] The provided symbol is not a component`);
         }
-    };
-    queueMicrotask(() => initializeObject());
-    const table = () => { };
-    return new Proxy(table, {
-        apply(target, thisArg, argArray) {
-            initializeObject();
-            if (typeof object === 'function') {
-                return Reflect.apply(object, thisArg, argArray);
-            }
-            return Reflect.apply(target, thisArg, argArray);
-        },
-        get(_, prop, receiver) {
-            initializeObject();
-            return Reflect.get(object, prop, receiver);
-        },
-        has(_, prop) {
-            initializeObject();
-            return Reflect.has(object, prop);
-        },
-        ownKeys() {
-            initializeObject();
-            return Reflect.ownKeys(object);
-        },
-        getOwnPropertyDescriptor() {
-            return {
-                enumerable: true,
-                configurable: true,
-            };
-        },
-    });
+        this.mirror = mirror;
+        for (const input of this.mirror.inputs) {
+            this.allowedInputNames.push(input.propName);
+        }
+        for (const output of this.mirror.outputs) {
+            this.allowedOutputNames.push(output.propName);
+        }
+    }
 }
 
-function proxifyTable(tableSignal) {
-    const internalState = tableSignal;
-    return new Proxy(internalState, {
-        apply() {
-            return tableSignal();
-        },
-        get(target, property) {
-            if (target[property]) {
-                return target[property];
+function mapToFlexRenderTypedContent(content) {
+    if (content === null || content === undefined) {
+        return { kind: 'null' };
+    }
+    if (typeof content === 'string' || typeof content === 'number') {
+        return { kind: 'primitive', content };
+    }
+    if (content instanceof FlexRenderComponentInstance) {
+        return { kind: 'flexRenderComponent', content };
+    }
+    else if (content instanceof TemplateRef) {
+        return { kind: 'templateRef', content };
+    }
+    else if (content instanceof Type) {
+        return { kind: 'component', content };
+    }
+    else {
+        return { kind: 'primitive', content };
+    }
+}
+class FlexRenderView {
+    view;
+    #previousContent;
+    #content;
+    constructor(initialContent, view) {
+        this.#content = initialContent;
+        this.view = view;
+    }
+    get previousContent() {
+        return this.#previousContent ?? { kind: 'null' };
+    }
+    get content() {
+        return this.#content;
+    }
+    set content(content) {
+        this.#previousContent = this.#content;
+        this.#content = content;
+    }
+}
+class FlexRenderTemplateView extends FlexRenderView {
+    constructor(initialContent, view) {
+        super(initialContent, view);
+    }
+    updateProps(props) {
+        this.view.markForCheck();
+    }
+    dirtyCheck() {
+        // Basically a no-op. When the view is created via EmbeddedViewRef, we don't need to do any manual update
+        // since this type of content has a proxy as a context, then every time the root component is checked for changes,
+        // the property getter will be re-evaluated.
+        //
+        // If in a future we need to manually mark the view as dirty, just uncomment next line
+        // this.view.markForCheck()
+    }
+    unmount() {
+        this.view.destroy();
+    }
+    onDestroy(callback) {
+        this.view.onDestroy(callback);
+    }
+}
+class FlexRenderComponentView extends FlexRenderView {
+    constructor(initialContent, view) {
+        super(initialContent, view);
+    }
+    updateProps(props) {
+        switch (this.content.kind) {
+            case 'component': {
+                this.view.setInputs(props);
+                break;
+            }
+            case 'flexRenderComponent': {
+                // No-op. When FlexRenderFlags.PropsReferenceChanged is set,
+                // FlexRenderComponent will be updated into `dirtyCheck`.
+                break;
             }
-            const table = untracked(tableSignal);
-            /**
-             * Attempt to convert all accessors into computed ones,
-             * excluding handlers as they do not retain any reactive value
-             */
-            if (property.startsWith('get') &&
-                !property.endsWith('Handler') &&
-                !property.endsWith('Model')) {
-                const maybeFn = table[property];
-                if (typeof maybeFn === 'function') {
-                    Object.defineProperty(target, property, {
-                        value: toComputed(tableSignal, maybeFn),
-                        configurable: true,
-                        enumerable: true,
-                    });
-                    return target[property];
+        }
+    }
+    dirtyCheck() {
+        switch (this.content.kind) {
+            case 'component': {
+                // Component context is currently valuated with the cell context. Since it's reference
+                // shouldn't change, we force mark the component as dirty in order to re-evaluate function invocation in view.
+                // NOTE: this should behave like having a component with ChangeDetectionStrategy.Default
+                this.view.markAsDirty();
+                break;
+            }
+            case 'flexRenderComponent': {
+                // Given context instance will always have a different reference than the previous one,
+                // so instead of recreating the entire view, we will only update the current view
+                if (this.view.eqType(this.content.content)) {
+                    this.view.update(this.content.content);
                 }
+                this.view.markAsDirty();
+                break;
             }
-            // @ts-expect-error
-            return (target[property] = table[property]);
-        },
-        has(_, prop) {
-            return !!untracked(tableSignal)[prop];
-        },
-        ownKeys() {
-            return Reflect.ownKeys(untracked(tableSignal));
-        },
-        getOwnPropertyDescriptor() {
-            return {
-                enumerable: true,
-                configurable: true,
-            };
-        },
-    });
+        }
+    }
+    unmount() {
+        this.view.componentRef.destroy();
+    }
+    onDestroy(callback) {
+        this.view.componentRef.onDestroy(callback);
+    }
 }
-/**
- * Here we'll handle all type of accessors:
- * - 0 argument -> e.g. table.getCanNextPage())
- * - 0~1 arguments -> e.g. table.getIsSomeRowsPinned(position?)
- * - 1 required argument -> e.g. table.getColumn(columnId)
- * - 1+ argument -> e.g. table.getRow(id, searchAll?)
- *
- * Since we are not able to detect automatically the accessors parameters,
- * we'll wrap all accessors into a cached function wrapping a computed
- * that return it's value based on the given parameters
- */
-function toComputed(signal, fn) {
-    const hasArgs = fn.length > 0;
-    if (!hasArgs) {
-        return computed(() => {
-            void signal();
-            return fn();
+
+class FlexRenderComponentFactory {
+    #viewContainerRef;
+    constructor(viewContainerRef) {
+        this.#viewContainerRef = viewContainerRef;
+    }
+    createComponent(flexRenderComponent, componentInjector) {
+        const componentRef = this.#viewContainerRef.createComponent(flexRenderComponent.component, {
+            injector: componentInjector,
+            directives: flexRenderComponent.directives,
+            bindings: flexRenderComponent.bindings ?? [],
         });
+        const view = new FlexRenderComponentRef(componentRef, flexRenderComponent, componentInjector);
+        const { inputs, outputs } = flexRenderComponent;
+        if (inputs)
+            view.setInputs(inputs);
+        if (outputs)
+            view.setOutputs(outputs);
+        return view;
     }
-    const computedCache = {};
-    return (...argsArray) => {
-        const serializedArgs = serializeArgs(...argsArray);
-        if (computedCache.hasOwnProperty(serializedArgs)) {
-            return computedCache[serializedArgs]?.();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FlexRenderComponentFactory, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FlexRenderComponentFactory });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FlexRenderComponentFactory, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+class FlexRenderComponentRef {
+    componentRef;
+    componentInjector;
+    #keyValueDiffersFactory;
+    #componentData;
+    #inputValueDiffer;
+    #outputRegistry;
+    constructor(componentRef, componentData, componentInjector) {
+        this.componentRef = componentRef;
+        this.componentInjector = componentInjector;
+        this.#componentData = componentData;
+        this.#keyValueDiffersFactory = componentInjector.get(KeyValueDiffers);
+        this.#outputRegistry = new FlexRenderComponentOutputManager(this.#keyValueDiffersFactory, this.outputs);
+        this.#inputValueDiffer = this.#keyValueDiffersFactory
+            .find(this.inputs)
+            .create();
+        this.#inputValueDiffer.diff(this.inputs);
+        this.componentRef.onDestroy(() => this.#outputRegistry.unsubscribeAll());
+    }
+    get component() {
+        return this.#componentData.component;
+    }
+    get inputs() {
+        return this.#componentData.inputs ?? {};
+    }
+    get outputs() {
+        return this.#componentData.outputs ?? {};
+    }
+    /**
+     * Get component input and output diff by the given item
+     */
+    diff(item) {
+        return {
+            inputDiff: this.#inputValueDiffer.diff(item.inputs ?? {}),
+            outputDiff: this.#outputRegistry.diff(item.outputs ?? {}),
+        };
+    }
+    /**
+     *
+     * @param compare Whether the current ref component instance is the same as the given one
+     */
+    eqType(compare) {
+        return compare.component === this.component;
+    }
+    /**
+     * Tries to update current component refs input by the new given content component.
+     */
+    update(content) {
+        const eq = this.eqType(content);
+        if (!eq)
+            return;
+        const { inputDiff, outputDiff } = this.diff(content);
+        if (inputDiff) {
+            inputDiff.forEachAddedItem((item) => this.setInput(item.key, item.currentValue));
+            inputDiff.forEachChangedItem((item) => this.setInput(item.key, item.currentValue));
+            inputDiff.forEachRemovedItem((item) => this.setInput(item.key, undefined));
         }
-        const computedSignal = computed(() => {
-            void signal();
-            return fn(...argsArray);
-        });
-        computedCache[serializedArgs] = computedSignal;
-        return computedSignal();
-    };
+        if (outputDiff) {
+            outputDiff.forEachAddedItem((item) => {
+                this.setOutput(item.key, item.currentValue);
+            });
+            outputDiff.forEachChangedItem((item) => {
+                if (item.currentValue) {
+                    this.#outputRegistry.setListener(item.key, item.currentValue);
+                }
+                else {
+                    this.#outputRegistry.unsubscribe(item.key);
+                }
+            });
+            outputDiff.forEachRemovedItem((item) => {
+                this.#outputRegistry.unsubscribe(item.key);
+            });
+        }
+        this.#componentData = content;
+    }
+    markAsDirty() {
+        this.componentRef.injector.get(ChangeDetectorRef).markForCheck();
+    }
+    setInputs(inputs) {
+        for (const prop in inputs) {
+            this.setInput(prop, inputs[prop]);
+        }
+    }
+    setInput(key, value) {
+        if (this.#componentData.allowedInputNames.includes(key)) {
+            this.componentRef.setInput(key, value);
+        }
+    }
+    setOutputs(outputs) {
+        this.#outputRegistry.unsubscribeAll();
+        for (const prop in outputs) {
+            this.setOutput(prop, outputs[prop]);
+        }
+    }
+    setOutput(outputName, emit) {
+        if (!this.#componentData.allowedOutputNames.includes(outputName))
+            return;
+        if (!emit) {
+            this.#outputRegistry.unsubscribe(outputName);
+            return;
+        }
+        const hasListener = this.#outputRegistry.hasListener(outputName);
+        this.#outputRegistry.setListener(outputName, emit);
+        if (hasListener) {
+            return;
+        }
+        const instance = this.componentRef.instance;
+        const output = instance[outputName];
+        if (output && output instanceof OutputEmitterRef) {
+            output.subscribe((value) => {
+                this.#outputRegistry.getListener(outputName)?.(value);
+            });
+        }
+    }
 }
-function serializeArgs(...args) {
-    return JSON.stringify(args);
+class FlexRenderComponentOutputManager {
+    #outputSubscribers = {};
+    #outputListeners = {};
+    #valueDiffer;
+    constructor(keyValueDiffers, initialOutputs) {
+        this.#valueDiffer = keyValueDiffers.find(initialOutputs).create();
+        if (initialOutputs) {
+            this.#valueDiffer.diff(initialOutputs);
+        }
+    }
+    hasListener(outputName) {
+        return outputName in this.#outputListeners;
+    }
+    setListener(outputName, callback) {
+        this.#outputListeners[outputName] = callback;
+    }
+    getListener(outputName) {
+        return this.#outputListeners[outputName];
+    }
+    unsubscribeAll() {
+        for (const prop in this.#outputSubscribers) {
+            this.unsubscribe(prop);
+        }
+    }
+    unsubscribe(outputName) {
+        if (outputName in this.#outputSubscribers) {
+            this.#outputSubscribers[outputName]?.unsubscribe();
+            delete this.#outputSubscribers[outputName];
+            delete this.#outputListeners[outputName];
+        }
+    }
+    diff(outputs) {
+        return this.#valueDiffer.diff(outputs ?? {});
+    }
 }
 
-class FlexRenderDirective {
-    viewContainerRef;
-    templateRef;
-    content = undefined;
-    props = {};
-    injector = inject(Injector);
-    constructor(viewContainerRef, templateRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.templateRef = templateRef;
-    }
-    ref = null;
-    ngOnInit() {
-        this.ref = this.render();
-    }
-    ngDoCheck() {
-        if (this.ref instanceof ComponentRef) {
-            this.ref.injector.get(ChangeDetectorRef).markForCheck();
-        }
-        else if (this.ref instanceof EmbeddedViewRef) {
-            this.ref.markForCheck();
-        }
-    }
-    render() {
-        this.viewContainerRef.clear();
-        const { content, props } = this;
-        if (!this.content) {
-            return null;
+/**
+ * Internal view renderer used by Angular TanStack Table to implement `flexRender` directives.
+ *
+ * @internal Use FlexRender directives instead.
+ */
+class FlexViewRenderer {
+    #renderFlags = FlexRenderFlags.ViewFirstRender;
+    #renderView = null;
+    #currentRenderEffectRef = null;
+    #content;
+    #props;
+    #injector;
+    #viewContainerRef;
+    #templateRef;
+    #flexRenderComponentFactory;
+    #getLatestContentValue = () => {
+        const content = this.#content();
+        const props = this.#props();
+        return typeof content !== 'function'
+            ? content
+            : runInInjectionContext(this.#injector(), () => content(props));
+    };
+    #latestContent = computed(() => this.#getLatestContentValue(), ...(ngDevMode ? [{ debugName: "#latestContent" }] : []));
+    #getContentValue = computed(() => {
+        const latestContent = this.#latestContent();
+        return mapToFlexRenderTypedContent(latestContent);
+    }, ...(ngDevMode ? [{ debugName: "#getContentValue" }] : []));
+    constructor(options) {
+        this.#content = options.content;
+        this.#props = options.props;
+        this.#injector = options.injector;
+        this.#templateRef = options.templateRef;
+        this.#viewContainerRef = options.viewContainerRef;
+        this.#flexRenderComponentFactory = new FlexRenderComponentFactory(this.#viewContainerRef);
+    }
+    mount() {
+        let previousContent;
+        let previousProps;
+        return effect(() => {
+            const props = this.#props();
+            const content = this.#content();
+            if (!(this.#renderFlags & FlexRenderFlags.ViewFirstRender)) {
+                if (previousContent !== content) {
+                    this.#renderFlags |= FlexRenderFlags.ContentChanged;
+                }
+                if (previousProps !== props) {
+                    this.#renderFlags |= FlexRenderFlags.PropsReferenceChanged;
+                }
+            }
+            untracked(() => this.#update());
+            if (FlexRenderFlags.ViewFirstRender & this.#renderFlags) {
+                this.#renderFlags &= ~FlexRenderFlags.ViewFirstRender;
+            }
+            previousContent = content;
+            previousProps = props;
+        });
+    }
+    destroy() {
+        if (this.#currentRenderEffectRef) {
+            this.#currentRenderEffectRef.destroy();
+            this.#currentRenderEffectRef = null;
+        }
+        if (this.#renderView) {
+            this.#renderView.unmount();
+            this.#renderView = null;
+        }
+    }
+    #update() {
+        if (this.#renderFlags &
+            (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)) {
+            this.#render();
+            return;
         }
-        if (typeof content === 'string' || typeof content === 'number') {
-            return this.renderStringContent();
+        if (this.#renderFlags & FlexRenderFlags.PropsReferenceChanged) {
+            if (this.#renderView)
+                this.#renderView.updateProps(this.#props());
+            this.#renderFlags &= ~FlexRenderFlags.PropsReferenceChanged;
         }
-        if (typeof content === 'function') {
-            return this.renderContent(content(props));
+        if (this.#renderFlags & FlexRenderFlags.Dirty) {
+            if (this.#renderView)
+                this.#renderView.dirtyCheck();
+            this.#renderFlags &= ~FlexRenderFlags.Dirty;
         }
-        return null;
     }
-    renderContent(content) {
-        if (typeof content === 'string' || typeof content === 'number') {
-            return this.renderStringContent();
+    #render() {
+        // When the view is recreated from scratch (content change or first render),
+        // we have to destroy the current effect listener since it will be recreated
+        // skipping the first call (FlexRenderFlags.RenderEffectChecked)
+        if (this.#shouldRecreateEntireView() && this.#currentRenderEffectRef) {
+            this.#currentRenderEffectRef.destroy();
+            this.#currentRenderEffectRef = null;
+            this.#renderFlags &= ~FlexRenderFlags.RenderEffectChecked;
         }
-        if (content instanceof TemplateRef) {
-            return this.viewContainerRef.createEmbeddedView(content, this.getTemplateRefContext());
+        this.#viewContainerRef.clear();
+        if (this.#renderView) {
+            this.#renderView.unmount();
+            this.#renderView = null;
         }
-        else if (content instanceof FlexRenderComponent) {
-            return this.renderComponent(content);
+        this.#renderFlags =
+            (this.#renderFlags & FlexRenderFlags.ViewFirstRender) |
+                (this.#renderFlags & FlexRenderFlags.RenderEffectChecked);
+        const resolvedContent = this.#getContentValue();
+        this.#renderView = this.#renderViewByContent(resolvedContent);
+        // If the content is a function `content(props)`, we initialize an effect
+        // to react to changes. If the current fn uses signals, we will set the DirtySignal flag
+        // to re-schedule the component updates
+        if (!this.#currentRenderEffectRef &&
+            typeof untracked(this.#content) === 'function') {
+            this.#currentRenderEffectRef = effect(() => {
+                this.#latestContent();
+                if (!(this.#renderFlags & FlexRenderFlags.RenderEffectChecked)) {
+                    this.#renderFlags |= FlexRenderFlags.RenderEffectChecked;
+                    return;
+                }
+                this.#renderFlags |= FlexRenderFlags.Dirty;
+                this.#doCheck();
+            }, { ...(ngDevMode ? { debugName: "#currentRenderEffectRef" } : {}), injector: this.#viewContainerRef.injector });
+        }
+    }
+    #shouldRecreateEntireView() {
+        return (this.#renderFlags &
+            FlexRenderFlags.ContentChanged &
+            FlexRenderFlags.ViewFirstRender);
+    }
+    #doCheck() {
+        const latestContent = this.#getContentValue();
+        if (latestContent.kind === 'null' || !this.#renderView) {
+            this.#renderFlags |= FlexRenderFlags.ContentChanged;
+        }
+        else {
+            this.#renderView.content = latestContent;
+            const { kind: previousKind } = this.#renderView.previousContent;
+            if (latestContent.kind !== previousKind) {
+                this.#renderFlags |= FlexRenderFlags.ContentChanged;
+            }
+        }
+        this.#update();
+    }
+    #renderViewByContent(content) {
+        if (content.kind === 'primitive') {
+            return this.#renderStringContent(content);
+        }
+        else if (content.kind === 'templateRef') {
+            return this.#renderTemplateRefContent(content);
+        }
+        else if (content.kind === 'flexRenderComponent') {
+            return this.#renderComponent(content);
+        }
+        else if (content.kind === 'component') {
+            return this.#renderCustomComponent(content);
         }
         else {
             return null;
         }
     }
-    renderStringContent() {
+    #renderStringContent(template) {
         const context = () => {
-            return typeof this.content === 'string' ||
-                typeof this.content === 'number'
-                ? this.content
-                : this.content?.(this.props);
+            const content = this.#content();
+            return typeof content === 'string' || typeof content === 'number'
+                ? content
+                : runInInjectionContext(this.#injector(), () => content?.(this.#props()));
         };
-        return this.viewContainerRef.createEmbeddedView(this.templateRef, {
+        const ref = this.#viewContainerRef.createEmbeddedView(this.#templateRef, {
             get $implicit() {
                 return context();
             },
         });
+        return new FlexRenderTemplateView(template, ref);
     }
-    renderComponent(flexRenderComponent) {
-        const { component, inputs, injector } = flexRenderComponent;
-        const getContext = () => this.props;
-        const proxy = new Proxy(this.props, {
-            get: (_, key) => getContext()?.[key],
+    #renderTemplateRefContent(template) {
+        const latestContext = () => this.#props();
+        const view = this.#viewContainerRef.createEmbeddedView(template.content, {
+            get $implicit() {
+                return latestContext();
+            },
+        }, { injector: this.#getInjector() });
+        return new FlexRenderTemplateView(template, view);
+    }
+    #renderComponent(flexRenderComponent) {
+        const { injector } = flexRenderComponent.content;
+        const componentInjector = this.#getInjector(injector);
+        const view = this.#flexRenderComponentFactory.createComponent(flexRenderComponent.content, componentInjector);
+        return new FlexRenderComponentView(flexRenderComponent, view);
+    }
+    #renderCustomComponent(component) {
+        const instance = flexRenderComponent(component.content, {
+            inputs: this.#props(),
         });
-        const componentInjector = Injector.create({
-            parent: injector ?? this.injector,
-            providers: [{ provide: FlexRenderComponentProps, useValue: proxy }],
+        const injector = this.#getInjector(instance.injector);
+        const view = this.#flexRenderComponentFactory.createComponent(instance, injector);
+        return new FlexRenderComponentView(component, view);
+    }
+    #getInjector(parentInjector) {
+        const getContext = () => this.#props();
+        const proxy = new Proxy(this.#props(), {
+            get: (_, key) => getContext()[key],
         });
-        const componentRef = this.viewContainerRef.createComponent(component, {
-            injector: componentInjector,
+        const staticProviders = [];
+        if ('table' in proxy) {
+            staticProviders.push({
+                provide: TanStackTableToken,
+                useValue: () => proxy.table,
+            });
+        }
+        if ('cell' in proxy) {
+            staticProviders.push({
+                provide: TanStackTableCellToken,
+                useValue: () => proxy.cell,
+            });
+        }
+        if ('header' in proxy) {
+            staticProviders.push({
+                provide: TanStackTableHeaderToken,
+                useValue: () => proxy.header,
+            });
+        }
+        return Injector.create({
+            parent: parentInjector ?? this.#injector(),
+            providers: [
+                ...staticProviders,
+                { provide: FlexRenderComponentProps, useValue: proxy },
+            ],
         });
-        for (const prop in inputs) {
-            if (componentRef.instance?.hasOwnProperty(prop)) {
-                componentRef.setInput(prop, inputs[prop]);
-            }
+    }
+}
+
+/**
+ * Simplified directive wrapper of `*flexRender`.
+ *
+ * Use this utility component to render headers, cells, or footers with custom markup.
+ *
+ * Only one prop (`cell`, `header`, or `footer`) may be passed based on the used selector.
+ *
+ * @example
+ * ```html
+ * <td *flexRenderCell="cell; let cell">{{cell}}</td>
+ * <th *flexRenderHeader="header; let header">{{header}}</th>
+ * <th *flexRenderFooter="footer; let footer">{{footer}}</th>
+ * ```
+ *
+ * This replaces calling `*flexRender` directly like this:
+ * ```html
+ * <td *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let cell">{{cell}}</td>
+ * <td *flexRender="header.column.columnDef.header; props: header.getContext(); let header">{{header}}</td>
+ * <td *flexRender="footer.column.columnDef.footer; props: footer.getContext(); let footer">{{footer}}</td>
+ * ```
+ *
+ * Can be imported through {@link FlexRenderCell} or {@link FlexRender} import,
+ * which the latter is preferred.
+ *
+ * @example
+ * ```ts
+ * import {FlexRender} from '@tanstack/angular-table
+ *
+ * @Component({
+ *  // ...
+ *  imports: [
+ *    FlexRender
+ *  ]
+ * })
+ * ```
+ */
+class FlexRenderCell {
+    cell = input(undefined, { ...(ngDevMode ? { debugName: "cell" } : {}), alias: 'flexRenderCell' });
+    header = input(undefined, { ...(ngDevMode ? { debugName: "header" } : {}), alias: 'flexRenderHeader' });
+    footer = input(undefined, { ...(ngDevMode ? { debugName: "footer" } : {}), alias: 'flexRenderFooter' });
+    #renderData = computed(() => {
+        const cell = this.cell();
+        const header = this.header();
+        const footer = this.footer();
+        if (cell) {
+            return [cell.column.columnDef.cell, cell.getContext()];
         }
-        return componentRef;
+        if (header) {
+            return [header.column.columnDef.header, header.getContext()];
+        }
+        if (footer) {
+            return [footer.column.columnDef.footer, footer.getContext()];
+        }
+        return [null, null];
+    }, { ...(ngDevMode ? { debugName: "#renderData" } : {}), equal: (a, b) => {
+            return a[0] === b[0] && a[1] === b[1];
+        } });
+    #injector = inject(Injector);
+    #templateRef = inject(TemplateRef);
+    #viewContainerRef = inject(ViewContainerRef);
+    constructor() {
+        const content = computed(() => this.#renderData()[0], ...(ngDevMode ? [{ debugName: "content" }] : []));
+        const props = computed(() => this.#renderData()[1], ...(ngDevMode ? [{ debugName: "props" }] : []));
+        const renderer = new FlexViewRenderer({
+            content: content,
+            props: props,
+            injector: () => this.#injector,
+            templateRef: this.#templateRef,
+            viewContainerRef: this.#viewContainerRef,
+        });
+        renderer.mount();
+        inject(DestroyRef).onDestroy(() => {
+            renderer.destroy();
+        });
     }
-    getTemplateRefContext() {
-        const getContext = () => this.props;
-        return {
-            get $implicit() {
-                return getContext();
-            },
-        };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FlexRenderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: FlexRenderCell, isStandalone: true, selector: "ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]", inputs: { cell: { classPropertyName: "cell", publicName: "flexRenderCell", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "flexRenderHeader", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "flexRenderFooter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FlexRenderCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRenderCell", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRenderHeader", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRenderFooter", required: false }] }] } });
+
+/**
+ * Use this utility directive to render headers, cells, or footers with custom markup.
+ *
+ * Note: If you are rendering cell, header, or footer without custom context or other props,
+ * you can use the {@link FlexRenderCell} directive as shorthand instead .
+ *
+ * @example
+ * ```ts
+ * import {FlexRender} from '@tanstack/angular-table';
+ *
+ * @Component({
+ *   imports: [FlexRender],
+ *   template: `
+ *      <td
+ *        *flexRender="
+ *          cell.column.columnDef.cell;
+ *          props: cell.getContext();
+ *          let cell"
+ *      >
+ *        {{cell}}
+ *      </td>
+ *
+ *      <th
+ *        *flexRender="
+ *          header.column.columnDef.header;
+ *          props: header.getContext();
+ *          let header"
+ *        >
+ *        {{header}}
+ *      </td>
+ *
+ *      <td
+ *        *flexRender="
+ *          footer.column.columnDef.footer;
+ *          props: footer.getContext();
+ *          let footer"
+ *      >
+ *        {{footer}}
+ *      </td>
+ *   `,
+ * })
+ * class App {
+ * }
+ * ```
+ *
+ * Can be imported through {@link FlexRenderDirective} or {@link FlexRender} import,
+ * which the latter is preferred.
+ */
+class FlexRenderDirective {
+    content = input(undefined, { ...(ngDevMode ? { debugName: "content" } : {}), alias: 'flexRender' });
+    props = input({}, { ...(ngDevMode ? { debugName: "props" } : {}), alias: 'flexRenderProps' });
+    injector = input(inject(Injector), { ...(ngDevMode ? { debugName: "injector" } : {}), alias: 'flexRenderInjector' });
+    #viewContainerRef = inject(ViewContainerRef);
+    #templateRef = inject(TemplateRef);
+    constructor() {
+        const renderer = new FlexViewRenderer({
+            content: this.content,
+            props: this.props,
+            injector: this.injector,
+            templateRef: this.#templateRef,
+            viewContainerRef: this.#viewContainerRef,
+        });
+        renderer.mount();
+        inject(DestroyRef).onDestroy(() => {
+            renderer.destroy();
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: FlexRenderDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: FlexRenderDirective, isStandalone: true, selector: "[flexRender]", inputs: { content: ["flexRender", "content"], props: ["flexRenderProps", "props"], injector: ["flexRenderInjector", "injector"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FlexRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: FlexRenderDirective, isStandalone: true, selector: "ng-template[flexRender]", inputs: { content: { classPropertyName: "content", publicName: "flexRender", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "flexRenderProps", isSignal: true, isRequired: false, transformFunction: null }, injector: { classPropertyName: "injector", publicName: "flexRenderInjector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: FlexRenderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FlexRenderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[flexRender]',
-                    standalone: true,
+                    selector: 'ng-template[flexRender]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef, decorators: [{
-                    type: Inject,
-                    args: [ViewContainerRef]
-                }] }, { type: i0.TemplateRef, decorators: [{
-                    type: Inject,
-                    args: [TemplateRef]
-                }] }], propDecorators: { content: [{
-                type: Input,
-                args: [{ required: true, alias: 'flexRender' }]
-            }], props: [{
-                type: Input,
-                args: [{ required: true, alias: 'flexRenderProps' }]
-            }], injector: [{
-                type: Input,
-                args: [{ required: false, alias: 'flexRenderInjector' }]
-            }] } });
-class FlexRenderComponent {
-    component;
-    inputs;
-    injector;
-    constructor(component, inputs = {}, injector) {
-        this.component = component;
-        this.inputs = inputs;
-        this.injector = injector;
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRender", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRenderProps", required: false }] }], injector: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexRenderInjector", required: false }] }] } });
+
+const $TABLE_REACTIVE = Symbol('reactive');
+function markReactive(obj) {
+    Object.defineProperty(obj, $TABLE_REACTIVE, { value: true });
+}
+function isReactive(obj) {
+    return Reflect.get(obj, $TABLE_REACTIVE) === true;
+}
+/**
+ * Defines a lazy computed property on an object. The property is initialized
+ * with a getter that computes its value only when accessed for the first time.
+ * After the first access, the computed value is cached, and the getter is
+ * replaced with a direct property assignment for efficiency.
+ *
+ * @internal should be used only internally
+ */
+function defineLazyComputedProperty(notifier, setObjectOptions) {
+    const { originalObject, property, overridePrototype, valueFn } = setObjectOptions;
+    if (overridePrototype) {
+        assignReactivePrototypeAPI(notifier, originalObject, property);
+    }
+    else {
+        Object.defineProperty(originalObject, property, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                const computedValue = toComputed(notifier, valueFn, property);
+                markReactive(computedValue);
+                // Once the property is set the first time, we don't need a getter anymore
+                // since we have a computed / cached fn value
+                Object.defineProperty(originalObject, property, {
+                    value: computedValue,
+                    configurable: true,
+                    enumerable: true,
+                });
+                return computedValue;
+            },
+        });
     }
 }
-const FlexRenderComponentProps = new InjectionToken('[@tanstack/angular-table] Flex render component context props');
-function injectFlexRenderContext() {
-    return inject(FlexRenderComponentProps);
+/**
+ * @description Transform a function into a computed that react to given notifier re-computations
+ *
+ * Here we'll handle all type of accessors:
+ * - 0 argument -> e.g. table.getCanNextPage())
+ * - 0~1 arguments -> e.g. table.getIsSomeRowsPinned(position?)
+ * - 1 required argument -> e.g. table.getColumn(columnId)
+ * - 1+ argument -> e.g. table.getRow(id, searchAll?)
+ *
+ * Since we are not able to detect automatically the accessors parameters,
+ * we'll wrap all accessors into a cached function wrapping a computed
+ * that return it's value based on the given parameters
+ *
+ * @internal should be used only internally
+ */
+function toComputed(notifier, fn, debugName) {
+    const hasArgs = getFnArgsLength(fn) > 0;
+    if (!hasArgs) {
+        const computedFn = computed(() => {
+            void notifier();
+            return fn();
+        }, { ...(ngDevMode ? { debugName: "computedFn" } : {}), debugName });
+        Object.defineProperty(computedFn, 'name', { value: debugName });
+        markReactive(computedFn);
+        return computedFn;
+    }
+    const computedFn = function (...argsArray) {
+        const cacheable = argsArray.length === 0 ||
+            argsArray.every((arg) => {
+                return (arg === null ||
+                    arg === undefined ||
+                    typeof arg === 'string' ||
+                    typeof arg === 'number' ||
+                    typeof arg === 'boolean' ||
+                    typeof arg === 'symbol');
+            });
+        if (!cacheable) {
+            return fn.apply(this, argsArray);
+        }
+        const serializedArgs = serializeArgs(...argsArray);
+        if ((computedFn._reactiveCache ??= {})[serializedArgs]) {
+            return computedFn._reactiveCache[serializedArgs]();
+        }
+        const computedSignal = computed(() => {
+            void notifier();
+            return fn.apply(this, argsArray);
+        }, { ...(ngDevMode ? { debugName: "computedSignal" } : {}), debugName });
+        computedFn._reactiveCache[serializedArgs] = computedSignal;
+        return computedSignal();
+    };
+    Object.defineProperty(computedFn, 'name', { value: debugName });
+    markReactive(computedFn);
+    return computedFn;
+}
+function serializeArgs(...args) {
+    return JSON.stringify(args);
+}
+function getFnArgsLength(fn) {
+    return Math.max(0, getMemoFnMeta(fn)?.originalArgsLength ?? fn.length);
+}
+function assignReactivePrototypeAPI(notifier, prototype, fnName) {
+    if (isReactive(prototype[fnName]))
+        return;
+    const fn = prototype[fnName];
+    const originalArgsLength = getFnArgsLength(fn);
+    if (originalArgsLength <= 1) {
+        Object.defineProperty(prototype, fnName, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                const self = this;
+                // Create a cache in the current prototype to allow the signals
+                // to be garbage collected. Shorthand for a WeakMap implementation
+                self._reactiveCache ??= {};
+                const cached = (self._reactiveCache[`${self.id}${fnName}`] ??= computed(() => {
+                    notifier();
+                    return fn.apply(self);
+                }, {}));
+                markReactive(cached);
+                cached[$internalMemoFnMeta] = {
+                    originalArgsLength,
+                };
+                return cached;
+            },
+        });
+    }
+    else {
+        prototype[fnName] = function (...args) {
+            notifier();
+            return fn.apply(this, args);
+        };
+        markReactive(prototype[fnName]);
+        prototype[fnName][$internalMemoFnMeta] = {
+            originalArgsLength,
+        };
+    }
+}
+function setReactivePropertiesOnObject(notifier, obj, options) {
+    const { skipProperty } = options;
+    if (isReactive(obj)) {
+        return;
+    }
+    markReactive(obj);
+    for (const property in obj) {
+        const value = obj[property];
+        if (isSignal(value) ||
+            typeof value !== 'function' ||
+            skipProperty(property)) {
+            continue;
+        }
+        defineLazyComputedProperty(notifier, {
+            valueFn: value,
+            property,
+            originalObject: obj,
+            overridePrototype: options.overridePrototype,
+        });
+    }
 }
 
-function createAngularTable(options) {
+/**
+ * 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, defaultPropertyFn) => {
+    if (typeof value === 'boolean') {
+        return defaultPropertyFn;
+    }
+    return value ?? defaultPropertyFn;
+};
+function constructAngularReactivityFeature() {
+    return {
+        getDefaultTableOptions(table) {
+            return {
+                reactivity: {
+                    header: true,
+                    column: true,
+                    row: true,
+                    cell: true,
+                },
+            };
+        },
+        constructTableAPIs: (table) => {
+            const rootNotifier = signal(null, ...(ngDevMode ? [{ debugName: "rootNotifier" }] : []));
+            table.setTableNotifier = (notifier) => rootNotifier.set(notifier);
+            table.get = computed(() => rootNotifier()(), { ...(ngDevMode ? { debugName: "get" } : {}), 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,
+            });
+        },
+    };
+}
+const angularReactivityFeature = constructAngularReactivityFeature();
+/**
+ * Default predicate used to skip base/non-reactive properties.
+ */
+function skipBaseProperties(property) {
+    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'));
+}
+
+/**
+ * Implementation from @tanstack/angular-query
+ * {https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/util/lazy-init/lazy-init.ts}
+ */
+function lazyInit(initializer) {
+    let object = null;
+    const initializeObject = () => {
+        if (!object) {
+            object = untracked(() => initializer());
+        }
+    };
+    queueMicrotask(() => initializeObject());
+    const table = () => { };
+    return new Proxy(table, {
+        apply(target, thisArg, argArray) {
+            initializeObject();
+            if (typeof object === 'function') {
+                return Reflect.apply(object, thisArg, argArray);
+            }
+            return Reflect.apply(target, thisArg, argArray);
+        },
+        get(_, prop, receiver) {
+            initializeObject();
+            return Reflect.get(object, prop, receiver);
+        },
+        has(_, prop) {
+            initializeObject();
+            return Reflect.has(object, prop);
+        },
+        ownKeys() {
+            initializeObject();
+            return Reflect.ownKeys(object);
+        },
+        getOwnPropertyDescriptor() {
+            return {
+                enumerable: true,
+                configurable: true,
+            };
+        },
+    });
+}
+
+function injectTable(options, selector = (state) => state) {
+    assertInInjectionContext(injectTable);
+    const injector = inject(Injector);
     return lazyInit(() => {
         const resolvedOptions = {
-            state: {},
-            onStateChange: () => { },
-            renderFallbackValue: null,
             ...options(),
+            _features: {
+                ...options()._features,
+                angularReactivityFeature,
+            },
         };
-        const table = createTable(resolvedOptions);
-        // By default, manage table state here using the table's initial state
-        const state = signal(table.initialState);
-        // Compose table options using computed.
-        // This is to allow `tableSignal` to listen and set table option
+        const table = constructTable(resolvedOptions);
         const updatedOptions = computed(() => {
-            // listen to table state changed
-            const tableState = state();
-            // listen to input options changed
-            const tableOptions = options();
-            return {
+            const tableOptionsValue = options();
+            const result = {
                 ...table.options,
-                ...resolvedOptions,
-                ...tableOptions,
-                state: { ...tableState, ...tableOptions.state },
-                onStateChange: updater => {
-                    const value = updater instanceof Function ? updater(tableState) : updater;
-                    state.set(value);
-                    resolvedOptions.onStateChange?.(updater);
+                ...tableOptionsValue,
+                _features: {
+                    ...tableOptionsValue._features,
+                    angularReactivityFeature,
                 },
             };
-        });
-        // convert table instance to signal for proxify to listen to any table state and options changes
-        const tableSignal = computed(() => {
+            if (tableOptionsValue.state) {
+                result.state = tableOptionsValue.state;
+            }
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "updatedOptions" }] : []));
+        effect((onCleanup) => {
+            const cleanup = table.store.mount();
+            onCleanup(() => cleanup());
+        }, { injector });
+        const tableState = injectStore(table.store, (state) => state, { injector });
+        const tableSignalNotifier = computed(() => {
+            tableState();
             table.setOptions(updatedOptions());
+            untracked(() => table.baseStore.setState((prev) => ({ ...prev })));
             return table;
-        }, {
-            equal: () => false,
+        }, { ...(ngDevMode ? { debugName: "tableSignalNotifier" } : {}), equal: () => false });
+        table.setTableNotifier(tableSignalNotifier);
+        table.Subscribe = function Subscribe(props) {
+            return injectStore(table.store, props.selector, {
+                injector,
+                equal: props.equal,
+            });
+        };
+        Object.defineProperty(table, 'state', {
+            value: injectStore(table.store, selector, { injector }),
         });
-        // proxify Table instance to provide ability for consumer to listen to any table state changes
-        return proxifyTable(tableSignal);
+        return table;
     });
 }
 
+function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
+    function injectTableContext$1() {
+        return injectTableContext();
+    }
+    function injectTableHeaderContext$1() {
+        return injectTableHeaderContext();
+    }
+    function injectTableCellContext$1() {
+        return injectTableCellContext();
+    }
+    function injectFlexRenderHeaderContext() {
+        return injectFlexRenderContext();
+    }
+    function injectFlexRenderCellContext() {
+        return injectFlexRenderContext();
+    }
+    function injectAppTable(tableOptions, selector) {
+        function appCell(cell) {
+            return cell;
+        }
+        function appHeader(header) {
+            return header;
+        }
+        function appFooter(footer) {
+            return footer;
+        }
+        const appTableFeatures = {
+            constructTableAPIs: (table) => {
+                Object.assign(table, tableComponents, { appCell, appHeader, appFooter });
+            },
+            assignCellPrototype(prototype) {
+                Object.assign(prototype, cellComponents);
+            },
+            assignHeaderPrototype(prototype) {
+                Object.assign(prototype, headerComponents);
+            },
+        };
+        return injectTable(() => {
+            const options = {
+                ...defaultTableOptions,
+                ...tableOptions(),
+            };
+            options._features = { ...options._features, appTableFeatures };
+            return options;
+        }, selector);
+    }
+    function createAppColumnHelper() {
+        // The runtime implementation is the same - components are attached at render time
+        // This cast provides the enhanced types for column definitions
+        return createColumnHelper();
+    }
+    return {
+        createAppColumnHelper,
+        injectTableContext: injectTableContext$1,
+        injectTableHeaderContext: injectTableHeaderContext$1,
+        injectTableCellContext: injectTableCellContext$1,
+        injectFlexRenderHeaderContext,
+        injectFlexRenderCellContext,
+        injectAppTable,
+    };
+}
+
+/**
+ * Constant helper to import FlexRender directives.
+ */
+const FlexRender = [FlexRenderDirective, FlexRenderCell];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FlexRenderComponent, FlexRenderDirective, createAngularTable, injectFlexRenderContext };
+export { FlexRender, FlexRenderCell, FlexRenderComponentInstance, FlexRenderDirective, TanStackTable, TanStackTableCell, TanStackTableCellToken, TanStackTableHeader, TanStackTableHeaderToken, TanStackTableToken, angularReactivityFeature, createTableHook, flexRenderComponent, injectFlexRenderContext, injectTable, injectTableCellContext, injectTableContext, injectTableHeaderContext };
 //# sourceMappingURL=tanstack-angular-table.mjs.map