@tanstack/solid-table/dist/FlexRender.d.ts

Headless UI for building powerful tables & datagrids for Solid.

import { Cell, CellData, Header, RowData, TableFeatures } from "@tanstack/table-core";
import { JSX } from "solid-js";
//#region src/FlexRender.d.ts
/**
 * Renders a Solid table template value with the provided context props.
 *
 * Use this for custom header, cell, or footer renderers when you need the
 * lower-level function form. Most Solid UIs can use the `FlexRender` component
 * instead.
 *
 * @example
 * ```tsx
 * flexRender(cell.column.columnDef.cell, cell.getContext())
 * ```
 */
declare function flexRender<TProps>(Comp: ((_props: TProps) => JSX.Element) | JSX.Element | undefined, props: TProps): JSX.Element;
/**
 * Simplified component 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.
 * @example <FlexRender cell={cell} />
 * @example <FlexRender header={header} />
 * @example <FlexRender footer={footer} />
 */
type FlexRenderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> = {
  cell: Cell<TFeatures, TData, TValue>;
  header?: never;
  footer?: never;
} | {
  header: Header<TFeatures, TData, TValue>;
  cell?: never;
  footer?: never;
} | {
  footer: Header<TFeatures, TData, TValue>;
  cell?: never;
  header?: never;
};
/**
 * Simplified component 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.
 * @example
 * ```tsx
 * <FlexRender cell={cell} />
 * <FlexRender header={header} />
 * <FlexRender footer={footer} />
 * ```
 *
 * This replaces calling `flexRender` directly like this:
 * ```tsx
 * flexRender(cell.column.columnDef.cell, cell.getContext())
 * flexRender(header.column.columnDef.header, header.getContext())
 * flexRender(footer.column.columnDef.footer, footer.getContext())
 * ```
 */
declare function FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData>(props: FlexRenderProps<TFeatures, TData, TValue>): JSX.Element;
//#endregion
export { FlexRender, FlexRenderProps, flexRender };