import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, HeaderContext, IdentifiedColumnDef, Row, RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core"; import * as i0 from "@angular/core"; import { Binding, ComponentMirror, InjectionToken, Injector, InputSignal, OutputEmitterRef, Signal, TemplateRef, Type, createComponent } from "@angular/core"; import { Atom, ReadonlyAtom, ReadonlyStore, Store, shallow } from "@tanstack/angular-store"; 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 * {{cell}} * {{header}} * {{footer}} * ``` * * This replaces calling `*flexRender` directly like this: * ```html * {{cell}} * {{header}} * {{footer}} * ``` * * Can be imported through {@link FlexRenderCell} or {@link FlexRender}, with * the latter preferred. * * @example * ```ts * import {FlexRender} from '@tanstack/angular-table' * * @Component({ * // ... * imports: [ * FlexRender * ] * }) * ``` */ export declare class FlexRenderCell { #private; readonly cell: import("@angular/core").InputSignal | undefined>; readonly header: import("@angular/core").InputSignal | undefined>; readonly footer: import("@angular/core").InputSignal | undefined>; constructor(); static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "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[1]; type CreateComponentBindings = CreateComponentOptions['bindings']; type CreateComponentDirectives = CreateComponentOptions['directives']; interface FlexRenderOptions, TOutputs extends Record> { /** * Optional identity used to control component instance reuse. * * A rendered component is reused while both its component type and key are * unchanged. Change the key to explicitly destroy and recreate the component, * for example when new creation-time bindings, directives, or an injector * need to be applied. * * Inputs and outputs do not affect component identity and are synchronized * onto a reused component instance. * * @example * ```ts * flexRenderComponent(EditorComponent, { * key: row.original.editorVersion, * inputs: { value: row.original.value }, * }) * ``` */ readonly key?: string | number; /** * 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. * * Bindings are creation-time configuration. Changing this array after the * component has mounted does not update the existing component. Change * {@link FlexRenderOptions#key} to recreate the component with new bindings. * * 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; /** * Directives to apply to the component at creation time. * * Directives are creation-time configuration. Changing this array after the * component has mounted does not update the existing component. Change * {@link FlexRenderOptions#key} to recreate the component with new directives. * * 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). * On a reused component, omitted keys keep their current value. Pass * `undefined` explicitly when an input needs to be cleared. * * 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. * * The injector is applied when the component is created. Change * {@link FlexRenderOptions#key} to recreate a mounted component with a * different injector. */ readonly injector?: Injector; } type Inputs = { [K in keyof T as T[K] extends InputSignal ? K : never]?: T[K] extends InputSignal ? R : never; }; type Outputs = { [K in keyof T as T[K] extends OutputEmitterRef ? K : never]?: T[K] extends OutputEmitterRef ? OutputEmitterRef['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) * }) * ] * }) * }, * }, * ] * ``` */ export declare function flexRenderComponent(component: Type, options?: FlexRenderOptions, Outputs>): FlexRenderComponent; /** * 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(); * } * * ``` */ export interface FlexRenderComponent { /** * The component type */ readonly component: Type; /** * Optional identity used together with the component type to decide whether * an existing component instance can be reused. * * @see {@link FlexRenderOptions#key} */ readonly key?: string | number; /** * Reflected metadata about the component. */ readonly mirror: ComponentMirror; /** * Cached component metadata used by the flex renderer. */ readonly metadata: ResolvedComponentMetadata; /** * Component instance outputs. Subscribed via {@link OutputEmitterRef#subscribe} * * @see {@link FlexRenderOptions#outputs} */ readonly outputs?: Outputs; /** * Component instance inputs. Set via [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput)) * * @see {@link FlexRenderOptions#inputs} */ readonly inputs?: Inputs; /** * 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} for better type-safety. */ export declare class FlexRenderComponentInstance implements FlexRenderComponent { readonly component: Type; readonly inputs?: Inputs | undefined; readonly injector?: Injector | undefined; readonly outputs?: Outputs | undefined; readonly directives?: CreateComponentDirectives; readonly bindings?: CreateComponentBindings; readonly key?: string | number | undefined; readonly mirror: ComponentMirror; readonly metadata: ResolvedComponentMetadata; constructor(component: Type, inputs?: Inputs | undefined, injector?: Injector | undefined, outputs?: Outputs | undefined, directives?: CreateComponentDirectives, bindings?: CreateComponentBindings, key?: string | number | undefined); } interface ResolvedComponentMetadata { readonly mirror: ComponentMirror; readonly inputNames: ReadonlyMap; readonly outputNames: ReadonlySet; } /** * Content supported by the `flexRender` directive when declaring * a table column header/cell. */ type FlexRenderContent> = string | number | Type | FlexRenderComponent | TemplateRef<{ $implicit: TProps; }> | null | Record | undefined; /** * Input content supported by the `flexRender` directives. */ type FlexRenderInputContent> = number | string | ((props: TProps) => FlexRenderContent) | null | undefined; declare const FlexRenderComponentProps: InjectionToken<{}>; /** * Inject the flex render context props. * * Can be used in components rendered via FlexRender directives. */ export declare function injectFlexRenderContext>(): 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: ` * * {{cell}} * * * * {{header}} * * * * {{footer}} * * `, * }) * class App { * } * ``` * * Can be imported through {@link FlexRenderDirective} or {@link FlexRender}, * with the latter preferred. */ export declare class FlexRenderDirective | CellContext | HeaderContext> { #private; readonly content: InputSignal>; readonly props: InputSignal; readonly injector: InputSignal; constructor(); static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "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>; } export type SubscribeSource = Atom | ReadonlyAtom | Store | ReadonlyStore; export type AngularTable = Table; /** * Creates and returns an Angular-reactive table instance. * * The initializer is intentionally re-evaluated whenever any signal read inside it changes. * This is how the adapter keeps the table in sync with Angular's reactivity model. * * Because of that behavior, keep expensive/static values (for example `columns`, feature setup, row models) * as stable references outside the initializer, and only read reactive state (`data()`, pagination/filter/sorting signals, etc.) * inside it. * * The returned table is also signal-reactive: table state and table APIs are wired for Angular signals, so you can safely consume table methods inside `computed(...)` and `effect(...)`. * * @example * 1. Register the table features you need * ```ts * // Register only the features you need * import {tableFeatures, rowPaginationFeature} from '@tanstack/angular-table'; * const features = tableFeatures({ * rowPaginationFeature, * // ...all other features you need * }) * * // Use all table core features * import {stockFeatures} from '@tanstack/angular-table'; * const features = tableFeatures(stockFeatures); * ``` * 2. Prepare the table columns * ```ts * import {ColumnDef} from '@tanstack/angular-table'; * * type MyData = {} * * const columns: ColumnDef[] = [ * // ...column definitions * ] * * // or using createColumnHelper * import {createColumnHelper} from '@tanstack/angular-table'; * const columnHelper = createColumnHelper(); * const columns = columnHelper.columns([ * columnHelper.accessor(...), * // ...other columns * ]) * ``` * 3. Create the table instance with `injectTable` * ```ts * const table = injectTable(() => { * // ...table options, * features, * columns: columns, * data: myDataSignal(), * }) * ``` * * @returns An Angular-reactive TanStack Table instance. */ export declare function injectTable(optionsFactory: () => TableOptions): AngularTable; /** * 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. */ export interface TanStackTableCellContext { /** Signal that returns the current cell instance. */ cell: Signal>; } /** * Injection token that provides access to the current cell. * * This token is provided by the {@link TanStackTableCell} directive. */ export declare const TanStackTableCellToken: InjectionToken>>; /** * 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 * * * * ``` * * ```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() * } * ``` */ export declare class TanStackTableCell implements TanStackTableCellContext { /** * The current TanStack Table cell. * * Provided as a required signal input so DI consumers always read the latest value. */ readonly cell: import("@angular/core").InputSignal>; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[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` */ export declare function injectTableCellContext(): TanStackTableCellContext['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. */ export interface TanStackTableHeaderContext { /** Signal that returns the current header instance. */ header: Signal>; } /** * Injection token that provides access to the current header. * * This token is provided by the {@link TanStackTableHeader} directive. */ export declare const TanStackTableHeaderToken: InjectionToken>>; /** * 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 * * * * ``` * * ```ts * @Component({ * selector: 'app-sort-indicator', * template: ` * * `, * }) * export class SortIndicatorComponent { * readonly header = injectTableHeaderContext() * * toggle() { * this.header().column.toggleSorting() * } * } * ``` */ export declare class TanStackTableHeader implements TanStackTableHeaderContext { /** * The current TanStack Table header. * * Provided as a required signal input so DI consumers always read the latest value. */ readonly header: import("@angular/core").InputSignal>; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[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` */ export declare function injectTableHeaderContext(): TanStackTableHeaderContext['header']; /** * Injection token that provides access to the current {@link AngularTable} instance. * * This token is provided by the {@link TanStackTable} directive. */ export declare const TanStackTableToken: InjectionToken>>; /** * 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 *
* *
* ``` * * ```ts * @Component({ * selector: 'app-pagination', * template: ` * * * `, * }) * export class PaginationComponent { * readonly table = injectTableContext() * * prev() { * this.table().previousPage() * } * next() { * this.table().nextPage() * } * } * ``` */ export declare class TanStackTable { /** * The current TanStack Table instance. * * Provided as a required signal input so DI consumers always read the latest value. */ readonly table: import("@angular/core").InputSignal>; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[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` */ export declare function injectTableContext(): Signal>; export type RenderableComponent = Type | (>(props: T) => FlexRenderContent); /** * Enhanced CellContext with pre-bound cell components. * The `cell` property includes the registered cellComponents. */ export type AppCellContext> = { cell: Cell & TCellComponents & { FlexRender: () => unknown; }; column: Column; getValue: CellContext['getValue']; renderValue: CellContext['renderValue']; row: Row; table: Table; }; /** * Enhanced HeaderContext with pre-bound header components. * The `header` property includes the registered headerComponents. */ export type AppHeaderContext> = { column: Column; header: Header & THeaderComponents & { FlexRender: () => unknown; }; table: Table; }; /** * Template type for column definitions that can be a string or a function. */ export type AppColumnDefTemplate = string | ((props: TProps) => any); /** * Enhanced column definition base with pre-bound components in cell/header/footer contexts. */ export type AppColumnDefBase, THeaderComponents extends Record> = Omit, 'cell' | 'header' | 'footer'> & { cell?: AppColumnDefTemplate>; header?: AppColumnDefTemplate>; footer?: AppColumnDefTemplate>; }; /** * Enhanced display column definition with pre-bound components. */ export type AppDisplayColumnDef, THeaderComponents extends Record> = Omit, 'cell' | 'header' | 'footer'> & { cell?: AppColumnDefTemplate>; header?: AppColumnDefTemplate>; footer?: AppColumnDefTemplate>; }; /** * Enhanced group column definition with pre-bound components. */ export type AppGroupColumnDef, THeaderComponents extends Record> = Omit, 'cell' | 'header' | 'footer' | 'columns'> & { cell?: AppColumnDefTemplate>; header?: AppColumnDefTemplate>; footer?: AppColumnDefTemplate>; columns?: ReadonlyArray>; }; /** * Enhanced column helper with pre-bound components in cell/header/footer contexts. * This enables TypeScript to know about the registered components when defining columns. */ export type AppColumnHelper, THeaderComponents extends Record> = { /** * Creates a data column definition with an accessor key or function. * The cell, header, and footer contexts include pre-bound components. */ accessor: | DeepKeys, TValue extends (TAccessor extends AccessorFn ? TReturn : TAccessor extends DeepKeys ? DeepValue : never)>(accessor: TAccessor, column: TAccessor extends AccessorFn ? AppColumnDefBase & { id: string; } : AppColumnDefBase) => TAccessor extends AccessorFn ? AccessorFnColumnDef : AccessorKeyColumnDef; /** * Wraps an array of column definitions to preserve each column's individual TValue type. */ columns: >>(columns: [...TColumns]) => Array> & [...TColumns]; /** * Creates a display column definition for non-data columns. * The cell, header, and footer contexts include pre-bound components. */ display: (column: AppDisplayColumnDef) => DisplayColumnDef; /** * Creates a group column definition with nested child columns. * The cell, header, and footer contexts include pre-bound components. */ group: (column: AppGroupColumnDef) => GroupColumnDef; }; /** * Extended table API returned by useAppTable with all App wrapper components */ export type AppAngularTable, TCellComponents extends Record, THeaderComponents extends Record> = AngularTable & NoInfer & { appCell: (cell: Cell) => Cell & NoInfer; appHeader: (header: Header) => Header & NoInfer; appFooter: (footer: Header) => Header & NoInfer; }; /** * Options for creating a table hook with pre-bound components and default table options. * Extends all TableOptions except 'columns' | 'data' | 'store' | 'state' | 'initialState'. */ export type CreateTableContextOptions, TCellComponents extends Record, THeaderComponents extends Record> = Omit, '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; }; export type CreateTableHookResult, TCellComponents extends Record, THeaderComponents extends Record> = { createAppColumnHelper: () => AppColumnHelper; injectTableContext: () => Signal & TTableComponents>; injectTableHeaderContext: () => Signal & THeaderComponents>; injectTableCellContext: () => Signal & TCellComponents>; injectFlexRenderHeaderContext: () => HeaderContext; injectFlexRenderCellContext: () => CellContext; injectAppTable: (tableOptions: () => Omit, 'features'>) => AppAngularTable; }; /** * Creates app-scoped Angular table helpers with features, row models, and * renderable component maps pre-bound. * * Use this when an app or design system wants typed `injectAppTable`, * pre-bound column helpers, and typed table/cell/header context injection * helpers without repeating the same feature and component generics. * * @example * ```ts * const { injectAppTable, createAppColumnHelper } = createTableHook({ * features, * tableComponents: {}, * cellComponents: {}, * headerComponents: {}, * }) * ``` */ export declare function createTableHook, const TCellComponents extends Record, const THeaderComponents extends Record>({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }: CreateTableContextOptions): CreateTableHookResult; /** * Constant helper to import FlexRender directives. * * You should prefer to use this constant over importing the directives separately, * as it ensures you always have the correct set of directives over library updates. * * @see {@link FlexRenderDirective} and {@link FlexRenderCell} for more details on the directives included in this export. */ export declare const FlexRender: readonly [typeof FlexRenderDirective, typeof FlexRenderCell]; export { type FlexRenderComponentProps, type FlexRenderContent, type FlexRenderInputContent, shallow };