@tanstack/lit-table/dist/flexRender.d.ts

Headless UI for building powerful tables & datagrids for Lit.

import { Cell, CellData, Header, RowData, TableFeatures } from "@tanstack/table-core";
import { TemplateResult, noChange, nothing } from "lit";
import { DirectiveResult } from "lit/directive.js";
//#region src/flexRender.d.ts
type LitRenderable = TemplateResult | DirectiveResult | Node | string | number | bigint | boolean | null | undefined | typeof nothing | typeof noChange | Iterable<LitRenderable>;
/**
 * Renders a Lit table template value with the provided context props.
 *
 * Use this lower-level helper for custom header, cell, or footer renderers when
 * you already have the render function and context. `FlexRender` is the
 * convenience wrapper for table cell/header/footer objects.
 *
 * @example
 * ```ts
 * flexRender(cell.column.columnDef.cell, cell.getContext())
 * ```
 */
declare function flexRender<TProps>(Comp: ((props: TProps) => LitRenderable) | LitRenderable, props: TProps): LitRenderable;
/**
 * Simplified component wrapper of `flexRender`. Use this utility function to render headers, cells, or footers with custom markup.
 * Only one prop (`cell`, `header`, or `footer`) may be passed.
 * @example
 * ```ts
 * ${FlexRender({ cell })}
 * ${FlexRender({ header })}
 * ${FlexRender({ footer: header })}
 * ```
 *
 * This replaces calling `flexRender` directly like this:
 * ```ts
 * flexRender(cell.column.columnDef.cell, cell.getContext())
 * flexRender(header.column.columnDef.header, header.getContext())
 * flexRender(footer.column.columnDef.footer, footer.getContext())
 * ```
 */
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 function to render headers, cells, or footers with custom markup.
 * Only one prop (`cell`, `header`, or `footer`) may be passed.
 * @example
 * ```ts
 * ${FlexRender({ cell })}
 * ${FlexRender({ header })}
 * ${FlexRender({ footer: header })}
 * ```
 *
 * This replaces calling `flexRender` directly like this:
 * ```ts
 * 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>): LitRenderable;
//#endregion
export { FlexRender, FlexRenderProps, LitRenderable, flexRender };