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

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

@@ -0,0 +1,767 @@
+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';
+export * from '@tanstack/table-core';
+
+/**
+ * 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
+ *  ]
+ * })
+ * ```
+ */
+declare class FlexRenderCell<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> {
+    #private;
+    readonly cell: i0.InputSignal<Cell<TFeatures, TData, TValue>>;
+    readonly header: i0.InputSignal<Header<TFeatures, TData, TValue>>;
+    readonly footer: i0.InputSignal<Header<TFeatures, TData, TValue>>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexRenderCell<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FlexRenderCell<any, any, any>, "ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]", never, { "cell": { "alias": "flexRenderCell"; "required": false; "isSignal": true; }; "header": { "alias": "flexRenderHeader"; "required": false; "isSignal": true; }; "footer": { "alias": "flexRenderFooter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CreateComponentOptions = Parameters<typeof createComponent>[1];
+type CreateComponentBindings = CreateComponentOptions['bindings'];
+type CreateComponentDirectives = CreateComponentOptions['directives'];
+interface FlexRenderOptions<TInputs extends Record<string, any>, TOutputs extends Record<string, any>> {
+    /**
+     * Native Angular bindings applied at component creation time via `createComponent`.
+     * Use this option to set inputs, outputs, or two-way bindings at creation time.
+     * Shouldn't be used together with {@link FlexRenderOptions#inputs} or {@link FlexRenderOptions#outputs} option.
+     *
+     * Binding input/outputs at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
+     *
+     * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
+     *
+     * Output binding: {@link https://angular.dev/api/core/outputBinding}
+     *
+     * Input binding: {@link https://angular.dev/api/core/inputBinding}
+     *
+     * @example
+     * ```ts
+     * import {flexRenderComponent} from '@tanstack/angular-table';
+     * flexRenderComponent(MyComponent, {
+     *   bindings: [
+     *     // Will update `value` input every time `mySignalValue` changes
+     *     inputBinding('value', mySignalValue),
+     *     // Set myProperty to 1 when the component is created
+     *     inputBinding('myProperty', () => 1),
+     *     // Callback called every time `valueChange` output emit
+     *     outputBinding('valueChange', value => {
+     *       console.log("my value changed to", value)
+     *     }),
+     *     // Two-way binding between `value` input and `valueChange` output
+     *     // Useful while using `model` inputs.
+     *     twoWayBinding('value', mySignal)
+     *   ]
+     * })
+     * ```
+     */
+    readonly bindings?: Array<Binding>;
+    /**
+     * Directives to apply to the component at creation time.
+     *
+     * Binding directives at creation time: {@link https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation}
+     *
+     * Two-way binding: {@link https://angular.dev/api/core/twoWayBinding}
+     *
+     * Output binding: {@link https://angular.dev/api/core/outputBinding}
+     *
+     * Input binding: {@link https://angular.dev/api/core/inputBinding}
+     *
+     * @example
+     * ```ts
+     * import {flexRenderComponent} from '@tanstack/angular-table';
+     * flexRenderComponent(MyComponent, {
+     *   bindings: [
+     *      // ...
+     *   ],
+     *   directives: [
+     *      DirectiveA,
+     *      {
+     *        type: DirectiveB,
+     *        bindings: [
+     *          inputBinding('value', mySignalValue),
+     *          // ...
+     *        ]
+     *      }
+     *   ]
+     * })
+     * ```
+     */
+    readonly directives?: CreateComponentDirectives;
+    /**
+     * Component instance inputs.
+     *
+     * These values are assigned after the component has been created using
+     * [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput).
+     *
+     * Shouldn't be used together with {@link FlexRenderOptions#bindings} option
+     */
+    readonly inputs?: TInputs;
+    /**
+     * Component instance outputs.
+     *
+     * Outputs are wired imperatively after component creation using {@link OutputEmitterRef#subscribe}.
+     *
+     * Shouldn't be used together with {@link FlexRenderOptions#bindings} option
+     */
+    readonly outputs?: TOutputs;
+    /**
+     * Optional {@link Injector} that will be used when rendering the component
+     */
+    readonly injector?: Injector;
+}
+type Inputs<T> = {
+    [K in keyof T as T[K] extends InputSignal<infer R> ? K : never]?: T[K] extends InputSignal<infer R> ? R : never;
+};
+type Outputs<T> = {
+    [K in keyof T as T[K] extends OutputEmitterRef<infer R> ? K : never]?: T[K] extends OutputEmitterRef<infer R> ? OutputEmitterRef<R>['emit'] : never;
+};
+/**
+ * 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)
+ *            })
+ *          ]
+ *        })
+ *     },
+ *   },
+ * ]
+ * ```
+ */
+declare function flexRenderComponent<TComponent = any>(component: Type<TComponent>, options?: FlexRenderOptions<Inputs<TComponent>, Outputs<TComponent>>): FlexRenderComponent<TComponent>;
+/**
+ * Wrapper interface for a component that will be used as content for {@link FlexRenderDirective}.
+ * Can be created using {@link flexRenderComponent} helper.
+ *
+ * @example
+ *
+ * ```ts
+ * import {flexRenderComponent} from '@tanstack/angular-table'
+ *
+ * // Usage in cell/header/footer definition
+ * const columns = [
+ *   {
+ *     cell: ({ row }) => {
+ *        return flexRenderComponent(MyComponent, {
+ *          inputs: { value: mySignalValue() },
+ *          outputs: { valueChange: (val) => {} }
+ *          // or using angular createComponent#bindings api
+ *          bindings: [
+ *            inputBinding('value', mySignalValue),
+ *            outputBinding('valueChange', value => {
+ *              console.log("my value changed to", value)
+ *            })
+ *          ]
+ *        })
+ *     },
+ *   },
+ * ]
+ *
+ * import {input, output} from '@angular/core';
+ *
+ * @Component({
+ *  selector: 'my-component',
+ * })
+ * class MyComponent {
+ *    readonly value = input(0);
+ *    readonly valueChange = output<number>();
+ * }
+ *
+ * ```
+ */
+interface FlexRenderComponent<TComponent = any> {
+    /**
+     * The component type
+     */
+    readonly component: Type<TComponent>;
+    /**
+     * Reflected metadata about the component.
+     */
+    readonly mirror: ComponentMirror<TComponent>;
+    /**
+     * List of allowed input names.
+     */
+    readonly allowedInputNames: Array<string>;
+    /**
+     * List of allowed output names.
+     */
+    readonly allowedOutputNames: Array<string>;
+    /**
+     * Component instance outputs. Subscribed via {@link OutputEmitterRef#subscribe}
+     *
+     * @see {@link FlexRenderOptions#outputs}
+     */
+    readonly outputs?: Outputs<TComponent>;
+    /**
+     * Component instance inputs. Set via [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput))
+     *
+     * @see {@link FlexRenderOptions#inputs}
+     */
+    readonly inputs?: Inputs<TComponent>;
+    /**
+     * Optional {@link Injector} that will be used when rendering the component.
+     *
+     * @see {@link FlexRenderOptions#injector}
+     */
+    readonly injector?: Injector;
+    /**
+     * Bindings to apply to the root component
+     *
+     * @see {@link FlexRenderOptions#bindings}
+     */
+    bindings?: CreateComponentBindings;
+    /**
+     * Directives that should be applied to the component.
+     *
+     * @see {FlexRenderOptions#directives}
+     */
+    directives?: CreateComponentDirectives;
+}
+/**
+ * Wrapper class for a component that will be used as content for {@link FlexRenderDirective}
+ *
+ * Prefer {@link flexRenderComponent} helper for better type-safety
+ */
+declare class FlexRenderComponentInstance<TComponent = any> implements FlexRenderComponent<TComponent> {
+    readonly component: Type<TComponent>;
+    readonly inputs?: Inputs<TComponent>;
+    readonly injector?: Injector;
+    readonly outputs?: Outputs<TComponent>;
+    readonly directives?: CreateComponentDirectives;
+    readonly bindings?: CreateComponentBindings;
+    readonly mirror: ComponentMirror<TComponent>;
+    readonly allowedInputNames: Array<string>;
+    readonly allowedOutputNames: Array<string>;
+    constructor(component: Type<TComponent>, inputs?: Inputs<TComponent>, injector?: Injector, outputs?: Outputs<TComponent>, directives?: CreateComponentDirectives, bindings?: CreateComponentBindings);
+}
+
+type FlexRenderContent<TProps extends NonNullable<unknown>> = string | number | Type<TProps> | FlexRenderComponent<TProps> | TemplateRef<{
+    $implicit: TProps;
+}> | null | Record<any, any> | undefined;
+type FlexRenderInputContent<TProps extends NonNullable<unknown>> = number | string | ((props: TProps) => FlexRenderContent<TProps>) | null | undefined;
+
+declare const FlexRenderComponentProps: InjectionToken<{}>;
+/**
+ * Inject the flex render context props.
+ *
+ * Can be used in components rendered via FlexRender directives.
+ */
+declare function injectFlexRenderContext<T extends NonNullable<unknown>>(): T;
+
+/**
+ * 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.
+ */
+declare class FlexRenderDirective<TFeatures extends TableFeatures, TRowData extends RowData, TValue extends CellData, TProps extends NonNullable<unknown> | CellContext<TFeatures, TRowData, TValue> | HeaderContext<TFeatures, TRowData, TValue>> {
+    #private;
+    readonly content: InputSignal<FlexRenderInputContent<TProps>>;
+    readonly props: InputSignal<TProps>;
+    readonly injector: InputSignal<Injector>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FlexRenderDirective<any, any, any, any>, never>;
+    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}).
+ */
+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>;
+}
+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.
+     */
+    Subscribe: <TSubSelected = {}>(props: {
+        selector: (state: TableState<TFeatures>) => TSubSelected;
+        equal?: ValueEqualityFn<TSubSelected>;
+    }) => Signal<Readonly<TSubSelected>>;
+};
+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>;
+
+/**
+ * DI context shape for a TanStack Table cell.
+ *
+ * This exists to make the current `Cell` injectable by any nested component/directive
+ * without having to pass it through inputs/props manually.
+ */
+interface TanStackTableCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> {
+    /** Signal that returns the current cell instance. */
+    cell: Signal<Cell<TFeatures, TData, TValue>>;
+}
+/**
+ * Injection token that provides access to the current cell.
+ *
+ * This token is provided by the {@link TanStackTableCell} directive.
+ */
+declare const TanStackTableCellToken: InjectionToken<Signal<any>>;
+/**
+ * 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()
+ * }
+ * ```
+ */
+declare class TanStackTableCell<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> implements TanStackTableCellContext<TFeatures, TData, TValue> {
+    /**
+     * The current TanStack Table cell.
+     *
+     * Provided as a required signal input so DI consumers always read the latest value.
+     */
+    readonly cell: i0.InputSignal<Cell<TFeatures, TData, TValue>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TanStackTableCell<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackTableCell<any, any, any>, "[tanStackTableCell]", ["cell"], { "cell": { "alias": "tanStackTableCell"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * 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`
+ */
+declare function injectTableCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData>(): TanStackTableCellContext<TFeatures, TData, TValue>['cell'];
+
+/**
+ * DI context shape for a TanStack Table header.
+ *
+ * This exists to make the current `Header` injectable by any nested component/directive
+ * without passing it through inputs/props.
+ */
+interface TanStackTableHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> {
+    /** Signal that returns the current header instance. */
+    header: Signal<Header<TFeatures, TData, TValue>>;
+}
+/**
+ * Injection token that provides access to the current header.
+ *
+ * This token is provided by the {@link TanStackTableHeader} directive.
+ */
+declare const TanStackTableHeaderToken: InjectionToken<Signal<any>>;
+/**
+ * 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()
+ *   }
+ * }
+ * ```
+ */
+declare class TanStackTableHeader<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> implements TanStackTableHeaderContext<TFeatures, TData, TValue> {
+    /**
+     * The current TanStack Table header.
+     *
+     * Provided as a required signal input so DI consumers always read the latest value.
+     */
+    readonly header: i0.InputSignal<Header<TFeatures, TData, TValue>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TanStackTableHeader<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackTableHeader<any, any, any>, "[tanStackTableHeader]", ["header"], { "header": { "alias": "tanStackTableHeader"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * 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`
+ */
+declare function injectTableHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData>(): TanStackTableHeaderContext<TFeatures, TData, TValue>['header'];
+
+/**
+ * Injection token that provides access to the current {@link AngularTable} instance.
+ *
+ * This token is provided by the {@link TanStackTable} directive.
+ */
+declare const TanStackTableToken: InjectionToken<Signal<any>>;
+/**
+ * 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()
+ *   }
+ * }
+ * ```
+ */
+declare 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: 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>;
+}
+/**
+ * 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`
+ */
+declare function injectTableContext<TFeatures extends TableFeatures, TData extends RowData, TSelected extends {} = TableState<TFeatures>>(): Signal<AngularTable<TFeatures, TData, TSelected>>;
+
+type RenderableComponent = Type<any> | (<T extends NonNullable<unknown>>(props: T) => FlexRenderContent<T>);
+/**
+ * Enhanced CellContext with pre-bound cell components.
+ * The `cell` property includes the registered cellComponents.
+ */
+type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, RenderableComponent>> = {
+    cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
+        FlexRender: () => unknown;
+    };
+    column: Column<TFeatures, TData, TValue>;
+    getValue: CellContext<TFeatures, TData, TValue>['getValue'];
+    renderValue: CellContext<TFeatures, TData, TValue>['renderValue'];
+    row: Row<TFeatures, TData>;
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Enhanced HeaderContext with pre-bound header components.
+ * The `header` property includes the registered headerComponents.
+ */
+type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, RenderableComponent>> = {
+    column: Column<TFeatures, TData, TValue>;
+    header: Header<TFeatures, TData, TValue> & THeaderComponents & {
+        FlexRender: () => unknown;
+    };
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Template type for column definitions that can be a string or a function.
+ */
+type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
+/**
+ * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ */
+type AppColumnDefBase<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = Omit<IdentifiedColumnDef<TFeatures, TData, TValue>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, TValue, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+};
+/**
+ * Enhanced display column definition with pre-bound components.
+ */
+type AppDisplayColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = Omit<DisplayColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+};
+/**
+ * Enhanced group column definition with pre-bound components.
+ */
+type AppGroupColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = Omit<GroupColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer' | 'columns'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    columns?: Array<ColumnDef<TFeatures, TData, unknown>>;
+};
+/**
+ * Enhanced column helper with pre-bound components in cell/header/footer contexts.
+ * This enables TypeScript to know about the registered components when defining columns.
+ */
+type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = {
+    /**
+     * Creates a data column definition with an accessor key or function.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents> & {
+        id: string;
+    } : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
+    /**
+     * Wraps an array of column definitions to preserve each column's individual TValue type.
+     */
+    columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
+    /**
+     * Creates a display column definition for non-data columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
+    /**
+     * Creates a group column definition with nested child columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
+};
+/**
+ * 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> & {
+    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>;
+};
+/**
+ * Options for creating a table hook with pre-bound components and default table options.
+ * Extends all TableOptions except 'columns' | 'data' | 'store' | 'state' | 'initialState'.
+ */
+type CreateTableContextOptions<TFeatures extends TableFeatures, TTableComponents extends Record<string, RenderableComponent>, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = Omit<TableOptions<TFeatures, any>, 'columns' | 'data' | 'store' | 'state' | 'initialState'> & {
+    /**
+     * Table-level components that need access to the table instance.
+     * These are available directly on the table object returned by useAppTable.
+     * Use `useTableContext()` inside these components.
+     * @example { PaginationControls, GlobalFilter, RowCount }
+     */
+    tableComponents?: TTableComponents;
+    /**
+     * Cell-level components that need access to the cell instance.
+     * These are available on the cell object passed to AppCell's children.
+     * Use `useCellContext()` inside these components.
+     * @example { TextCell, NumberCell, DateCell, CurrencyCell }
+     */
+    cellComponents?: TCellComponents;
+    /**
+     * Header-level components that need access to the header instance.
+     * These are available on the header object passed to AppHeader/AppFooter's children.
+     * Use `useHeaderContext()` inside these components.
+     * @example { SortIndicator, ColumnFilter, ResizeHandle }
+     */
+    headerComponents?: THeaderComponents;
+};
+type CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, RenderableComponent>, TCellComponents extends Record<string, RenderableComponent>, THeaderComponents extends Record<string, RenderableComponent>> = {
+    createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
+    injectTableContext: <TData extends RowData = RowData>() => Signal<AngularTable<TFeatures, TData>>;
+    injectTableHeaderContext: <TValue extends CellData = CellData, TRowData extends RowData = RowData>() => Signal<Header<TFeatures, TRowData, TValue>>;
+    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>;
+};
+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>;
+
+/**
+ * Constant helper to import FlexRender directives.
+ */
+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 };