@navette-js/tables 1.0.0-beta.3 → 1.0.0-beta.4

package/lib/index.js

@@ -1,5 +1,8 @@
-import { Attributes, cls, e, hasRenderHook, icon, js, renderHook, views, configured, configureUsing } from '@navette-js/support';
-import { t } from '@navette-js/support/i18n';
+import { Attributes, cls, e, hasRenderHook, icon, js, markdownToHtml, renderHook, sanitizeHtml, views, configured, configureUsing } from '@navette-js/support';
+import { diffForHumans, t, tc } from '@navette-js/support/i18n';
+import { Checkbox, Select, Toggle } from '@navette-js/forms';
+import { modal } from '@navette-js/support/ui';
+import { applyConditions, loadRelationshipOptions, modelOfHost } from "./query-builder.js";
 import { createHash, randomBytes } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
 views.namespace('filament-tables', fileURLToPath(new URL('../views', import.meta.url)));
@@ -31,6 +34,8 @@ export const TablesRenderHook = {
     TOOLBAR_TOGGLE_COLUMN_TRIGGER_BEFORE: 'tables::toolbar.toggle-column-trigger.before',
 };
 /** Methods and properties that trigger the table's loading state (`wire:target`). */
+/** Screen size names of `visibleFrom()` and `hiddenFrom()`. */
+const BREAKPOINTS = ['sm', 'md', 'lg', 'xl', '2xl'];
 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
@@ -62,6 +67,14 @@ export class Column {
     isSortInverted() { return this._sortInverted; }
     /** Link on the cell; takes precedence over the row action. */
     url(resolver) { this._url = resolver; return this; }
+    _cellAction = null;
+    /**
+     * Clicking the cell runs an action on its record: the name of a record action of the table, or an `Action` (checked and
+     * authorized like record actions when it is mounted). A column `url()` takes precedence; the action takes precedence over the row's link and action.
+     */
+    action(action) { this._cellAction = action; return this; }
+    getAction() { return this._cellAction !== null && typeof this._cellAction === 'object' ? this._cellAction : null; }
+    getActionName() { return this._cellAction === null ? null : typeof this._cellAction === 'string' ? this._cellAction : this._cellAction.getName(); }
     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; }
@@ -74,10 +87,42 @@ export class Column {
     /** 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; }
+    _visibleFrom = null;
+    _hiddenFrom = null;
+    _columnWidth = null;
+    _grow = null;
+    _wrapHeader = false;
+    /** Shows the column only from this screen size up (`sm`, `md`, `lg`, `xl`, `2xl`). */
+    visibleFrom(breakpoint) { this._visibleFrom = breakpoint !== null && BREAKPOINTS.includes(breakpoint) ? breakpoint : null; return this; }
+    /** Hides the column from this screen size up. */
+    hiddenFrom(breakpoint) { this._hiddenFrom = breakpoint !== null && BREAKPOINTS.includes(breakpoint) ? breakpoint : null; return this; }
+    /** Classes hiding the header and cells on some screen sizes. */
+    getResponsiveClasses() { return [this._hiddenFrom ? `${this._hiddenFrom}:fi-hidden` : null, this._visibleFrom ? `${this._visibleFrom}:fi-visible` : null].filter((c) => c !== null); }
+    /** Width of the column, as a CSS length (`200px`, `20%`...). */
+    width(width) { const text = typeof width === 'number' ? `${width}px` : width; this._columnWidth = text !== null && /^[0-9.]+(px|rem|em|%|ch|vw)$/.test(text.trim()) ? text.trim() : null; return this; }
+    getWidth() { return this._columnWidth; }
+    /** The column takes the remaining width of the table (when it has no `width()`). */
+    grow(condition = true) { this._grow = condition; return this; }
+    /** In a table, columns do not grow unless told to; in a layout (split), they do. */
+    canGrow(defaultValue = false) { return this._grow ?? defaultValue; }
+    /** Lets a long label wrap in the header. */
+    wrapHeader(condition = true) { this._wrapHeader = condition; return this; }
+    canHeaderWrap() { return this._wrapHeader; }
     alignEnd() { return this.alignment('end'); }
     alignLeft() { return this.alignment('left'); }
     alignCenter() { return this.alignment('center'); }
     getStateUsing(resolver) { this._state = resolver; return this; }
+    /** Fixed state, or a function of the record (alias of `getStateUsing()` for a value). */
+    state(state) { this._state = typeof state === 'function' ? ({ record }) => state(record) : () => state; return this; }
+    _default = null;
+    /** Value used when the state is empty. */
+    default(value) { this._default = value; return this; }
+    _hidden = false;
+    _visible = true;
+    /** Removes the column from the table (header, cells, search, sort and column manager). */
+    hidden(condition = true) { this._hidden = condition; return this; }
+    visible(condition = true) { this._visible = condition; return this; }
+    isHidden() { return Boolean(typeof this._hidden === 'function' ? this._hidden() : this._hidden) || !(typeof this._visible === 'function' ? this._visible() : this._visible); }
     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; }
@@ -87,141 +132,408 @@ export class Column {
     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]; }
+    async getState(record) {
+        const state = this._state ? await this._state({ record }) : record[this.name];
+        return (state === null || state === undefined || state === '') && this._default !== null ? this._default : state;
+    }
     /** True for editable cells: they are not wrapped in a link or button to the record. */
     isClickDisabled() { return false; }
 }
+const isNumericValue = (value) => (typeof value === 'number' && Number.isFinite(value)) || (typeof value === 'string' && value.trim() !== '' && Number.isFinite(Number(value)));
+const resolveItem = (option, record, state) => (typeof option === 'function' ? option(record, state) : option);
+const isBlankState = (value) => value === null || value === undefined || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0);
+/** Date in a PHP-style format (`M j, Y`, `d/m/Y H:i`…), in UTC or in the given IANA time zone. Database values without a zone are read as UTC. */
+export function formatDate(value, format, timeZone = null) {
+    const raw = value instanceof Date ? value : new Date(/[zZ]|[+-]\d\d:?\d\d$/.test(String(value)) ? String(value) : `${String(value).replace(' ', 'T').slice(0, 19)}Z`);
+    if (Number.isNaN(raw.getTime()))
+        return String(value);
+    const parts = Object.fromEntries(new Intl.DateTimeFormat('en-US', { timeZone: timeZone ?? 'UTC', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hourCycle: 'h23', weekday: 'long' }).formatToParts(raw).map((p) => [p.type, p.value]));
+    const year = Number(parts.year), month = Number(parts.month), day = Number(parts.day), hour = Number(parts.hour), minute = Number(parts.minute), second = Number(parts.second);
+    const monthName = new Intl.DateTimeFormat('en-US', { month: 'long', timeZone: 'UTC' }).format(new Date(Date.UTC(2000, month - 1, 1)));
+    const pad = (n) => String(n).padStart(2, '0');
+    const zone = timeZone ? (new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'short' }).formatToParts(raw).find((p) => p.type === 'timeZoneName')?.value ?? timeZone) : 'UTC';
+    const tokens = {
+        d: () => pad(day), j: () => String(day), D: () => parts.weekday.slice(0, 3), l: () => parts.weekday,
+        S: () => (day % 10 === 1 && day !== 11 ? 'st' : day % 10 === 2 && day !== 12 ? 'nd' : day % 10 === 3 && day !== 13 ? 'rd' : 'th'),
+        m: () => pad(month), n: () => String(month), M: () => monthName.slice(0, 3), F: () => monthName,
+        Y: () => String(year), y: () => String(year).slice(-2),
+        H: () => pad(hour), G: () => String(hour), h: () => pad(hour % 12 || 12), g: () => String(hour % 12 || 12),
+        i: () => pad(minute), s: () => pad(second), a: () => (hour < 12 ? 'am' : 'pm'), A: () => (hour < 12 ? 'AM' : 'PM'), T: () => zone,
+    };
+    let out = '';
+    for (let index = 0; index < format.length; index++) {
+        const character = format[index];
+        if (character === '\\' && index + 1 < format.length) {
+            out += format[++index];
+            continue;
+        }
+        out += tokens[character] ? tokens[character]() : character;
+    }
+    return out;
+}
+const TEXT_SIZES = new Set(['xs', 'sm', 'md', 'lg']);
+const tooltipAttribute = (tooltip) => `{
+                                content: ${js(tooltip)},
+                                theme: $store.theme,
+                                allowHTML: false,
+                            }`;
 export class TextColumn extends Column {
     _weight = null;
     _copyable = false;
+    _copyableState = null;
+    _copyMessage = null;
+    _copyMessageDuration = 2000;
     _money = null;
     _placeholder = null;
     _badge = false;
     _color = null;
     _icon = null;
+    _iconColor = null;
+    _iconPosition = 'before';
     _format = null;
-    _date = false;
+    _date = null;
+    _timeZone = null;
+    _since = false;
     _numeric = false;
+    _decimals = null;
     _summarizers = [];
     _limit = null;
+    _words = null;
+    _prefix = null;
+    _suffix = null;
     _tooltip = null;
+    _size = null;
+    _fontFamily = null;
+    _wrap = false;
+    _lineClamp = null;
+    _inline = false;
+    _descriptionAbove = null;
+    _descriptionBelow = null;
+    _listWithLineBreaks = false;
+    _bulleted = false;
+    _listLimit = null;
+    _expandableLimitedList = false;
+    _separator = null;
     static make(name) { return configured(new TextColumn(name)); }
     /** Displays the value in a badge. */
     badge(condition = true) { this._badge = condition; return this; }
+    /** Text color (or badge color): a color name, or a function of the record and the state item. */
     color(color) { this._color = color; return this; }
-    icon(resolver) { this._icon = resolver; return this; }
+    /** Icon next to the text: a name, or a function of the record and the state item returning a name or `null`. */
+    icon(icon) { this._icon = icon; return this; }
+    iconColor(color) { this._iconColor = color; return this; }
+    iconPosition(position) { this._iconPosition = position; 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. */
+    /** Date in a PHP-style format, `M j, Y` by default ("Nov 9, 2026"). `timeZone`: IANA zone to display the date in. */
+    date(format = 'M j, Y', timeZone = null) { this._date = format === false ? null : format === true ? 'M j, Y' : format; this._timeZone = timeZone; return this; }
+    /** Date and time, `M j, Y H:i:s` by default. */
+    dateTime(format = 'M j, Y H:i:s', timeZone = null) { return this.date(format === true ? 'M j, Y H:i:s' : format, timeZone); }
+    /** Time only, `H:i:s` by default. */
+    time(format = 'H:i:s', timeZone = null) { return this.date(format, timeZone); }
+    /** Relative date, e.g. "2 days ago". */
+    since(condition = true) { this._since = condition; return this; }
+    /** Time zone used by `date()`, `dateTime()` and `time()`. */
+    timezone(timeZone) { this._timeZone = timeZone; return this; }
+    /** Number formatted with thousands separators; `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; }
+    /** Font weight: `thin`, `light`, `medium`, `semibold`, `bold`… */
     weight(weight) { this._weight = weight; return this; }
+    /** Text size: `xs`, `sm` (default), `md` or `lg`. */
+    size(size) { this._size = size; return this; }
+    /** Font family: `sans`, `serif` or `mono`. */
+    fontFamily(family) { this._fontFamily = family; return this; }
+    /** Lets long text wrap onto several lines instead of overflowing. */
+    wrap(condition = true) { this._wrap = condition; return this; }
+    /** Clamps the text to this number of lines. */
+    lineClamp(lines) { this._lineClamp = lines; return this; }
+    /** Renders inline (without a block layout), e.g. inside a stacked layout. */
+    inline(condition = true) { this._inline = condition; return this; }
     /** Truncates the displayed text to `length` characters, followed by "...". */
     limit(length) { this._limit = length; return this; }
+    /** Truncates the displayed text to this number of words, followed by "...". */
+    words(count) { this._words = count; return this; }
+    prefix(prefix) { this._prefix = prefix; return this; }
+    suffix(suffix) { this._suffix = suffix; return this; }
     /** Tooltip on hover; `null` for none. */
     tooltip(tooltip) { this._tooltip = tooltip; return this; }
     copyable(condition = true) { this._copyable = condition; return this; }
+    /** Value copied to the clipboard, when it differs from the displayed text. */
+    copyableState(state) { this._copyableState = state; return this; }
+    copyMessage(message) { this._copyMessage = message; return this; }
+    copyMessageDuration(milliseconds) { this._copyMessageDuration = milliseconds; 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. */
+    /** Secondary text below the value (`'below'`, the default) or above it. */
+    description(text, position = 'below') {
+        if (position === 'above')
+            this._descriptionAbove = text;
+        else
+            this._descriptionBelow = text;
+        return this;
+    }
+    /** One value per line, for a state that is a list (or a string split by `separator()`). */
+    listWithLineBreaks(condition = true) { this._listWithLineBreaks = condition; return this; }
+    /** Bulleted list. */
+    bulleted(condition = true) { this._bulleted = condition; return this; }
+    /** Shows only the first values of a list; `expandable`: a link reveals the others. */
+    limitList(count, expandable = false) { this._listLimit = count; this._expandableLimitedList = expandable; return this; }
+    expandableLimitedList(condition = true) { this._expandableLimitedList = condition; return this; }
+    /** Splits a string state into a list on this separator. */
+    separator(separator = ',') { this._separator = separator; return this; }
+    _html = false;
+    _markdown = false;
+    /**
+     * Renders the state as HTML. It is sanitized first: only formatting elements (paragraphs, emphasis, lists, links with safe
+     * URLs...) are kept, without any attribute that could run scripts or change the page's styles.
+     */
+    html(condition = true) { this._html = condition; return this; }
+    /** Renders the state as Markdown. Raw HTML in it is shown as text, and links only keep safe URLs. */
+    markdown(condition = true) { this._markdown = condition; return this; }
+    /** Item text as HTML: Markdown, sanitized HTML, or escaped text. */
+    renderItemText(text, record, item) {
+        if (resolveItem(this._markdown, record, item))
+            return markdownToHtml(text);
+        if (resolveItem(this._html, record, item))
+            return sanitizeHtml(text);
+        return e(text);
+    }
+    /** Displayed text of one state item, escaped by the caller. */
+    formatItem(item, record) {
+        if (this._format)
+            return String(this._format({ state: item, record }) ?? '');
+        let text;
+        const currency = typeof this._money === 'function' ? this._money(record) : this._money;
+        if (this._since)
+            text = diffForHumans(item) ?? String(item);
+        else if (this._date !== null)
+            text = formatDate(item, this._date, this._timeZone);
+        else if (currency && isNumericValue(item))
+            text = new Intl.NumberFormat('en-US', { style: 'currency', currency: currency.toUpperCase() }).format(Number(item));
+        else if (this._numeric && isNumericValue(item))
+            text = new Intl.NumberFormat('en-US', this._decimals !== null ? { minimumFractionDigits: this._decimals, maximumFractionDigits: this._decimals } : {}).format(Number(item));
+        else
+            text = String(item);
+        if (this._limit !== null && text.length > this._limit)
+            text = `${text.slice(0, this._limit).trimEnd()}...`;
+        if (this._words !== null) {
+            const words = text.split(/\s+/);
+            if (words.length > this._words)
+                text = `${words.slice(0, this._words).join(' ')}...`;
+        }
+        return `${this._prefix ?? ''}${text}${this._suffix ?? ''}`;
+    }
+    stateItems(state) {
+        if (Array.isArray(state))
+            return state.filter((item) => !isBlankState(item));
+        if (this._separator !== null && typeof state === 'string')
+            return state.split(this._separator).map((item) => item.trim()).filter(Boolean);
+        return [state];
+    }
+    hasDescriptions() { return this._descriptionAbove !== null || this._descriptionBelow !== null; }
+    /** Plain value without per-item options: Filament's short markup. */
+    canRenderOptimized(state) {
+        return !Array.isArray(state) && this._separator === null && !isBlankState(state) && !this._bulleted && !this._listWithLineBreaks && this._icon === null && this._tooltip === null
+            && this._copyable === false && this._weight === null && this._fontFamily === null && this._lineClamp === null && this._size === null && !this.hasDescriptions() && !this._wrap && this._html === false && this._markdown === false;
+    }
+    alignClass() { return this._alignment && this._alignment !== 'start' ? `fi-align-${this._alignment}` : null; }
+    containerClasses() { return ['fi-ta-text', this._inline ? 'fi-inline' : null, this._numeric || this._money ? 'fi-numeric' : null, this.alignClass()]; }
+    /** Cell content, as Filament renders it: a short markup for a plain value, the full markup as soon as an item option 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 (isBlankState(state)) {
+            return `<div class="${cls(this.containerClasses())}">${this._placeholder !== null ? `<p class="fi-ta-placeholder">${e(this._placeholder)}</p>` : ''}</div>`;
+        }
+        if (this.canRenderOptimized(state)) {
+            let html = e(this.formatItem(state, record));
+            const color = resolveItem(this._color, record, state);
             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>`;
+                const badgeColor = color ?? 'primary';
+                html = `<span class="${cls(['fi-badge', 'fi-size-sm', ...(badgeColor !== 'gray' ? (colorManager?.getComponentClasses('badge', badgeColor) ?? []) : [])])}">${html}</span>`;
             }
-            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 classes = this._badge ? ['fi-ta-text', 'fi-ta-text-item', 'fi-ta-text-has-badges'] : ['fi-ta-text', 'fi-ta-text-item', 'fi-size-sm', ...(color ? (colorManager?.getComponentClasses('text', color) ?? []) : [])];
+            return `<div class="${cls([...classes, this._inline ? 'fi-inline' : null, this._numeric || this._money ? 'fi-numeric' : null, this.alignClass()])}">${html}</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>`;
+        let items = this.stateItems(state);
+        let count = items.length;
+        const limit = this._listLimit ?? count;
+        const overLimit = limit && count > limit ? count - limit : 0;
+        if (overLimit && (!this._listWithLineBreaks || !this._expandableLimitedList))
+            items = items.slice(0, limit);
+        // Several values without line breaks: one comma-separated item.
+        let collapsedHtml = null;
+        if (count > 1 && !this._listWithLineBreaks && !this._badge) {
+            collapsedHtml = items.map((item) => e(this.formatItem(item, record))).join(', ');
+            count = 1;
+            items = [items[0]];
+        }
+        const itemData = (item) => {
+            const formatted = collapsedHtml !== null ? collapsedHtml.replace(/<[^>]+>/g, '') : this.formatItem(item, record);
+            const color = resolveItem(this._color, record, item) ?? (this._badge ? 'primary' : null);
+            const sizeOption = resolveItem(this._size, record, item);
+            const size = sizeOption === 'base' ? 'md' : sizeOption ?? 'sm';
+            const iconName = this._icon === null ? null : resolveItem(this._icon, record, item);
+            const iconColor = resolveItem(this._iconColor, record, item);
+            const iconHtml = iconName ? icon(iconName, { size: size === 'md' ? 'md' : size === 'lg' ? 'lg' : 'sm', attributes: new Attributes({ 'aria-hidden': 'true' }).class(iconColor ? (colorManager?.getComponentClasses('icon-column', iconColor) ?? []) : []) }) : '';
+            const copyable = resolveItem(this._copyable, record, item);
+            const tooltip = resolveItem(this._tooltip, record, item);
+            const fontFamily = resolveItem(this._fontFamily, record, item);
+            const weight = resolveItem(this._weight, record, item);
+            const itemClasses = ['fi-ta-text-item', fontFamily ? `fi-font-${fontFamily}` : null];
+            if (!this._badge)
+                itemClasses.push(TEXT_SIZES.has(size) ? `fi-size-${size}` : size, weight ? `fi-font-${weight}` : null, ...(color ? (colorManager?.getComponentClasses('text', color) ?? []) : []));
+            const itemStyle = !this._badge && this._lineClamp ? ` style="--line-clamp: ${Math.floor(this._lineClamp)}"` : '';
+            let content = null;
+            if (this._badge || copyable || (tooltip !== null && tooltip !== '')) {
+                const attributes = [];
+                if (copyable) {
+                    const copied = resolveItem(this._copyableState, record, item) ?? formatted;
+                    const message = this._copyMessage ?? t('filament::components/copyable.messages.copied');
+                    attributes.push(...copyableAttributes(copied, formatted, message, this._copyMessageDuration));
+                }
+                if (tooltip !== null && tooltip !== '')
+                    attributes.push(`x-tooltip="${e(tooltipAttribute(tooltip))}"`);
+                const contentClasses = [copyable ? 'fi-copyable' : null];
+                if (this._badge)
+                    contentClasses.push('fi-badge', TEXT_SIZES.has(size) ? `fi-size-${size}` : size, ...(color && color !== 'gray' ? (colorManager?.getComponentClasses('badge', color) ?? []) : []));
+                const classString = cls(contentClasses);
+                content = `<span ${[...attributes, classString ? `class="${classString}"` : ''].filter(Boolean).join(' ')}>`;
+            }
+            const before = this._iconPosition === 'before' ? iconHtml : '', after = this._iconPosition === 'after' ? iconHtml : '';
+            const inner = `${content ?? ''}${before}${collapsedHtml ?? this.renderItemText(formatted, record, item)}${after}${content ? '</span>' : ''}`;
+            return { itemClasses, itemStyle, inner };
+        };
+        const containerExtra = [this._badge ? 'fi-ta-text-has-badges' : null, this._lineClamp && !this._badge ? 'fi-ta-text-has-line-clamp' : null, this._wrap ? 'fi-wrapped' : null];
+        const descriptionAbove = typeof this._descriptionAbove === 'function' ? this._descriptionAbove(record) : this._descriptionAbove;
+        const descriptionBelow = typeof this._descriptionBelow === 'function' ? this._descriptionBelow(record) : this._descriptionBelow;
+        const hasDescriptions = (descriptionAbove ?? '') !== '' || (descriptionBelow ?? '') !== '';
+        if (count === 1 && !this._bulleted && !hasDescriptions && !this._lineClamp) {
+            const { itemClasses, itemStyle, inner } = itemData(items[0]);
+            return `<div class="${cls([...itemClasses, ...this.containerClasses(), ...containerExtra])}"${itemStyle}>${inner}</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>`;
+        const container = [...this.containerClasses(), ...containerExtra, this._bulleted ? 'fi-bulleted' : null, this._listWithLineBreaks ? 'fi-ta-text-has-line-breaks' : null];
+        const listItems = (forList) => forList.map((item, index) => {
+            const { itemClasses, itemStyle, inner } = itemData(item);
+            const hidden = index + 1 > limit ? ' x-show="! isLimited" x-cloak x-transition' : '';
+            return `<li${hidden} class="${cls(itemClasses)}"${itemStyle}>${inner}</li>`;
+        }).join('');
+        if (hasDescriptions || overLimit) {
+            const expandable = overLimit && this._expandableLimitedList;
+            let body;
+            if (count === 1 && !this._bulleted) {
+                const { itemClasses, itemStyle, inner } = itemData(items[0]);
+                body = `<p class="${cls(itemClasses)}"${itemStyle}>${inner}</p>`;
+            }
+            else
+                body = `<ul>${listItems(items)}</ul>`;
+            let more = '';
+            if (overLimit) {
+                more = expandable
+                    ? `<div class="fi-ta-text-list-limited-message"><div role="button" x-bind:aria-expanded="(! isLimited).toString()" x-on:click.prevent.stop="isLimited = false" x-show="isLimited" class="fi-link fi-size-xs">${e(tc('filament-tables::table.columns.text.actions.expand_list', overLimit, { count: overLimit }))}</div><div role="button" x-bind:aria-expanded="(! isLimited).toString()" x-on:click.prevent.stop="isLimited = true" x-cloak x-show="! isLimited" class="fi-link fi-size-xs">${e(tc('filament-tables::table.columns.text.actions.collapse_list', overLimit, { count: overLimit }))}</div></div>`
+                    : `<div class="fi-ta-text-list-limited-message">${e(tc('filament-tables::table.columns.text.more_list_items', overLimit, { count: overLimit }))}</div>`;
+            }
+            return `<div${expandable ? ' x-data="{ isLimited: true }"' : ''} class="${cls([...container, hasDescriptions ? 'fi-ta-text-has-descriptions' : null, overLimit ? 'fi-ta-text-list-limited' : null])}">`
+                + `${(descriptionAbove ?? '') !== '' ? `<p class="fi-ta-text-description">${e(descriptionAbove)}</p>` : ''}${body}${more}`
+                + `${(descriptionBelow ?? '') !== '' ? `<p class="fi-ta-text-description">${e(descriptionBelow)}</p>` : ''}</div>`;
+        }
+        return `<ul class="${cls(container)}">${listItems(items)}</ul>`;
     }
 }
-/** Column summary below the table: sum, average, count or range. */
+/**
+ * Column summary below the table: sum, average, count, range, distinct values, or your own with `Summarizer.make().using()`.
+ */
 export class Summarizer {
+    kind = 'custom';
     _label = null;
     _money = null;
+    _decimals = null;
+    _prefix = null;
+    _suffix = null;
+    _formatStateUsing = null;
+    _labelHidden = false;
+    _hidden = false;
+    _using = null;
+    _scope = null;
+    /**
+     * Restricts the records summarized by this summarizer (all records, the page, or a group), e.g.
+     * `Count.make().query((query) => query.where('is_published', 1))`. The function receives the data adapter's query builder.
+     */
+    query(scope) { this._scope = scope; return this; }
+    getQueryScope() { return this._scope; }
+    static make() { return configured(new Summarizer()); }
     label(label) { this._label = label; return this; }
     money(currency = 'usd') { this._money = currency.toUpperCase(); return this; }
+    /** Number formatting, with a fixed number of decimals. */
+    numeric(decimals = null) { this._decimals = decimals; return this; }
+    prefix(prefix) { this._prefix = prefix; return this; }
+    suffix(suffix) { this._suffix = suffix; return this; }
+    /** Formats the value yourself (the result is escaped). */
+    formatStateUsing(callback) { this._formatStateUsing = callback; return this; }
+    /** Keeps the label for screen readers only. */
+    hiddenLabel(condition = true) { this._labelHidden = condition; return this; }
+    isLabelHidden() { return this._labelHidden; }
+    hidden(condition = true) { this._hidden = condition; return this; }
+    visible(condition = true) { return this.hidden(typeof condition === 'function' ? () => !condition() : !condition); }
+    isHidden() { return typeof this._hidden === 'function' ? this._hidden() : this._hidden; }
+    /** Computes the value from the summarized records (`records()` loads them: keep the dataset small). */
+    using(callback) { this._using = callback; return this; }
+    hasCustomCalculation() { return this._using !== null; }
+    async compute(dataset) { return this._using ? this._using(dataset) : null; }
     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); }
+    /** Formatted value: `formatStateUsing()`, money or number, then the prefix and suffix. */
+    format(value) {
+        let text;
+        if (this._formatStateUsing)
+            text = this._formatStateUsing(value) ?? '';
+        else if (typeof value === 'number' && Number.isFinite(value)) {
+            const digits = this._decimals !== null ? { minimumFractionDigits: this._decimals, maximumFractionDigits: this._decimals } : {};
+            text = this._money ? new Intl.NumberFormat('en-US', { style: 'currency', currency: this._money, ...digits }).format(value) : new Intl.NumberFormat('en-US', digits).format(value);
+        }
+        else
+            text = value === null || value === undefined ? '' : String(value);
+        return `${this._prefix ?? ''}${text}${this._suffix ?? ''}`;
+    }
+    item(value, type = 'text') { return { type, label: this.getLabel(), value: this.format(value), labelHidden: this._labelHidden }; }
+    /** Summary item from the aggregates (or from `customValue`, computed by `using()`). */
+    summarize(_column, _values, customValue) { return this.item(customValue ?? null); }
 }
 /** 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) }; }
+    summarize(column, values, customValue) { return this.item(customValue ?? 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) }; }
+    summarize(column, values, customValue) { return this.item(customValue ?? 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) }; }
+    summarize(_column, values, customValue) { return this.item(customValue ?? values.count); }
+}
+/** Distinct values of the column, as a (bulleted) list. */
+export class Values extends Summarizer {
+    kind = 'values';
+    _bulleted = true;
+    static make() { return configured(new Values()); }
+    bulleted(condition = true) { this._bulleted = condition; return this; }
+    constructor() { super(); this._using = async ({ column, records }) => [...new Set((await records()).map((record) => record[column]).filter((value) => value !== null && value !== undefined && value !== ''))]; }
+    summarize(_column, _values, customValue) {
+        const list = Array.isArray(customValue) ? customValue : [];
+        return { type: 'values', label: this.getLabel(), value: '', labelHidden: this._labelHidden, values: list.map((value) => this.format(value)), bulleted: this._bulleted };
+    }
 }
 /** Smallest and largest value of a column. */
 export class Range extends Summarizer {
@@ -230,7 +542,7 @@ export class Range extends Summarizer {
     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) {
+    summarize(column, values, _customValue) {
         let bounds = [values.min[column], values.max[column]].filter((v) => v !== null && v !== undefined && v !== '').map(String);
         if (!bounds.length)
             return null;
@@ -245,7 +557,7 @@ export class Range extends Summarizer {
                 bounds = times[0] === times[1] ? [times[0]] : times;
             }
         }
-        return { type: 'range', label: this._label, value: bounds.join(' - ') };
+        return { type: 'range', label: this._label, value: `${this._prefix ?? ''}${bounds.join(' - ')}${this._suffix ?? ''}`, labelHidden: this._labelHidden };
     }
 }
 /** Row grouping: rows are sorted by the column and each group gets a header row. */
@@ -258,7 +570,17 @@ export class Group {
     _collapsible = false;
     _date = false;
     _titlePrefixedWithLabel = true;
+    _keyUsing = null;
+    _scopeUsing = null;
+    _orderUsing = null;
     constructor(id) { this.id = id; }
+    /** Group key of a record, when it is not the column value (records with the same key form a group). Use with `scopeQueryByKeyUsing()`. */
+    getKeyFromRecordUsing(resolver) { this._keyUsing = resolver; return this; }
+    /** Restricts the query to one group (summaries, "select the group"): needed when `getKeyFromRecordUsing()` is not the column value. */
+    scopeQueryByKeyUsing(scope) { this._scopeUsing = scope; return this; }
+    /** Orders the query by group, when ordering by the column is not right (e.g. a status with a custom order). */
+    orderQueryUsing(order) { this._orderUsing = order; return this; }
+    getOrderQueryUsing() { return this._orderUsing; }
     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). */
@@ -287,6 +609,10 @@ export class Group {
     isTitlePrefixedWithLabel() { return this._titlePrefixedWithLabel; }
     /** Group value of a record, as text; `null` when empty. */
     getStringKey(record) {
+        if (this._keyUsing) {
+            const custom = this._keyUsing(record);
+            return custom === null || custom === undefined || custom === '' ? null : String(custom);
+        }
         let key = record?.[this.getColumn()];
         if (key === null || key === undefined || key === '')
             return null;
@@ -305,6 +631,10 @@ export class Group {
     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 (this._scopeUsing) {
+            this._scopeUsing(query, key);
+            return;
+        }
         if (key === null)
             query.where((sub) => sub.whereNull(this.getColumn()).orWhere(this.getColumn(), ''));
         else if (this._date)
@@ -319,15 +649,46 @@ export class Group {
  */
 export class ColumnLayout {
     _children;
+    _grow = null;
+    _visibleFrom = null;
+    _hiddenFrom = null;
+    _columnSpan = { default: 1 };
+    _collapsible = false;
+    // Collapsed until the user opens it, as in Filament.
+    _collapsed = true;
+    _hidden = false;
     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])); }
+    /** `false`: the component takes only the width it needs in a split, instead of sharing the remaining space. */
+    grow(condition = true) { this._grow = condition; return this; }
+    canGrow() { return this._grow ?? true; }
+    visibleFrom(breakpoint) { this._visibleFrom = breakpoint !== null && BREAKPOINTS.includes(breakpoint) ? breakpoint : null; return this; }
+    hiddenFrom(breakpoint) { this._hiddenFrom = breakpoint !== null && BREAKPOINTS.includes(breakpoint) ? breakpoint : null; return this; }
+    getResponsiveClasses() { return [this._hiddenFrom ? `${this._hiddenFrom}:fi-hidden` : null, this._visibleFrom ? `${this._visibleFrom}:fi-visible` : null].filter((c) => c !== null); }
+    /** Columns of a parent `Grid` taken by the component: a number, `'full'`, or one per breakpoint. */
+    columnSpan(span) { this._columnSpan = typeof span === 'object' ? { default: 1, ...span } : { default: span }; return this; }
+    columnSpanFull() { return this.columnSpan('full'); }
+    getColumnSpan() { return this._columnSpan; }
+    /**
+     * Content hidden behind a toggle button at the bottom of the record. Only one top-level component of the layout can
+     * be collapsible. It starts collapsed; `collapsed(false)` shows it open.
+     */
+    collapsible(condition = true) { this._collapsible = condition; return this; }
+    collapsed(condition = true) { this._collapsible = true; this._collapsed = condition; return this; }
+    isCollapsible() { return this._collapsible; }
+    isCollapsed() { return this._collapsed; }
+    hidden(condition = true) { this._hidden = condition; return this; }
+    visible(condition = true) { return this.hidden(typeof condition === 'function' ? () => !condition() : !condition); }
+    isHidden() { return typeof this._hidden === 'function' ? this._hidden() : this._hidden; }
+    /** Inner markup of the component, around the already rendered children. */
+    async renderContent(children, _record, _key) { return `<div class="${this.getClasses().join(' ')}">${children.join('')}</div>`; }
 }
 /** Columns side by side, from a given breakpoint. */
 export class Split extends ColumnLayout {
     _from = null;
-    static make(children) { return new Split(children); }
+    static make(children) { return configured(new Split(children)); }
     from(breakpoint) { this._from = breakpoint; return this; }
     getClasses() { return ['fi-ta-split', ...(this._from ? [`${this._from}:fi-ta-split`] : [])]; }
 }
@@ -335,27 +696,76 @@ export class Split extends ColumnLayout {
 export class Stack extends ColumnLayout {
     _space = null;
     _alignment = 'start';
-    static make(children) { return new Stack(children); }
+    static make(children) { return configured(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>`;
+/** Responsive grid of columns: `Grid.make(2)` (2 columns from `lg`) or `Grid.make({ default: 1, md: 2, xl: 3 })`. */
+export class Grid extends ColumnLayout {
+    _gridColumns = {};
+    constructor(columns = 2) { super([]); this.columns(columns); }
+    static make(columns = 2) { return configured(new Grid(columns)); }
+    /** Number of columns, or one per breakpoint (\`default\`, \`sm\`, \`md\`, \`lg\`, \`xl\`, \`2xl\`). */
+    columns(columns = 2) {
+        const added = columns === null ? {} : typeof columns === 'number' ? { lg: columns } : columns;
+        this._gridColumns = { ...this._gridColumns, ...Object.fromEntries(Object.entries(added).filter(([, count]) => Number.isInteger(count) && count > 0 && count <= 12)) };
+        return this;
+    }
+    /** Components of the grid. */
+    schema(children) { this._children = children; return this; }
+    getGridColumns() { return this._gridColumns; }
+    getClasses() {
+        const columns = this._gridColumns;
+        const gap = (count) => (count === 1 ? 'fi-gap-sm' : 'fi-gap-lg');
+        return ['fi-ta-grid', gap(columns.default ?? 1), ...['sm', 'md', 'lg', 'xl', '2xl'].filter((breakpoint) => columns[breakpoint]).map((breakpoint) => `${breakpoint}:${gap(columns[breakpoint])}`)];
+    }
+    async renderContent(children) { return `<div ${new Attributes().grid(this._gridColumns).class(this.getClasses()).toHtml()}>${children.join('')}</div>`; }
+}
+/** Plain container, styled as a panel: often made collapsible. */
+export class Panel extends ColumnLayout {
+    static make(children) { return configured(new Panel(children)); }
+    getClasses() { return ['fi-ta-panel']; }
+}
+/**
+ * Your own markup inside the record: a function returning HTML, or the name of an EJS view rendered with `record` and
+ * `recordKey`. The HTML is inserted as it is: escape record data with `e()` (EJS's `<%= %>` does it).
+ */
+export class View extends ColumnLayout {
+    _view;
+    _viewData = {};
+    constructor(view) { super([]); this._view = view; }
+    static make(view) { return configured(new View(view)); }
+    /** Extra data passed to the EJS view. */
+    viewData(data) { this._viewData = data; return this; }
+    /** Columns rendered inside the view are not part of the table: the view has no children. */
+    components(children) { this._children = children; return this; }
+    getClasses() { return []; }
+    async renderContent(children, record, key) {
+        if (typeof this._view === 'function')
+            return this._view({ record, recordKey: key });
+        return views.render(this._view, { ...this._viewData, record, recordKey: key, getRecord: () => record, children: children.join('') });
+    }
+}
 /** Renders a record through the layout, skipping columns the user has hidden. */
 async function renderColumnLayout(node, record, key, visible) {
     if (node instanceof ColumnLayout) {
+        if (node.isHidden())
+            return '';
         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>`);
+        const cell = new Attributes().gridColumn(node.getColumnSpan()).class([{ 'fi-growable': node.canGrow() }, ...node.getResponsiveClasses()]);
+        return `<div ${cell.toHtml()}>${await node.renderContent(children, record, key)}</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);
+    const cell = new Attributes().gridColumn({ default: 1 }).class([{ 'fi-growable': node.canGrow(true) }, 'fi-ta-col', ...(alignment ? [`fi-align-${alignment}`] : []), ...node.getResponsiveClasses()]);
+    return `<div ${cell.toHtml()}>${html}</div>`;
 }
 /** Column group: a shared label above the column headers. */
 export class ColumnGroup {
@@ -367,48 +777,212 @@ export class ColumnGroup {
         c._group = this.label; return this; }
     getColumns() { return this._columns; }
 }
-/** Color swatch column. */
+/** Only plain CSS lengths are written into a style attribute. */
+const cssLength = (value) => {
+    if (value === null)
+        return null;
+    const text = typeof value === 'number' ? `${value}px` : value.trim();
+    return /^[0-9.]+(rem|px|em|%|vh|vw)$/.test(text) ? text : null;
+};
+/** Only hex or simple functional colors are written into a style attribute (no CSS injection). */
+const sanitizeCssColor = (value) => (typeof value === 'string' && /^(#[0-9a-fA-F]{3,8}|(rgb|hsl|oklch)a?\([0-9.,%\s/deg-]+\))$/.test(value.trim()) ? value.trim() : null);
+/** Only local or http(s) URLs become image sources. */
+const safeImageUrl = (value) => (typeof value === 'string' && /^(\/(?!\/)|https?:\/\/)/.test(value) ? value : null);
+/** Attributes of a copyable element (Filament's `filamentCopyable` Alpine component). */
+const copyableAttributes = (copied, label, message, duration) => [
+    'x-data="filamentCopyable"', 'x-bind="bindings"',
+    `x-bind:aria-label="isStandalone ? ${e(js(t('filament::components/copyable.label', { label })))} : null"`,
+    `x-on:click.prevent.stop="${e(`if (isStandalone) {\n    copy(${js(copied)}, ${js(message)}, ${duration}, ${js(t('filament::components/copyable.messages.failed'))})\n} else {\n    window.navigator.clipboard.writeText(${js(copied)})\n    $tooltip(${js(message)}, {\n        theme: $store.theme,\n        timeout: ${duration},\n    })\n}`)}"`,
+];
+/** Color swatch per state (a color, or a list of colors). */
 export class ColorColumn extends Column {
+    _copyable = false;
+    _copyMessage = null;
+    _copyMessageDuration = 2000;
+    _tooltip = null;
+    _placeholder = null;
+    _wrap = false;
+    _inline = false;
     static make(name) { return configured(new ColorColumn(name)); }
+    /** Clicking the swatch copies the color. Browsers only expose the clipboard on HTTPS or `localhost`. */
+    copyable(condition = true) { this._copyable = condition; return this; }
+    copyMessage(message) { this._copyMessage = message; return this; }
+    copyMessageDuration(milliseconds) { this._copyMessageDuration = milliseconds; return this; }
+    tooltip(tooltip) { this._tooltip = tooltip; return this; }
+    placeholder(text) { this._placeholder = text; return this; }
+    /** Lets several swatches wrap onto more lines. */
+    wrap(condition = true) { this._wrap = condition; return this; }
+    inline(condition = true) { this._inline = condition; return this; }
     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>`;
+        const align = this._alignment && this._alignment !== 'start' ? `fi-align-${this._alignment}` : null;
+        const base = ['fi-ta-color', this._inline ? 'fi-inline' : null, align];
+        if (isBlankState(state))
+            return `<div class="${cls(base)}">${this._placeholder !== null ? `<p class="fi-ta-placeholder">${e(this._placeholder)}</p>` : ''}</div>`;
+        const items = (Array.isArray(state) ? state : [state]).map((item) => {
+            const color = sanitizeCssColor(item);
+            const copyable = resolveItem(this._copyable, record, item);
+            const tooltip = resolveItem(this._tooltip, record, item);
+            const attributes = [];
+            // The swatch shows its value only through its color: it is a named image for screen readers.
+            if (!copyable && color)
+                attributes.push(`aria-label="${e(color)}"`, 'role="img"');
+            if (copyable)
+                attributes.push(...copyableAttributes(color ?? '', color ?? this.name, this._copyMessage ?? t('filament::components/copyable.messages.copied'), this._copyMessageDuration));
+            if (tooltip)
+                attributes.push(`x-tooltip="${e(tooltipAttribute(tooltip))}"`);
+            attributes.push(`class="${cls(['fi-ta-color-item', copyable ? 'fi-copyable' : null])}"`);
+            if (color)
+                attributes.push(`style="background-color: ${color};"`);
+            return `<div ${attributes.join(' ')}></div>`;
+        });
+        return `<div class="${cls([...base, this._wrap ? 'fi-wrapped' : null])}">${items.join('')}</div>`;
     }
 }
-/** Image column: the state is the image URL. Only local or http(s) URLs are rendered. */
+/** Image per state (an image URL, or a list of URLs). Only local or http(s) URLs are rendered. */
 export class ImageColumn extends Column {
     _alt = null;
-    _height = '2.5rem';
+    _height = null;
+    _width = null;
     _circular = false;
+    _square = false;
+    _stacked = false;
+    _ring = null;
+    _overlap = null;
+    _limit = null;
+    _limitedRemainingText = false;
+    _limitedRemainingTextSize = null;
+    _defaultImageUrl = null;
+    _tooltip = null;
+    _placeholder = null;
+    _wrap = false;
+    _inline = 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; }
+    alt(alt) { this._alt = alt; return this; }
+    /** CSS height of the images (`2.5rem` by default, `2rem` when stacked). */
+    imageHeight(height) { this._height = cssLength(height); return this; }
+    imageWidth(width) { this._width = cssLength(width); return this; }
+    /** Same width and height. */
+    imageSize(size) { return this.imageHeight(size).imageWidth(size); }
     circular(condition = true) { this._circular = condition; return this; }
+    square(condition = true) { this._square = condition; return this; }
+    /** Overlapping images, with a `ring` (border width, 0 to 8) and an `overlap` (0 to 8). */
+    stacked(condition = true) { this._stacked = condition; return this; }
+    ring(width) { this._ring = width; return this; }
+    overlap(overlap) { this._overlap = overlap; return this; }
+    /** Shows only the first images; `limitedRemainingText()` adds "+3" for the others. */
+    limit(count) { this._limit = count; return this; }
+    limitedRemainingText(condition = true, size = null) { this._limitedRemainingText = condition; this._limitedRemainingTextSize = size; return this; }
+    /** Image shown when the state is empty. */
+    defaultImageUrl(url) { this._defaultImageUrl = url; return this; }
+    tooltip(tooltip) { this._tooltip = tooltip; return this; }
+    placeholder(text) { this._placeholder = text; return this; }
+    wrap(condition = true) { this._wrap = condition; return this; }
+    inline(condition = true) { this._inline = 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>`;
+        let state = await this.getState(record);
+        const align = this._alignment && this._alignment !== 'start' ? `fi-align-${this._alignment}` : null;
+        const base = ['fi-ta-image', this._inline ? 'fi-inline' : null, align];
+        const fallback = safeImageUrl(typeof this._defaultImageUrl === 'function' ? this._defaultImageUrl(record) : this._defaultImageUrl);
+        let items = (Array.isArray(state) ? state : isBlankState(state) ? [] : [state]).filter((item) => safeImageUrl(item) !== null);
+        if (!items.length && fallback)
+            items = [fallback];
+        if (!items.length)
+            return `<div class="${cls(base)}">${this._placeholder !== null ? `<p class="fi-ta-placeholder">${e(this._placeholder)}</p>` : ''}</div>`;
+        const overLimit = this._limit !== null && items.length > this._limit ? items.length - this._limit : 0;
+        if (overLimit)
+            items = items.slice(0, this._limit);
+        const height = this._height ?? (this._stacked ? '2rem' : '2.5rem');
+        const width = this._width ?? (this._circular || this._square ? height : null);
+        const style = `height: ${height};${width ? ` width: ${width};` : ''}`;
+        const ring = this._stacked && this._ring !== null && Number.isInteger(this._ring) ? `fi-ta-image-ring fi-ta-image-ring-${this._ring}` : null;
+        const overlap = this._stacked ? (this._overlap ?? 2) : null;
+        const classes = [...base, this._circular ? 'fi-circular' : null, this._wrap ? 'fi-wrapped' : null, this._stacked ? 'fi-stacked' : null, ring, overlap ? `fi-ta-image-overlap-${overlap}` : null];
+        const images = items.map((item) => {
+            const alt = resolveItem(this._alt, record, item) ?? '';
+            const tooltip = resolveItem(this._tooltip, record, item);
+            return `<img alt="${e(alt)}" src="${e(String(item))}"${tooltip ? ` x-tooltip="${e(tooltipAttribute(tooltip))}"` : ''} style="${style}" />`;
+        }).join('');
+        const remaining = overLimit && this._limitedRemainingText ? `<div class="${cls(['fi-ta-image-limited-remaining-text', this._limitedRemainingTextSize ? `fi-size-${this._limitedRemainingTextSize}` : null])}" style="${style}">+${overLimit}</div>` : '';
+        return `<div class="${cls(classes)}">${images}${remaining}</div>`;
     }
 }
 /** Icon depending on the value; `boolean()` shows a green check or a red cross. */
+/**
+ * Icon per state. `boolean()` shows a green check or a red cross; `icon()` and `color()` choose the icon and color from the
+ * record and the state, e.g. `IconColumn.make('status').icon((record) => STATUSES[record.status].icon)`.
+ */
 export class IconColumn extends Column {
     _boolean = false;
+    _icon = null;
+    _color = null;
+    _size = null;
+    _trueIcon = null;
+    _falseIcon = null;
+    _trueColor = null;
+    _falseColor = null;
+    _tooltip = null;
+    _placeholder = null;
+    _listWithLineBreaks = false;
+    _wrap = false;
+    _inline = false;
     static make(name) { return configured(new IconColumn(name)); }
     boolean(condition = true) { this._boolean = condition; return this; }
+    icon(icon) { this._icon = icon; return this; }
+    color(color) { this._color = color; return this; }
+    /** Icon size: `xs`, `sm`, `md`, `lg` (default), `xl` or `2xl`. */
+    size(size) { this._size = size; return this; }
+    /** Icons and colors of a boolean column; `false` shows no icon for that value. */
+    trueIcon(icon) { this._trueIcon = icon; return this; }
+    falseIcon(icon) { this._falseIcon = icon; return this; }
+    trueColor(color) { this._trueColor = color; return this; }
+    falseColor(color) { this._falseColor = color; return this; }
+    tooltip(tooltip) { this._tooltip = tooltip; return this; }
+    placeholder(text) { this._placeholder = text; return this; }
+    /** One icon per line, for a state that is a list. */
+    listWithLineBreaks(condition = true) { this._listWithLineBreaks = condition; return this; }
+    wrap(condition = true) { this._wrap = condition; return this; }
+    inline(condition = true) { this._inline = condition; return this; }
+    isBooleanItem(item) { return this._boolean || typeof item === 'boolean'; }
+    iconOf(record, item) {
+        const own = this._icon === null ? null : resolveItem(this._icon, record, item);
+        if (own)
+            return own;
+        if (!this.isBooleanItem(item) || item === null || item === undefined)
+            return null;
+        const on = item === true || item === 1 || item === '1';
+        const chosen = on ? this._trueIcon : this._falseIcon;
+        return chosen === false ? null : chosen ?? (on ? 'o-check-circle' : 'o-x-circle');
+    }
+    colorOf(record, item) {
+        const own = this._color === null ? null : resolveItem(this._color, record, item);
+        if (own)
+            return own;
+        if (!this.isBooleanItem(item) || item === null || item === undefined)
+            return null;
+        const on = item === true || item === 1 || item === '1';
+        return on ? (this._trueColor ?? 'success') : (this._falseColor ?? 'danger');
+    }
     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 align = this._alignment && this._alignment !== 'start' ? `fi-align-${this._alignment}` : null;
+        const base = ['fi-ta-icon', this._inline ? 'fi-inline' : null, align];
+        if (isBlankState(state))
+            return `<div class="${cls(base)}">${this._placeholder !== null ? `<p class="fi-ta-placeholder">${e(this._placeholder)}</p>` : ''}</div>`;
+        const items = Array.isArray(state) ? state : [state];
+        const html = items.map((item) => {
+            const name = this.iconOf(record, item);
+            if (!name)
+                return '';
+            const color = this.colorOf(record, item);
+            const size = resolveItem(this._size, record, item);
+            const tooltip = resolveItem(this._tooltip, record, item);
+            const attributes = new Attributes(tooltip ? { 'x-tooltip': tooltipAttribute(tooltip) } : {}).class(color ? (colorManager?.getComponentClasses('icon-column', color) ?? []) : []);
+            // The icon is hidden from assistive technology: a text alternative goes with it.
+            const alternative = tooltip ? tooltip : this.isBooleanItem(item) ? t(`filament-tables::table.columns.icon.boolean.${item === true || item === 1 || item === '1' ? 'true' : 'false'}`) : (typeof item === 'string' || typeof item === 'number') ? String(item) : null;
+            return `${icon(name, { size: (size && size !== 'base' ? size : 'lg'), attributes })}${alternative ? `<span class="fi-sr-only">${e(alternative)}</span>` : ''}`;
+        }).join('');
+        return `<div class="${cls([...base, this._listWithLineBreaks ? 'fi-ta-icon-has-line-breaks' : null, this._wrap ? 'fi-wrapped' : null])}">${html}</div>`;
     }
 }
 const isBlank = (value) => value === null || value === undefined || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0);
@@ -468,6 +1042,8 @@ export class EditableColumn extends Column {
      * 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)".
      */
+    /** Validation of a value for a given record (column types whose rules depend on the record override it). */
+    async validateFor(_record, input) { return this.validate(input); }
     validate(input) {
         const attribute = this.getValidationAttribute();
         const blank = isBlank(input);
@@ -530,18 +1106,20 @@ export class EditableColumn extends Column {
         return state;
     }
     /** `x-tooltip` expression of editable controls: the column tooltip, replaced by the validation error when there is one. */
-    tooltipExpression(record) {
+    tooltipExpression(record, extra = null) {
         const tooltip = typeof this._tooltip === 'function' ? this._tooltip(record) : this._tooltip;
+        const more = extra ? `
+                        ${extra}` : '';
         return `error === undefined ? ${tooltip !== null && tooltip !== '' ? `{
                         content: ${js(tooltip)},
                         theme: $store.theme,
                         allowHTML: false,
-                        aria: { content: 'auto' },
+                        aria: { content: 'auto' },${more}
                     }` : 'false'} : {
                         content: error,
                         theme: $store.theme,
                         allowHTML: false,
-                        aria: { content: null },
+                        aria: { content: null },${more}
                     }`;
     }
     /** Shared opening markup of editable cells: lazily loaded Alpine component, server state and record key. */
@@ -562,30 +1140,95 @@ export class EditableColumn extends Column {
     }
     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.
- */
+const normalizeSelectOptions = (options) => (Array.isArray(options) ? options : Object.entries(options)).map(([value, label]) => [String(value), String(label)]);
 export class SelectColumn extends EditableColumn {
     _options = [];
     _selectablePlaceholder = true;
+    _native = true;
+    _searchable = false;
+    _disabledOptions = [];
+    _placeholder = null;
+    _optionsLimit = 50;
+    _canOptionLabelsWrap = true;
+    _position = null;
+    _inline = false;
     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; }
+    /** `{ value: label }` pairs, `[value, label]` pairs, or a function of the record returning either. */
+    options(options) { this._options = typeof options === 'function' ? options : normalizeSelectOptions(options); return this; }
+    /** Static options (empty when they depend on the record: use `getOptionsFor()`). */
+    getOptions() { return typeof this._options === 'function' ? [] : this._options; }
+    async getOptionsFor(record) {
+        if (this._optionsRelationship)
+            return (this._relationshipOptions ??= loadRelationshipOptions(record?.constructor, this._optionsRelationship.name, this._optionsRelationship.title, this._optionsRelationship.modify));
+        return typeof this._options === 'function' ? normalizeSelectOptions(await this._options(record)) : this._options;
+    }
+    _optionsRelationship = null;
+    _relationshipOptions = null;
+    /**
+     * Options from the records of a relationship of the record's model (an Objection model with `relationMappings`): the
+     * column stores the picked record's key, e.g. `SelectColumn.make('author_id').optionsRelationship('author', 'name')`.
+     * Up to 1,000 options are listed; any related record's key is accepted when saving.
+     */
+    optionsRelationship(name, titleAttribute = null, modifyQueryUsing = null) {
+        this._optionsRelationship = { name, title: titleAttribute, modify: modifyQueryUsing };
+        this._relationshipOptions = null;
+        return this;
+    }
     selectablePlaceholder(condition = true) { this._selectablePlaceholder = condition; return this; }
+    /** `false`: a JavaScript select instead of the browser's native one. */
+    native(condition = true) { this._native = condition; return this; }
+    _allowHtml = false;
+    /** Option labels are HTML, sanitized on the server (JavaScript select only; the native select shows their text). */
+    allowHtml(condition = true) { this._allowHtml = condition; return this; }
+    labelForDisplay(label) { return !this._allowHtml ? label : this.isNative() ? label.replace(/<[^>]*>/g, '') : sanitizeHtml(label); }
+    /** A search field in the select (implies a JavaScript select). */
+    searchableOptions(condition = true) { this._searchable = condition; return this; }
+    isNative() { return this._native && !this._searchable; }
+    /** Options that cannot be chosen. A disabled option is also refused on the server. */
+    disableOptionWhen(callback) { this._disabledOptions.push(callback); return this; }
+    isOptionDisabled(value, label, record) { return this._disabledOptions.some((callback) => callback(value, label, record)); }
+    placeholder(text) { this._placeholder = text; return this; }
+    /** Maximum number of options listed by the JavaScript select (50 by default). */
+    optionsLimit(limit) { this._optionsLimit = limit; return this; }
+    /** `false`: long option labels are truncated in the JavaScript select instead of wrapping. */
+    allowOptionsLabelsWrap(condition = true) { this._canOptionLabelsWrap = condition; return this; }
+    /** Side where the JavaScript select's dropdown opens (automatic by default). */
+    position(position) { this._position = position; return this; }
+    inline(condition = true) { this._inline = 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.` }];
+        // Options that depend on the record are checked by `validateFor()`.
+        if (typeof this._options === 'function' || this._optionsRelationship)
+            return [];
+        const options = this._options;
+        return [{ name: 'in', passes: (v) => (typeof v === 'string' || typeof v === 'number') && options.some(([value]) => value === String(v)), message: (a) => `The selected ${a} is invalid.` }];
+    }
+    /** The value must be one of the record's options, and not a disabled one. */
+    async validateFor(record, input) {
+        if (!isBlank(input)) {
+            // Relationship options: the received key must be one of the related model's records (in the modified query).
+            const options = this._optionsRelationship && (typeof input === 'string' || typeof input === 'number')
+                ? await loadRelationshipOptions(record?.constructor, this._optionsRelationship.name, this._optionsRelationship.title, this._optionsRelationship.modify, [String(input)])
+                : await this.getOptionsFor(record);
+            const option = (typeof input === 'string' || typeof input === 'number') ? options.find(([value]) => value === String(input)) : undefined;
+            if (!option || this.isOptionDisabled(option[0], option[1], record))
+                return this._validationMessages.in ?? `The selected ${this.getValidationAttribute()} is invalid.`;
+        }
+        return this.validate(input);
     }
     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 options = await this.getOptionsFor(record);
+        const found = options.find(([option]) => option === value)?.[1] ?? null;
+        const optionLabel = found === null ? null : this.labelForDisplay(found);
         const isDisabled = await this.isDisabledFor(record);
-        const placeholder = t('filament-forms::components.select.placeholder');
-        const messages = this.getUpdateStateMessages();
+        const isNative = this.isNative();
+        const placeholder = this._placeholder ?? t('filament-forms::components.select.placeholder');
+        const optionsForJs = isNative ? [] : options.map(([option, label]) => ({ label: this.labelForDisplay(label), value: option, isDisabled: this.isOptionDisabled(option, label, record) }));
         const config = `selectTableColumn({
                     accessibilityAttributes: [],
                     ariaLabel: ${js(this.getLabel())},
-                    canOptionLabelsWrap: true,
+                    canOptionLabelsWrap: ${js(this._canOptionLabelsWrap)},
                     canSelectPlaceholder: ${js(this._selectablePlaceholder)},
                     clearButtonLabel: ${js(t('filament-forms::components.select.actions.clear.label'))},
                     errorMessage: ${js(t('filament-forms::components.select.error_message'))},
@@ -594,18 +1237,18 @@ export class SelectColumn extends EditableColumn {
                     hasInitialNoOptionsMessage: true,
                     initialOptionLabel: ${js(optionLabel)},
                     isDisabled: ${js(isDisabled)},
-                    isHtmlAllowed: false,
-                    isNative: true,
-                    isSearchable: false,
+                    isHtmlAllowed: ${js(this._allowHtml && !isNative)},
+                    isNative: ${js(isNative)},
+                    isSearchable: ${js(this._searchable)},
                     loadingMessage: ${js(t('filament-forms::components.select.loading_message'))},
-                    messages: ${js(messages)},
+                    messages: ${js(this.getUpdateStateMessages())},
                     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,
+                    options: ${js(optionsForJs)},
+                    optionsLimit: ${js(this._optionsLimit)},
                     placeholder: ${js(placeholder)},
-                    position: null,
+                    position: ${js(this._position)},
                     recordKey: ${js(String(recordKey))},
                     searchableOptionFields: ${js(['label'])},
                     searchDebounce: 1000,
@@ -614,23 +1257,20 @@ export class SelectColumn extends EditableColumn {
                     searchPrompt: ${js(t('filament-forms::components.select.search_prompt'))},
                     state: ${js(state === null || state === undefined ? null : value)},
                 })`;
+        const tooltip = this.tooltipExpression(record, isNative ? null : 'triggerTarget: $el.isConnected && select ? select.selectButton : null,');
         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 },
-
-                    }`,
+            'x-tooltip': tooltip,
         }).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="{
+        const control = isNative
+            ? `<select x-model="state" ${select.toHtml()}>${this._selectablePlaceholder ? `<option value="">${e(placeholder)}</option>` : ''}${options.map(([option, label]) => `<option${this.isOptionDisabled(option, label, record) ? ' disabled' : ''} value="${e(option)}">${e(this.labelForDisplay(label))}</option>`).join('')}</select>`
+            : '<div wire:ignore class="fi-select-input"><div x-ref="select"></div></div>';
+        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="${cls(['fi-ta-select', this._inline ? 'fi-inline' : null])}"><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>`;
+                }" x-on:click.prevent.stop${isNative ? '' : ` x-tooltip="${e(tooltip)}"`} class="fi-input-wrp">${control}</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`. */
@@ -790,120 +1430,402 @@ export async function updateTableColumnState(table, host, adapter, columnName, r
     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);
+    const error = await column.validateFor(record, 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 FILTERS_LAYOUTS = ['dropdown', 'modal', 'above-content', 'above-content-collapsible', 'below-content', 'before-content', 'before-content-collapsible', 'after-content', 'after-content-collapsible'];
+/** Widths accepted for the filters dropdown, modal or side panel. */
+const FILTERS_WIDTHS = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full', 'screen-sm', 'screen-md', 'screen-lg', 'screen-xl', 'screen-2xl', 'screen'];
 const filterLabel = (name) => name.replace(/[_.-]+/g, ' ').replace(/^./, (c) => c.toUpperCase());
-/** Filters on a column value picked from a list (single select). */
-export class SelectFilter {
+/** Badge shown above the table for an applied filter. */
+export class Indicator {
+    _label;
+    _removeField = null;
+    _removable = true;
+    _color = null;
+    constructor(label) { this._label = label; }
+    static make(label) { return new Indicator(label); }
+    label(label) { this._label = label; return this; }
+    getLabel() { return this._label; }
+    /** Field of the filter form cleared when the indicator is removed (by default, the whole filter is reset). */
+    removeField(field) { this._removeField = field; return this; }
+    getRemoveField() { return this._removeField; }
+    /** `false`: no remove button. A forged removal is refused on the server too. */
+    removable(condition = true) { this._removable = condition; return this; }
+    isRemovable() { return this._removable; }
+    color(color) { this._color = color; return this; }
+    getColor() { return this._color; }
+}
+const toIndicators = (result) => {
+    if (result === null || result === undefined || result === '')
+        return [];
+    const one = (item, field) => {
+        const indicator = item instanceof Indicator ? item : typeof item === 'string' && item !== '' ? Indicator.make(item) : null;
+        if (!indicator)
+            return null;
+        return { label: indicator.getLabel(), field: indicator.getRemoveField() ?? field ?? '', removable: indicator.isRemovable(), color: indicator.getColor() };
+    };
+    if (typeof result === 'string' || result instanceof Indicator)
+        return [one(result, null)].filter((i) => i !== null);
+    if (Array.isArray(result))
+        return result.map((item) => one(item, null)).filter((i) => i !== null);
+    return Object.entries(result).map(([field, item]) => one(item, field)).filter((i) => i !== null);
+};
+/** A received select value: a string of at most 255 characters. */
+const filterValue = (value) => ((typeof value === 'string' || typeof value === 'number') && String(value) !== '' ? String(value).slice(0, 255) : null);
+/** Shared options of the built-in filters: label, default state, indicators and custom query. */
+class BaseFilter {
     name;
     _label = null;
+    _default = undefined;
+    _indicator = null;
+    _indicateUsing = null;
+    _query = null;
+    _columnSpan = { default: 1, lg: 1 };
+    constructor(name) { this.name = name; }
+    label(label) { this._label = label; return this; }
+    getLabel() { return this._label ?? filterLabel(this.name); }
+    /** State applied when the table opens and when the user clicks "Reset". */
+    default(value = true) { this._default = value; return this; }
+    /** Label of the indicator (the filter label by default). */
+    indicator(indicator) { this._indicator = indicator; return this; }
+    getIndicator() { return this._indicator ?? this.getLabel(); }
+    /** Indicators of the applied state, replacing the default one. */
+    indicateUsing(callback) { this._indicateUsing = callback; return this; }
+    /** Query condition built from the sanitized state, replacing the default one. */
+    query(modifier) { this._query = modifier; return this; }
+    /** Width of the filter in the filters form grid. */
+    columnSpan(span) { this._columnSpan = typeof span === 'object' ? span : { default: span }; return this; }
+    columnSpanFull() { return this.columnSpan('full'); }
+    getColumnSpan() { return this._columnSpan; }
+    getFormDefinition() { return { placeholder: '', options: [] }; }
+    defaultIndicators(_data) { return null; }
+    getIndicators(state) {
+        const data = this.sanitizeState(state);
+        return toIndicators(this._indicateUsing ? this._indicateUsing(data) : this.defaultIndicators(data));
+    }
+    /** Prefixes a value label with the indicator, unless the indicator is a ready-made `Indicator`. */
+    labelled(valueLabel) {
+        const indicator = this.getIndicator();
+        return indicator instanceof Indicator ? indicator : `${indicator}: ${valueLabel}`;
+    }
+}
+/** Value of the "None" option of a relationship select filter. */
+const EMPTY_RELATIONSHIP_OPTION = '__empty';
+/** Filters on a column value picked from a list. */
+export class SelectFilter extends BaseFilter {
     _column = null;
     _options = [];
-    constructor(name) { this.name = name; }
+    _multiple = false;
+    _searchable = false;
+    _selectablePlaceholder = true;
+    _placeholder = null;
+    _optionLabels = new Map();
     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; }
+    attribute(column) { return this.column(column); }
+    getColumn() { return this._column ?? this.name; }
     /** 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); }
+    /** Several values can be picked: records matching any of them are shown. */
+    multiple(condition = true) { this._multiple = condition; return this; }
+    isMultiple() { return this._multiple; }
+    searchable(condition = true) { this._searchable = condition; return this; }
+    /** `false`: the empty option cannot be picked again once a value is chosen. */
+    selectablePlaceholder(condition = true) { this._selectablePlaceholder = condition; return this; }
+    placeholder(placeholder) { this._placeholder = placeholder; return this; }
+    /** No-op: options are always loaded with the form. */
+    preload() { return this; }
+    _relationship = null;
+    _emptyOptionLabel = null;
+    _host = null;
+    /**
+     * Options from the records of a relationship of the table's model (an Objection model with `relationMappings`); records
+     * related to the picked ones are shown. `hasEmptyOption` adds a "None" option for records without related records.
+     */
+    relationship(name, titleAttribute = null, modifyQueryUsing = null, hasEmptyOption = false) {
+        this._relationship = { name, title: titleAttribute, modify: modifyQueryUsing, empty: hasEmptyOption };
+        return this;
+    }
+    hasRelationship() { return this._relationship !== null; }
+    /** Label of the "None" option of `relationship(..., hasEmptyOption: true)`. */
+    emptyRelationshipOptionLabel(label) { this._emptyOptionLabel = label; return this; }
+    getEmptyRelationshipOptionLabel() { return this._emptyOptionLabel ?? t('filament-tables::table.filters.select.relationship.empty_option_label'); }
+    getFormDefinition() { return { placeholder: this._placeholder ?? t('filament-tables::table.filters.select.placeholder'), options: Array.isArray(this._options) && !this._relationship ? this._options : [] }; }
+    getFormOptions(host = this._host) {
+        if (this._relationship)
+            return this.loadRelationshipOptions(host, null);
+        return typeof this._options === 'function' ? this._options() : Promise.resolve(this._options);
+    }
+    async loadRelationshipOptions(host, keys) {
+        const relation = this._relationship;
+        const options = await loadRelationshipOptions(modelOfHost(host), relation.name, relation.title, relation.modify, keys === null ? null : keys.filter((key) => key !== EMPTY_RELATIONSHIP_OPTION));
+        return relation.empty && (keys === null || keys.includes(EMPTY_RELATIONSHIP_OPTION)) ? [[EMPTY_RELATIONSHIP_OPTION, this.getEmptyRelationshipOptionLabel()], ...options] : 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 !== ''; }
+    getFormComponents() {
+        const select = Select.make(this._multiple ? 'values' : 'value').label(this.getLabel()).placeholder(this.getFormDefinition().placeholder).options((ctx) => this.getFormOptions(ctx?.livewire));
+        if (this._multiple)
+            select.multiple();
+        if (this._searchable)
+            select.searchable();
+        if (!this._selectablePlaceholder)
+            select.selectablePlaceholder(false);
+        return [select];
+    }
+    defaultValues() { return (Array.isArray(this._default) ? this._default : this._default === undefined || this._default === null ? [] : [this._default]).map(filterValue).filter((v) => v !== null); }
+    getResetState() { return this._multiple ? { values: [] } : { value: null }; }
+    getDefaultState() { const values = this.defaultValues(); return this._multiple ? { values } : { value: values[0] ?? null }; }
+    sanitizeState(state) {
+        const received = state && typeof state === 'object' ? state : {};
+        if (!this._multiple)
+            return { value: filterValue(received.value) };
+        const values = Array.isArray(received.values) ? received.values : [];
+        return { values: [...new Set(values.map(filterValue).filter((v) => v !== null))].slice(0, 100) };
+    }
+    /** Values that can filter: with fixed options, only offered values; loaded options are bound parameters (an unknown value matches nothing). */
+    values(state) {
+        const data = this.sanitizeState(state);
+        const values = this._multiple ? data.values : data.value === null ? [] : [data.value];
+        // Relationship or loaded options: the keys are bound parameters, an unknown key matches nothing.
+        return Array.isArray(this._options) && !this._relationship ? values.filter((value) => this._options.some(([option]) => option === value)) : values;
+    }
+    isActive(state) { return this.values(state).length > 0; }
     apply(query, state) {
-        if (!this.isActive(state))
+        const values = this.values(state);
+        if (!values.length)
             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))
+        const data = this.sanitizeState(state);
+        if (this._query) {
+            (query.modifiers ??= []).push((q) => { this._query(q, data); });
             return;
-        const column = this._column ?? this.name;
-        (query.modifiers ??= []).push((q) => { q.where(column, value); });
+        }
+        if (this._relationship) {
+            const { name, modify } = this._relationship;
+            const keys = values.filter((value) => value !== EMPTY_RELATIONSHIP_OPTION);
+            const empty = this._relationship.empty && values.includes(EMPTY_RELATIONSHIP_OPTION);
+            // Records related to one of the picked records, or (the "None" option) without related records.
+            (query.modifiers ??= []).push((q) => {
+                q.where((inner) => {
+                    if (keys.length)
+                        inner.orWhere((related) => applyConditions(related, [{ kind: 'related', relationship: name, keys, negate: false, ...(modify ? { modify } : {}) }]));
+                    if (empty)
+                        inner.orWhere((none) => applyConditions(none, [{ kind: 'related', relationship: name, keys: null, negate: true, ...(modify ? { modify } : {}) }]));
+                });
+            });
+            return;
+        }
+        const column = this.getColumn();
+        (query.modifiers ??= []).push((q) => { if (this._multiple)
+            q.whereIn(column, values);
+        else
+            q.where(column, values[0]); });
+    }
+    /** Labels of the applied values, loaded before the indicators are computed. */
+    async loadIndicatorData(state, host) {
+        const values = this.values(state);
+        if (!values.length)
+            return;
+        this._optionLabels = new Map(this._relationship ? await this.loadRelationshipOptions(host, values) : await this.getFormOptions());
+    }
+    defaultIndicators(data) {
+        const labels = this.values(data).map((value) => this._optionLabels.get(value) ?? (Array.isArray(this._options) ? this._options.find(([option]) => option === value)?.[1] : undefined)).filter((label) => label !== undefined);
+        if (!labels.length)
+            return null;
+        const joined = labels.length > 1 ? `${labels.slice(0, -1).join(', ')} & ${labels[labels.length - 1]}` : labels[0];
+        return [this.labelled(joined)];
     }
 }
-/** Three-state filter on a boolean column: all, yes, no. */
-export class TernaryFilter {
-    name;
-    _label = null;
-    constructor(name) { this.name = name; }
+/** Three-state filter: all, yes, no. By default on a boolean column; `nullable()` checks whether the column is filled. */
+export class TernaryFilter extends BaseFilter {
+    _column = null;
+    _trueLabel = null;
+    _falseLabel = null;
+    _placeholder = null;
+    _nullable = false;
+    _queries = null;
     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)); }
+    attribute(column) { this._column = column; return this; }
+    column(column) { return this.attribute(column); }
+    getColumn() { return this._column ?? this.name; }
+    trueLabel(label) { this._trueLabel = label; return this; }
+    falseLabel(label) { this._falseLabel = label; return this; }
+    placeholder(label) { this._placeholder = label; return this; }
+    getTrueLabel() { return this._trueLabel ?? t('filament-forms::components.select.boolean.true'); }
+    getFalseLabel() { return this._falseLabel ?? t('filament-forms::components.select.boolean.false'); }
+    /** "Yes" shows records where the column is filled, "No" those where it is empty. */
+    nullable(condition = true) { this._nullable = condition; return this; }
+    /** Custom conditions for "yes", "no" and, optionally, the empty choice. */
+    queries(queries) { this._queries = queries; return this; }
+    getFormDefinition() { return { placeholder: this._placeholder ?? '-', options: [['1', this.getTrueLabel()], ['0', this.getFalseLabel()]] }; }
+    getFormComponents() {
+        const definition = this.getFormDefinition();
+        return [Select.make('value').label(this.getLabel()).placeholder(definition.placeholder).options(definition.options)];
+    }
+    getResetState() { return { value: null }; }
+    getDefaultState() { return { value: this._default === true || this._default === 1 || this._default === '1' ? '1' : this._default === false || this._default === 0 || this._default === '0' ? '0' : null }; }
+    sanitizeState(state) {
+        const value = state && typeof state === 'object' ? String(state.value ?? '') : '';
+        return { value: value === '1' || value === '0' ? value : null };
+    }
+    isActive(state) { return this.sanitizeState(state).value !== null; }
     apply(query, state) {
-        if (!this.isActive(state))
+        const data = this.sanitizeState(state);
+        const value = data.value;
+        if (this._query) {
+            (query.modifiers ??= []).push((q) => { this._query(q, data); });
+            return;
+        }
+        if (this._queries) {
+            const modifier = value === '1' ? this._queries.true : value === '0' ? this._queries.false : this._queries.blank;
+            if (modifier)
+                (query.modifiers ??= []).push((q) => { modifier(q); });
             return;
-        const column = this.name, on = String(state.value) === '1';
-        (query.modifiers ??= []).push((q) => { q.where(column, on ? 1 : 0); });
+        }
+        if (value === null)
+            return;
+        const column = this.getColumn(), on = value === '1';
+        (query.modifiers ??= []).push((q) => { if (this._nullable) {
+            if (on)
+                q.whereNotNull(column);
+            else
+                q.whereNull(column);
+        }
+        else
+            q.where(column, on ? 1 : 0); });
+    }
+    defaultIndicators(data) {
+        if (data.value === null)
+            return null;
+        return [this.labelled(data.value === '1' ? this.getTrueLabel() : this.getFalseLabel())];
     }
 }
-/** Custom form filter (`schema()`): the query and indicators are written by the application. */
-export class Filter {
-    name;
-    _label = null;
+/** "Trashed" filter for soft-deletable models: without (default), with, or only deleted records. */
+export class TrashedFilter extends TernaryFilter {
+    constructor(name = 'trashed') { super(name); }
+    static make(name = 'trashed') { return configured(new TrashedFilter(name)); }
+    getLabel() { return this._label ?? t('filament-tables::table.filters.trashed.label'); }
+    getTrueLabel() { return this._trueLabel ?? t('filament-tables::table.filters.trashed.with_trashed'); }
+    getFalseLabel() { return this._falseLabel ?? t('filament-tables::table.filters.trashed.only_trashed'); }
+    getFormDefinition() { return { placeholder: this._placeholder ?? t('filament-tables::table.filters.trashed.without_trashed'), options: [['1', this.getTrueLabel()], ['0', this.getFalseLabel()]] }; }
+    apply(query, state) {
+        const value = this.sanitizeState(state).value;
+        query.trashed = value === '1' ? 'with' : value === '0' ? 'only' : 'without';
+    }
+    defaultIndicators(data) {
+        if (data.value === null)
+            return null;
+        return [data.value === '1' ? this.getTrueLabel() : this.getFalseLabel()];
+    }
+}
+/**
+ * Custom filter. Without `schema()`, it is a checkbox (or a toggle with `toggle()`) and `query()` runs when it is checked.
+ * With `schema()`, the query and indicators are written by the application.
+ */
+export class Filter extends BaseFilter {
     _components = [];
-    _query = null;
-    _indicate = null;
-    constructor(name) { this.name = name; }
+    _toggle = false;
+    _formComponents = null;
     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; }
+    schema(components) { this._components = components; this._formComponents = null; return this; }
+    /** Form fields of a filter without `schema()`: a toggle instead of a checkbox. */
+    toggle(condition = true) { this._toggle = condition; this._formComponents = null; return this; }
+    checkbox() { return this.toggle(false); }
+    hasSchema() { return this._components.length > 0; }
+    getFormComponents() {
+        if (this.hasSchema())
+            return this._components;
+        return (this._formComponents ??= [(this._toggle ? Toggle : Checkbox).make('isActive').label(this.getLabel())]);
+    }
+    fields() { return this.getFormComponents().filter((c) => typeof c?.getName === 'function'); }
+    getResetState() { return this.hasSchema() ? Object.fromEntries(this.fields().map((c) => [String(c.getName()), null])) : { isActive: false }; }
+    getDefaultState() {
+        if (!this.hasSchema())
+            return { isActive: this._default === true };
+        return Object.fromEntries(this.fields().map((c) => {
+            const value = typeof c.getDefaultState === 'function' ? c.getDefaultState() : null;
+            return [String(c.getName()), filterFieldValue(value)];
+        }));
+    }
     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]; }));
+        if (!this.hasSchema())
+            return { isActive: received.isActive === true || received.isActive === 1 || received.isActive === '1' };
+        return Object.fromEntries(this.fields().map((c) => { const name = String(c.getName()); const value = received[name]; return [name, filterFieldValue(value)]; }));
     }
-    isActive(state) { return Object.values(this.sanitizeState(state)).some((value) => value !== null); }
+    /** A field left empty, or an unchecked checkbox, does not filter. */
+    isActive(state) { return Object.values(this.sanitizeState(state)).some((value) => value !== null && value !== false); }
     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 }));
+    defaultIndicators(data) {
+        if (!this.isActive(data))
+            return null;
+        const indicator = this.getIndicator();
+        return [indicator];
+    }
+    removeIndicator(state, field) { return field === '' ? this.getResetState() : { ...this.sanitizeState(state), [field]: null }; }
+}
+/** Value of a custom filter field: a scalar, or a list of scalars (multiple select, checkbox list, 100 at most); anything else, empty strings and empty lists become `null`. */
+function filterFieldValue(value) {
+    if (Array.isArray(value)) {
+        const items = [...new Set(value.filter((item) => (typeof item === 'string' && item !== '') || typeof item === 'number').map(String))].slice(0, 100);
+        return items.length ? items : null;
     }
-    removeIndicator(state, field) { return field === '' ? this.getDefaultState() : { ...this.sanitizeState(state), [field]: null }; }
+    return ['string', 'number', 'boolean'].includes(typeof value) && value !== '' ? value : null;
 }
+/** Look of a filters action (trigger, apply, reset), changed with `filtersTriggerAction()`, `filtersApplyAction()` and `filtersResetAction()`. */
+export class FiltersAction {
+    _label = null;
+    _icon = undefined;
+    _color = null;
+    _view = null;
+    _hidden = false;
+    label(label) { this._label = label; return this; }
+    icon(icon) { this._icon = icon; return this; }
+    color(color) { this._color = color; return this; }
+    /** Labeled button. */
+    button() { this._view = 'button'; return this; }
+    link() { this._view = 'link'; return this; }
+    /** Icon only, the label becomes the tooltip and accessible name. */
+    iconButton() { this._view = 'icon-button'; return this; }
+    hidden(condition = true) { this._hidden = condition; return this; }
+    resolve(defaults) {
+        return { label: this._label ?? defaults.label, icon: this._icon === undefined ? defaults.icon : this._icon, color: this._color ?? defaults.color, view: this._view ?? defaults.view, hidden: this._hidden };
+    }
+}
+/** Bulk actions grouped in the "Bulk actions" dropdown of the toolbar (`toolbarActions([BulkActionGroup.make([...])])`). */
+export class BulkActionGroup {
+    _actions;
+    constructor(actions) { this._actions = actions; }
+    static make(actions) { return configured(new BulkActionGroup(actions)); }
+    getActions() { return this._actions; }
+}
+/** Upper bound on the rows loaded by an unpaginated table or the `'all'` page option. */
+export const MAX_UNPAGINATED_RECORDS = 10000;
 export class Table {
+    /** Default setup for every table, e.g. `Table.configureUsing((table) => table.paginationPageOptions([10, 25]))`. */
+    static configureUsing(configure) { configureUsing(Table, configure); }
+    // Global settings apply first: options set in `table()` override them.
+    constructor() { configured(this); }
     _columns = [];
     _recordAction = null;
+    _pageSummary = true;
+    _allTableSummary = true;
+    /** Which summary rows to show: "this page" (`pageCondition`) and the whole table (`allTableCondition`); group summaries are not affected. */
+    summaries(pageCondition = true, allTableCondition = true) { this._pageSummary = pageCondition; this._allTableSummary = allTableCondition; return this; }
+    hasPageSummary() { return this._pageSummary; }
+    hasAllTableSummary() { return this._allTableSummary; }
     _recordActions = [];
     _heading = null;
     _headerActions = [];
@@ -914,6 +1836,12 @@ export class Table {
     _defaultSort = null;
     _recordUrl = null;
     _pageOptions = [5, 10, 25, 50];
+    _paginated = true;
+    _emptyStateHeading = null;
+    _emptyStateDescription = null;
+    _emptyStateIcon = null;
+    _emptyStateActions = [];
+    _emptyState = null;
     _stackedOnMobile = false;
     _label = 'records';
     _groups = [];
@@ -965,8 +1893,17 @@ export class Table {
         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; }
+    /** Column layout, or `null` for a regular table. The collapsible component is left out (see `getCollapsibleColumnsLayout()`). */
+    getColumnsLayout() {
+        const collapsible = this.getCollapsibleColumnsLayout();
+        return this._columnsLayout && collapsible ? this._columnsLayout.filter((node) => node !== collapsible) : this._columnsLayout;
+    }
+    /** The first top-level layout component marked `collapsible()`, shown behind a toggle button. */
+    getCollapsibleColumnsLayout() { return this._columnsLayout?.find((node) => node instanceof ColumnLayout && node.isCollapsible()) ?? null; }
+    _contentGrid = null;
+    /** Arranges the record cards of a column layout in a grid: `contentGrid({ md: 2, xl: 3 })`. */
+    contentGrid(columns) { this._contentGrid = columns === null ? null : typeof columns === 'number' ? { lg: columns } : columns; return this; }
+    getContentGrid() { return this._contentGrid; }
     /** 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; }
@@ -978,26 +1915,154 @@ export class Table {
     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; }
+    /** Bulk actions: those of `groupedBulkActions()`, then those of the `BulkActionGroup`s of `toolbarActions()`; `null` when none is declared. */
+    getBulkActions() {
+        const groups = this._toolbarActions.filter((action) => action instanceof BulkActionGroup);
+        if (this._bulkActions === null && !groups.length)
+            return null;
+        return [...(this._bulkActions ?? []), ...groups.flatMap((group) => group.getActions())];
+    }
+    _toolbarActions = [];
+    /** Actions in the toolbar, left of the search field: buttons, and a `BulkActionGroup` for the bulk actions dropdown. */
+    toolbarActions(actions) { this._toolbarActions = actions; return this; }
+    /** Toolbar actions other than bulk action groups. */
+    getToolbarActions() { return this._toolbarActions.filter((action) => !(action instanceof BulkActionGroup)); }
     /** Row actions: `Action`s or an `ActionGroup` (dropdown). */
     recordActions(actions) { this._recordActions = actions; return this; }
     getRecordActions() { return this._recordActions; }
+    /** Actions given to columns with `action()` (not those named after a record action). */
+    getColumnActions() { return this.getColumns().map((column) => column.getAction()).filter((action) => action !== null); }
     /** 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; }
+        this.filtersLayout(options.layout); return this; }
+    filtersLayout(layout) { if (!FILTERS_LAYOUTS.includes(layout))
+        throw new Error(`Unknown filters layout: ${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; }
+    _deferFilters = true;
+    _filtersFormColumns = null;
+    _filtersFormWidth = null;
+    _filtersFormMaxHeight = null;
+    _filtersResetPosition = 'header';
+    _filterIndicatorsHidden = false;
+    _persist = { filters: false, search: false, columnSearches: false, sort: false };
+    _recordActionsPosition = 'after-columns';
+    _recordActionsAlignment = null;
+    /**
+     * Where row actions go: after the columns (default), before the columns (after the checkbox), or before the checkbox
+     * (`before-cells`). `after-cells` is the same as `after-columns`.
+     */
+    recordActionsPosition(position) { if (['before-columns', 'before-cells', 'after-columns', 'after-cells'].includes(position))
+        this._recordActionsPosition = position; return this; }
+    getRecordActionsPosition() { return this._recordActionsPosition; }
+    /** Alignment of row actions in their cell. */
+    recordActionsAlignment(alignment) { this._recordActionsAlignment = alignment; return this; }
+    getRecordActionsAlignment() { return this._recordActionsAlignment; }
+    _isRecordSelectable = null;
+    _maxSelectableRecords = null;
+    _selectsCurrentPageOnly = false;
+    /** Records for which this returns `false` have no checkbox, and are ignored by bulk actions even if the browser sends them. */
+    checkIfRecordIsSelectableUsing(callback) { this._isRecordSelectable = callback; return this; }
+    hasRecordSelectabilityCheck() { return this._isRecordSelectable !== null; }
+    async isRecordSelectable(record) { return this._isRecordSelectable ? Boolean(await this._isRecordSelectable(record)) : true; }
+    /** Maximum number of records the user may select at once (also enforced on the server). */
+    maxSelectableRecords(count) { this._maxSelectableRecords = count !== null && count > 0 ? Math.floor(count) : null; return this; }
+    getMaxSelectableRecords() { return this._maxSelectableRecords; }
+    /** "Select all" only selects the records of the current page. */
+    selectCurrentPageOnly(condition = true) { this._selectsCurrentPageOnly = condition; return this; }
+    selectsCurrentPageOnly() { return this._selectsCurrentPageOnly; }
+    /** `false`: filters apply as soon as a field changes, without the "Apply" button. */
+    deferFilters(condition = true) { this._deferFilters = condition; return this; }
+    _filterActions = {};
+    /** Customizes the button that opens the filters: `filtersTriggerAction((action) => action.button().label('Filter'))`. */
+    filtersTriggerAction(configure) { this._filterActions.trigger = configure; return this; }
+    /** Customizes the "Apply" button of deferred filters. */
+    filtersApplyAction(configure) { this._filterActions.apply = configure; return this; }
+    /** Customizes the "Reset" button (`hidden()` removes it). */
+    filtersResetAction(configure) { this._filterActions.reset = configure; return this; }
+    getFiltersActionView(kind) {
+        const defaults = {
+            trigger: { label: t('filament-tables::table.actions.filter.label'), icon: 'm-funnel', color: 'gray', view: 'icon-button' },
+            apply: { label: t('filament-tables::table.filters.actions.apply.label'), icon: null, color: 'primary', view: 'button' },
+            reset: { label: t('filament-tables::table.filters.actions.reset.label'), icon: null, color: this._filtersResetPosition === 'footer' ? 'gray' : 'danger', view: this._filtersResetPosition === 'footer' ? 'button' : 'link' },
+        }[kind];
+        const configure = this._filterActions[kind];
+        if (!configure)
+            return { ...defaults, hidden: false, customized: false };
+        const action = new FiltersAction();
+        return { ...(configure(action) ?? action).resolve(defaults), customized: true };
+    }
+    _filtersFormSchema = null;
+    /**
+     * Arranges the filters form yourself: the function receives each filter's form group, keyed by filter name, and returns
+     * the form components (e.g. sections). Filters left out are not shown.
+     */
+    filtersFormSchema(schema) { this._filtersFormSchema = schema; return this; }
+    getFiltersFormSchema() { return this._filtersFormSchema; }
+    hasDeferredFilters() { return this._deferFilters; }
+    /** Columns of the filters form grid (1 in a dropdown or modal, up to 5 above or below the content by default). */
+    filtersFormColumns(columns) { this._filtersFormColumns = columns; return this; }
+    getFiltersFormColumns() {
+        if (this._filtersFormColumns !== null)
+            return this._filtersFormColumns;
+        return ['above-content', 'above-content-collapsible', 'below-content'].includes(this._filtersLayout) ? { sm: 2, lg: 3, xl: 4, '2xl': 5 } : 1;
+    }
+    /** Width of the filters dropdown, modal or side panel: `xs` to `7xl`, `full`, `screen`... */
+    filtersFormWidth(width) { this._filtersFormWidth = width === null || FILTERS_WIDTHS.includes(width) ? width : null; return this; }
+    getFiltersFormWidth() { return this._filtersFormWidth; }
+    /** Maximum height of the filters dropdown, as a CSS length; it scrolls beyond. */
+    filtersFormMaxHeight(height) { this._filtersFormMaxHeight = height !== null && /^[0-9.]+(rem|px|em|vh|%)$/.test(height) ? height : null; return this; }
+    getFiltersFormMaxHeight() { return this._filtersFormMaxHeight; }
+    /** `footer`: the "Reset" button goes next to "Apply" instead of the filters heading. */
+    filtersResetActionPosition(position) { this._filtersResetPosition = position === 'footer' ? 'footer' : 'header'; return this; }
+    getFiltersResetActionPosition() { return this._filtersResetPosition; }
+    /** Hides the active filter badges above the table. */
+    hiddenFilterIndicators(condition = true) { this._filterIndicatorsHidden = condition; return this; }
+    areFilterIndicatorsHidden() { return this._filterIndicatorsHidden; }
+    /** Keeps the applied filters for the user's browser session (restored when the page is opened again). */
+    persistFiltersInSession(condition = true) { this._persist.filters = condition; return this; }
+    persistSearchInSession(condition = true) { this._persist.search = condition; return this; }
+    persistColumnSearchesInSession(condition = true) { this._persist.columnSearches = condition; return this; }
+    persistSortInSession(condition = true) { this._persist.sort = condition; return this; }
+    _persistGrouping = false;
+    persistGroupingInSession(condition = true) { this._persistGrouping = condition; return this; }
+    persistsGroupingInSession() { return this._persistGrouping; }
+    persistsFiltersInSession() { return this._persist.filters; }
+    persistsSearchInSession() { return this._persist.search; }
+    persistsColumnSearchesInSession() { return this._persist.columnSearches; }
+    persistsSortInSession() { return this._persist.sort; }
     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; }
+    /** Page sizes offered; `'all'` shows every record (up to `MAX_UNPAGINATED_RECORDS`). */
+    paginationPageOptions(options) { this._pageOptions = options.filter((option) => option === 'all' || (Number.isInteger(option) && option > 0)); return this; }
+    /** `false`: no pagination, every record is shown (up to `MAX_UNPAGINATED_RECORDS`). An array sets the page options. */
+    paginated(condition = true) {
+        if (Array.isArray(condition)) {
+            this.paginationPageOptions(condition);
+            condition = true;
+        }
+        this._paginated = condition;
+        return this;
+    }
+    isPaginated() { return this._paginated && !this._groupsOnly; }
+    /** Heading of the empty state, instead of "No <records>". */
+    emptyStateHeading(heading) { this._emptyStateHeading = heading; return this; }
+    emptyStateDescription(description) { this._emptyStateDescription = description; return this; }
+    emptyStateIcon(icon) { this._emptyStateIcon = icon; return this; }
+    /** Actions shown in the empty state, e.g. a create action. They are mounted like table header actions. */
+    emptyStateActions(actions) { this._emptyStateActions = actions; return this; }
+    getEmptyStateActions() { return this._emptyStateActions; }
+    /** Replaces the whole empty state with your HTML (inserted as it is: escape your data with `e()`). */
+    emptyState(html) { this._emptyState = html; return this; }
+    getEmptyStateHeading() { const heading = typeof this._emptyStateHeading === 'function' ? this._emptyStateHeading() : this._emptyStateHeading; return heading ?? t('filament-tables::table.empty.heading', { model: this.getPluralModelLabel() }); }
+    getEmptyStateDescription() { return typeof this._emptyStateDescription === 'function' ? this._emptyStateDescription() : this._emptyStateDescription; }
+    getEmptyStateIcon() { return this._emptyStateIcon ?? 'o-x-mark'; }
+    async getCustomEmptyState() { return typeof this._emptyState === 'function' ? this._emptyState() : this._emptyState; }
     _defaultPageOption = null;
     /** Rows per page when the table opens. */
     defaultPaginationPageOption(option) { this._defaultPageOption = option; return this; }
@@ -1008,18 +2073,18 @@ export class Table {
     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); }
+    getColumns() { return this._columns.filter((column) => !column.isHidden()); }
+    getColumn(name) { return this.getColumns().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()); }
+    hasToggleableColumns() { return this.getColumns().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 }));
+        return this.getColumns().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()])); }
 }
@@ -1048,7 +2113,7 @@ export function getTableQuery(table, host) {
     };
     const grouping = getTableGrouping(table, host);
     if (grouping)
-        query.groupSort = { column: grouping.group.getColumn(), direction: grouping.direction };
+        query.groupSort = { column: grouping.group.getColumn(), direction: grouping.direction, ...(grouping.group.getOrderQueryUsing() ? { modify: grouping.group.getOrderQueryUsing() } : {}) };
     // The host can restrict the query (active list tab).
     host.modifyTableQuery?.(query);
     for (const filter of table.getFilters()) {
@@ -1081,7 +2146,42 @@ export function countActiveFilters(table, host) {
 }
 /** 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 })) : []; });
+    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, removable: indicator.removable !== false, color: indicator.color ?? null })) : []; });
+}
+/** Whether an applied filter can be removed: none of its indicators is marked `removable(false)`. */
+export async function isTableFilterRemovable(table, host, filterName) {
+    const filter = table.getFilters().find((candidate) => candidate.name === filterName);
+    if (!filter)
+        return false;
+    const state = host.tableFilters?.[filter.name];
+    if (!state || typeof state !== 'object' || !filter.getIndicators)
+        return true;
+    await filter.loadIndicatorData?.(state, host);
+    return filter.getIndicators(state).every((indicator) => indicator.removable !== false);
+}
+/** Markup of a customized filters action: an icon button, a button or a link, with an optional badge. */
+function filterActionHtml(view, attributes, badge) {
+    const colors = (component) => (view.color && view.color !== 'gray' ? (colorManager?.getComponentClasses(component, view.color) ?? []) : []);
+    const iconHtml = view.icon ? icon(view.icon) : '';
+    if (view.view === 'icon-button')
+        return `<button title="${e(view.label)}" aria-label="${e(view.label)}" ${attributes} class="${cls(['fi-force-enabled', 'fi-ac-icon-btn-action', 'fi-icon-btn', 'fi-size-md', ...colors('icon-button')])}">${iconHtml}${badge !== null ? `<div class="fi-icon-btn-badge-ctn">${badge}</div>` : ''}</button>`;
+    if (view.view === 'link')
+        return `<button ${attributes} class="${cls(['fi-ac-link-action', 'fi-link', 'fi-size-md', ...colors('link')])}">${iconHtml}<span class="fi-link-label">${e(view.label)}</span>${badge !== null ? `<div class="fi-link-badge-ctn">${badge}</div>` : ''}</button>`;
+    return `<button ${attributes} class="${cls(['fi-ac-btn-action', 'fi-btn', 'fi-size-md', ...colors('button')])}">${iconHtml}${e(view.label)}${badge !== null ? `<div class="fi-btn-badge-ctn">${badge}</div>` : ''}</button>`;
+}
+/** Keys whose record passes `checkIfRecordIsSelectableUsing()`, loaded in chunks. Without a check, the keys are returned as they are. */
+export async function filterSelectableKeys(table, adapter, keys, chunkSize = 100) {
+    if (!table.hasRecordSelectabilityCheck())
+        return keys;
+    const kept = [];
+    for (let index = 0; index < keys.length; index += chunkSize) {
+        const chunk = keys.slice(index, index + chunkSize);
+        const records = await Promise.all(chunk.map((key) => adapter.find(key)));
+        for (let position = 0; position < chunk.length; position++)
+            if (records[position] && (await table.isRecordSelectable(records[position])))
+                kept.push(chunk[position]);
+    }
+    return kept;
 }
 /** Cycles a column's sort: none → asc → desc → none. */
 export function sortTable(host, column = null, direction = null) {
@@ -1096,8 +2196,12 @@ export function sortTable(host, column = null, direction = null) {
 /** 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 });
+    // The page size comes from the browser: only a declared option is accepted.
+    const requested = host.tableRecordsPerPage === 'all' || host.tableRecordsPerPage === 'all' ? 'all' : Number(host.tableRecordsPerPage);
+    const option = options.includes(requested) ? requested : options[0];
+    if (!table.isPaginated() || option === 'all')
+        return adapter.paginate({ ...getTableQuery(table, host), page: 1, perPage: MAX_UNPAGINATED_RECORDS });
+    return adapter.paginate({ ...getTableQuery(table, host), page: Number(host.paginators.page) || 1, perPage: option });
 }
 /** Pagination elements: the first and last pages and a window around the current page, with `...` gaps. */
 export function paginationElements(current, last, onEachSide = 0) {
@@ -1117,11 +2221,16 @@ export const useColorManager = (manager) => { colorManager = manager; };
 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 items = (cell) => cell.items.map((item) => {
+        const label = item.label !== null && item.label !== '' ? `<span class="fi-ta-${item.type}-summary-label${item.labelHidden ? ' fi-sr-only' : ''}">${e(item.label)}</span>` : '';
+        if (item.type === 'values')
+            return `<div class="fi-ta-values-summary">${label}${item.values?.length ? `<ul${item.bulleted ? ' class="fi-bulleted"' : ''}>${item.values.map((value) => `<li>${e(value)}</li>`).join('')}</ul>` : ''}</div>`;
+        return `<div class="fi-ta-${item.type}-summary">${label}<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>`;
+    return `<tr class="fi-ta-row fi-ta-summary-row${row.striped ? ' fi-striped' : ''}">${placeholders.selection ? '<td></td>' : ''}${placeholders.actionsBefore ? '<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.
@@ -1130,7 +2239,7 @@ function summaryRowHtml(row, span, groupsOnly, placeholders) {
 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() : []));
+    const lists = columns.map((c) => (c instanceof TextColumn ? c.getSummarizers().filter((summarizer) => !summarizer.isHidden()) : []));
     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.
@@ -1149,28 +2258,50 @@ async function summarize(table, host, adapter, visible, page, options) {
         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),
-    }));
+    // `using()` summarizers get the records of the summarized dataset, loaded once per row.
+    const loader = (dataset) => { let cache = null; return () => (cache ??= Array.isArray(dataset) ? Promise.resolve(dataset) : adapter.paginate({ ...dataset, page: 1, perPage: MAX_UNPAGINATED_RECORDS }).then((result) => result.records)); };
+    // The displayed page as a query (its record keys), for summarizers scoped with `query()`.
+    const pageQuery = { ...query, keys: page.records.map((record) => adapter.getKey(record)) };
+    const cells = async (values, dataset) => {
+        const records = loader(dataset);
+        const datasetQuery = Array.isArray(dataset) ? pageQuery : dataset;
+        return Promise.all(columns.slice(span).map(async (c, i) => ({
+            alignment: c.getAlignment() ?? 'start',
+            items: (await Promise.all(lists[i + span].map(async (s) => {
+                const scope = s.getQueryScope();
+                if (!scope)
+                    return s.summarize(columnOf(c), values, s.hasCustomCalculation() ? await s.compute({ column: c.name, records }) : undefined);
+                // Scoped summarizer: its own aggregates and records, on the dataset restricted by its query.
+                const scoped = { ...datasetQuery, modifiers: [...(datasetQuery.modifiers ?? []), (q) => { scope(q); }] };
+                return s.summarize(columnOf(c), await aggregate(scoped), s.hasCustomCalculation() ? await s.compute({ column: c.name, records: loader(scoped) }) : undefined);
+            }))).filter((item) => item !== null),
+        })));
+    };
     const label = table.getPluralModelLabel();
-    const hasPageSummary = !options.groupsOnly && page.lastPage > 1;
+    const showPage = table.hasPageSummary(), showAll = table.hasAllTableSummary();
+    const isMultiPage = !options.groupsOnly && page.lastPage > 1;
+    // Several pages: "this page" and "all" rows under a heading row; a single page: one "Summary" row.
+    const hasPageSummary = isMultiPage && (showPage || showAll);
     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) => {
+        ? `<tr class="fi-ta-row fi-ta-summary-header-row fi-striped">${options.placeholders.selection ? '<td></td>' : ''}${options.placeholders.actionsBefore ? '<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 }];
+        ? [
+            ...(showPage ? [{ heading: t('filament-tables::table.summary.subheadings.page', { label }), cells: await cells(onPage, page.records), striped: false }] : []),
+            ...(showAll ? [{ heading: t('filament-tables::table.summary.subheadings.all', { label }), cells: await cells(all, query), striped: false }] : []),
+        ]
+        : isMultiPage || !(showPage || showAll) ? [] : [{ heading: t('filament-tables::table.summary.heading', { label }), cells: await cells(all, query), 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 });
+            const groupQuery = { ...query, modifiers: [...(query.modifiers ?? []), (q) => group.scope(q, key)] };
+            const values = await aggregate(groupQuery);
+            return rowHtml({ heading: options.groupsOnly ? (title ?? '') : t('filament-tables::table.summary.subheadings.group', { group: title ?? '', label }), cells: await cells(values, groupQuery), striped: false });
         },
     };
 }
@@ -1224,7 +2355,7 @@ export async function renderTable(table, host, adapter, options = {}) {
         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() });
+                cells.push({ name: column.name, cssName: column.getCssName(), alignment: column.getAlignment(), responsive: column.getResponsiveClasses(), label: column.getLabel(), url: column.getUrl(record), html: await column.toHtml(record, key), plain: column.isClickDisabled(), mountExpression: !reordering && column.getActionName() !== null && !column.isClickDisabled() ? `mountAction(${js(column.getActionName())}, {}, ${js({ table: true, recordKey: key })})` : null });
         const recordAction = table.getRecordAction();
         if (reordering)
             for (const cell of cells)
@@ -1235,8 +2366,11 @@ export async function renderTable(table, host, adapter, options = {}) {
             for (const node of columnsLayout)
                 contentHtml += await renderColumnLayout(node, record, key, visibleSet);
         }
+        const collapsibleLayout = columnsLayout && !groupsOnly && !reordering ? table.getCollapsibleColumnsLayout() : null;
+        const collapsibleHtml = collapsibleLayout && !collapsibleLayout.isHidden() ? await renderColumnLayout(collapsibleLayout, record, key, visibleSet) : null;
         rows.push({
-            contentHtml, summaryBefore, groupSummaryHtml: '',
+            selectable: selectable && !reordering ? await table.isRecordSelectable(record) : true,
+            contentHtml, collapsibleHtml, collapsed: collapsibleLayout?.isCollapsed() ?? false, 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),
@@ -1247,8 +2381,9 @@ export async function renderTable(table, host, adapter, options = {}) {
         });
     }
     const hasRowActions = rows.some((row) => row.actionsHtml !== null || row.actions.length > 0);
+    const actionsBefore = table.getRecordActionsPosition().startsWith('before');
     // 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 } });
+    const summary = reordering ? null : await summarize(table, host, adapter, visible, page, { group: grouping?.group ?? null, groupsOnly, placeholders: { selection: selectable, actions: hasRowActions && !actionsBefore, actionsBefore: hasRowActions && actionsBefore } });
     let trailingGroupSummary = '';
     if (summary && grouping) {
         for (const row of rows)
@@ -1271,23 +2406,28 @@ export async function renderTable(table, host, adapter, options = {}) {
     }
     const scopes = host.getRenderHookScopes?.() ?? [];
     return views.render('filament-tables::index', {
-        contentLayout: columnsLayout !== null,
+        contentLayout: columnsLayout !== null, contentGrid: table.getContentGrid(),
         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 },
+        grouping: { active: grouping !== null, 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,
+        toolbarActions: reordering ? [] : (options.toolbarActions ?? []),
+        selectable, hasRowActions, actionsPosition: table.getRecordActionsPosition(), actionsAlignment: table.getRecordActionsAlignment() ?? (actionsBefore ? 'start' : null),
         // 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'),
+        allCount: table.getPaginationMode() === 'simple' ? '' : table.selectsCurrentPageOnly() ? page.records.length : table.hasRecordSelectabilityCheck() && selectable ? (await filterSelectableKeys(table, adapter, await adapter.listKeys(getTableQuery(table, host)))).length : page.total,
+        maxSelectableRecords: table.getMaxSelectableRecords(), selectsCurrentPageOnly: table.selectsCurrentPageOnly(), 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(), responsive: c.getResponsiveClasses(), width: c.getWidth(), growable: c.getWidth() === null && c.canGrow(), wrapHeader: c.canHeaderWrap(), 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'), grayButtonClasses: classes('button', 'gray'), indicatorColorClasses: (color) => classes('badge', color),
         bulkActions: options.bulkActions ?? [],
-        filtersForm: options.filtersForm ?? null, activeFiltersCount: countActiveFilters(table, host), filtersLayout: table.getFiltersLayout(), filterIndicators: getFilterIndicators(table, host),
+        filtersForm: options.filtersForm ?? null, activeFiltersCount: countActiveFilters(table, host), filtersLayout: table.getFiltersLayout(), filterIndicators: table.areFilterIndicatorsHidden() ? [] : getFilterIndicators(table, host),
+        filterActions: { trigger: table.getFiltersActionView('trigger'), apply: table.getFiltersActionView('apply'), reset: table.getFiltersActionView('reset') },
+        filterActionHtml: (view, attributes, badge = null) => filterActionHtml(view, attributes, badge),
+        filtersDeferred: table.hasDeferredFilters(), filtersResetPosition: table.getFiltersResetActionPosition(), filtersFormWidth: table.getFiltersFormWidth(), filtersFormMaxHeight: table.getFiltersFormMaxHeight(), modal,
         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.
@@ -1300,7 +2440,8 @@ export async function renderTable(table, host, adapter, options = {}) {
             return runs;
         }, []) : null,
         isSearchable: !reordering && table.getColumns().some((c) => c.isGloballySearchable()),
-        pagination: reordering || groupsOnly ? '' : views.render('filament::components.pagination', {
+        emptyState: { custom: await table.getCustomEmptyState(), heading: table.getEmptyStateHeading(), description: table.getEmptyStateDescription(), icon: table.getEmptyStateIcon(), actions: options.emptyStateActions ?? [] },
+        pagination: reordering || groupsOnly || !table.isPaginated() ? '' : 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),
         }),