@navette-js/tables 0.0.0-stage → 1.0.0-beta.2

package/lib/index.d.ts

@@ -0,0 +1,787 @@
+import type { DataAdapter, ListQuery, Page as RecordPage, SortDirection } from '@navette-js/database';
+import { Attributes, type ColorManager } from '@navette-js/support';
+export * from './query-builder.ts';
+/** Render hook slots of a table. */
+export declare const TablesRenderHook: {
+    readonly CONTENT_AFTER: "tables::content.after";
+    readonly CONTENT_BEFORE: "tables::content.before";
+    readonly SELECTION_INDICATOR_ACTIONS_AFTER: "tables::selection.indicator.actions.after";
+    readonly SELECTION_INDICATOR_ACTIONS_BEFORE: "tables::selection.indicator.actions.before";
+    readonly HEADER_AFTER: "tables::header.after";
+    readonly HEADER_BEFORE: "tables::header.before";
+    readonly TOOLBAR_AFTER: "tables::toolbar.after";
+    readonly TOOLBAR_BEFORE: "tables::toolbar.before";
+    readonly TOOLBAR_COLUMN_MANAGER_TRIGGER_AFTER: "tables::toolbar.toggle-column-trigger.after";
+    readonly TOOLBAR_COLUMN_MANAGER_TRIGGER_BEFORE: "tables::toolbar.toggle-column-trigger.before";
+    readonly TOOLBAR_END: "tables::toolbar.end";
+    readonly TOOLBAR_GROUPING_SELECTOR_AFTER: "tables::toolbar.grouping-selector.after";
+    readonly TOOLBAR_GROUPING_SELECTOR_BEFORE: "tables::toolbar.grouping-selector.before";
+    readonly TOOLBAR_REORDER_TRIGGER_AFTER: "tables::toolbar.reorder-trigger.after";
+    readonly TOOLBAR_REORDER_TRIGGER_BEFORE: "tables::toolbar.reorder-trigger.before";
+    readonly TOOLBAR_SEARCH_AFTER: "tables::toolbar.search.after";
+    readonly TOOLBAR_SEARCH_BEFORE: "tables::toolbar.search.before";
+    readonly TOOLBAR_START: "tables::toolbar.start";
+    readonly FILTER_INDICATORS: "tables::filter.indicators";
+    readonly HEADER_CELL: "tables::header.cell";
+    /** Legacy aliases of the column manager trigger slots. */
+    readonly TOOLBAR_TOGGLE_COLUMN_TRIGGER_AFTER: "tables::toolbar.toggle-column-trigger.after";
+    readonly TOOLBAR_TOGGLE_COLUMN_TRIGGER_BEFORE: "tables::toolbar.toggle-column-trigger.before";
+};
+/** Methods and properties that trigger the table's loading state (`wire:target`). */
+export declare const LOADING_TARGETS = "activeTab,applyTableFilters,gotoPage,nextPage,previousPage,removeTableFilter,removeTableFilters,reorderTable,resetTableColumnSearch,resetTableFiltersForm,resetTableSearch,setPage,sortTable,tableColumnSearches,tableFilters,tableGrouping,tableRecordsPerPage,tableSearch,tableSort,toggleTableReordering";
+type StateResolver<R> = (ctx: {
+    record: R;
+}) => unknown | Promise<unknown>;
+/** Base class of table columns. */
+export declare abstract class Column<R = any> {
+    /** Default setup for every instance created afterwards by `make()`, e.g. `TextColumn.configureUsing((column) => column.sortable())`. */
+    static configureUsing<T>(this: abstract new (...args: any[]) => T, configure: (instance: T) => void): void;
+    readonly name: string;
+    protected _label: string | null;
+    protected _sortable: boolean;
+    protected _searchable: boolean;
+    protected _individuallySearchable: boolean;
+    protected _toggleable: boolean;
+    protected _toggledHiddenByDefault: boolean;
+    protected _alignment: string | null;
+    protected _state: StateResolver<R> | null;
+    protected _sortColumn: string | null;
+    protected _searchColumn: string | null;
+    protected _url: ((record: R) => string | null) | null;
+    /** Label of the column group this column belongs to (set by ColumnGroup). */
+    _group: string | null;
+    constructor(name: string);
+    label(label: string): this;
+    /** `column`: column (or query alias) to sort by when it differs from the name, e.g. for a relationship. */
+    sortable(condition?: boolean | {
+        column: string;
+        inverted?: boolean;
+    }): this;
+    getSortColumn(): string;
+    private _sortInverted;
+    /** `inverted`: the sort column runs opposite to the displayed value (e.g. an age sorted by birth date). */
+    isSortInverted(): boolean;
+    /** Link on the cell; takes precedence over the row action. */
+    url(resolver: (record: R) => string | null): this;
+    getUrl(record: R): string | null;
+    /** `isGlobal: false` excludes the column from the global search; `isIndividual` adds a search field for this column. */
+    getSearchColumn(): string;
+    searchable(options?: boolean | {
+        isIndividual?: boolean;
+        isGlobal?: boolean;
+        column?: string;
+    }): this;
+    /** Lets the user hide the column from the column manager. */
+    toggleable(condition?: boolean, options?: {
+        isToggledHiddenByDefault?: boolean;
+    }): this;
+    alignment(alignment: 'start' | 'center' | 'end' | null): this;
+    alignEnd(): this;
+    alignLeft(): this;
+    alignCenter(): this;
+    getStateUsing(resolver: StateResolver<R>): this;
+    getLabel(): string;
+    isSortable(): boolean;
+    isGloballySearchable(): boolean;
+    isIndividuallySearchable(): boolean;
+    isToggleable(): boolean;
+    isToggledHiddenByDefault(): boolean;
+    getAlignment(): string | null;
+    /** Suffix of the `fi-ta-header-cell-…` / `fi-ta-cell-…` classes: underscores become dashes, dots are kept. */
+    getCssName(): string;
+    getState(record: R): Promise<unknown>;
+    /** True for editable cells: they are not wrapped in a link or button to the record. */
+    isClickDisabled(): boolean;
+    abstract toHtml(record: R, recordKey?: string | number): Promise<string>;
+}
+export declare class TextColumn<R = any> extends Column<R> {
+    private _weight;
+    private _copyable;
+    private _money;
+    private _placeholder;
+    private _badge;
+    private _color;
+    private _icon;
+    private _format;
+    private _date;
+    private _numeric;
+    private _summarizers;
+    private _limit;
+    private _tooltip;
+    static make<R = any>(name: string): TextColumn<R>;
+    /** Displays the value in a badge. */
+    badge(condition?: boolean): this;
+    color(color: string | ((record: R) => string)): this;
+    icon(resolver: (record: R) => string | null): this;
+    /** Text displayed instead of the raw value (e.g. an enum label). */
+    formatStateUsing(formatter: (ctx: {
+        state: unknown;
+        record: R;
+    }) => string): this;
+    /** Short date, e.g. "Nov 9, 2026". */
+    date(condition?: boolean): this;
+    private _dateTime;
+    /** Date and time, e.g. "Nov 9, 2026 14:30:00". */
+    dateTime(condition?: boolean): this;
+    /** Number formatted with thousands separators. */
+    private _decimals;
+    /** `numeric(1)`: fixed number of decimals. */
+    numeric(condition?: boolean | number): this;
+    /** Summary row below the table. */
+    summarize(summarizer: Summarizer | Summarizer[]): this;
+    getSummarizers(): Summarizer[];
+    weight(weight: string): this;
+    /** Truncates the displayed text to `length` characters, followed by "...". */
+    limit(length: number | null): this;
+    /** Tooltip on hover; `null` for none. */
+    tooltip(tooltip: ((record: R) => string | null) | string | null): this;
+    copyable(condition?: boolean): this;
+    /** Amount formatted in the given currency, e.g. `money('usd')`. */
+    money(currency?: string | ((record: R) => string)): this;
+    /** Text displayed when the value is empty. */
+    placeholder(text: string | null): this;
+    /** Cell content: a short markup for plain text, a full markup as soon as an option (badge, icon, color…) is set. */
+    toHtml(record: R): Promise<string>;
+}
+/** Values a summarizer works from: aggregates over the query (all records) or over the displayed page. */
+export type SummaryValues = {
+    count: number;
+    sum: Record<string, number>;
+    avg: Record<string, number>;
+    min: Record<string, unknown>;
+    max: Record<string, unknown>;
+};
+export type SummaryItem = {
+    type: 'text' | 'range';
+    label: string | null;
+    value: string;
+};
+/** Column summary below the table: sum, average, count or range. */
+export declare abstract class Summarizer {
+    abstract readonly kind: 'sum' | 'avg' | 'count' | 'range';
+    protected _label: string | null;
+    protected _money: string | null;
+    label(label: string | null): this;
+    money(currency?: string): this;
+    getLabel(): string | null;
+    format(value: number): string;
+    abstract summarize(column: string, values: SummaryValues): SummaryItem | null;
+}
+/** Column total. */
+export declare class Sum extends Summarizer {
+    readonly kind = "sum";
+    static make(): Sum;
+    getLabel(): string;
+    summarize(column: string, values: SummaryValues): SummaryItem;
+}
+/** Column average. */
+export declare class Average extends Summarizer {
+    readonly kind = "avg";
+    static make(): Average;
+    getLabel(): string;
+    summarize(column: string, values: SummaryValues): SummaryItem;
+}
+/** Record count. */
+export declare class Count extends Summarizer {
+    readonly kind = "count";
+    static make(): Count;
+    getLabel(): string;
+    summarize(_column: string, values: SummaryValues): SummaryItem;
+}
+/** Smallest and largest value of a column. */
+export declare class Range extends Summarizer {
+    readonly kind = "range";
+    private _minimalDateTime;
+    static make(): Range;
+    /** Dates: day only when the bounds fall on different days, day and time otherwise; a single value when both are equal. */
+    minimalDateTimeDifference(condition?: boolean): this;
+    summarize(column: string, values: SummaryValues): SummaryItem | null;
+}
+/** Row grouping: rows are sorted by the column and each group gets a header row. */
+export declare class Group<R = any> {
+    private id;
+    private _label;
+    private _column;
+    private _title;
+    private _description;
+    private _collapsible;
+    private _date;
+    private _titlePrefixedWithLabel;
+    constructor(id: string);
+    static make<R = any>(id: string): Group<R>;
+    label(label: string | null): this;
+    /** Query column holding the group value, when it differs from the id (relationship). */
+    column(column: string | null): this;
+    /** Group title computed from the record (e.g. an enum label). */
+    getTitleUsing(resolver: ((record: R) => string | null) | null): this;
+    getDescriptionUsing(resolver: ((record: R) => string | null) | null): this;
+    /** Aliases using the `get…FromRecordUsing` naming. */
+    getTitleFromRecordUsing(resolver: ((record: R) => string | null) | null): this;
+    getDescriptionFromRecordUsing(resolver: ((record: R) => string | null) | null): this;
+    /** Groups collapse when their header is clicked. */
+    collapsible(condition?: boolean): this;
+    /** The column is a date: rows from the same day form one group. */
+    date(condition?: boolean): this;
+    titlePrefixedWithLabel(condition?: boolean): this;
+    getId(): string;
+    getLabel(): string;
+    getColumn(): string;
+    isCollapsible(): boolean;
+    isDate(): boolean;
+    isTitlePrefixedWithLabel(): boolean;
+    /** Group value of a record, as text; `null` when empty. */
+    getStringKey(record: R): string | null;
+    getTitle(record: R): string | null;
+    getDescription(record: R): string | null;
+    /** Restricts a query to the records of the group with the given key. */
+    scope(query: any, key: string | null): void;
+}
+/**
+ * Column layout: as soon as a table has one, records are rendered as cards (`fi-ta-content`) instead of table rows,
+ * and sorting goes through a "Sort by" select.
+ */
+export declare abstract class ColumnLayout<R = any> {
+    protected _children: (Column<R> | ColumnLayout<R>)[];
+    constructor(children: (Column<R> | ColumnLayout<R>)[]);
+    getChildren(): (Column<R> | ColumnLayout<R>)[];
+    /** Leaf columns, in order: the ones the table sorts, searches and toggles. */
+    getColumns(): Column<R>[];
+    abstract getClasses(): string[];
+}
+/** Columns side by side, from a given breakpoint. */
+export declare class Split<R = any> extends ColumnLayout<R> {
+    private _from;
+    static make<R = any>(children: (Column<R> | ColumnLayout<R>)[]): Split<R>;
+    from(breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | null): this;
+    getClasses(): string[];
+}
+/** Columns stacked vertically. */
+export declare class Stack<R = any> extends ColumnLayout<R> {
+    private _space;
+    private _alignment;
+    static make<R = any>(children: (Column<R> | ColumnLayout<R>)[]): Stack<R>;
+    /** Gap between columns: 1 (small), 2 (medium) or 3 (large). */
+    space(space?: 1 | 2 | 3 | null): this;
+    alignment(alignment: 'start' | 'center' | 'end'): this;
+    getClasses(): string[];
+}
+/** Column group: a shared label above the column headers. */
+export declare class ColumnGroup<R = any> {
+    private label;
+    private _columns;
+    constructor(label: string);
+    static make<R = any>(label: string): ColumnGroup<R>;
+    columns(columns: Column<R>[]): this;
+    getColumns(): Column<R>[];
+}
+/** Color swatch column. */
+export declare class ColorColumn<R = any> extends Column<R> {
+    static make<R = any>(name: string): ColorColumn<R>;
+    toHtml(record: R): Promise<string>;
+}
+/** Image column: the state is the image URL. Only local or http(s) URLs are rendered. */
+export declare class ImageColumn<R = any> extends Column<R> {
+    private _alt;
+    private _height;
+    private _circular;
+    static make<R = any>(name: string): ImageColumn<R>;
+    alt(resolver: (record: R) => string | null): this;
+    /** CSS height of the image (`2.5rem` by default). */
+    imageHeight(height: string): this;
+    circular(condition?: boolean): this;
+    toHtml(record: R): Promise<string>;
+}
+/** Icon depending on the value; `boolean()` shows a green check or a red cross. */
+export declare class IconColumn<R = any> extends Column<R> {
+    private _boolean;
+    static make<R = any>(name: string): IconColumn<R>;
+    boolean(condition?: boolean): this;
+    toHtml(record: R): Promise<string>;
+}
+/** Application-defined validation rule of an editable column: synchronous check and message (`:attribute` already replaced). */
+export type ColumnValidationRule = {
+    name: string;
+    passes: (value: unknown) => boolean;
+    message: (attribute: string) => string;
+};
+type StateHook<R> = (ctx: {
+    state: unknown;
+    record: R;
+}) => unknown | Promise<unknown>;
+/**
+ * Base class of in-cell editable columns. The browser calls `updateTableColumnState(column, key, value)` on the host component:
+ * the column must be declared, visible and enabled for this record, and the value must pass the rules; only then do
+ * `beforeStateUpdated`, the write and `afterStateUpdated` run. The write does not check model permissions: use `disabled()`
+ * to restrict editing.
+ */
+export declare abstract class EditableColumn<R = any> extends Column<R> {
+    protected _disabled: ((record: R) => boolean | Promise<boolean>) | boolean;
+    protected _rules: (string | ColumnValidationRule)[];
+    protected _validationAttribute: string | null;
+    protected _validationMessages: Record<string, string>;
+    protected _updateStateUsing: StateHook<R> | null;
+    protected _beforeStateUpdated: StateHook<R> | null;
+    protected _afterStateUpdated: StateHook<R> | null;
+    protected _tooltip: ((record: R) => string | null) | string | null;
+    disabled(condition?: ((record: R) => boolean | Promise<boolean>) | boolean): this;
+    isDisabledFor(record: R): Promise<boolean>;
+    /** An editable cell is neither a link nor a button to the record. */
+    isClickDisabled(): boolean;
+    isEditable(): boolean;
+    /** Rules applied to the received value: strings (`required`, `max:255`, `in:a,b`…) or `{ name, passes, message }` objects. */
+    rules(rules: (string | ColumnValidationRule)[]): this;
+    getRules(): (string | ColumnValidationRule)[];
+    /** Same as adding `required` to the rules. */
+    required(condition?: boolean): this;
+    isRequired(): boolean;
+    /** Column name used in messages (defaults to the label with a lowercase first letter). */
+    validationAttribute(label: string | null): this;
+    /** Custom messages by rule name, e.g. `{ max: 'Too long.' }`. */
+    validationMessages(messages: Record<string, string>): this;
+    getValidationAttribute(): string;
+    /** Rules specific to the column type (e.g. select options). */
+    protected getImplicitRules(): ColumnValidationRule[];
+    /**
+     * Error message, or `null` if the value is valid. An empty value is only checked by `required`, and several errors
+     * produce the first message followed by "(and N more errors)".
+     */
+    validate(input: unknown): string | null;
+    /** Custom write, replacing the update of the record's column. Its return value is sent back to the browser. */
+    updateStateUsing(callback: StateHook<R> | null): this;
+    beforeStateUpdated(callback: StateHook<R> | null): this;
+    afterStateUpdated(callback: StateHook<R> | null): this;
+    /** Tooltip on the control, shown while no error is displayed. */
+    tooltip(tooltip: ((record: R) => string | null) | string | null): this;
+    getUpdateStateMessages(): Record<'saving' | 'saved' | 'failure', string>;
+    /** Value written from a validated value: blank values become `null`. */
+    castState(input: unknown): unknown;
+    /**
+     * Saves an already validated value. Only the column's declared name is written: a relationship column (`author.name`)
+     * can only be edited with `updateStateUsing()`.
+     */
+    updateState(record: R, input: unknown, adapter: Pick<DataAdapter<R>, 'getKey' | 'update'>): Promise<unknown>;
+    /** `x-tooltip` expression of editable controls: the column tooltip, replaced by the validation error when there is one. */
+    protected tooltipExpression(record: R): string;
+    /** Shared opening markup of editable cells: lazily loaded Alpine component, server state and record key. */
+    protected editableAttributes(component: string, asset: string, recordKey: string | number, state: unknown): Attributes;
+    protected static readonly STATUS_HTML = "<p x-cloak x-show=\"error\" x-bind:id=\"$id('table-column-error')\" x-ref=\"error\" x-text=\"error\" class=\"fi-sr-only\"></p><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" x-text=\"status\" class=\"fi-sr-only\"></p>";
+}
+/**
+ * In-cell editable select (native select only). The received value must be one of the declared options.
+ */
+export declare class SelectColumn<R = any> extends EditableColumn<R> {
+    private _options;
+    private _selectablePlaceholder;
+    static make<R = any>(name: string): SelectColumn<R>;
+    options(options: [string, string][] | Record<string, string>): this;
+    getOptions(): [string, string][];
+    selectablePlaceholder(condition?: boolean): this;
+    protected getImplicitRules(): ColumnValidationRule[];
+    toHtml(record: R, recordKey?: string | number): Promise<string>;
+}
+/** In-cell editable toggle. The received value must be a boolean (`boolean` rule by default). */
+export declare class ToggleColumn<R = any> extends EditableColumn<R> {
+    private _onColor;
+    private _offColor;
+    private _onIcon;
+    private _offIcon;
+    constructor(name: string);
+    static make<R = any>(name: string): ToggleColumn<R>;
+    /** Toggle color when on (`primary` by default) and off (`gray`). */
+    onColor(color: string | null): this;
+    offColor(color: string | null): this;
+    /** Icons shown inside the toggle's thumb. */
+    onIcon(icon: string | null): this;
+    offIcon(icon: string | null): this;
+    castState(input: unknown): unknown;
+    toHtml(record: R, recordKey?: string | number): Promise<string>;
+}
+/** In-cell editable checkbox. The received value must be a boolean (`boolean` rule by default). */
+export declare class CheckboxColumn<R = any> extends EditableColumn<R> {
+    constructor(name: string);
+    static make<R = any>(name: string): CheckboxColumn<R>;
+    castState(input: unknown): unknown;
+    toHtml(record: R, recordKey?: string | number): Promise<string>;
+}
+/** In-cell editable text input. Only a string or a number is accepted from the browser. */
+export declare class TextInputColumn<R = any> extends EditableColumn<R> {
+    private _type;
+    private _mask;
+    private _inputMode;
+    private _step;
+    private _placeholder;
+    private _prefix;
+    private _suffix;
+    private _prefixIcon;
+    private _suffixIcon;
+    private _prefixIconColor;
+    private _suffixIconColor;
+    private _prefixInline;
+    private _suffixInline;
+    static make<R = any>(name: string): TextInputColumn<R>;
+    /** HTML input type (`text` by default; `number`, `email`, `color`…). */
+    type(type: string | null): this;
+    /** Alpine input mask (`x-mask`); the input then becomes a text input. */
+    mask(mask: string | null): this;
+    inputMode(mode: string | null): this;
+    step(step: number | string | null): this;
+    placeholder(text: string | null): this;
+    prefix(label: string | null, isInline?: boolean): this;
+    suffix(label: string | null, isInline?: boolean): this;
+    inlinePrefix(condition?: boolean): this;
+    inlineSuffix(condition?: boolean): this;
+    prefixIcon(name: string | null, isInline?: boolean): this;
+    suffixIcon(name: string | null, isInline?: boolean): this;
+    prefixIconColor(color: string | null): this;
+    suffixIconColor(color: string | null): this;
+    protected getImplicitRules(): ColumnValidationRule[];
+    toHtml(record: R, recordKey?: string | number): Promise<string>;
+}
+/**
+ * Custom-rendered column: `view()` takes a function returning the cell HTML, or the name of an EJS view rendered with
+ * `{ state, record, column }`. This HTML is the application's own: data inside it must be escaped there (`e()`).
+ */
+export declare class ViewColumn<R = any> extends Column<R> {
+    private _view;
+    private _viewData;
+    static make<R = any>(name: string): ViewColumn<R>;
+    view(view: ((ctx: {
+        state: unknown;
+        record: R;
+        column: ViewColumn<R>;
+    }) => string | Promise<string>) | string, data?: Record<string, unknown>): this;
+    toHtml(record: R): Promise<string>;
+}
+/** @deprecated Use `TextColumn.make(name).badge()`. */
+export declare class BadgeColumn<R = any> extends TextColumn<R> {
+    constructor(name: string);
+    static make<R = any>(name: string): BadgeColumn<R>;
+}
+/** @deprecated Use `IconColumn.make(name).boolean()`. */
+export declare class BooleanColumn<R = any> extends IconColumn<R> {
+    constructor(name: string);
+    static make<R = any>(name: string): BooleanColumn<R>;
+}
+/**
+ * Writes an editable cell value received from the browser. Everything is checked again: the column must be declared, editable
+ * and visible, the record within the adapter's scope and not disabled for this column, `authorize` (the host's edit permission)
+ * must accept it, and the value must pass the column's rules.
+ */
+export declare function updateTableColumnState<R>(table: Table<R>, host: TableHost, adapter: DataAdapter<R>, columnName: unknown, recordKey: unknown, input: unknown, options?: {
+    authorize?: (record: R) => boolean | Promise<boolean>;
+}): Promise<unknown>;
+/** Filter state: the values of its form. */
+export type FilterState = Record<string, unknown>;
+/** Active filter indicator: its label, and the filter field cleared when it is removed. */
+export type FilterIndicator = {
+    label: string;
+    field: string;
+};
+/** Filters layout: toolbar dropdown (default), or collapsible panel above the content. */
+export type FiltersLayout = 'dropdown' | 'above-content-collapsible';
+export interface TableFilter {
+    readonly name: string;
+    getLabel(): string;
+    /** Initial state (empty form). */
+    getDefaultState(): FilterState;
+    /** Options of the `value` field as [value, label] pairs, and the empty option's label. */
+    getFormDefinition(): {
+        placeholder: string;
+        options: [string, string][];
+    };
+    isActive(state: FilterState): boolean;
+    /** Applies the filter to the list query. Only reads known values. */
+    apply(query: Omit<ListQuery, 'page' | 'perPage'>, state: FilterState): void;
+    /** Form components of the filter, replacing the select described by `getFormDefinition()`. */
+    getFormComponents?(): unknown[];
+    getColumnSpan?(): Record<string, number | string>;
+    /** Applied state derived from the form state (received from the browser): keeps only what the filter knows. */
+    sanitizeState?(state: unknown): FilterState;
+    getIndicators?(state: FilterState): FilterIndicator[];
+    /** Select options loaded on demand (relationship), replacing those of `getFormDefinition()`. */
+    getFormOptions?(): Promise<[string, string][]>;
+    removeIndicator?(state: FilterState, field: string): FilterState;
+    /** Data loaded from the database before indicators are computed (e.g. related record labels). */
+    loadIndicatorData?(state: FilterState, host: TableHost): Promise<void>;
+}
+/** "Trashed" filter for soft-deletable models. */
+export declare class TrashedFilter implements TableFilter {
+    readonly name = "trashed";
+    static make(): TrashedFilter;
+    getLabel(): string;
+    getDefaultState(): FilterState;
+    getFormDefinition(): {
+        placeholder: string;
+        options: [string, string][];
+    };
+    isActive(state: FilterState): boolean;
+    apply(query: Omit<ListQuery, 'page' | 'perPage'>, state: FilterState): void;
+}
+/** Filters on a column value picked from a list (single select). */
+export declare class SelectFilter implements TableFilter {
+    readonly name: string;
+    private _label;
+    private _column;
+    private _options;
+    constructor(name: string);
+    static make(name: string): SelectFilter;
+    label(label: string): this;
+    /** Filtered column when it differs from the filter name (e.g. a relationship's foreign key). */
+    column(column: string): this;
+    /** Fixed options, or an async function (e.g. records of a relationship). */
+    options(options: [string, string][] | Record<string, string> | (() => Promise<[string, string][]>)): this;
+    getLabel(): string;
+    getDefaultState(): FilterState;
+    getFormDefinition(): {
+        placeholder: string;
+        options: [string, string][];
+    };
+    getFormOptions(): Promise<[string, string][]>;
+    /** Options are evaluated on every render, so the select gets a key derived from them (forces a re-render when they change). */
+    readonly hasDynamicOptions = true;
+    isActive(state: FilterState): boolean;
+    apply(query: Omit<ListQuery, 'page' | 'perPage'>, state: FilterState): void;
+}
+/** Three-state filter on a boolean column: all, yes, no. */
+export declare class TernaryFilter implements TableFilter {
+    readonly name: string;
+    private _label;
+    constructor(name: string);
+    static make(name: string): TernaryFilter;
+    label(label: string): this;
+    getLabel(): string;
+    getDefaultState(): FilterState;
+    getFormDefinition(): {
+        placeholder: string;
+        options: [string, string][];
+    };
+    isActive(state: FilterState): boolean;
+    apply(query: Omit<ListQuery, 'page' | 'perPage'>, state: FilterState): void;
+}
+/** Custom form filter (`schema()`): the query and indicators are written by the application. */
+export declare class Filter implements TableFilter {
+    readonly name: string;
+    private _label;
+    private _components;
+    private _query;
+    private _indicate;
+    constructor(name: string);
+    static make(name: string): Filter;
+    label(label: string): this;
+    /** Filter fields; their names are the only state keys accepted from the browser. */
+    schema(components: unknown[]): this;
+    /** Query condition built from the sanitized form state. */
+    query(modifier: (query: any, data: FilterState) => void): this;
+    /** Indicators of applied values as `{ field: label }`; removing one clears its field. */
+    indicateUsing(resolver: (data: FilterState) => Record<string, string>): this;
+    private fields;
+    getLabel(): string;
+    getDefaultState(): FilterState;
+    getFormDefinition(): {
+        placeholder: string;
+        options: [string, string][];
+    };
+    getFormComponents(): unknown[];
+    sanitizeState(state: unknown): FilterState;
+    isActive(state: FilterState): boolean;
+    apply(query: Omit<ListQuery, 'page' | 'perPage'>, state: FilterState): void;
+    getIndicators(state: FilterState): FilterIndicator[];
+    removeIndicator(state: FilterState, field: string): FilterState;
+}
+export type ColumnState = {
+    type: 'column';
+    name: string;
+    label: string;
+    isHidden: boolean;
+    isToggled: boolean;
+    isToggleable: boolean;
+    isToggledHiddenByDefault: boolean | null;
+};
+export declare class Table<R = any> {
+    private _columns;
+    private _recordAction;
+    private _recordActions;
+    private _heading;
+    private _headerActions;
+    private _bulkActions;
+    private _recordClasses;
+    private _filters;
+    private _filtersLayout;
+    private _defaultSort;
+    private _recordUrl;
+    private _pageOptions;
+    private _stackedOnMobile;
+    private _label;
+    private _groups;
+    private _defaultGroup;
+    private _defaultGroupDirection;
+    private _groupsOnly;
+    private _groupingSettingsHidden;
+    private _groupingDirectionSettingHidden;
+    private _groupingSettingsInDropdownOnDesktop;
+    private _collapsedGroupsByDefault;
+    /** Groupings offered in the toolbar (a column id is shorthand for `Group.make(id)`). */
+    groups(groups: (Group<R> | string)[]): this;
+    getGroups(): Group<R>[];
+    getGroup(id: string | null | undefined): Group<R> | null;
+    /**
+     * Default grouping. If it is one of `groups()`, it is only preselected when the table opens (`initializeTableGrouping`)
+     * and the user can remove it; otherwise it always applies, without a selector.
+     */
+    defaultGroup(group: Group<R> | string | null, direction?: SortDirection): this;
+    getDefaultGroup(): Group<R> | null;
+    getDefaultGroupDirection(): SortDirection;
+    isDefaultGroupSelectable(): boolean;
+    /** Shows only group headers and summaries, without rows or pagination. */
+    groupsOnly(condition?: boolean): this;
+    isGroupsOnly(): boolean;
+    /** Hides the toolbar grouping selector. */
+    groupingSettingsHidden(condition?: boolean): this;
+    areGroupingSettingsHidden(): boolean;
+    /** Hides the grouping direction (ascending / descending) choice. */
+    groupingDirectionSettingHidden(condition?: boolean): this;
+    isGroupingDirectionSettingHidden(): boolean;
+    /** Puts the grouping selector in a dropdown on desktop too. */
+    groupingSettingsInDropdownOnDesktop(condition?: boolean): this;
+    /** @deprecated Use `groupingSettingsInDropdownOnDesktop()`. */
+    groupsInDropdownOnDesktop(condition?: boolean): this;
+    areGroupingSettingsInDropdownOnDesktop(): boolean;
+    /** Collapsible groups start collapsed. */
+    collapsedGroupsByDefault(condition?: boolean): this;
+    areGroupsCollapsedByDefault(): boolean;
+    private _columnsLayout;
+    columns(columns: (Column<R> | ColumnGroup<R> | ColumnLayout<R>)[]): this;
+    /** Column layout, or `null` for a regular table. */
+    getColumnsLayout(): (Column<R> | ColumnLayout<R>)[] | null;
+    /** Action mounted when a row is clicked (e.g. `'edit'`), instead of a URL. */
+    recordAction(name: string | null): this;
+    getRecordAction(): string | null;
+    /** Heading shown in the table header. */
+    heading(heading: string | null): this;
+    getHeading(): string | null;
+    /** Actions shown in the table header. */
+    headerActions(actions: any[]): this;
+    getHeaderActions(): any[];
+    /** Bulk actions ("Bulk actions" menu); if never called, the host provides its default ones. */
+    groupedBulkActions(actions: any[]): this;
+    getBulkActions(): any[] | null;
+    /** Row actions: `Action`s or an `ActionGroup` (dropdown). */
+    recordActions(actions: any[]): this;
+    getRecordActions(): any[];
+    /** CSS classes added to a row depending on its record. */
+    recordClasses(resolver: (record: R) => string | null): this;
+    getRecordClasses(record: R): string | null;
+    filters(filters: TableFilter[], options?: {
+        layout?: FiltersLayout;
+    }): this;
+    filtersLayout(layout: FiltersLayout): this;
+    getFiltersLayout(): FiltersLayout;
+    /** No-op kept for API compatibility: filters always wait for the "Apply" button. */
+    deferFilters(): this;
+    defaultSort(column: string, direction?: SortDirection): this;
+    recordUrl(resolver: (record: R) => string | null): this;
+    private _reorderColumn;
+    /** Lets users reorder rows by hand; `column` stores the position. */
+    reorderable(column: string | null): this;
+    getReorderColumn(): string | null;
+    paginationPageOptions(options: number[]): this;
+    private _defaultPageOption;
+    /** Rows per page when the table opens. */
+    defaultPaginationPageOption(option: number | null): this;
+    getDefaultPageOption(): number;
+    private _paginationMode;
+    /** `'simple'`: previous / next buttons only, without page numbers or total. */
+    paginationMode(mode: 'default' | 'simple'): this;
+    getPaginationMode(): 'default' | 'simple';
+    stackedOnMobile(condition?: boolean): this;
+    pluralModelLabel(label: string): this;
+    getColumns(): Column<R>[];
+    getColumn(name: string): Column<R> | undefined;
+    getFilters(): TableFilter[];
+    getDefaultSort(): {
+        column: string;
+        direction: SortDirection;
+    } | null;
+    getRecordUrl(record: R): string | null;
+    getPageOptions(): number[];
+    isStackedOnMobile(): boolean;
+    getPluralModelLabel(): string;
+    hasToggleableColumns(): boolean;
+    /** Default column manager state. */
+    getDefaultColumnState(): ColumnState[];
+    getDefaultFilterState(): Record<string, FilterState>;
+}
+/** Table state held by the host component. */
+export interface TableHost {
+    readonly id: string;
+    tableSearch: string;
+    tableSort: string | null;
+    tableColumnSearches: Record<string, string>;
+    tableRecordsPerPage: number;
+    paginators: Record<string, number>;
+    tableFilters?: Record<string, FilterState>;
+    tableColumns?: ColumnState[];
+    /** Current grouping: `id` or `id:direction`. */
+    tableGrouping?: string | null;
+    /** Reordering mode: all rows, in position order, with drag handles. */
+    isTableReordering?: boolean;
+}
+/** Visible columns: those left checked in the column manager. Browser state can only hide columns declared toggleable. */
+export declare function getVisibleColumns<R>(table: Table<R>, host: TableHost): Column<R>[];
+/** Sanitizes column state from the browser: only `isToggled` of toggleable columns is kept. */
+export declare function sanitizeColumnState<R>(table: Table<R>, state: unknown): ColumnState[];
+/**
+ * List query (search, column searches, filters, sort) for the host's state, without pagination.
+ * Only what the table declares is accepted, whatever state the browser sends.
+ */
+export declare function getTableQuery<R>(table: Table<R>, host: TableHost): Omit<ListQuery, 'page' | 'perPage'>;
+/** Current grouping: only a group declared by the table is accepted, whatever state the browser sends. */
+export declare function getTableGrouping<R>(table: Table<R>, host: TableHost): {
+    group: Group<R>;
+    direction: SortDirection;
+} | null;
+/** When the table opens (host mount): preselects the default grouping when the user can change it. */
+export declare function initializeTableGrouping<R>(table: Table<R>, host: TableHost): void;
+export declare function countActiveFilters<R>(table: Table<R>, host: TableHost): number;
+/** Indicators of the applied filters (only filters that declare some have them). */
+export declare function getFilterIndicators<R>(table: Table<R>, host: TableHost): {
+    filter: string;
+    field: string;
+    label: string;
+}[];
+/** Cycles a column's sort: none → asc → desc → none. */
+export declare function sortTable(host: TableHost, column?: string | null, direction?: string | null): void;
+/** Loads the page of records matching the host's state. */
+export declare function getTableRecords<R>(table: Table<R>, host: TableHost, adapter: DataAdapter<R>): Promise<RecordPage<R>>;
+/** Pagination elements: the first and last pages and a window around the current page, with `...` gaps. */
+export declare function paginationElements(current: number, last: number, onEachSide?: number): (number | '...')[];
+export declare const useColorManager: (manager: ColorManager) => void;
+export type RenderTableOptions<R> = {
+    rowActions?: (record: R) => {
+        label: string;
+        url: string;
+        icon: string;
+        key: string;
+    }[] | Promise<{
+        label: string;
+        url: string;
+        icon: string;
+        key: string;
+    }[]>;
+    /** `false`: reordering is not offered (user not authorized). */
+    canReorder?: boolean;
+    /** HTML placed in `.fi-ta`, after the table container (action modals). */
+    after?: string;
+    /** Already rendered HTML of the table header actions. */
+    headerActions?: string[];
+    /** Already rendered HTML of the row actions (ActionGroup…), replacing the `rowActions` links. */
+    rowActionsHtml?: (record: R) => Promise<string>;
+    bulkActions?: string[];
+    /** HTML of the filters form (`tableFiltersForm` schema), if there are filters. */
+    filtersForm?: string | null;
+};
+/** Maximum number of rows shown (and reorderable) in reordering mode. */
+export declare const REORDER_LIMIT = 1000;
+/** Maximum records read for a `groupsOnly` table (which is not paginated). */
+export declare const GROUPS_ONLY_LIMIT = 1000;
+export declare function renderTable<R>(table: Table<R>, host: TableHost, adapter: DataAdapter<R>, options?: RenderTableOptions<R>): Promise<string>;