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 };