@tanstack/vue-table/dist/createTableHook.d.ts

Headless UI for building powerful tables & datagrids for Vue.

import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.js";
import { TableOptionsWithReactiveData, VueTable } from "./useTable.js";
import { Component, PropType } from "vue";
import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures } from "@tanstack/table-core";
//#region src/createTableHook.d.ts
type ComponentType<T extends Record<string, any>> = Component<T>;
type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
  cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
    FlexRender: Component;
  };
  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>;
};
type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> = {
  column: Column<TFeatures, TData, TValue>;
  header: Header<TFeatures, TData, TValue> & THeaderComponents & {
    FlexRender: Component;
  };
  table: Table<TFeatures, TData>;
};
type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
type AppColumnDefBase<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = 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>>;
};
type AppDisplayColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = 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>>;
};
type AppGroupColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = 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?: ReadonlyArray<ColumnDef<TFeatures, TData, unknown>>;
};
type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = {
  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>;
  columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
  display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
  group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
};
type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<TableOptionsWithReactiveData<TFeatures, any>, 'columns' | 'data' | 'store' | 'state' | 'initialState'> & {
  tableComponents?: TTableComponents;
  cellComponents?: TCellComponents;
  headerComponents?: THeaderComponents;
};
interface AppTableProps {}
interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
  cell: Cell<TFeatures, TData, TValue>;
}
interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
  header: Header<TFeatures, TData, TValue>;
}
type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TTableComponents extends Record<string, ComponentType<any>>, _TCellComponents extends Record<string, ComponentType<any>>, _THeaderComponents extends Record<string, ComponentType<any>>> = VueTable<TFeatures, TData> & NoInfer<TTableComponents> & {
  AppTable: Component<AppTableProps>;
  AppCell: Component<AppCellProps<TFeatures, TData>>;
  AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
  AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
  FlexRender: typeof AppFlexRender;
};
interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
  /** The features object that was passed to `createTableHook`. */
  appFeatures: TFeatures;
  /**
   * A column helper pre-bound to `TFeatures` and the registered components, so
   * the cell/header/footer render props expose the bound components.
   */
  createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
  /**
   * Creates a table with the `App*` wrapper components and registered
   * `tableComponents` attached. `TData` is inferred from the `data` option.
   */
  useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, 'features'>) => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
  /**
   * Reads the table provided by the nearest `<table.AppTable>`. This is the same
   * extended instance `useAppTable` returns, so the `App*` components and your
   * `tableComponents` are available on it.
   */
  useTableContext: <TData extends RowData = RowData>() => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
  /**
   * Reads the cell provided by the nearest `<table.AppCell>`, extended with your
   * `cellComponents` and a context-bound `FlexRender`.
   */
  useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
    FlexRender: Component;
  };
  /**
   * Reads the header provided by the nearest `<table.AppHeader>` /
   * `<table.AppFooter>`, extended with your `headerComponents` and a
   * context-bound `FlexRender`.
   */
  useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
    FlexRender: Component;
  };
}
declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  cell: {
    type: PropType<FlexRenderCell>;
    default: undefined;
  };
  header: {
    type: PropType<FlexRenderHeader>;
    default: undefined;
  };
  footer: {
    type: PropType<FlexRenderHeader>;
    default: undefined;
  };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  cell: {
    type: PropType<FlexRenderCell>;
    default: undefined;
  };
  header: {
    type: PropType<FlexRenderHeader>;
    default: undefined;
  };
  footer: {
    type: PropType<FlexRenderHeader>;
    default: undefined;
  };
}>> & Readonly<{}>, {
  cell: FlexRenderCell;
  header: FlexRenderHeader;
  footer: FlexRenderHeader;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
/**
 * Creates app-scoped Vue table helpers with features, row models, and
 * renderable component maps pre-bound.
 *
 * Use this when an app or design system wants typed `useAppTable`, a pre-bound
 * column helper, and context helpers for table, cell, and header components.
 *
 * @example
 * ```ts
 * const { useAppTable, createAppColumnHelper } = createTableHook({
 *   features,
 *   tableComponents: {},
 *   cellComponents: {},
 *   headerComponents: {},
 * })
 * ```
 */
declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
//#endregion
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook };