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

Headless UI for building powerful tables & datagrids for Lit.

import { FlexRender } from "./flexRender.js";
import { subscribe } from "./subscribe-directive.js";
import { RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
import { ReactiveController, ReactiveControllerHost } from "lit";
//#region src/TableController.d.ts
/**
 * The extended table type returned by the Lit adapter.
 * Includes a `Subscribe` method for fine-grained state subscriptions
 * and a `state` property with the selected state.
 */
type LitTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Omit<Table<TFeatures, TData>, 'store'> & {
  /**
   * @deprecated Prefer `table.state` for render reads,
   * `table.atoms.<slice>.get()` for slice snapshots, or `table.subscribe` for
   * explicit subscriptions. `table.store.state` is a current-value snapshot and
   * is easy to misuse in render code.
   */
  readonly store: Table<TFeatures, TData>['store'];
  /**
   * Subscribes to the table's underlying state store within a Lit template.
   * Re-renders only the targeted template slice when the observed state changes.
   *
   * @example
   * ```ts
   * // 1. Subscribe to a specific state slice (re-renders ONLY when rowSelection changes)
   * html`
   * <div>
   * ${table.subscribe(
   * table.store,
   * (state) => state.rowSelection,
   * (rowSelection) => html`<span>Selected: ${JSON.stringify(rowSelection)}</span>`
   * )}
   * </div>
   * `
   *
   * // 2. Subscribe to the full state (re-renders on any state mutation)
   * html`
   * <div>
   * ${table.subscribe(
   * table.store,
   * (state) => html`<span>Total rows: ${state.rowModel.rows.length}</span>`
   * )}
   * </div>
   * `
   * ```
   */
  subscribe: typeof subscribe;
  /**
   * The selected state of the table. This state may not match the structure of
   * the full table state because it is selected by the selector function that
   * you pass as the 2nd argument to `controller.table()`.
   *
   * @example
   * ```ts
   * const table = this.tableController.table(options, (state) => ({
   *   globalFilter: state.globalFilter,
   * }))
   *
   * console.log(table.state.globalFilter)
   * ```
   */
  readonly state: Readonly<TSelected>;
  /**
   * Convenience FlexRender function attached to the table instance.
   * Renders cell, header, or footer content from column definitions.
   *
   * @example
   * ```ts
   * ${table.FlexRender({ header })}
   * ${table.FlexRender({ cell })}
   * ${table.FlexRender({ footer: header })}
   * ```
   */
  FlexRender: typeof FlexRender;
};
/**
 * A Lit ReactiveController for TanStack Table integration.
 *
 * Uses `constructReactivityFeature` from table-core to properly integrate
 * with the TanStack Store reactivity system, matching the pattern used by
 * all other framework adapters (React, Vue, Solid, Svelte, Angular).
 *
 * @example
 * ```ts
 * @customElement('my-table')
 * class MyTable extends LitElement {
 *   private tableController = new TableController<typeof features, Person>(this)
 *
 *   protected render() {
 *     const table = this.tableController.table(
 *       {
 *         features,
 *         columns,
 *         data,
 *       },
 *       (state) => ({ sorting: state.sorting }),
 *     )
 *     // use table in your template...
 *   }
 * }
 * ```
 */
declare class TableController<TFeatures extends TableFeatures, TData extends RowData> implements ReactiveController {
  host: ReactiveControllerHost;
  private _table;
  private _rootSource?;
  private _storeSubscription?;
  private _capturedState?;
  private _capturedSnapshot?;
  private _hasSelector;
  private _latestSelector?;
  private _lastSelected;
  constructor(host: ReactiveControllerHost);
  /**
   * Returns the Lit-backed table instance for the current render pass.
   *
   * The first call constructs the table with Lit reactivity bindings and
   * subscribes the host to table state/options changes. Later calls merge new
   * options into the same table instance and expose selected state through
   * `table.state`.
   *
   * @example
   * ```ts
   * const table = this.tableController.table(
   *   { features, columns, data },
   *   (state) => ({ sorting: state.sorting }),
   * )
   * ```
   */
  table<TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): LitTable<TFeatures, TData, TSelected>;
  private _setupSubscriptions;
  hostConnected(): void;
  hostUpdated(): void;
  hostDisconnected(): void;
}
//#endregion
export { LitTable, TableController };