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

package/lib/index.js

@@ -0,0 +1,1308 @@
+import { Attributes, cls, e, hasRenderHook, icon, js, renderHook, views, configured, configureUsing } from '@navette-js/support';
+import { t } from '@navette-js/support/i18n';
+import { createHash, randomBytes } from 'node:crypto';
+import { fileURLToPath } from 'node:url';
+views.namespace('filament-tables', fileURLToPath(new URL('../views', import.meta.url)));
+export * from "./query-builder.js";
+/** Render hook slots of a table. */
+export const TablesRenderHook = {
+    CONTENT_AFTER: 'tables::content.after',
+    CONTENT_BEFORE: 'tables::content.before',
+    SELECTION_INDICATOR_ACTIONS_AFTER: 'tables::selection.indicator.actions.after',
+    SELECTION_INDICATOR_ACTIONS_BEFORE: 'tables::selection.indicator.actions.before',
+    HEADER_AFTER: 'tables::header.after',
+    HEADER_BEFORE: 'tables::header.before',
+    TOOLBAR_AFTER: 'tables::toolbar.after',
+    TOOLBAR_BEFORE: 'tables::toolbar.before',
+    TOOLBAR_COLUMN_MANAGER_TRIGGER_AFTER: 'tables::toolbar.toggle-column-trigger.after',
+    TOOLBAR_COLUMN_MANAGER_TRIGGER_BEFORE: 'tables::toolbar.toggle-column-trigger.before',
+    TOOLBAR_END: 'tables::toolbar.end',
+    TOOLBAR_GROUPING_SELECTOR_AFTER: 'tables::toolbar.grouping-selector.after',
+    TOOLBAR_GROUPING_SELECTOR_BEFORE: 'tables::toolbar.grouping-selector.before',
+    TOOLBAR_REORDER_TRIGGER_AFTER: 'tables::toolbar.reorder-trigger.after',
+    TOOLBAR_REORDER_TRIGGER_BEFORE: 'tables::toolbar.reorder-trigger.before',
+    TOOLBAR_SEARCH_AFTER: 'tables::toolbar.search.after',
+    TOOLBAR_SEARCH_BEFORE: 'tables::toolbar.search.before',
+    TOOLBAR_START: 'tables::toolbar.start',
+    FILTER_INDICATORS: 'tables::filter.indicators',
+    HEADER_CELL: 'tables::header.cell',
+    /** Legacy aliases of the column manager trigger slots. */
+    TOOLBAR_TOGGLE_COLUMN_TRIGGER_AFTER: 'tables::toolbar.toggle-column-trigger.after',
+    TOOLBAR_TOGGLE_COLUMN_TRIGGER_BEFORE: 'tables::toolbar.toggle-column-trigger.before',
+};
+/** Methods and properties that trigger the table's loading state (`wire:target`). */
+export const LOADING_TARGETS = 'activeTab,applyTableFilters,gotoPage,nextPage,previousPage,removeTableFilter,removeTableFilters,reorderTable,resetTableColumnSearch,resetTableFiltersForm,resetTableSearch,setPage,sortTable,tableColumnSearches,tableFilters,tableGrouping,tableRecordsPerPage,tableSearch,tableSort,toggleTableReordering';
+const headline = (s) => s.replace(/[_.-]+/g, ' ').replace(/^./, (c) => c.toUpperCase());
+// ------------------------------------------------------------------ columns
+/** Base class of table columns. */
+export class Column {
+    /** Default setup for every instance created afterwards by `make()`, e.g. `TextColumn.configureUsing((column) => column.sortable())`. */
+    static configureUsing(configure) { configureUsing(this, configure); }
+    name;
+    _label = null;
+    _sortable = false;
+    _searchable = false;
+    _individuallySearchable = false;
+    _toggleable = false;
+    _toggledHiddenByDefault = false;
+    _alignment = null;
+    _state = null;
+    _sortColumn = null;
+    _searchColumn = null;
+    _url = null;
+    /** Label of the column group this column belongs to (set by ColumnGroup). */
+    _group = null;
+    constructor(name) { this.name = name; }
+    label(label) { this._label = label; return this; }
+    /** `column`: column (or query alias) to sort by when it differs from the name, e.g. for a relationship. */
+    sortable(condition = true) { this._sortable = condition !== false; this._sortColumn = typeof condition === 'object' ? condition.column : null; this._sortInverted = typeof condition === 'object' && condition.inverted === true; return this; }
+    getSortColumn() { return this._sortColumn ?? this.name; }
+    _sortInverted = false;
+    /** `inverted`: the sort column runs opposite to the displayed value (e.g. an age sorted by birth date). */
+    isSortInverted() { return this._sortInverted; }
+    /** Link on the cell; takes precedence over the row action. */
+    url(resolver) { this._url = resolver; return this; }
+    getUrl(record) { return this._url ? this._url(record) : null; }
+    /** `isGlobal: false` excludes the column from the global search; `isIndividual` adds a search field for this column. */
+    getSearchColumn() { return this._searchColumn ?? this.name; }
+    searchable(options = true) {
+        this._searchColumn = typeof options === 'object' ? (options.column ?? null) : null;
+        this._searchable = typeof options === 'boolean' ? options : options.isGlobal !== false;
+        this._individuallySearchable = typeof options === 'object' && options.isIndividual === true;
+        return this;
+    }
+    /** Lets the user hide the column from the column manager. */
+    toggleable(condition = true, options = {}) { this._toggleable = condition; this._toggledHiddenByDefault = options.isToggledHiddenByDefault === true; return this; }
+    alignment(alignment) { this._alignment = alignment; return this; }
+    alignEnd() { return this.alignment('end'); }
+    alignLeft() { return this.alignment('left'); }
+    alignCenter() { return this.alignment('center'); }
+    getStateUsing(resolver) { this._state = resolver; return this; }
+    getLabel() { return this._label ?? headline(this.name.includes('.') ? this.name.split('.').slice(-2, -1)[0] : this.name); }
+    isSortable() { return this._sortable; }
+    isGloballySearchable() { return this._searchable; }
+    isIndividuallySearchable() { return this._individuallySearchable; }
+    isToggleable() { return this._toggleable; }
+    isToggledHiddenByDefault() { return this._toggledHiddenByDefault; }
+    getAlignment() { return this._alignment; }
+    /** Suffix of the `fi-ta-header-cell-…` / `fi-ta-cell-…` classes: underscores become dashes, dots are kept. */
+    getCssName() { return this.name.replace(/_/g, '-'); }
+    async getState(record) { return this._state ? this._state({ record }) : record[this.name]; }
+    /** True for editable cells: they are not wrapped in a link or button to the record. */
+    isClickDisabled() { return false; }
+}
+export class TextColumn extends Column {
+    _weight = null;
+    _copyable = false;
+    _money = null;
+    _placeholder = null;
+    _badge = false;
+    _color = null;
+    _icon = null;
+    _format = null;
+    _date = false;
+    _numeric = false;
+    _summarizers = [];
+    _limit = null;
+    _tooltip = null;
+    static make(name) { return configured(new TextColumn(name)); }
+    /** Displays the value in a badge. */
+    badge(condition = true) { this._badge = condition; return this; }
+    color(color) { this._color = color; return this; }
+    icon(resolver) { this._icon = resolver; return this; }
+    /** Text displayed instead of the raw value (e.g. an enum label). */
+    formatStateUsing(formatter) { this._format = formatter; return this; }
+    /** Short date, e.g. "Nov 9, 2026". */
+    date(condition = true) { this._date = condition; return this; }
+    _dateTime = false;
+    /** Date and time, e.g. "Nov 9, 2026 14:30:00". */
+    dateTime(condition = true) { this._dateTime = condition; this._date = condition; return this; }
+    /** Number formatted with thousands separators. */
+    _decimals = null;
+    /** `numeric(1)`: fixed number of decimals. */
+    numeric(condition = true) { this._numeric = condition !== false; this._decimals = typeof condition === 'number' ? condition : null; return this; }
+    /** Summary row below the table. */
+    summarize(summarizer) { this._summarizers = Array.isArray(summarizer) ? summarizer : [summarizer]; return this; }
+    getSummarizers() { return this._summarizers; }
+    weight(weight) { this._weight = weight; return this; }
+    /** Truncates the displayed text to `length` characters, followed by "...". */
+    limit(length) { this._limit = length; return this; }
+    /** Tooltip on hover; `null` for none. */
+    tooltip(tooltip) { this._tooltip = tooltip; return this; }
+    copyable(condition = true) { this._copyable = condition; return this; }
+    /** Amount formatted in the given currency, e.g. `money('usd')`. */
+    money(currency = 'usd') { this._money = currency; return this; }
+    /** Text displayed when the value is empty. */
+    placeholder(text) { this._placeholder = text; return this; }
+    /** Cell content: a short markup for plain text, a full markup as soon as an option (badge, icon, color…) is set. */
+    async toHtml(record) {
+        const state = await this.getState(record);
+        if ((state === null || state === undefined || state === '') && this._placeholder !== null)
+            return `<div class="fi-ta-text"><p class="fi-ta-placeholder">${e(this._placeholder)}</p></div>`;
+        // Empty value without placeholder: render a bare container.
+        if (state === null || state === undefined || state === '')
+            return `<div class="${cls(['fi-ta-text', this._money || this._numeric ? 'fi-numeric' : null, (this._money || this._numeric) && this._alignment && this._alignment !== 'start' ? `fi-align-${this._alignment}` : null])}"></div>`;
+        const currency = typeof this._money === 'function' ? this._money(record) : this._money;
+        if (this._badge || this._format || this._date) {
+            let shown = state === null || state === undefined ? '' : String(state);
+            if (this._date && shown)
+                shown = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${shown.replace(' ', 'T').slice(0, 19)}Z`)) + (this._dateTime ? ` ${shown.slice(11, 19)}` : '');
+            if (this._format)
+                shown = this._format({ state, record });
+            if (this._badge) {
+                const color = typeof this._color === 'function' ? this._color(record) : (this._color ?? 'primary');
+                const iconName = this._icon?.(record) ?? null;
+                const classes = ['fi-badge', 'fi-size-sm', ...(color !== 'gray' ? (colorManager?.getComponentClasses('badge', color) ?? []) : [])].join(' ');
+                // Without an icon the cell uses the short markup, which writes the classes in the other order.
+                return `<div class="${iconName ? 'fi-ta-text-item fi-ta-text' : 'fi-ta-text fi-ta-text-item'} fi-ta-text-has-badges"><span class="${classes}">${iconName ? icon(iconName, { size: 'sm', attributes: new Attributes({ 'aria-hidden': 'true' }) }) : ''}${e(shown)}</span></div>`;
+            }
+            if (!this._weight && !this._copyable)
+                return `<div class="${cls(['fi-ta-text', 'fi-ta-text-item', 'fi-size-sm', this._alignment && this._alignment !== 'start' ? `fi-align-${this._alignment}` : null])}">${e(shown)}</div>`;
+        }
+        const text = state === null || state === undefined ? '' : currency ? new Intl.NumberFormat('en-US', { style: 'currency', currency: currency.toUpperCase() }).format(Number(state)) : this._numeric && Number.isFinite(Number(state)) ? new Intl.NumberFormat('en-US', this._decimals !== null ? { minimumFractionDigits: this._decimals, maximumFractionDigits: this._decimals } : {}).format(Number(state)) : String(state);
+        const align = this._alignment && this._alignment !== 'start' ? `fi-align-${this._alignment}` : null;
+        const tooltip = typeof this._tooltip === 'function' ? this._tooltip(record) : this._tooltip;
+        if (this._limit !== null || (tooltip !== null && tooltip !== '')) {
+            const limited = this._limit !== null && text.length > this._limit ? `${text.slice(0, this._limit).trimEnd()}...` : text;
+            const content = tooltip !== null && tooltip !== '' ? `<span x-tooltip="{
+                                content: ${e(js(tooltip))},
+                                theme: $store.theme,
+                                allowHTML: false,
+                            }">${e(limited)}</span>` : e(limited);
+            return `<div class="${cls(['fi-ta-text-item', 'fi-size-sm', this._weight ? `fi-font-${this._weight}` : null, 'fi-ta-text', this._money || this._numeric ? 'fi-numeric' : null, align])}">${content}</div>`;
+        }
+        // Outside a badge: an icon precedes the text (full markup) and a color tints the text.
+        const plainIcon = this._icon?.(record) ?? null;
+        const plainColor = typeof this._color === 'function' ? this._color(record) : this._color;
+        const colorClasses = plainColor ? (colorManager?.getComponentClasses('text', plainColor) ?? []) : [];
+        if (plainIcon)
+            return `<div class="${cls(['fi-ta-text-item', 'fi-size-sm', this._weight ? `fi-font-${this._weight}` : null, 'fi-ta-text', ...colorClasses, align])}">${icon(plainIcon, { size: 'sm', attributes: new Attributes({ 'aria-hidden': 'true' }) })}${e(text)}</div>`;
+        if (!this._weight && !this._copyable)
+            return `<div class="${cls(['fi-ta-text', 'fi-ta-text-item', 'fi-size-sm', this._money || this._numeric ? 'fi-numeric' : null, ...colorClasses, align])}">${e(text)}</div>`;
+        const inner = this._copyable
+            ? `<span x-data="filamentCopyable" x-bind="bindings" x-bind:aria-label="isStandalone ? ${e(js(t('filament::components/copyable.label', { label: text })))} : null" x-on:click.prevent.stop="if (isStandalone) {
+    copy(${e(js(text))}, ${e(js(t('filament::components/copyable.messages.copied')))}, 2000, ${e(js(t('filament::components/copyable.messages.failed')))})
+} else {
+    window.navigator.clipboard.writeText(${e(js(text))})
+    $tooltip(${e(js(t('filament::components/copyable.messages.copied')))}, {
+        theme: $store.theme,
+        timeout: 2000,
+    })
+}" class="fi-copyable">${e(text)}</span>`
+            : e(text);
+        return `<div class="${cls(['fi-ta-text-item', 'fi-size-sm', this._weight ? `fi-font-${this._weight}` : null, 'fi-ta-text', this._money || this._numeric ? 'fi-numeric' : null, align])}">${inner}</div>`;
+    }
+}
+/** Column summary below the table: sum, average, count or range. */
+export class Summarizer {
+    _label = null;
+    _money = null;
+    label(label) { this._label = label; return this; }
+    money(currency = 'usd') { this._money = currency.toUpperCase(); return this; }
+    getLabel() { return this._label; }
+    format(value) { return this._money ? new Intl.NumberFormat('en-US', { style: 'currency', currency: this._money }).format(value) : new Intl.NumberFormat('en-US').format(value); }
+}
+/** Column total. */
+export class Sum extends Summarizer {
+    kind = 'sum';
+    static make() { return configured(new Sum()); }
+    getLabel() { return this._label ?? t('filament-tables::table.summary.summarizers.sum.label'); }
+    summarize(column, values) { return { type: 'text', label: this.getLabel(), value: this.format(values.sum[column] ?? 0) }; }
+}
+/** Column average. */
+export class Average extends Summarizer {
+    kind = 'avg';
+    static make() { return configured(new Average()); }
+    getLabel() { return this._label ?? t('filament-tables::table.summary.summarizers.average.label'); }
+    summarize(column, values) { return { type: 'text', label: this.getLabel(), value: this.format(values.avg[column] ?? 0) }; }
+}
+/** Record count. */
+export class Count extends Summarizer {
+    kind = 'count';
+    static make() { return configured(new Count()); }
+    getLabel() { return this._label ?? t('filament-tables::table.summary.summarizers.count.label'); }
+    summarize(_column, values) { return { type: 'text', label: this.getLabel(), value: this.format(values.count) }; }
+}
+/** Smallest and largest value of a column. */
+export class Range extends Summarizer {
+    kind = 'range';
+    _minimalDateTime = false;
+    static make() { return configured(new Range()); }
+    /** Dates: day only when the bounds fall on different days, day and time otherwise; a single value when both are equal. */
+    minimalDateTimeDifference(condition = true) { this._minimalDateTime = condition; return this; }
+    summarize(column, values) {
+        let bounds = [values.min[column], values.max[column]].filter((v) => v !== null && v !== undefined && v !== '').map(String);
+        if (!bounds.length)
+            return null;
+        if (this._minimalDateTime && bounds.length === 2) {
+            const date = (value) => new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${value.slice(0, 10)}T00:00:00Z`));
+            const dateTime = (value) => `${date(value)} ${value.length > 10 ? value.slice(11, 19) : '00:00:00'}`;
+            const days = bounds.map(date);
+            if (days[0] !== days[1])
+                bounds = days;
+            else {
+                const times = bounds.map(dateTime);
+                bounds = times[0] === times[1] ? [times[0]] : times;
+            }
+        }
+        return { type: 'range', label: this._label, value: bounds.join(' - ') };
+    }
+}
+/** Row grouping: rows are sorted by the column and each group gets a header row. */
+export class Group {
+    id;
+    _label = null;
+    _column = null;
+    _title = null;
+    _description = null;
+    _collapsible = false;
+    _date = false;
+    _titlePrefixedWithLabel = true;
+    constructor(id) { this.id = id; }
+    static make(id) { return configured(new Group(id)); }
+    label(label) { this._label = label; return this; }
+    /** Query column holding the group value, when it differs from the id (relationship). */
+    column(column) { this._column = column; return this; }
+    /** Group title computed from the record (e.g. an enum label). */
+    getTitleUsing(resolver) { this._title = resolver; return this; }
+    getDescriptionUsing(resolver) { this._description = resolver; return this; }
+    /** Aliases using the `get…FromRecordUsing` naming. */
+    getTitleFromRecordUsing(resolver) { return this.getTitleUsing(resolver); }
+    getDescriptionFromRecordUsing(resolver) { return this.getDescriptionUsing(resolver); }
+    /** Groups collapse when their header is clicked. */
+    collapsible(condition = true) { this._collapsible = condition; return this; }
+    /** The column is a date: rows from the same day form one group. */
+    date(condition = true) { this._date = condition; return this; }
+    titlePrefixedWithLabel(condition = true) { this._titlePrefixedWithLabel = condition; return this; }
+    getId() { return this.id; }
+    getLabel() {
+        if (this._label !== null)
+            return this._label;
+        const base = (this.id.includes('.') ? this.id.slice(0, this.id.lastIndexOf('.')) : this.id).split('.').pop() ?? '';
+        return base.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[-_]+/g, ' ').toLowerCase().replace(/^./, (c) => c.toUpperCase());
+    }
+    getColumn() { return this._column ?? this.id; }
+    isCollapsible() { return this._collapsible; }
+    isDate() { return this._date; }
+    isTitlePrefixedWithLabel() { return this._titlePrefixedWithLabel; }
+    /** Group value of a record, as text; `null` when empty. */
+    getStringKey(record) {
+        let key = record?.[this.getColumn()];
+        if (key === null || key === undefined || key === '')
+            return null;
+        if (typeof key === 'boolean')
+            key = key ? 1 : 0;
+        return this._date ? String(key).slice(0, 10) : String(key);
+    }
+    getTitle(record) {
+        if (this._title)
+            return this._title(record);
+        const key = this.getStringKey(record);
+        if (key !== null && this._date)
+            return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${key}T00:00:00Z`));
+        return key;
+    }
+    getDescription(record) { return this._description ? this._description(record) : null; }
+    /** Restricts a query to the records of the group with the given key. */
+    scope(query, key) {
+        if (key === null)
+            query.where((sub) => sub.whereNull(this.getColumn()).orWhere(this.getColumn(), ''));
+        else if (this._date)
+            query.whereRaw('date(??) = ?', [this.getColumn(), key]);
+        else
+            query.where(this.getColumn(), key);
+    }
+}
+/**
+ * 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 class ColumnLayout {
+    _children;
+    constructor(children) { this._children = children; }
+    getChildren() { return this._children; }
+    /** Leaf columns, in order: the ones the table sorts, searches and toggles. */
+    getColumns() { return this._children.flatMap((child) => (child instanceof ColumnLayout ? child.getColumns() : [child])); }
+}
+/** Columns side by side, from a given breakpoint. */
+export class Split extends ColumnLayout {
+    _from = null;
+    static make(children) { return new Split(children); }
+    from(breakpoint) { this._from = breakpoint; return this; }
+    getClasses() { return ['fi-ta-split', ...(this._from ? [`${this._from}:fi-ta-split`] : [])]; }
+}
+/** Columns stacked vertically. */
+export class Stack extends ColumnLayout {
+    _space = null;
+    _alignment = 'start';
+    static make(children) { return new Stack(children); }
+    /** Gap between columns: 1 (small), 2 (medium) or 3 (large). */
+    space(space = 1) { this._space = space; return this; }
+    alignment(alignment) { this._alignment = alignment; return this; }
+    getClasses() { return ['fi-ta-stack', `fi-align-${this._alignment}`, ...(this._space ? [`fi-gap-${['sm', 'md', 'lg'][this._space - 1]}`] : [])]; }
+}
+const layoutCell = (classes, html) => `<div class="${['fi-grid-col', 'fi-growable', ...classes].join(' ')}" style="--col-span-default: span 1 / span 1;">${html}</div>`;
+/** Renders a record through the layout, skipping columns the user has hidden. */
+async function renderColumnLayout(node, record, key, visible) {
+    if (node instanceof ColumnLayout) {
+        const children = [];
+        for (const child of node.getChildren())
+            children.push(await renderColumnLayout(child, record, key, visible));
+        return layoutCell([], `<div class="${node.getClasses().join(' ')}">${children.join('')}</div>`);
+    }
+    if (!visible.has(node))
+        return '';
+    const alignment = node.getAlignment();
+    // Inside a layout, text is inline and carries its own alignment.
+    const html = (await node.toHtml(record, key)).replace(/class="([^"]*\bfi-ta-text\b[^"]*)"/, (_match, classes) => `class="${classes.replace(/ fi-align-\w+/g, '')} fi-inline${alignment ? ` fi-align-${alignment}` : ''}"`);
+    return layoutCell(['fi-ta-col', ...(alignment ? [`fi-align-${alignment}`] : [])], html);
+}
+/** Column group: a shared label above the column headers. */
+export class ColumnGroup {
+    label;
+    _columns = [];
+    constructor(label) { this.label = label; }
+    static make(label) { return configured(new ColumnGroup(label)); }
+    columns(columns) { this._columns = columns; for (const c of columns)
+        c._group = this.label; return this; }
+    getColumns() { return this._columns; }
+}
+/** Color swatch column. */
+export class ColorColumn extends Column {
+    static make(name) { return configured(new ColorColumn(name)); }
+    async toHtml(record) {
+        const state = await this.getState(record);
+        // Only hex or simple functional colors are injected into the style attribute (no CSS injection).
+        const color = typeof state === 'string' && /^(#[0-9a-fA-F]{3,8}|(rgb|hsl|oklch)a?\([0-9.,%\s/deg-]+\))$/.test(state.trim()) ? state.trim() : null;
+        return `<div class="fi-ta-color">${color ? `<div aria-label="${e(color)}" role="img" class="fi-ta-color-item" style="background-color: ${color};"></div>` : ''}</div>`;
+    }
+}
+/** Image column: the state is the image URL. Only local or http(s) URLs are rendered. */
+export class ImageColumn extends Column {
+    _alt = null;
+    _height = '2.5rem';
+    _circular = false;
+    static make(name) { return configured(new ImageColumn(name)); }
+    alt(resolver) { this._alt = resolver; return this; }
+    /** CSS height of the image (`2.5rem` by default). */
+    imageHeight(height) { if (/^[0-9.]+(rem|px|em)$/.test(height))
+        this._height = height; return this; }
+    circular(condition = true) { this._circular = condition; return this; }
+    async toHtml(record) {
+        const state = await this.getState(record);
+        const src = typeof state === 'string' && /^(\/(?!\/)|https?:\/\/)/.test(state) ? state : null;
+        if (!src)
+            return '<div class="fi-ta-image"></div>';
+        const alt = this._alt?.(record) ?? null;
+        return `<div class="fi-ta-image"><img${alt !== null ? ` alt="${e(alt)}"` : ''} src="${e(src)}" style="height: ${this._height};"${this._circular ? ' class="fi-circular"' : ''} /></div>`;
+    }
+}
+/** Icon depending on the value; `boolean()` shows a green check or a red cross. */
+export class IconColumn extends Column {
+    _boolean = false;
+    static make(name) { return configured(new IconColumn(name)); }
+    boolean(condition = true) { this._boolean = condition; return this; }
+    async toHtml(record) {
+        const state = await this.getState(record);
+        if (!this._boolean || state === null || state === undefined)
+            return '<div class="fi-ta-icon"></div>';
+        const on = state === true || state === 1 || state === '1';
+        const classes = colorManager?.getComponentClasses('icon-column', on ? 'success' : 'danger') ?? [];
+        return `<div class="fi-ta-icon">${icon(on ? 'o-check-circle' : 'o-x-circle', { size: 'lg', attributes: new Attributes().class(classes) })}<span class="fi-sr-only">${e(t(on ? 'filament-tables::table.columns.icon.boolean.true' : 'filament-tables::table.columns.icon.boolean.false'))}</span></div>`;
+    }
+}
+const isBlank = (value) => value === null || value === undefined || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0);
+const isNumeric = (value) => (typeof value === 'number' && Number.isFinite(value)) || (typeof value === 'string' && value.trim() !== '' && Number.isFinite(Number(value)));
+/** String rules accepted by `rules([...])`, with their messages. An unknown rule throws at declaration time instead of being ignored. */
+const STRING_RULES = {
+    boolean: () => ({ name: 'boolean', passes: (v) => [true, false, 0, 1, '0', '1'].includes(v), message: (a) => `The ${a} field must be true or false.` }),
+    string: () => ({ name: 'string', passes: (v) => typeof v === 'string', message: (a) => `The ${a} field must be a string.` }),
+    numeric: () => ({ name: 'numeric', passes: isNumeric, message: (a) => `The ${a} field must be a number.` }),
+    integer: () => ({ name: 'integer', passes: (v) => isNumeric(v) && Number.isInteger(Number(v)) && !/[.eE]/.test(String(v)), message: (a) => `The ${a} field must be an integer.` }),
+    email: () => ({ name: 'email', passes: (v) => typeof v === 'string' && /^[^\s@]+@[^\s@]+$/.test(v), message: (a) => `The ${a} field must be a valid email address.` }),
+    url: () => ({ name: 'url', passes: (v) => typeof v === 'string' && /^https?:\/\/[^\s/$.?#][^\s]*$/i.test(v), message: (a) => `The ${a} field must be a valid URL.` }),
+    min: (n, numeric) => ({ name: 'min', passes: (v) => (numeric && isNumeric(v) ? Number(v) : [...String(v)].length) >= Number(n), message: (a) => numeric ? `The ${a} field must be at least ${n}.` : `The ${a} field must be at least ${n} characters.` }),
+    max: (n, numeric) => ({ name: 'max', passes: (v) => (numeric && isNumeric(v) ? Number(v) : [...String(v)].length) <= Number(n), message: (a) => numeric ? `The ${a} field must not be greater than ${n}.` : `The ${a} field must not be greater than ${n} characters.` }),
+    in: (list) => ({ name: 'in', passes: (v) => list.split(',').includes(String(v)), message: (a) => `The selected ${a} is invalid.` }),
+};
+/**
+ * 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 class EditableColumn extends Column {
+    _disabled = false;
+    _rules = [];
+    _validationAttribute = null;
+    _validationMessages = {};
+    _updateStateUsing = null;
+    _beforeStateUpdated = null;
+    _afterStateUpdated = null;
+    _tooltip = null;
+    disabled(condition = true) { this._disabled = condition; return this; }
+    async isDisabledFor(record) { return typeof this._disabled === 'function' ? this._disabled(record) : this._disabled; }
+    /** An editable cell is neither a link nor a button to the record. */
+    isClickDisabled() { return true; }
+    isEditable() { return true; }
+    /** Rules applied to the received value: strings (`required`, `max:255`, `in:a,b`…) or `{ name, passes, message }` objects. */
+    rules(rules) {
+        for (const rule of rules)
+            if (typeof rule === 'string' && rule !== 'required' && rule !== 'nullable' && !STRING_RULES[rule.split(':')[0]])
+                throw new Error(`Validation rule not supported by columns: ${rule}`);
+        this._rules = [...rules];
+        return this;
+    }
+    getRules() { return this._rules; }
+    /** Same as adding `required` to the rules. */
+    required(condition = true) { this._rules = [...this._rules.filter((rule) => rule !== 'required'), ...(condition ? ['required'] : [])]; return this; }
+    isRequired() { return this._rules.includes('required'); }
+    /** Column name used in messages (defaults to the label with a lowercase first letter). */
+    validationAttribute(label) { this._validationAttribute = label; return this; }
+    /** Custom messages by rule name, e.g. `{ max: 'Too long.' }`. */
+    validationMessages(messages) { this._validationMessages = { ...messages }; return this; }
+    getValidationAttribute() { return this._validationAttribute ?? this.getLabel().replace(/^./, (c) => c.toLowerCase()); }
+    /** Rules specific to the column type (e.g. select options). */
+    getImplicitRules() { return []; }
+    /**
+     * 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) {
+        const attribute = this.getValidationAttribute();
+        const blank = isBlank(input);
+        const numeric = this._rules.some((rule) => rule === 'numeric' || rule === 'integer');
+        const errors = [];
+        const fail = (name, message) => errors.push(this._validationMessages[name] ?? message);
+        if (blank) {
+            if (this.isRequired())
+                fail('required', `The ${attribute} field is required.`);
+        }
+        else {
+            // Column-type rules first: a malformed value (list, forged object) stops here.
+            const implicit = this.getImplicitRules().find((rule) => !rule.passes(input));
+            if (implicit)
+                return this._validationMessages[implicit.name] ?? implicit.message(attribute);
+            // String rules only apply to scalars: a list or an object fails them.
+            const isScalar = ['string', 'number', 'boolean'].includes(typeof input);
+            for (const rule of this._rules) {
+                if (rule === 'required' || rule === 'nullable')
+                    continue;
+                const resolved = typeof rule === 'string' ? STRING_RULES[rule.split(':')[0]](rule.slice(rule.indexOf(':') + 1), numeric) : rule;
+                if (!((typeof rule !== 'string' || isScalar) && resolved.passes(input)))
+                    fail(resolved.name, resolved.message(attribute));
+            }
+        }
+        if (!errors.length)
+            return null;
+        return errors.length === 1 ? errors[0] : `${errors[0]} (and ${errors.length - 1} more error${errors.length > 2 ? 's' : ''})`;
+    }
+    /** Custom write, replacing the update of the record's column. Its return value is sent back to the browser. */
+    updateStateUsing(callback) { this._updateStateUsing = callback; return this; }
+    beforeStateUpdated(callback) { this._beforeStateUpdated = callback; return this; }
+    afterStateUpdated(callback) { this._afterStateUpdated = callback; return this; }
+    /** Tooltip on the control, shown while no error is displayed. */
+    tooltip(tooltip) { this._tooltip = tooltip; return this; }
+    getUpdateStateMessages() {
+        return { saving: t('filament-tables::table.columns.editable.saving'), saved: t('filament-tables::table.columns.editable.saved'), failure: t('filament-tables::table.columns.editable.failure') };
+    }
+    /** Value written from a validated value: blank values become `null`. */
+    castState(input) { return isBlank(input) ? null : input; }
+    /**
+     * Saves an already validated value. Only the column's declared name is written: a relationship column (`author.name`)
+     * can only be edited with `updateStateUsing()`.
+     */
+    async updateState(record, input, adapter) {
+        const state = this.castState(input);
+        await this._beforeStateUpdated?.({ state, record });
+        if (this._updateStateUsing) {
+            try {
+                return await this._updateStateUsing({ state, record });
+            }
+            finally {
+                await this._afterStateUpdated?.({ state, record });
+            }
+        }
+        if (this.name.includes('.'))
+            return { error: t('filament-tables::table.columns.editable.unavailable') };
+        await adapter.update(adapter.getKey(record), { [this.name]: state });
+        await this._afterStateUpdated?.({ state, record });
+        return state;
+    }
+    /** `x-tooltip` expression of editable controls: the column tooltip, replaced by the validation error when there is one. */
+    tooltipExpression(record) {
+        const tooltip = typeof this._tooltip === 'function' ? this._tooltip(record) : this._tooltip;
+        return `error === undefined ? ${tooltip !== null && tooltip !== '' ? `{
+                        content: ${js(tooltip)},
+                        theme: $store.theme,
+                        allowHTML: false,
+                        aria: { content: 'auto' },
+                    }` : 'false'} : {
+                        content: error,
+                        theme: $store.theme,
+                        allowHTML: false,
+                        aria: { content: null },
+                    }`;
+    }
+    /** Shared opening markup of editable cells: lazily loaded Alpine component, server state and record key. */
+    editableAttributes(component, asset, recordKey, state) {
+        return new Attributes().merge({
+            'x-load': 'x-load',
+            'x-load-src': views.render('filament-tables::asset', { path: `columns/${asset}` }).trim(),
+            'x-data': `${component}({
+                    messages: ${js(this.getUpdateStateMessages())},
+                    name: ${js(this.name)},
+                    recordKey: ${js(String(recordKey))},
+                    state: ${js(state)},
+                })`,
+            'x-id': "['table-column-error']",
+            'x-on:click.capture': 'preventEdit($event)',
+            'x-on:keydown.capture': 'preventEdit($event)',
+        });
+    }
+    static 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 class SelectColumn extends EditableColumn {
+    _options = [];
+    _selectablePlaceholder = true;
+    static make(name) { return configured(new SelectColumn(name)); }
+    options(options) { this._options = (Array.isArray(options) ? options : Object.entries(options)).map(([value, label]) => [String(value), String(label)]); return this; }
+    getOptions() { return this._options; }
+    selectablePlaceholder(condition = true) { this._selectablePlaceholder = condition; return this; }
+    getImplicitRules() {
+        return [{ name: 'in', passes: (v) => (typeof v === 'string' || typeof v === 'number') && this._options.some(([value]) => value === String(v)), message: (a) => `The selected ${a} is invalid.` }];
+    }
+    async toHtml(record, recordKey = '') {
+        const state = await this.getState(record);
+        const value = state === null || state === undefined ? '' : String(state);
+        const optionLabel = this._options.find(([option]) => option === value)?.[1] ?? null;
+        const isDisabled = await this.isDisabledFor(record);
+        const placeholder = t('filament-forms::components.select.placeholder');
+        const messages = this.getUpdateStateMessages();
+        const config = `selectTableColumn({
+                    accessibilityAttributes: [],
+                    ariaLabel: ${js(this.getLabel())},
+                    canOptionLabelsWrap: true,
+                    canSelectPlaceholder: ${js(this._selectablePlaceholder)},
+                    clearButtonLabel: ${js(t('filament-forms::components.select.actions.clear.label'))},
+                    errorMessage: ${js(t('filament-forms::components.select.error_message'))},
+                    hasDynamicOptions: false,
+                    hasDynamicSearchResults: false,
+                    hasInitialNoOptionsMessage: true,
+                    initialOptionLabel: ${js(optionLabel)},
+                    isDisabled: ${js(isDisabled)},
+                    isHtmlAllowed: false,
+                    isNative: true,
+                    isSearchable: false,
+                    loadingMessage: ${js(t('filament-forms::components.select.loading_message'))},
+                    messages: ${js(messages)},
+                    name: ${js(this.name)},
+                    noOptionsMessage: ${js(t('filament-forms::components.select.no_options_message'))},
+                    noSearchResultsMessage: ${js(t('filament-forms::components.select.no_search_results_message'))},
+                    options: [],
+                    optionsLimit: 50,
+                    placeholder: ${js(placeholder)},
+                    position: null,
+                    recordKey: ${js(String(recordKey))},
+                    searchableOptionFields: ${js(['label'])},
+                    searchDebounce: 1000,
+                    searchingMessage: ${js(t('filament-forms::components.select.searching_message'))},
+                    searchLabel: ${js(t('filament-forms::components.select.search_label'))},
+                    searchPrompt: ${js(t('filament-forms::components.select.search_prompt'))},
+                    state: ${js(state === null || state === undefined ? null : value)},
+                })`;
+        const select = new Attributes().merge({
+            'aria-label': e(this.getLabel()), disabled: true, 'wire:loading.attr': 'disabled', 'wire:target': LOADING_TARGETS,
+            'x-bind:aria-invalid': "error ? 'true' : null", 'x-bind:aria-busy': "isLoading ? 'true' : null",
+            'x-bind:aria-describedby': "getAccessibilityAttributes([])[ 'aria-describedby' ]", 'x-bind:disabled': isDisabled ? null : 'isLoading', 'x-on:change': 'clearError()',
+            'x-tooltip': `error === undefined ? false : {
+                        content: error,
+                        theme: $store.theme,
+                        allowHTML: false,
+                        aria: { content: null },
+
+                    }`,
+        }).class(['fi-select-input']);
+        const options = `${this._selectablePlaceholder ? `<option value="">${e(placeholder)}</option>` : ''}${this._options.map(([option, label]) => `<option value="${e(option)}">${e(label)}</option>`).join('')}`;
+        return `<div wire:ignore.self x-load="x-load" x-load-src="${e(views.render('filament-tables::asset', { path: 'columns/select' }).trim())}" x-data="${e(config)}" x-id="['table-column-error']" x-on:click.capture="preventEdit($event)" x-on:keydown.capture="preventEdit($event)" class="fi-ta-select"><input type="hidden" value="${e(value)}" data-option-label="${e(optionLabel ?? '')}" data-disabled="${isDisabled ? 'true' : 'false'}" x-ref="serverState" /><div x-bind:class="{
+                    'fi-disabled': isLoading || ${js(isDisabled)},
+                    'fi-invalid': error !== undefined,
+                }" x-on:click.prevent.stop class="fi-input-wrp"><select x-model="state" ${select.toHtml()}>${options}</select></div><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></div>`;
+    }
+}
+/** Boolean value received from the browser (already checked by the `boolean` rule): `true`, `false` or `null`. */
+const toBoolean = (value) => (isBlank(value) ? null : value === true || value === 1 || value === '1');
+const ALIGNMENTS = ['start', 'center', 'end', 'left', 'right', 'justify', 'between'];
+const alignmentClass = (alignment) => (alignment && ALIGNMENTS.includes(alignment) ? `fi-align-${alignment}` : null);
+/** In-cell editable toggle. The received value must be a boolean (`boolean` rule by default). */
+export class ToggleColumn extends EditableColumn {
+    _onColor = null;
+    _offColor = null;
+    _onIcon = null;
+    _offIcon = null;
+    constructor(name) { super(name); this._rules = ['boolean']; }
+    static make(name) { return configured(new ToggleColumn(name)); }
+    /** Toggle color when on (`primary` by default) and off (`gray`). */
+    onColor(color) { this._onColor = color; return this; }
+    offColor(color) { this._offColor = color; return this; }
+    /** Icons shown inside the toggle's thumb. */
+    onIcon(icon) { this._onIcon = icon; return this; }
+    offIcon(icon) { this._offIcon = icon; return this; }
+    castState(input) { return toBoolean(input); }
+    async toHtml(record, recordKey = '') {
+        const state = Boolean(await this.getState(record));
+        const isDisabled = await this.isDisabledFor(record);
+        // Gray is the toggle's default color and adds no class.
+        const colorClasses = (color) => (color === 'gray' ? [] : (colorManager?.getComponentClasses('toggle', color) ?? []));
+        const onColorClasses = colorClasses(this._onColor ?? 'primary');
+        const onClasses = ['fi-toggle-on', ...onColorClasses].join(' ');
+        const offClasses = ['fi-toggle-off', ...colorClasses(this._offColor ?? 'gray')].join(' ');
+        const toggleIcon = (name) => (name ? icon(name, { size: 'xs' }) : '');
+        const outer = this.editableAttributes('toggleTableColumn', 'toggle', recordKey, state).class(['fi-ta-toggle', alignmentClass(this._alignment)]);
+        const button = new Attributes().merge({
+            'aria-disabled': 'true', 'aria-label': e(this.getLabel()), disabled: isDisabled, 'wire:loading.attr': 'disabled', 'wire:target': LOADING_TARGETS,
+            'x-bind:aria-invalid': "error ? 'true' : null", 'x-bind:aria-busy': "isLoading ? 'true' : null", 'x-bind:aria-describedby': "getAccessibilityAttributes()['aria-describedby']",
+            'x-tooltip': this.tooltipExpression(record),
+        }).class(['fi-toggle']);
+        // The live toggle is hidden (x-cloak) until Alpine starts; a static copy is shown meanwhile.
+        return `<div wire:ignore.self ${outer.toHtml()}><input type="hidden" value="${state ? 1 : 0}" x-ref="serverState" /><div aria-checked="${state ? 'true' : 'false'}" x-bind:aria-checked="state ? 'true' : 'false'" x-bind:tabindex="$el.hasAttribute('disabled') ? '-1' : '0'" x-bind:aria-disabled="isLoading || $el.hasAttribute('disabled') ? 'true' : null" x-on:click.prevent.stop="if (! $el.hasAttribute('disabled')) { clearError(); state = ! state }" x-on:keydown.enter.prevent.stop="if (! $el.hasAttribute('disabled')) { clearError(); state = ! state }" x-on:keydown.space.prevent.stop="if (! $el.hasAttribute('disabled')) { clearError(); state = ! state }" x-bind:class="state ? ${js(onClasses)} : ${js(offClasses)}"${state ? ' x-cloak' : ''} role="switch" ${button.toHtml()}><div><div aria-hidden="true">${toggleIcon(this._offIcon)}</div><div aria-hidden="true">${toggleIcon(this._onIcon)}</div></div></div>${state ? `<div x-cloak="inline-flex" wire:ignore class="${e(['fi-toggle fi-toggle-on fi-hidden', ...onColorClasses].join(' '))}"><div><div aria-hidden="true"></div><div aria-hidden="true">${toggleIcon(this._onIcon)}</div></div></div>` : ''}${EditableColumn.STATUS_HTML}</div>`;
+    }
+}
+/** In-cell editable checkbox. The received value must be a boolean (`boolean` rule by default). */
+export class CheckboxColumn extends EditableColumn {
+    constructor(name) { super(name); this._rules = ['boolean']; }
+    static make(name) { return configured(new CheckboxColumn(name)); }
+    castState(input) { return toBoolean(input); }
+    async toHtml(record, recordKey = '') {
+        const state = Boolean(await this.getState(record));
+        const isDisabled = await this.isDisabledFor(record);
+        const outer = this.editableAttributes('checkboxTableColumn', 'checkbox', recordKey, state).class(['fi-ta-checkbox', alignmentClass(this._alignment)]);
+        const input = new Attributes().merge({
+            'aria-label': e(this.getLabel()), disabled: true, 'wire:loading.attr': 'disabled', 'wire:target': LOADING_TARGETS,
+            'x-bind:aria-invalid': "error ? 'true' : null", 'x-bind:aria-busy': "isLoading ? 'true' : null", 'x-bind:aria-describedby': "getAccessibilityAttributes([])[ 'aria-describedby' ]",
+            'x-bind:disabled': isDisabled ? null : 'isLoading', 'x-on:change': 'clearError()', 'x-tooltip': this.tooltipExpression(record),
+        }).class(['fi-checkbox-input']);
+        return `<div x-on:click.stop wire:ignore.self ${outer.toHtml()}><input type="hidden" value="${state ? 1 : 0}" x-ref="serverState" /><input type="checkbox" x-bind:class="{
+                    'fi-valid': ! error,
+                    'fi-invalid': error,
+                }" x-model="state" ${input.toHtml()} />${EditableColumn.STATUS_HTML}</div>`;
+    }
+}
+/** In-cell editable text input. Only a string or a number is accepted from the browser. */
+export class TextInputColumn extends EditableColumn {
+    _type = 'text';
+    _mask = null;
+    _inputMode = null;
+    _step = null;
+    _placeholder = null;
+    _prefix = null;
+    _suffix = null;
+    _prefixIcon = null;
+    _suffixIcon = null;
+    _prefixIconColor = null;
+    _suffixIconColor = null;
+    _prefixInline = false;
+    _suffixInline = false;
+    static make(name) { return configured(new TextInputColumn(name)); }
+    /** HTML input type (`text` by default; `number`, `email`, `color`…). */
+    type(type) { this._type = type && /^[a-z-]+$/.test(type) ? type : 'text'; return this; }
+    /** Alpine input mask (`x-mask`); the input then becomes a text input. */
+    mask(mask) { this._mask = mask; return this; }
+    inputMode(mode) { this._inputMode = mode; return this; }
+    step(step) { this._step = step; return this; }
+    placeholder(text) { this._placeholder = text; return this; }
+    prefix(label, isInline = false) { this._prefix = label; this._prefixInline = isInline; return this; }
+    suffix(label, isInline = false) { this._suffix = label; this._suffixInline = isInline; return this; }
+    inlinePrefix(condition = true) { this._prefixInline = condition; return this; }
+    inlineSuffix(condition = true) { this._suffixInline = condition; return this; }
+    prefixIcon(name, isInline = false) { this._prefixIcon = name; this._prefixInline = isInline; return this; }
+    suffixIcon(name, isInline = false) { this._suffixIcon = name; this._suffixInline = isInline; return this; }
+    prefixIconColor(color) { this._prefixIconColor = color; return this; }
+    suffixIconColor(color) { this._suffixIconColor = color; return this; }
+    getImplicitRules() {
+        return [{ name: 'string', passes: (v) => typeof v === 'string' || (typeof v === 'number' && Number.isFinite(v)), message: (a) => `The ${a} field must be a string.` }];
+    }
+    async toHtml(record, recordKey = '') {
+        const raw = await this.getState(record);
+        const state = raw === undefined ? null : raw;
+        const isDisabled = await this.isDisabledFor(record);
+        const type = this._mask ? 'text' : this._type;
+        // Affix icon: gray is the default color and adds no class.
+        const affixIcon = (name, color) => (name ? icon(name, { attributes: new Attributes().class(color && color !== 'gray' ? ['fi-color', `fi-color-${color.replace(/[^a-zA-Z0-9_-]/g, '')}`] : []) }) : '');
+        const outer = this.editableAttributes('textInputTableColumn', 'text-input', recordKey, state).class(['fi-ta-text-input']);
+        const input = new Attributes().merge({
+            'aria-label': e(this.getLabel()), disabled: true, 'wire:loading.attr': 'disabled', 'wire:target': LOADING_TARGETS,
+            'x-bind:aria-invalid': "error ? 'true' : null", 'x-bind:aria-busy': "isLoading ? 'true' : null", 'x-bind:aria-describedby': "getAccessibilityAttributes([])[ 'aria-describedby' ]",
+            'x-bind:disabled': isDisabled ? null : 'isLoading', 'x-on:input': 'clearError()', inputmode: this._inputMode, placeholder: this._placeholder ? e(this._placeholder) : null, step: this._step,
+            type, 'x-mask': this._mask, 'x-tooltip': this.tooltipExpression(record),
+        }).class(['fi-input', alignmentClass(this._alignment ?? 'start')]);
+        const prefix = this._prefixIcon || this._prefix ? `<div class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content ${this._prefixInline ? 'fi-inline' : ''} ${this._prefix ? 'fi-input-wrp-prefix-has-label' : ''}">${affixIcon(this._prefixIcon, this._prefixIconColor)}${this._prefix ? `<span class="fi-input-wrp-label">${e(this._prefix)}</span>` : ''}</div>` : '';
+        const suffix = this._suffixIcon || this._suffix ? `<div class="fi-input-wrp-suffix ${this._suffixInline ? 'fi-inline' : ''} ${this._suffix ? 'fi-input-wrp-suffix-has-label' : ''}">${this._suffix ? `<span class="fi-input-wrp-label">${e(this._suffix)}</span>` : ''}${affixIcon(this._suffixIcon, this._suffixIconColor)}</div>` : '';
+        return `<div wire:ignore.self ${outer.toHtml()}><input type="hidden" value="${e(state)}" x-ref="serverState" /><div x-bind:class="{
+                    'fi-disabled': isLoading || ${js(isDisabled)},
+                    'fi-invalid': error !== undefined,
+                }" x-on:click.prevent.stop class="fi-input-wrp">${prefix}<div class="fi-input-wrp-content-ctn"><input${type === 'color' ? ` onclick="if (typeof this.showPicker === 'function') { this.showPicker() }"` : ''} x-model.lazy="state" ${input.toHtml()} /></div>${suffix}</div>${EditableColumn.STATUS_HTML}</div>`;
+    }
+}
+/**
+ * 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 class ViewColumn extends Column {
+    _view = null;
+    _viewData = {};
+    static make(name) { return configured(new ViewColumn(name)); }
+    view(view, data = {}) { this._view = view; this._viewData = data; return this; }
+    async toHtml(record) {
+        const state = await this.getState(record);
+        if (this._view === null)
+            throw new Error(`ViewColumn ${this.name}: no view declared (view()).`);
+        if (typeof this._view === 'function')
+            return this._view({ state, record, column: this });
+        return views.render(this._view, { ...this._viewData, state, record, column: this, getState: () => state, getRecord: () => record });
+    }
+}
+/** @deprecated Use `TextColumn.make(name).badge()`. */
+export class BadgeColumn extends TextColumn {
+    constructor(name) { super(name); this.badge(); }
+    static make(name) { return configured(new BadgeColumn(name)); }
+}
+/** @deprecated Use `IconColumn.make(name).boolean()`. */
+export class BooleanColumn extends IconColumn {
+    constructor(name) { super(name); this.boolean(); }
+    static make(name) { return configured(new BooleanColumn(name)); }
+}
+/**
+ * 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 async function updateTableColumnState(table, host, adapter, columnName, recordKey, input, options = {}) {
+    const unavailable = { error: t('filament-tables::table.columns.editable.unavailable') };
+    const column = getVisibleColumns(table, host).find((c) => c.name === columnName);
+    if (!(column instanceof EditableColumn))
+        return unavailable;
+    if (typeof recordKey !== 'string' && typeof recordKey !== 'number')
+        return unavailable;
+    const record = (await adapter.keysInScope([String(recordKey)])).length ? await adapter.find(String(recordKey)) : null;
+    if (!record || (options.authorize && !(await options.authorize(record))) || (await column.isDisabledFor(record)))
+        return unavailable;
+    const error = column.validate(input);
+    if (error !== null)
+        return { error };
+    return column.updateState(record, input, adapter);
+}
+/** "Trashed" filter for soft-deletable models. */
+export class TrashedFilter {
+    name = 'trashed';
+    static make() { return configured(new TrashedFilter()); }
+    getLabel() { return t('filament-tables::table.filters.trashed.label'); }
+    getDefaultState() { return { value: null }; }
+    getFormDefinition() {
+        return { placeholder: t('filament-tables::table.filters.trashed.without_trashed'), options: [['1', t('filament-tables::table.filters.trashed.with_trashed')], ['0', t('filament-tables::table.filters.trashed.only_trashed')]] };
+    }
+    isActive(state) { return ['1', '0'].includes(String(state.value)); }
+    apply(query, state) {
+        query.trashed = String(state.value) === '1' ? 'with' : String(state.value) === '0' ? 'only' : 'without';
+    }
+}
+const filterLabel = (name) => name.replace(/[_.-]+/g, ' ').replace(/^./, (c) => c.toUpperCase());
+/** Filters on a column value picked from a list (single select). */
+export class SelectFilter {
+    name;
+    _label = null;
+    _column = null;
+    _options = [];
+    constructor(name) { this.name = name; }
+    static make(name) { return configured(new SelectFilter(name)); }
+    label(label) { this._label = label; return this; }
+    /** Filtered column when it differs from the filter name (e.g. a relationship's foreign key). */
+    column(column) { this._column = column; return this; }
+    /** Fixed options, or an async function (e.g. records of a relationship). */
+    options(options) {
+        this._options = typeof options === 'function' ? options : (Array.isArray(options) ? options : Object.entries(options)).map(([value, label]) => [String(value), String(label)]);
+        return this;
+    }
+    getLabel() { return this._label ?? filterLabel(this.name); }
+    getDefaultState() { return { value: null }; }
+    getFormDefinition() { return { placeholder: t('filament-tables::table.filters.select.placeholder'), options: Array.isArray(this._options) ? this._options : [] }; }
+    getFormOptions() { return typeof this._options === 'function' ? this._options() : Promise.resolve(this._options); }
+    /** Options are evaluated on every render, so the select gets a key derived from them (forces a re-render when they change). */
+    hasDynamicOptions = true;
+    isActive(state) { return typeof state.value === 'string' && state.value !== ''; }
+    apply(query, state) {
+        if (!this.isActive(state))
+            return;
+        const value = String(state.value).slice(0, 255);
+        // Fixed options: only an offered value filters. Loaded options: the value is a bound parameter, an unknown value matches nothing.
+        if (Array.isArray(this._options) && !this._options.some(([option]) => option === value))
+            return;
+        const column = this._column ?? this.name;
+        (query.modifiers ??= []).push((q) => { q.where(column, value); });
+    }
+}
+/** Three-state filter on a boolean column: all, yes, no. */
+export class TernaryFilter {
+    name;
+    _label = null;
+    constructor(name) { this.name = name; }
+    static make(name) { return configured(new TernaryFilter(name)); }
+    label(label) { this._label = label; return this; }
+    getLabel() { return this._label ?? filterLabel(this.name); }
+    getDefaultState() { return { value: null }; }
+    getFormDefinition() { return { placeholder: '-', options: [['1', t('filament-forms::components.select.boolean.true')], ['0', t('filament-forms::components.select.boolean.false')]] }; }
+    isActive(state) { return ['1', '0'].includes(String(state.value)); }
+    apply(query, state) {
+        if (!this.isActive(state))
+            return;
+        const column = this.name, on = String(state.value) === '1';
+        (query.modifiers ??= []).push((q) => { q.where(column, on ? 1 : 0); });
+    }
+}
+/** Custom form filter (`schema()`): the query and indicators are written by the application. */
+export class Filter {
+    name;
+    _label = null;
+    _components = [];
+    _query = null;
+    _indicate = null;
+    constructor(name) { this.name = name; }
+    static make(name) { return configured(new Filter(name)); }
+    label(label) { this._label = label; return this; }
+    /** Filter fields; their names are the only state keys accepted from the browser. */
+    schema(components) { this._components = components; return this; }
+    /** Query condition built from the sanitized form state. */
+    query(modifier) { this._query = modifier; return this; }
+    /** Indicators of applied values as `{ field: label }`; removing one clears its field. */
+    indicateUsing(resolver) { this._indicate = resolver; return this; }
+    fields() { return this._components.map((c) => (typeof c?.getName === 'function' ? String(c.getName()) : null)).filter((name) => name !== null); }
+    getLabel() { return this._label ?? filterLabel(this.name); }
+    getDefaultState() { return Object.fromEntries(this.fields().map((name) => [name, null])); }
+    getFormDefinition() { return { placeholder: '', options: [] }; }
+    getFormComponents() { return this._components; }
+    sanitizeState(state) {
+        const received = state && typeof state === 'object' ? state : {};
+        return Object.fromEntries(this.fields().map((name) => { const value = received[name]; return [name, ['string', 'number', 'boolean'].includes(typeof value) && value !== '' ? value : null]; }));
+    }
+    isActive(state) { return Object.values(this.sanitizeState(state)).some((value) => value !== null); }
+    apply(query, state) {
+        const data = this.sanitizeState(state);
+        if (this._query && this.isActive(data))
+            (query.modifiers ??= []).push((q) => { this._query(q, data); });
+    }
+    getIndicators(state) {
+        const data = this.sanitizeState(state);
+        if (!this._indicate)
+            return this.isActive(data) ? [{ label: this.getLabel(), field: '' }] : [];
+        return Object.entries(this._indicate(data)).map(([field, label]) => ({ field, label }));
+    }
+    removeIndicator(state, field) { return field === '' ? this.getDefaultState() : { ...this.sanitizeState(state), [field]: null }; }
+}
+export class Table {
+    _columns = [];
+    _recordAction = null;
+    _recordActions = [];
+    _heading = null;
+    _headerActions = [];
+    _bulkActions = null;
+    _recordClasses = null;
+    _filters = [];
+    _filtersLayout = 'dropdown';
+    _defaultSort = null;
+    _recordUrl = null;
+    _pageOptions = [5, 10, 25, 50];
+    _stackedOnMobile = false;
+    _label = 'records';
+    _groups = [];
+    _defaultGroup = null;
+    _defaultGroupDirection = 'asc';
+    _groupsOnly = false;
+    _groupingSettingsHidden = false;
+    _groupingDirectionSettingHidden = false;
+    _groupingSettingsInDropdownOnDesktop = false;
+    _collapsedGroupsByDefault = false;
+    /** Groupings offered in the toolbar (a column id is shorthand for `Group.make(id)`). */
+    groups(groups) { this._groups = groups.map((g) => (typeof g === 'string' ? Group.make(g) : g)); return this; }
+    getGroups() { return this._groups; }
+    getGroup(id) { return this._groups.find((g) => g.getId() === id) ?? 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, direction = 'asc') { this._defaultGroup = group; this._defaultGroupDirection = direction === 'desc' ? 'desc' : 'asc'; return this; }
+    getDefaultGroup() {
+        if (this._defaultGroup === null)
+            return null;
+        if (this._defaultGroup instanceof Group)
+            return this._defaultGroup;
+        return this.getGroup(this._defaultGroup) ?? Group.make(this._defaultGroup);
+    }
+    getDefaultGroupDirection() { return this._defaultGroupDirection; }
+    isDefaultGroupSelectable() { const group = this.getDefaultGroup(); return group !== null && this.getGroup(group.getId()) !== null; }
+    /** Shows only group headers and summaries, without rows or pagination. */
+    groupsOnly(condition = true) { this._groupsOnly = condition; return this; }
+    isGroupsOnly() { return this._groupsOnly; }
+    /** Hides the toolbar grouping selector. */
+    groupingSettingsHidden(condition = true) { this._groupingSettingsHidden = condition; return this; }
+    areGroupingSettingsHidden() { return this._groupingSettingsHidden; }
+    /** Hides the grouping direction (ascending / descending) choice. */
+    groupingDirectionSettingHidden(condition = true) { this._groupingDirectionSettingHidden = condition; return this; }
+    isGroupingDirectionSettingHidden() { return this._groupingDirectionSettingHidden; }
+    /** Puts the grouping selector in a dropdown on desktop too. */
+    groupingSettingsInDropdownOnDesktop(condition = true) { this._groupingSettingsInDropdownOnDesktop = condition; return this; }
+    /** @deprecated Use `groupingSettingsInDropdownOnDesktop()`. */
+    groupsInDropdownOnDesktop(condition = true) { return this.groupingSettingsInDropdownOnDesktop(condition); }
+    areGroupingSettingsInDropdownOnDesktop() { return this._groupingSettingsInDropdownOnDesktop; }
+    /** Collapsible groups start collapsed. */
+    collapsedGroupsByDefault(condition = true) { this._collapsedGroupsByDefault = condition; return this; }
+    areGroupsCollapsedByDefault() { return this._collapsedGroupsByDefault; }
+    _columnsLayout = null;
+    columns(columns) {
+        this._columns = columns.flatMap((c) => (c instanceof ColumnGroup || c instanceof ColumnLayout ? c.getColumns() : [c]));
+        this._columnsLayout = columns.some((c) => c instanceof ColumnLayout) ? columns.filter((c) => !(c instanceof ColumnGroup)) : null;
+        return this;
+    }
+    /** Column layout, or `null` for a regular table. */
+    getColumnsLayout() { return this._columnsLayout; }
+    /** Action mounted when a row is clicked (e.g. `'edit'`), instead of a URL. */
+    recordAction(name) { this._recordAction = name; return this; }
+    getRecordAction() { return this._recordAction; }
+    /** Heading shown in the table header. */
+    heading(heading) { this._heading = heading; return this; }
+    getHeading() { return this._heading; }
+    /** Actions shown in the table header. */
+    headerActions(actions) { this._headerActions = actions; return this; }
+    getHeaderActions() { return this._headerActions; }
+    /** Bulk actions ("Bulk actions" menu); if never called, the host provides its default ones. */
+    groupedBulkActions(actions) { this._bulkActions = actions; return this; }
+    getBulkActions() { return this._bulkActions; }
+    /** Row actions: `Action`s or an `ActionGroup` (dropdown). */
+    recordActions(actions) { this._recordActions = actions; return this; }
+    getRecordActions() { return this._recordActions; }
+    /** CSS classes added to a row depending on its record. */
+    recordClasses(resolver) { this._recordClasses = resolver; return this; }
+    getRecordClasses(record) { return this._recordClasses ? this._recordClasses(record) : null; }
+    filters(filters, options = {}) { this._filters = filters; if (options.layout)
+        this._filtersLayout = options.layout; return this; }
+    filtersLayout(layout) { this._filtersLayout = layout; return this; }
+    getFiltersLayout() { return this._filtersLayout; }
+    /** No-op kept for API compatibility: filters always wait for the "Apply" button. */
+    deferFilters() { return this; }
+    defaultSort(column, direction = 'asc') { this._defaultSort = { column, direction }; return this; }
+    recordUrl(resolver) { this._recordUrl = resolver; return this; }
+    _reorderColumn = null;
+    /** Lets users reorder rows by hand; `column` stores the position. */
+    reorderable(column) { this._reorderColumn = column; return this; }
+    getReorderColumn() { return this._reorderColumn; }
+    paginationPageOptions(options) { this._pageOptions = options; return this; }
+    _defaultPageOption = null;
+    /** Rows per page when the table opens. */
+    defaultPaginationPageOption(option) { this._defaultPageOption = option; return this; }
+    getDefaultPageOption() { return this._defaultPageOption !== null && this._pageOptions.includes(this._defaultPageOption) ? this._defaultPageOption : (this._pageOptions.includes(10) ? 10 : this._pageOptions[0]); }
+    _paginationMode = 'default';
+    /** `'simple'`: previous / next buttons only, without page numbers or total. */
+    paginationMode(mode) { this._paginationMode = mode; return this; }
+    getPaginationMode() { return this._paginationMode; }
+    stackedOnMobile(condition = true) { this._stackedOnMobile = condition; return this; }
+    pluralModelLabel(label) { this._label = label; return this; }
+    getColumns() { return this._columns; }
+    getColumn(name) { return this._columns.find((c) => c.name === name); }
+    getFilters() { return this._filters; }
+    getDefaultSort() { return this._defaultSort; }
+    getRecordUrl(record) { return this._recordUrl ? this._recordUrl(record) : null; }
+    getPageOptions() { return this._pageOptions; }
+    isStackedOnMobile() { return this._stackedOnMobile; }
+    getPluralModelLabel() { return this._label; }
+    hasToggleableColumns() { return this._columns.some((c) => c.isToggleable()); }
+    /** Default column manager state. */
+    getDefaultColumnState() {
+        return this._columns.map((c) => ({ type: 'column', name: c.name, label: c.getLabel(), isHidden: false, isToggled: !c.isToggleable() || !c.isToggledHiddenByDefault(), isToggleable: c.isToggleable(), isToggledHiddenByDefault: c.isToggleable() ? c.isToggledHiddenByDefault() : null }));
+    }
+    getDefaultFilterState() { return Object.fromEntries(this._filters.map((f) => [f.name, f.getDefaultState()])); }
+}
+/** Visible columns: those left checked in the column manager. Browser state can only hide columns declared toggleable. */
+export function getVisibleColumns(table, host) {
+    const hidden = new Set((Array.isArray(host.tableColumns) ? host.tableColumns : []).filter((c) => c && c.isToggled === false).map((c) => c.name));
+    return table.getColumns().filter((c) => !(c.isToggleable() && hidden.has(c.name)));
+}
+/** Sanitizes column state from the browser: only `isToggled` of toggleable columns is kept. */
+export function sanitizeColumnState(table, state) {
+    const received = new Map((Array.isArray(state) ? state : []).filter((c) => c && typeof c === 'object').map((c) => [String(c.name), c.isToggled]));
+    return table.getDefaultColumnState().map((c) => (c.isToggleable && typeof received.get(c.name) === 'boolean' ? { ...c, isToggled: received.get(c.name) } : c));
+}
+/**
+ * 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 function getTableQuery(table, host) {
+    const [column, direction] = (host.tableSort ?? '').split(':');
+    const sortColumn = table.getColumn(column);
+    const query = {
+        search: host.tableSearch,
+        searchColumns: table.getColumns().filter((c) => c.isGloballySearchable()).map((c) => c.getSearchColumn()),
+        columnSearches: Object.fromEntries(table.getColumns().filter((c) => c.isIndividuallySearchable() && String(host.tableColumnSearches?.[c.name] ?? '').trim() !== '').map((c) => [c.name, String(host.tableColumnSearches[c.name])])),
+        sort: sortColumn?.isSortable() ? { column: sortColumn.getSortColumn(), direction: ((direction === 'desc') !== sortColumn.isSortInverted() ? 'desc' : 'asc') } : table.getDefaultSort(),
+    };
+    const grouping = getTableGrouping(table, host);
+    if (grouping)
+        query.groupSort = { column: grouping.group.getColumn(), direction: grouping.direction };
+    // The host can restrict the query (active list tab).
+    host.modifyTableQuery?.(query);
+    for (const filter of table.getFilters()) {
+        const state = host.tableFilters?.[filter.name];
+        filter.apply(query, state && typeof state === 'object' ? state : filter.getDefaultState());
+    }
+    return query;
+}
+/** Current grouping: only a group declared by the table is accepted, whatever state the browser sends. */
+export function getTableGrouping(table, host) {
+    if (host.isTableReordering === true)
+        return null;
+    const [id, direction] = String(host.tableGrouping ?? '').split(':');
+    const group = table.getGroup(id);
+    if (group)
+        return { group, direction: direction === 'desc' ? 'desc' : 'asc' };
+    // A default grouping missing from the selector always applies; one listed in the selector only applies when chosen.
+    const fallback = table.isDefaultGroupSelectable() ? null : table.getDefaultGroup();
+    return fallback ? { group: fallback, direction: table.getDefaultGroupDirection() } : null;
+}
+/** When the table opens (host mount): preselects the default grouping when the user can change it. */
+export function initializeTableGrouping(table, host) {
+    const group = table.getDefaultGroup();
+    if ((host.tableGrouping === null || host.tableGrouping === undefined || host.tableGrouping === '') && group && table.isDefaultGroupSelectable())
+        host.tableGrouping = `${group.getId()}:${table.getDefaultGroupDirection()}`;
+}
+export function countActiveFilters(table, host) {
+    // The count is the number of indicators; an active filter without indicators counts as one.
+    return table.getFilters().reduce((total, f) => { const s = host.tableFilters?.[f.name]; return total + (!s || typeof s !== 'object' ? 0 : f.getIndicators ? f.getIndicators(s).length : f.isActive(s) ? 1 : 0); }, 0);
+}
+/** Indicators of the applied filters (only filters that declare some have them). */
+export function getFilterIndicators(table, host) {
+    return table.getFilters().flatMap((f) => { const s = host.tableFilters?.[f.name]; return s && typeof s === 'object' && f.getIndicators ? f.getIndicators(s).map((indicator) => ({ filter: f.name, ...indicator })) : []; });
+}
+/** Cycles a column's sort: none → asc → desc → none. */
+export function sortTable(host, column = null, direction = null) {
+    const [current, currentDirection] = (host.tableSort ?? '').split(':');
+    if (column === (host.tableSort ? current : null))
+        direction ??= (currentDirection ?? 'asc') === 'asc' ? 'desc' : currentDirection === 'desc' ? null : 'asc';
+    else
+        direction ??= 'asc';
+    host.tableSort = direction ? `${column}:${direction}` : null;
+    host.paginators.page = 1;
+}
+/** Loads the page of records matching the host's state. */
+export async function getTableRecords(table, host, adapter) {
+    const options = table.getPageOptions();
+    const perPage = options.includes(Number(host.tableRecordsPerPage)) ? Number(host.tableRecordsPerPage) : options[0];
+    return adapter.paginate({ ...getTableQuery(table, host), page: Number(host.paginators.page) || 1, perPage });
+}
+/** Pagination elements: the first and last pages and a window around the current page, with `...` gaps. */
+export function paginationElements(current, last, onEachSide = 0) {
+    const range = (a, b) => Array.from({ length: Math.max(0, b - a + 1) }, (_, i) => a + i);
+    if (last < onEachSide * 2 + 8)
+        return range(1, last);
+    const window = onEachSide + 4;
+    if (current <= window)
+        return [...range(1, window + onEachSide), '...', last - 1, last];
+    if (current > last - window)
+        return [1, 2, '...', ...range(last - (window + (onEachSide - 1)), last)];
+    return [1, 2, '...', ...range(current - onEachSide, current + onEachSide), '...', last - 1, last];
+}
+let colorManager = null;
+export const useColorManager = (manager) => { colorManager = manager; };
+/** Maximum number of rows shown (and reorderable) in reordering mode. */
+export const REORDER_LIMIT = 1000;
+/** Summary row; with `groupsOnly`, a leading label cell, then one cell per column. */
+function summaryRowHtml(row, span, groupsOnly, placeholders) {
+    const items = (cell) => cell.items.map((item) => `<div class="fi-ta-${item.type}-summary">${item.label !== null ? `<span class="fi-ta-${item.type}-summary-label">${e(item.label)}</span>` : ''}<span>${e(item.value)}</span></div>`).join('');
+    const heading = groupsOnly
+        ? `<th scope="row" class="fi-ta-cell fi-ta-summary-row-heading-cell fi-align-start">${e(row.heading)}</th>`
+        : `<th scope="row"${span > 1 ? ` colspan="${span}"` : ''} class="fi-ta-cell fi-align-start fi-ta-summary-row-heading-cell ">${e(row.heading)}</th>`;
+    return `<tr class="fi-ta-row fi-ta-summary-row${row.striped ? ' fi-striped' : ''}">${placeholders.selection ? '<td></td>' : ''}${heading}${row.cells.map((cell) => `<td class="fi-ta-cell fi-align-${e(cell.alignment)} ">${items(cell)}</td>`).join('')}${placeholders.actions ? '<td></td>' : ''}</tr>`;
+}
+/**
+ * Table summaries: a single "Summary" row without pagination; with several pages, a header then "This page" and "All …" rows.
+ * Also returns what is needed to compute a group's summary row (query restricted to the group).
+ */
+async function summarize(table, host, adapter, visible, page, options) {
+    // Groups only: the grouped column has no summary cell (its label already leads the row).
+    const columns = options.groupsOnly && options.group ? visible.filter((c) => c.name !== options.group.getColumn()) : visible;
+    const lists = columns.map((c) => (c instanceof TextColumn ? c.getSummarizers() : []));
+    if (!lists.some((list) => list.length) || !page.records.length)
+        return null;
+    // The first cell holds the row label and spans up to the first summarized column after it.
+    const next = lists.findIndex((list, i) => i > 0 && list.length > 0);
+    const span = options.groupsOnly ? 0 : next < 0 ? columns.length : next;
+    const columnOf = (c) => c.getSortColumn?.() ?? c.name;
+    const names = (kind) => [...new Set(columns.filter((_, i) => lists[i].some((s) => s.kind === kind)).map(columnOf))];
+    const aggregate = (query) => adapter.aggregate(query, { sum: names('sum'), avg: names('avg'), min: names('range'), max: names('range') });
+    const query = getTableQuery(table, host);
+    const all = await aggregate(query);
+    const present = (name) => page.records.map((record) => record[name]).filter((v) => v !== null && v !== undefined && v !== '');
+    const onPage = {
+        count: page.records.length,
+        sum: Object.fromEntries(names('sum').map((name) => [name, present(name).reduce((total, v) => total + Number(v), 0)])),
+        avg: Object.fromEntries(names('avg').map((name) => { const values = present(name); return [name, values.length ? values.reduce((total, v) => total + Number(v), 0) / values.length : 0]; })),
+        min: Object.fromEntries(names('range').map((name) => [name, present(name).map(String).sort()[0] ?? null])),
+        max: Object.fromEntries(names('range').map((name) => [name, present(name).map(String).sort().pop() ?? null])),
+    };
+    const cells = (values) => columns.slice(span).map((c, i) => ({
+        alignment: c.getAlignment() ?? 'start',
+        items: lists[i + span].map((s) => s.summarize(columnOf(c), values)).filter((item) => item !== null),
+    }));
+    const label = table.getPluralModelLabel();
+    const hasPageSummary = !options.groupsOnly && page.lastPage > 1;
+    const rowHtml = (row) => summaryRowHtml(row, span, options.groupsOnly, options.placeholders);
+    const header = hasPageSummary
+        ? `<tr class="fi-ta-row fi-ta-summary-header-row fi-striped">${options.placeholders.selection ? '<td></td>' : ''}${columns.map((c, i) => {
+            const heading = i === 0 ? t('filament-tables::table.summary.heading', { label }) : lists[i].length ? c.getLabel() : null;
+            return heading === null ? '<td class="fi-ta-cell fi-ta-summary-header-cell"></td>' : `<th scope="col" class="fi-ta-cell fi-ta-summary-header-cell fi-align-${e(i === 0 ? 'start' : (c.getAlignment() ?? 'start'))}">${e(heading)}</th>`;
+        }).join('')}${options.placeholders.actions ? '<td></td>' : ''}</tr>`
+        : '';
+    const rows = hasPageSummary
+        ? [{ heading: t('filament-tables::table.summary.subheadings.page', { label }), cells: cells(onPage), striped: false }, { heading: t('filament-tables::table.summary.subheadings.all', { label }), cells: cells(all), striped: false }]
+        : [{ heading: t('filament-tables::table.summary.heading', { label }), cells: cells(all), striped: true }];
+    return {
+        html: header + rows.map(rowHtml).join(''),
+        /** Group summary row: aggregates over all the group's records (not only those on the page). */
+        group: async (group, key, title) => {
+            const values = await aggregate({ ...query, modifiers: [...(query.modifiers ?? []), (q) => group.scope(q, key)] });
+            return rowHtml({ heading: options.groupsOnly ? (title ?? '') : t('filament-tables::table.summary.subheadings.group', { group: title ?? '', label }), cells: cells(values), striped: false });
+        },
+    };
+}
+/** Maximum records read for a `groupsOnly` table (which is not paginated). */
+export const GROUPS_ONLY_LIMIT = 1000;
+export async function renderTable(table, host, adapter, options = {}) {
+    const reorderColumn = options.canReorder === false ? null : table.getReorderColumn();
+    const reordering = reorderColumn !== null && host.isTableReordering === true;
+    // Reordering: all rows of the query, in position order, without pagination or actions.
+    if (reordering)
+        options = { ...options, bulkActions: [], headerActions: options.headerActions, rowActions: undefined, rowActionsHtml: undefined, filtersForm: null };
+    const grouping = reordering ? null : getTableGrouping(table, host);
+    // Groups only: no pagination and no record rows, just one summary row per group.
+    const groupsOnly = grouping !== null && table.isGroupsOnly();
+    const page = reordering
+        ? await adapter.paginate({ ...getTableQuery(table, host), sort: { column: reorderColumn, direction: 'asc' }, page: 1, perPage: REORDER_LIMIT })
+        : groupsOnly ? await adapter.paginate({ ...getTableQuery(table, host), page: 1, perPage: GROUPS_ONLY_LIMIT }) : await getTableRecords(table, host, adapter);
+    const [sortColumn, sortDirection] = (host.tableSort ?? '').split(':');
+    const number = (n) => n.toLocaleString('en-US');
+    const visible = getVisibleColumns(table, host);
+    const rows = [];
+    const hasBulk = (options.bulkActions ?? []).length > 0;
+    const selectable = (hasBulk || reordering) && !groupsOnly;
+    const filled = (value) => value !== null && value.trim() !== '';
+    // A new group starts when the title changes; the previous group then gets its summary row.
+    let previousGroup = { key: null, title: null };
+    const columnsLayout = table.getColumnsLayout();
+    const visibleSet = new Set(visible);
+    for (const record of page.records) {
+        const key = adapter.getKey(record);
+        let groupHeader = null;
+        let summaryBefore = null;
+        const groupKey = grouping ? grouping.group.getStringKey(record) : null;
+        const groupTitle = grouping ? grouping.group.getTitle(record) : null;
+        if (grouping && String(groupTitle ?? '') !== String(previousGroup.title ?? '')) {
+            if (filled(previousGroup.title))
+                summaryBefore = previousGroup;
+            const query = getTableQuery(table, host);
+            const label = grouping.group.isTitlePrefixedWithLabel() ? grouping.group.getLabel() : null;
+            const description = grouping.group.getDescription(record);
+            if (!groupsOnly)
+                groupHeader = {
+                    key: groupKey, title: groupTitle, label, description, collapsible: grouping.group.isCollapsible(),
+                    // Keys of the whole group (not only the page), for its "select all" checkbox.
+                    keys: hasBulk ? await adapter.listKeys({ ...query, modifiers: [...(query.modifiers ?? []), (q) => grouping.group.scope(q, groupKey)] }) : [],
+                    // Header with nothing to announce: hidden from assistive technologies.
+                    ariaHidden: !(filled(groupTitle) || filled(label) || filled(description) || grouping.group.isCollapsible() || selectable),
+                };
+        }
+        previousGroup = { key: groupKey, title: groupTitle };
+        const cells = [];
+        if (!groupsOnly)
+            for (const column of visible)
+                cells.push({ name: column.name, cssName: column.getCssName(), alignment: column.getAlignment(), label: column.getLabel(), url: column.getUrl(record), html: await column.toHtml(record, key), plain: column.isClickDisabled() });
+        const recordAction = table.getRecordAction();
+        if (reordering)
+            for (const cell of cells)
+                cell.url = null;
+        let contentHtml = null;
+        if (columnsLayout && !groupsOnly) {
+            contentHtml = '';
+            for (const node of columnsLayout)
+                contentHtml += await renderColumnLayout(node, record, key, visibleSet);
+        }
+        rows.push({
+            contentHtml, summaryBefore, groupSummaryHtml: '',
+            groupHeader, groupKey, collapsedExpression: grouping?.group.isCollapsible() ? `isGroupCollapsed(${js(groupTitle)})` : null,
+            reorder: reordering ? { id: `${host.id}-table-reorder-${createHash('md5').update(key).digest('hex')}`, label: String(record[table.getColumns()[0]?.name ?? ''] ?? key), position: rows.length + 1 } : null,
+            wasClickable: reordering && (recordAction !== null || table.getRecordUrl(record) !== null),
+            key, url: reordering ? null : recordAction ? null : table.getRecordUrl(record), cells, actions: groupsOnly ? [] : ((await options.rowActions?.(record)) ?? []),
+            actionsHtml: options.rowActionsHtml && !groupsOnly ? await options.rowActionsHtml(record) : null, classes: table.getRecordClasses(record),
+            // Row click: the action is mounted with the record key.
+            mountExpression: reordering ? null : recordAction ? `mountAction(${js(recordAction)}, {}, ${js({ table: true, recordKey: key })})` : null,
+        });
+    }
+    const hasRowActions = rows.some((row) => row.actionsHtml !== null || row.actions.length > 0);
+    // Summaries: never while reordering; group summaries go before the next group's header.
+    const summary = reordering ? null : await summarize(table, host, adapter, visible, page, { group: grouping?.group ?? null, groupsOnly, placeholders: { selection: selectable, actions: hasRowActions } });
+    let trailingGroupSummary = '';
+    if (summary && grouping) {
+        for (const row of rows)
+            if (row.summaryBefore)
+                row.groupSummaryHtml = await summary.group(grouping.group, row.summaryBefore.key, row.summaryBefore.title);
+        // Last group on the page: summarized only if it does not continue on the next page.
+        let trailing = filled(previousGroup.title);
+        if (trailing && !groupsOnly && page.page < page.lastPage) {
+            const nextRecord = (await adapter.paginate({ ...getTableQuery(table, host), page: page.page * page.perPage + 1, perPage: 1 })).records[0];
+            trailing = !nextRecord || grouping.group.getStringKey(nextRecord) !== previousGroup.key;
+        }
+        if (trailing)
+            trailingGroupSummary = await summary.group(grouping.group, previousGroup.key, previousGroup.title);
+    }
+    const classes = (component, color) => colorManager?.getComponentClasses(component, color) ?? [];
+    for (const filter of table.getFilters()) {
+        const state = host.tableFilters?.[filter.name];
+        if (filter.loadIndicatorData && state && typeof state === 'object')
+            await filter.loadIndicatorData(state, host);
+    }
+    const scopes = host.getRenderHookScopes?.() ?? [];
+    return views.render('filament-tables::index', {
+        contentLayout: columnsLayout !== null,
+        hook: (name, data = {}) => renderHook(name, scopes, data), hasHook: (name) => hasRenderHook(name, scopes),
+        visibleColumns: visible, isReordering: reordering,
+        groups: reordering || table.areGroupingSettingsHidden() ? [] : table.getGroups().map((g) => ({ id: g.getId(), label: g.getLabel() })),
+        grouping: { directionHidden: table.isGroupingDirectionSettingHidden(), inDropdownOnDesktop: table.areGroupingSettingsInDropdownOnDesktop(), collapsedByDefault: table.areGroupsCollapsedByDefault(), groupsOnly },
+        id: host.id, targets: LOADING_TARGETS, table, rows, page, number,
+        reorder: reorderColumn !== null ? { active: reordering } : null,
+        // No checkboxes without bulk actions (or in groups-only mode), no actions column without row actions.
+        selectable, hasRowActions,
+        // The key changes on every render to force the checkbox to be replaced.
+        randomKey: () => Array.from(randomBytes(16), (b) => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'[b % 62]).join(''),
+        // "Select all" covers every record of the current query.
+        allCount: table.getPaginationMode() === 'simple' ? '' : page.total, resultsCount: table.getPaginationMode() === 'simple' ? rows.length : page.total,
+        columns: visible.map((c) => ({ name: c.name, grouped: c._group !== null, cssName: c.getCssName(), alignment: c.getAlignment(), label: c.getLabel(), sortable: !reordering && c.isSortable(), individuallySearchable: !reordering && c.isIndividuallySearchable(), sort: sortColumn === c.name ? (sortDirection === 'desc' ? 'descending' : 'ascending') : 'none' })),
+        linkClasses: classes('link', 'primary'), dangerLinkClasses: classes('link', 'danger'), primaryButtonClasses: classes('button', 'primary'), badgeClasses: classes('badge', 'primary'), indicatorBadgeClasses: classes('badge', 'primary'),
+        bulkActions: options.bulkActions ?? [],
+        filtersForm: options.filtersForm ?? null, activeFiltersCount: countActiveFilters(table, host), filtersLayout: table.getFiltersLayout(), filterIndicators: getFilterIndicators(table, host),
+        hasColumnManager: !reordering && table.hasToggleableColumns(),
+        afterContainer: options.after ?? '', heading: table.getHeading(), headerActions: options.headerActions ?? [], summaryHtml: summary?.html ?? '', trailingGroupSummary,
+        // Column group header row: one cell per ungrouped column, one merged cell per run of columns in the same group.
+        headerGroups: visible.some((c) => c._group !== null) ? visible.reduce((runs, c) => {
+            const last = runs[runs.length - 1];
+            if (c._group !== null && last && last.label === c._group)
+                last.span++;
+            else
+                runs.push({ label: c._group, span: 1 });
+            return runs;
+        }, []) : null,
+        isSearchable: !reordering && table.getColumns().some((c) => c.isGloballySearchable()),
+        pagination: reordering || groupsOnly ? '' : views.render('filament::components.pagination', {
+            id: host.id, targets: LOADING_TARGETS + ',paginators', page, number, pageOptions: table.getPageOptions(), elements: paginationElements(page.page, page.lastPage), simple: table.getPaginationMode() === 'simple',
+            attrs: (o) => new Attributes(o),
+        }),
+    });
+}