@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/dist/components/table/data-table.js

@@ -4,385 +4,743 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { resetStyles } from "../../styles/reset.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+import "../skeleton/skeleton.js";
+import "../pagination/pagination.js";
+import "../context-menu/context-menu.js";
+import { applyFilters, cellValue, defaultOperator, deriveOptions, describeFilter, isFilterComplete, nextSort, operatorsFor, paginate, searchRows, sortRows, } from "./data-table.utils.js";
+const DEBOUNCE_MS = 350;
+const SKELETON_ROWS = 5;
+/**
+ * Data table with search, multi-column filtering, multi-column sorting, pagination, column
+ * visibility and ordering, and per-row action menus.
+ *
+ * Data handling: by default the table filters, sorts and pages `data` itself. Set `server-side`
+ * (or `total-rows`) to handle that on a server instead: the table then shows `data` as given
+ * and reports every change through `st-data-change`.
+ *
+ * Events (bubble, composed):
+ * - `st-data-change`  `{ page, pageSize, search, sort, filters }` on any user change.
+ * - `st-row-click`    the row object, when `clickable-rows` is set.
+ * - `st-row-action`   `{ value, item, row }` when a row menu item is chosen.
+ */
 let StDataTable = class StDataTable extends LitElement {
     constructor() {
         super(...arguments);
         this.columns = [];
         this.data = [];
+        /** Total rows on the server. Implies server-side handling. */
         this.totalRows = 0;
+        this.serverSide = false;
         this.page = 1;
         this.pageSize = 10;
-        this.multiSort = false;
+        this.pageSizeOptions = [10, 25, 50, 100];
+        /** Free-text search across searchable columns. */
+        this.search = "";
+        this.sort = [];
+        this.filters = [];
+        /** Sort by several columns with Shift+click (on by default). */
+        this.multiSort = true;
+        this.singleSort = false;
         this.loading = false;
+        this.clickableRows = false;
+        this.dense = false;
+        this.striped = false;
+        this.stickyHeader = false;
+        /**
+         * Reserves space for this many rows so the footer never moves between pages. Pages with fewer
+         * rows are padded with blank space; pages with more (a larger page size) scroll inside the
+         * table while the header and footer stay put. Cells stay on one line (long text is truncated).
+         */
+        this.fixedRows = 0;
+        this.caption = "";
+        this.emptyText = "No data available.";
+        this.searchPlaceholder = "Search…";
+        this.hideSearch = false;
+        this.hideColumnMenu = false;
+        this.fixedColumns = false;
+        /** Column used to name a row in assistive text, e.g. "Actions for Ada". Defaults to the first. */
+        this.rowLabelKey = "";
         this.internalColumns = [];
-        this.sortState = [];
-        this.searchQuery = "";
-        this.showColumnMenu = false;
-        this.draggedColumnKey = null;
-        this.handleOutsideClick = (e) => {
-            const path = e.composedPath();
-            const toggleWrapper = this.shadowRoot?.querySelector(".columns-toggle-wrapper");
-            // 🚀 THE FIX: Use composedPath() to pierce the Shadow DOM and check if
-            // the click originated from inside the wrapper element.
-            if (toggleWrapper && !path.includes(toggleWrapper)) {
-                this.showColumnMenu = false;
-            }
-        };
-    }
-    willUpdate(changedProperties) {
-        // 🚀 FIX: Properly sync dynamically updated columns while preserving user visibility states
-        if (changedProperties.has("columns") && this.columns) {
-            this.internalColumns = this.columns.map((newCol) => {
-                const existing = this.internalColumns.find((ic) => ic.key === newCol.key);
-                return { ...newCol, hidden: existing ? existing.hidden : newCol.hidden };
+        this.searchDraft = "";
+        this.filtersOpen = false;
+        this.announcement = "";
+        this.menuOpenFor = null;
+        this.view = { rows: [], total: 0, page: 1, totalPages: 1, from: 0, to: 0 };
+        this.menuMode = "row";
+        this.draggedKey = null;
+        this.announceNext = false;
+    }
+    // ---------------------------------------------------------------- lifecycle
+    willUpdate(changed) {
+        if (changed.has("columns") && this.columns) {
+            // Keep the user's visibility and order when the columns array is replaced.
+            const previous = this.internalColumns;
+            const merged = this.columns.map((col) => {
+                const existing = previous.find((c) => c.key === col.key);
+                return { ...col, hidden: existing ? existing.hidden : col.hidden };
             });
+            const order = previous.map((c) => c.key);
+            this.internalColumns = previous.length
+                ? [...merged].sort((a, b) => {
+                    const ai = order.indexOf(a.key);
+                    const bi = order.indexOf(b.key);
+                    return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
+                })
+                : merged;
+        }
+        if (changed.has("search") && this.search !== this.searchDraft)
+            this.searchDraft = this.search;
+        this.view = this.computeView();
+        if (!this.isServer && this.page !== this.view.page)
+            this.page = this.view.page;
+    }
+    updated() {
+        this.applyFixedHeight();
+        if (this.announceNext) {
+            this.announceNext = false;
+            const n = this.view.total;
+            this.announcement = `${n} ${n === 1 ? "result" : "results"}`;
         }
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener("click", this.handleOutsideClick);
+        this.resizeObserver = new ResizeObserver(() => this.applyFixedHeight());
+        this.resizeObserver.observe(this);
+    }
+    /**
+     * Caps the scroll area at the header plus `fixedRows` real rows. Measuring (rather than
+     * calculating) keeps it exact whatever the font, density or borders.
+     */
+    applyFixedHeight() {
+        const wrapper = this.renderRoot.querySelector(".table-wrapper");
+        if (!wrapper)
+            return;
+        if (this.fixedRows <= 0) {
+            wrapper.style.maxHeight = "";
+            this.style.removeProperty("--st-data-table-fixed-rows");
+            return;
+        }
+        this.style.setProperty("--st-data-table-fixed-rows", String(this.fixedRows));
+        const head = wrapper.querySelector("thead")?.getBoundingClientRect().height ?? 0;
+        const rows = Array.from(wrapper.querySelectorAll("tbody tr:not(.spacer)"))
+            .filter((row) => !row.querySelector("td.empty"))
+            .slice(0, this.fixedRows);
+        if (!rows.length)
+            return;
+        const rowHeight = rows[0].getBoundingClientRect().height;
+        wrapper.style.maxHeight = `${Math.ceil(head + rowHeight * this.fixedRows + 1)}px`;
     }
     disconnectedCallback() {
-        document.removeEventListener("click", this.handleOutsideClick);
+        this.resizeObserver?.disconnect();
+        window.clearTimeout(this.debounce);
         super.disconnectedCallback();
     }
-    emitChange() {
+    // --------------------------------------------------------------- derivations
+    get isServer() {
+        return this.serverSide || this.totalRows > 0;
+    }
+    get canMultiSort() {
+        return this.multiSort && !this.singleSort;
+    }
+    get visibleColumns() {
+        return this.internalColumns.filter((c) => !c.hidden);
+    }
+    get filterColumns() {
+        return this.internalColumns.filter((c) => c.filter);
+    }
+    get activeFilters() {
+        return this.filters.filter((f) => isFilterComplete(f, this.internalColumns));
+    }
+    get hasQuery() {
+        return this.activeFilters.length > 0 || this.search.trim() !== "";
+    }
+    computeView() {
+        if (this.isServer) {
+            const total = this.totalRows > 0 ? this.totalRows : this.data.length;
+            const totalPages = Math.max(1, Math.ceil(total / Math.max(1, this.pageSize)));
+            const from = this.data.length ? (this.page - 1) * this.pageSize + 1 : 0;
+            return {
+                rows: this.data,
+                total,
+                page: this.page,
+                totalPages,
+                from,
+                to: this.data.length ? from + this.data.length - 1 : 0,
+            };
+        }
+        const columns = this.internalColumns;
+        let rows = searchRows(this.data, this.search, columns);
+        rows = applyFilters(rows, this.filters, columns);
+        rows = sortRows(rows, this.sort, columns);
+        return paginate(rows, this.page, this.pageSize);
+    }
+    optionsFor(column) {
+        return column.options ?? deriveOptions(this.data, column);
+    }
+    // ------------------------------------------------------------------- events
+    emitChange(announce = true) {
+        this.announceNext = announce;
         this.dispatchEvent(new CustomEvent("st-data-change", {
             detail: {
                 page: this.page,
                 pageSize: this.pageSize,
-                search: this.searchQuery,
-                sort: this.sortState,
+                search: this.search,
+                sort: this.sort,
+                filters: this.activeFilters,
             },
             bubbles: true,
             composed: true,
         }));
     }
-    handleSearchInput(e) {
+    emitDebounced() {
+        window.clearTimeout(this.debounce);
+        this.debounce = window.setTimeout(() => this.emitChange(), DEBOUNCE_MS);
+    }
+    onSearchInput(e) {
         if (this.loading)
             return;
-        const val = e.target.value;
-        window.clearTimeout(this.searchTimeout);
-        this.searchTimeout = window.setTimeout(() => {
-            this.searchQuery = val;
+        this.searchDraft = e.target.value;
+        window.clearTimeout(this.debounce);
+        this.debounce = window.setTimeout(() => {
+            this.search = this.searchDraft;
             this.page = 1;
             this.emitChange();
-        }, 350);
+        }, DEBOUNCE_MS);
+    }
+    clearSearch() {
+        this.searchDraft = "";
+        this.search = "";
+        this.page = 1;
+        this.emitChange();
     }
-    handleSort(key, e) {
+    onSort(key, e) {
         if (this.loading)
             return;
-        const isShift = e.shiftKey && this.multiSort;
-        const existingIndex = this.sortState.findIndex((s) => s.key === key);
-        let newDirection = "asc";
-        if (existingIndex !== -1) {
-            newDirection = this.sortState[existingIndex].direction === "asc" ? "desc" : null;
-        }
-        let newSortState = [...this.sortState];
-        if (isShift) {
-            if (newDirection) {
-                if (existingIndex !== -1) {
-                    newSortState[existingIndex].direction = newDirection;
-                }
-                else {
-                    newSortState.push({ key, direction: newDirection });
-                }
-            }
-            else {
-                newSortState.splice(existingIndex, 1);
-            }
-        }
-        else {
-            if (newDirection) {
-                newSortState = [{ key, direction: newDirection }];
-            }
-            else {
-                newSortState = [];
-            }
-        }
-        this.sortState = newSortState;
+        this.sort = nextSort(this.sort, key, e.shiftKey && this.canMultiSort);
         this.page = 1;
         this.emitChange();
     }
-    get totalPages() {
-        return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
+    removeSort(key) {
+        this.sort = this.sort.filter((s) => s.key !== key);
+        this.page = 1;
+        this.emitChange();
     }
-    prevPage() {
-        if (!this.loading && this.page > 1) {
-            this.page--;
-            this.emitChange();
-        }
+    goToPage(page) {
+        if (this.loading || page === this.page)
+            return;
+        this.page = page;
+        this.emitChange(false);
+    }
+    onPageSize(e) {
+        this.pageSize = Number(e.target.value);
+        this.page = 1;
+        this.emitChange(false);
+    }
+    clearAll() {
+        this.searchDraft = "";
+        this.search = "";
+        this.filters = [];
+        this.page = 1;
+        this.emitChange();
+    }
+    // ------------------------------------------------------------------ filters
+    addFilter() {
+        const column = this.filterColumns[0];
+        if (!column)
+            return;
+        this.filters = [...this.filters, { key: column.key, op: defaultOperator(column.filter), value: "" }];
+        this.filtersOpen = true;
     }
-    nextPage() {
-        if (!this.loading && this.page < this.totalPages) {
-            this.page++;
+    updateFilter(index, patch, debounce = false) {
+        this.filters = this.filters.map((f, i) => (i === index ? { ...f, ...patch } : f));
+        this.page = 1;
+        if (debounce)
+            this.emitDebounced();
+        else
             this.emitChange();
-        }
     }
-    toggleColumnVisibility(key) {
-        this.internalColumns = this.internalColumns.map((col) => col.key === key ? { ...col, hidden: !col.hidden } : col);
+    onFilterColumn(index, key) {
+        const column = this.internalColumns.find((c) => c.key === key);
+        if (!column?.filter)
+            return;
+        this.updateFilter(index, { key, op: defaultOperator(column.filter), value: "" });
+    }
+    onFilterOperator(index, op) {
+        const column = this.internalColumns.find((c) => c.key === this.filters[index].key);
+        const info = operatorsFor(column.filter).find((o) => o.op === op);
+        this.updateFilter(index, { op, value: info?.needsValue ? this.filters[index].value : "" });
+    }
+    removeFilter(index) {
+        this.filters = this.filters.filter((_, i) => i !== index);
+        this.page = 1;
+        this.emitChange();
+    }
+    // ------------------------------------------------------------------ columns
+    columnItems() {
+        const visible = this.visibleColumns.length;
+        return this.internalColumns.map((c) => ({
+            label: c.header,
+            value: c.key,
+            checked: !c.hidden,
+            keepOpen: true,
+            // Always keep at least one column on screen.
+            disabled: !c.hidden && visible === 1,
+        }));
+    }
+    openColumnMenu(e) {
+        this.menuMode = "columns";
+        this.menuOpenFor = null;
+        this.menu.label = "Columns";
+        this.menu.items = this.columnItems();
+        this.menu.showAt(e.currentTarget);
+    }
+    toggleColumn(key) {
+        this.internalColumns = this.internalColumns.map((c) => (c.key === key ? { ...c, hidden: !c.hidden } : c));
+        this.menu.items = this.columnItems();
+    }
+    moveColumn(from, to) {
+        if (from === to)
+            return;
+        const cols = [...this.internalColumns];
+        const fromIndex = cols.findIndex((c) => c.key === from);
+        const toIndex = cols.findIndex((c) => c.key === to);
+        if (fromIndex < 0 || toIndex < 0)
+            return;
+        const [moved] = cols.splice(fromIndex, 1);
+        cols.splice(toIndex, 0, moved);
+        this.internalColumns = cols;
+    }
+    onHeaderKeydown(e, key) {
+        if (this.fixedColumns || !e.altKey || (e.key !== "ArrowLeft" && e.key !== "ArrowRight"))
+            return;
+        e.preventDefault();
+        const visible = this.visibleColumns;
+        const index = visible.findIndex((c) => c.key === key);
+        const target = visible[index + (e.key === "ArrowLeft" ? -1 : 1)];
+        if (target) {
+            this.moveColumn(key, target.key);
+            this.updateComplete.then(() => this.renderRoot.querySelector(`[data-col="${key}"] .th-btn, [data-col="${key}"]`)?.focus());
+        }
     }
-    handleDragStart(e, key) {
-        this.draggedColumnKey = key;
+    onDragStart(e, key) {
+        this.draggedKey = key;
         if (e.dataTransfer) {
             e.dataTransfer.effectAllowed = "move";
             e.dataTransfer.setData("text/plain", key);
         }
     }
-    handleDragOver(e) {
+    onDragOver(e) {
         e.preventDefault();
-        if (e.dataTransfer)
-            e.dataTransfer.dropEffect = "move";
-        const target = e.target.closest("th");
-        if (target)
-            target.classList.add("drag-over");
-    }
-    handleDragLeave(e) {
-        const target = e.target.closest("th");
-        if (target)
-            target.classList.remove("drag-over");
-    }
-    handleDrop(e, targetKey) {
+        e.currentTarget.classList.add("drag-over");
+    }
+    onDrop(e, key) {
         e.preventDefault();
-        const targetEl = e.target.closest("th");
-        if (targetEl)
-            targetEl.classList.remove("drag-over");
-        if (!this.draggedColumnKey || this.draggedColumnKey === targetKey)
+        e.currentTarget.classList.remove("drag-over");
+        if (this.draggedKey)
+            this.moveColumn(this.draggedKey, key);
+        this.draggedKey = null;
+    }
+    // --------------------------------------------------------------- row actions
+    itemsFor(row) {
+        if (!this.rowActions)
+            return [];
+        return typeof this.rowActions === "function" ? this.rowActions(row) : this.rowActions;
+    }
+    rowLabel(row) {
+        const column = this.internalColumns.find((c) => c.key === this.rowLabelKey) ?? this.internalColumns[0];
+        return column ? String(cellValue(row, column) ?? "") : "";
+    }
+    openRowMenu(row, target) {
+        const items = this.itemsFor(row);
+        if (!items.length)
             return;
-        const newCols = [...this.internalColumns];
-        const fromIndex = newCols.findIndex((c) => c.key === this.draggedColumnKey);
-        const toIndex = newCols.findIndex((c) => c.key === targetKey);
-        const [movedCol] = newCols.splice(fromIndex, 1);
-        newCols.splice(toIndex, 0, movedCol);
-        this.internalColumns = newCols;
-        this.draggedColumnKey = null;
+        this.menuMode = "row";
+        this.menuOpenFor = row;
+        this.menu.label = `Actions for ${this.rowLabel(row)}`.trim();
+        this.menu.items = items;
+        if (target instanceof HTMLElement)
+            this.menu.showAt(target, row);
+        else
+            this.menu.show(target.x, target.y, row);
     }
-    renderSortIcon(key) {
-        const sortIndex = this.sortState.findIndex((s) => s.key === key);
-        if (sortIndex === -1) {
-            return html `<svg
-        class="sort-icon"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="m7 15 5 5 5-5" />
-        <path d="m7 9 5-5 5 5" />
-      </svg>`;
+    onRowContextMenu(e, row) {
+        if (!this.rowActions || this.loading || !this.itemsFor(row).length)
+            return;
+        e.preventDefault();
+        this.openRowMenu(row, { x: e.clientX, y: e.clientY });
+    }
+    onMenuSelect(e) {
+        e.stopPropagation();
+        if (this.menuMode === "columns") {
+            this.toggleColumn(e.detail.value);
+            return;
         }
-        const sortConfig = this.sortState[sortIndex];
-        const icon = sortConfig.direction === "asc"
-            ? html `<svg
-            class="sort-icon active"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="m18 15-6-6-6 6" />
-          </svg>`
-            : html `<svg
-            class="sort-icon active"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="m6 9 6 6 6-6" />
-          </svg>`;
-        const priority = this.sortState.length > 1 && this.multiSort
-            ? html `<span class="sort-priority">${sortIndex + 1}</span>`
-            : "";
-        return html `${icon}${priority}`;
+        this.dispatchEvent(new CustomEvent("st-row-action", {
+            detail: { value: e.detail.value, item: e.detail.item, row: e.detail.context },
+            bubbles: true,
+            composed: true,
+        }));
     }
-    render() {
-        const visibleColumns = this.internalColumns.filter((c) => !c.hidden);
-        const skeletonRowsCount = Math.min(this.pageSize, 5);
+    onRowClick(row) {
+        if (!this.clickableRows || this.loading)
+            return;
+        this.dispatchEvent(new CustomEvent("st-row-click", { detail: row, bubbles: true, composed: true }));
+    }
+    onRowKeydown(e, row) {
+        if (e.target !== e.currentTarget || (e.key !== "Enter" && e.key !== " "))
+            return;
+        e.preventDefault();
+        this.onRowClick(row);
+    }
+    // ------------------------------------------------------------------- render
+    renderToolbar() {
+        const filterCount = this.activeFilters.length;
         return html `
       <div class="toolbar">
-        <div class="search-wrapper">
-          <svg
-            class="search-icon"
-            aria-hidden="true"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-          </svg>
-          <input
-            type="text"
-            class="search-input"
-            placeholder="Search..."
-            aria-label="Search data table"
-            spellcheck="false"
-            autocapitalize="none"
-            ?disabled=${this.loading}
-            @input=${this.handleSearchInput}
-          />
-        </div>
-
-        <div class="columns-toggle-wrapper">
-          <st-button
-            variant="secondary"
-            size="sm"
-            aria-haspopup="menu"
-            aria-expanded=${this.showColumnMenu}
-            @click=${() => (this.showColumnMenu = !this.showColumnMenu)}
-          >
-            Columns
-          </st-button>
-
-          ${this.showColumnMenu
+        ${this.hideSearch
+            ? nothing
+            : html `
+              <div class="search" role="search">
+                <st-icon name="search" size="sm" aria-hidden="true"></st-icon>
+                <input
+                  class="search-input"
+                  type="search"
+                  spellcheck="false"
+                  autocapitalize="none"
+                  autocomplete="off"
+                  aria-label="Search table"
+                  placeholder=${this.searchPlaceholder}
+                  .value=${this.searchDraft}
+                  ?disabled=${this.loading}
+                  @input=${this.onSearchInput}
+                />
+              </div>
+            `}
+        ${this.filterColumns.length
             ? html `
-                <div class="columns-menu" role="menu">
-                  ${this.internalColumns.map((col) => html `
-                      <label
-                        class="column-option"
-                        role="menuitemcheckbox"
-                        aria-checked=${!col.hidden}
-                      >
-                        <input
-                          type="checkbox"
-                          .checked=${!col.hidden}
-                          @change=${() => this.toggleColumnVisibility(col.key)}
-                        />
-                        ${col.header}
-                      </label>
-                    `)}
-                </div>
-              `
-            : ""}
-        </div>
+              <button
+                class="tool-btn filters-btn"
+                type="button"
+                aria-expanded=${this.filtersOpen ? "true" : "false"}
+                aria-controls="filter-panel"
+                @click=${() => {
+                this.filtersOpen = !this.filtersOpen;
+                if (this.filtersOpen && !this.filters.length)
+                    this.addFilter();
+            }}
+              >
+                <st-icon name="filter" size="sm" aria-hidden="true"></st-icon>
+                Filters
+                ${filterCount
+                ? html `<span class="count" aria-label="${filterCount} active">${filterCount}</span>`
+                : nothing}
+              </button>
+            `
+            : nothing}
+        ${this.hideColumnMenu
+            ? nothing
+            : html `
+              <button
+                class="tool-btn columns-btn"
+                type="button"
+                aria-haspopup="menu"
+                @click=${this.openColumnMenu}
+              >
+                <st-icon name="table" size="sm" aria-hidden="true"></st-icon>
+                Columns
+              </button>
+            `}
       </div>
-
-      <div class="table-wrapper">
-        <table aria-busy=${this.loading}>
-          <thead>
-            <tr>
-              ${visibleColumns.map((col) => {
-            const sortItem = this.sortState.find((s) => s.key === col.key);
-            const ariaSort = sortItem
-                ? sortItem.direction === "asc"
-                    ? "ascending"
-                    : "descending"
-                : "none";
+    `;
+    }
+    renderFilterPanel() {
+        if (!this.filtersOpen || !this.filterColumns.length)
+            return nothing;
+        return html `
+      <div class="filter-panel" id="filter-panel" role="group" aria-label="Filters">
+        ${this.filters.map((filter, index) => {
+            const column = this.internalColumns.find((c) => c.key === filter.key);
+            const type = column?.filter;
+            if (!column || !type)
+                return nothing;
+            const operator = operatorsFor(type).find((o) => o.op === filter.op);
             return html `
-                  <th
-                    scope="col"
-                    aria-sort=${ifDefined(col.sortable ? ariaSort : undefined)}
-                    draggable="true"
-                    @dragstart=${(e) => this.handleDragStart(e, col.key)}
-                    @dragover=${this.handleDragOver}
-                    @dragleave=${this.handleDragLeave}
-                    @drop=${(e) => this.handleDrop(e, col.key)}
-                  >
-                    <div class="th-content">
-                      <svg
-                        class="drag-handle"
-                        aria-hidden="true"
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+            <div class="filter-row" role="group" aria-label="Filter ${index + 1}">
+              <select
+                aria-label="Filter ${index + 1} column"
+                @change=${(e) => this.onFilterColumn(index, e.target.value)}
+              >
+                ${this.filterColumns.map((c) => html `<option value=${c.key} .selected=${c.key === filter.key}>${c.header}</option>`)}
+              </select>
+              <select
+                aria-label="Filter ${index + 1} condition"
+                @change=${(e) => this.onFilterOperator(index, e.target.value)}
+              >
+                ${operatorsFor(type).map((o) => html `<option value=${o.op} .selected=${o.op === filter.op}>${o.label}</option>`)}
+              </select>
+              ${operator?.needsValue
+                ? type === "select"
+                    ? html `
+                      <select
+                        class="filter-value"
+                        aria-label="Filter ${index + 1} value"
+                        @change=${(e) => this.updateFilter(index, { value: e.target.value })}
                       >
-                        <circle cx="9" cy="12" r="1" />
-                        <circle cx="9" cy="5" r="1" />
-                        <circle cx="9" cy="19" r="1" />
-                        <circle cx="15" cy="12" r="1" />
-                        <circle cx="15" cy="5" r="1" />
-                        <circle cx="15" cy="19" r="1" />
-                      </svg>
-
-                      <div
-                        class=${classMap({ "sortable-header": !!col.sortable })}
-                        @click=${(e) => col.sortable && this.handleSort(col.key, e)}
-                      >
-                        ${col.header} ${col.sortable ? this.renderSortIcon(col.key) : ""}
-                      </div>
-                    </div>
-                  </th>
-                `;
+                        <option value="" .selected=${!filter.value}>Choose…</option>
+                        ${this.optionsFor(column).map((o) => html `<option value=${o.value} .selected=${o.value === filter.value}>${o.label}</option>`)}
+                      </select>
+                    `
+                    : html `
+                      <input
+                        class="filter-value"
+                        type=${type === "number" ? "number" : "text"}
+                        aria-label="Filter ${index + 1} value"
+                        placeholder="Value"
+                        .value=${filter.value ?? ""}
+                        @input=${(e) => this.updateFilter(index, { value: e.target.value }, true)}
+                      />
+                    `
+                : nothing}
+              <button
+                class="row-menu-btn"
+                type="button"
+                aria-label="Remove filter ${index + 1}"
+                @click=${() => this.removeFilter(index)}
+              >
+                <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+              </button>
+            </div>
+          `;
         })}
-            </tr>
-          </thead>
-
-          <tbody aria-live="polite">
-            ${this.loading
-            ? html `
-                  ${Array.from({ length: skeletonRowsCount }).map(() => html `
-                      <tr>
-                        ${visibleColumns.map(() => html `
-                            <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
-                          `)}
-                      </tr>
-                    `)}
-                `
-            : this.data.length === 0
-                ? html `
-                    <tr>
-                      <td
-                        colspan=${visibleColumns.length}
-                        style="text-align: center; padding: 2rem;"
-                      >
-                        No results found.
-                      </td>
-                    </tr>
-                  `
-                : this.data.map((row) => html `
-                      <tr>
-                        ${visibleColumns.map((col) => html `<td>${row[col.key] ?? ""}</td>`)}
-                      </tr>
-                    `)}
-          </tbody>
-        </table>
-      </div>
-
-      <div class="pagination">
-        <div class="pagination-info">
-          Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
+        <div class="panel-actions">
+          <button class="link-btn add-filter" type="button" @click=${this.addFilter}>Add filter</button>
+          ${this.filters.length
+            ? html `<button class="link-btn" type="button" @click=${() => ((this.filters = []), this.emitChange())}>
+                Clear filters
+              </button>`
+            : nothing}
         </div>
-        <div class="pagination-controls">
-          <st-button
-            variant="secondary"
-            size="sm"
-            ?disabled=${this.loading || this.page === 1}
-            @click=${this.prevPage}
+      </div>
+    `;
+    }
+    renderChips() {
+        const filters = this.activeFilters;
+        const sorts = this.sort.filter((s) => this.internalColumns.some((c) => c.key === s.key));
+        if (!filters.length && !sorts.length && !this.search.trim())
+            return nothing;
+        return html `
+      <div class="chips" role="group" aria-label="Active filters and sorting">
+        ${this.search.trim()
+            ? html `<button class="chip" type="button" aria-label="Clear search: ${this.search}" @click=${this.clearSearch}>
+              Search: ${this.search} <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+            </button>`
+            : nothing}
+        ${filters.map((f) => {
+            const text = describeFilter(f, this.internalColumns);
+            return html `<button
+            class="chip filter-chip"
+            type="button"
+            aria-label="Remove filter: ${text}"
+            @click=${() => this.removeFilter(this.filters.indexOf(f))}
           >
-            Prev
-          </st-button>
-          <st-button
-            variant="secondary"
-            size="sm"
-            ?disabled=${this.loading || this.page === this.totalPages}
-            @click=${this.nextPage}
+            ${text} <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+          </button>`;
+        })}
+        ${sorts.map((s, i) => {
+            const header = this.internalColumns.find((c) => c.key === s.key).header;
+            const dir = s.direction === "asc" ? "ascending" : "descending";
+            return html `<button
+            class="chip sort-chip"
+            type="button"
+            aria-label="Remove sort: ${header} ${dir}"
+            @click=${() => this.removeSort(s.key)}
           >
-            Next
-          </st-button>
-        </div>
+            ${sorts.length > 1 ? `${i + 1}. ` : ""}${header} ${s.direction === "asc" ? "↑" : "↓"}
+            <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+          </button>`;
+        })}
+        ${filters.length + sorts.length + (this.search.trim() ? 1 : 0) > 1
+            ? html `<button class="link-btn clear-all" type="button" @click=${() => ((this.sort = []), this.clearAll())}>
+              Clear all
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+    renderSortIcon(key) {
+        const index = this.sort.findIndex((s) => s.key === key);
+        if (index === -1) {
+            return html `<svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" />
+      </svg>`;
+        }
+        const asc = this.sort[index].direction === "asc";
+        return html `
+      <svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d=${asc ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6"} />
+      </svg>
+      ${this.sort.length > 1 ? html `<span class="priority" aria-hidden="true">${index + 1}</span>` : nothing}
+    `;
+    }
+    sortLabel(key) {
+        const s = this.sort.find((x) => x.key === key);
+        return s ? (s.direction === "asc" ? "ascending" : "descending") : "none";
+    }
+    renderHeader() {
+        const hasActions = !!this.rowActions;
+        return html `
+      <thead>
+        <tr>
+          ${this.visibleColumns.map((col) => html `
+              <th
+                scope="col"
+                data-col=${col.key}
+                class=${classMap({ "align-center": col.align === "center", "align-end": col.align === "end" })}
+                style=${ifDefined(col.width ? `width:${col.width}` : undefined)}
+                aria-sort=${ifDefined(col.sortable ? this.sortLabel(col.key) : undefined)}
+                draggable=${this.fixedColumns ? "false" : "true"}
+                @dragstart=${(e) => this.onDragStart(e, col.key)}
+                @dragover=${this.onDragOver}
+                @dragleave=${(e) => e.currentTarget.classList.remove("drag-over")}
+                @drop=${(e) => this.onDrop(e, col.key)}
+              >
+                ${col.sortable
+            ? html `<button
+                      class=${classMap({ "th-btn": true, sorted: this.sort.some((s) => s.key === col.key) })}
+                      type="button"
+                      title=${this.canMultiSort ? "Click to sort, Shift+click to add a column" : "Click to sort"}
+                      @click=${(e) => this.onSort(col.key, e)}
+                      @keydown=${(e) => this.onHeaderKeydown(e, col.key)}
+                    >
+                      ${col.header} ${this.renderSortIcon(col.key)}
+                    </button>`
+            : col.header}
+              </th>
+            `)}
+          ${hasActions ? html `<th scope="col" class="actions-col"><span class="sr-only">Actions</span></th>` : nothing}
+        </tr>
+      </thead>
+    `;
+    }
+    renderBody() {
+        const colSpan = this.visibleColumns.length + (this.rowActions ? 1 : 0) || 1;
+        if (this.loading) {
+            return Array.from({ length: this.fixedRows > 0 ? this.fixedRows : Math.min(this.pageSize, SKELETON_ROWS) }, () => html `<tr>
+          ${Array.from({ length: colSpan }, () => html `<td><st-skeleton variant="text" width="70%"></st-skeleton></td>`)}
+        </tr>`);
+        }
+        if (!this.view.rows.length) {
+            return html `<tr>
+        <td class="empty" colspan=${colSpan}>
+          ${this.hasQuery ? "No results match your search or filters." : this.emptyText}
+          ${this.hasQuery
+                ? html ` <button class="link-btn" type="button" @click=${() => ((this.sort = []), this.clearAll())}>Clear all</button>`
+                : nothing}
+        </td>
+      </tr>`;
+        }
+        const spacers = this.renderSpacers(this.view.rows.length, colSpan);
+        return [this.renderRows(colSpan), spacers];
+    }
+    /** Blank rows that pad a short page up to `fixedRows` so the footer stays put. */
+    renderSpacers(count, colSpan) {
+        if (this.fixedRows <= count)
+            return nothing;
+        return Array.from({ length: this.fixedRows - count }, () => html `<tr class="spacer" aria-hidden="true"><td colspan=${colSpan}></td></tr>`);
+    }
+    renderRows(_colSpan) {
+        return this.view.rows.map((row) => {
+            const hasMenu = !!this.rowActions && this.itemsFor(row).length > 0;
+            return html `
+        <tr
+          class=${classMap({ clickable: this.clickableRows, "menu-open": this.menuOpenFor === row })}
+          tabindex=${ifDefined(this.clickableRows ? "0" : undefined)}
+          @click=${() => this.onRowClick(row)}
+          @keydown=${(e) => this.onRowKeydown(e, row)}
+          @contextmenu=${(e) => this.onRowContextMenu(e, row)}
+        >
+          ${this.visibleColumns.map((col) => html `
+              <td class=${classMap({ "align-center": col.align === "center", "align-end": col.align === "end" })}>
+                ${col.render ? col.render(row) : (cellValue(row, col) ?? "")}
+              </td>
+            `)}
+          ${this.rowActions
+                ? html `<td class="actions-col">
+                ${hasMenu
+                    ? html `<button
+                      class="row-menu-btn"
+                      type="button"
+                      aria-label="Actions for ${this.rowLabel(row)}"
+                      aria-haspopup="menu"
+                      aria-expanded=${this.menuOpenFor === row ? "true" : "false"}
+                      @click=${(e) => {
+                        e.stopPropagation();
+                        this.openRowMenu(row, e.currentTarget);
+                    }}
+                    >
+                      <st-icon name="ellipsis" size="sm" aria-hidden="true"></st-icon>
+                    </button>`
+                    : nothing}
+              </td>`
+                : nothing}
+        </tr>
+      `;
+        });
+    }
+    renderFooter() {
+        const { total, from, to, totalPages, page } = this.view;
+        const options = this.pageSizeOptions.includes(this.pageSize)
+            ? this.pageSizeOptions
+            : [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b);
+        return html `
+      <div class="footer">
+        <span class="info">${this.loading ? "Loading…" : total ? `Showing ${from}–${to} of ${total}` : "No results"}</span>
+        <label class="page-size">
+          Rows per page
+          <select class="page-size-select" ?disabled=${this.loading} @change=${this.onPageSize}>
+            ${options.map((n) => html `<option value=${n} .selected=${n === this.pageSize}>${n}</option>`)}
+          </select>
+        </label>
+        ${totalPages > 1
+            ? html `<st-pagination
+              page=${page}
+              total-pages=${totalPages}
+              @st-page-change=${(e) => {
+                e.stopPropagation();
+                this.goToPage(e.detail.page);
+            }}
+            ></st-pagination>`
+            : nothing}
       </div>
     `;
     }
+    render() {
+        return html `
+      ${this.renderToolbar()} ${this.renderFilterPanel()} ${this.renderChips()}
+      <div class=${classMap({ "table-wrapper": true, fixed: this.fixedRows > 0 })}>
+        <table aria-busy=${this.loading ? "true" : "false"}>
+          ${this.caption ? html `<caption>${this.caption}</caption>` : nothing}
+          ${this.renderHeader()}
+          <tbody>
+            ${this.renderBody()}
+          </tbody>
+        </table>
+      </div>
+      ${this.renderFooter()}
+      <div class="sr-only" aria-live="polite" aria-atomic="true">${this.announcement}</div>
+      <st-context-menu
+        trigger="manual"
+        @st-menu-select=${this.onMenuSelect}
+        @st-menu-close=${() => (this.menuOpenFor = null)}
+      ></st-context-menu>
+    `;
+    }
 };
 StDataTable.styles = [
     resetStyles,
@@ -391,188 +749,368 @@ StDataTable.styles = [
         display: block;
         width: 100%;
         font-family: var(--st-font-family, inherit);
+        color: var(--st-color-text);
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
       }
 
+      /* ---------- Toolbar ---------- */
       .toolbar {
         display: flex;
-        justify-content: space-between;
+        flex-wrap: wrap;
         align-items: center;
-        gap: var(--st-spacing-md);
+        gap: var(--st-spacing-sm);
         margin-bottom: var(--st-spacing-md);
-        flex-wrap: wrap;
       }
 
-      .search-wrapper {
-        flex: 1;
-        min-width: 250px;
+      .search {
         position: relative;
+        flex: 1;
+        min-width: 14rem;
+      }
+
+      .search st-icon {
+        position: absolute;
+        left: var(--st-spacing-sm);
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--st-color-text-muted);
+        pointer-events: none;
       }
 
       .search-input {
         width: 100%;
-        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+        padding: var(--st-spacing-sm) var(--st-spacing-sm) var(--st-spacing-sm) 2.25rem;
         border: 1px solid var(--st-color-border);
         border-radius: var(--st-radius-md);
-        background-color: var(--st-color-surface);
-        color: var(--st-color-text);
+        background: var(--st-color-surface);
+        color: inherit;
+        font: inherit;
         font-size: var(--st-font-size-sm);
       }
 
-      .search-input:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
+      .search-input:focus-visible,
+      select:focus-visible,
+      .filter-value:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 1px;
       }
 
-      .search-icon {
-        position: absolute;
-        left: 0.75rem;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 1rem;
-        height: 1rem;
-        color: var(--st-color-text-muted);
-      }
-
-      .columns-toggle-wrapper {
-        position: relative;
+      .tool-btn,
+      .chip,
+      .link-btn,
+      .row-menu-btn,
+      .th-btn {
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
       }
 
-      .columns-menu {
-        position: absolute;
-        top: calc(100% + 0.5rem);
-        right: 0;
-        background: var(--st-color-surface);
+      .tool-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
         border: 1px solid var(--st-color-border);
         border-radius: var(--st-radius-md);
-        padding: var(--st-spacing-sm);
-        min-width: 200px;
-        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-        z-index: 10;
+        background: var(--st-color-surface);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .tool-btn:hover:not(:disabled) {
+        background: var(--st-color-surface-hover);
+      }
+
+      .tool-btn[aria-expanded="true"] {
+        border-color: var(--st-color-primary);
+        color: var(--st-color-primary-text);
+      }
+
+      .tool-btn:focus-visible,
+      .chip:focus-visible,
+      .link-btn:focus-visible,
+      .row-menu-btn:focus-visible,
+      .th-btn:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      .count {
+        min-width: 1.25rem;
+        padding: 0 var(--st-spacing-xs);
+        border-radius: 999px;
+        background: var(--st-color-primary);
+        color: var(--st-color-on-primary);
+        font-size: var(--st-font-size-xs);
+        text-align: center;
+      }
+
+      /* ---------- Filter panel and chips ---------- */
+      .filter-panel {
         display: flex;
         flex-direction: column;
-        gap: 0.25rem;
+        gap: var(--st-spacing-sm);
+        margin-bottom: var(--st-spacing-md);
+        padding: var(--st-spacing-md);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-surface);
       }
 
-      .column-option {
+      .filter-row {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
-        gap: 0.5rem;
+        gap: var(--st-spacing-sm);
+      }
+
+      select,
+      .filter-value {
+        padding: var(--st-spacing-xs) var(--st-spacing-sm);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-sm);
+        background: var(--st-color-bg);
+        color: inherit;
+        font: inherit;
         font-size: var(--st-font-size-sm);
-        cursor: pointer;
-        padding: 0.25rem;
       }
 
+      .filter-value {
+        min-width: 10rem;
+        flex: 1;
+      }
+
+      .panel-actions {
+        display: flex;
+        gap: var(--st-spacing-md);
+      }
+
+      .link-btn {
+        padding: 0;
+        border: 0;
+        background: none;
+        color: var(--st-color-primary-text);
+        font-size: var(--st-font-size-sm);
+        text-decoration: underline;
+      }
+
+      .chips {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        margin-bottom: var(--st-spacing-md);
+      }
+
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding: 2px var(--st-spacing-sm);
+        border: 1px solid transparent;
+        border-radius: 999px;
+        background: var(--st-color-primary-bg);
+        color: var(--st-color-primary-text);
+        font-size: var(--st-font-size-xs);
+      }
+
+      .chip:hover {
+        border-color: var(--st-color-primary);
+      }
+
+      /* ---------- Table ---------- */
       .table-wrapper {
-        width: 100%;
-        overflow-x: auto;
+        overflow: auto;
         border: 1px solid var(--st-color-border);
         border-radius: var(--st-radius-md);
+        max-height: var(--st-table-max-height, none);
       }
 
       table {
         width: 100%;
         border-collapse: collapse;
-        text-align: left;
         font-size: var(--st-font-size-sm);
-        background-color: var(--st-color-surface);
+      }
+
+      caption {
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        text-align: left;
+        font-weight: var(--st-font-weight-medium);
       }
 
       th {
-        font-weight: 600;
         padding: var(--st-spacing-sm) var(--st-spacing-md);
         border-bottom: 2px solid var(--st-color-border);
+        background: var(--st-color-surface);
         color: var(--st-color-text-muted);
+        font-weight: var(--st-font-weight-semibold);
+        text-align: left;
         white-space: nowrap;
-        background-color: var(--st-color-surface-muted, #f8fafc);
-        user-select: none;
       }
 
-      th[draggable="true"] {
-        cursor: grab;
+      :host([sticky-header]) th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      /* ---------- Fixed row count ---------- */
+      .table-wrapper.fixed {
+        --_row-height: var(--st-data-table-row-height, 3.25rem);
+      }
+
+      :host([dense]) .table-wrapper.fixed {
+        --_row-height: var(--st-data-table-row-height, 2.5rem);
+      }
+
+      .fixed th,
+      .fixed td {
+        height: var(--_row-height);
+        padding-top: 0;
+        padding-bottom: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: var(--st-data-table-cell-max-width, 24rem);
+      }
+
+      .fixed th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .fixed td.empty {
+        height: calc(var(--st-data-table-fixed-rows, 1) * var(--_row-height));
       }
 
-      th[draggable="true"]:active {
-        cursor: grabbing;
+      .fixed tr.spacer td {
+        border-bottom: 0;
       }
 
       th.drag-over {
-        border-left: 2px solid var(--st-color-primary);
+        box-shadow: inset 3px 0 0 var(--st-color-primary);
       }
 
-      .th-content {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
+      td {
+        padding: var(--st-spacing-md);
+        border-bottom: 1px solid var(--st-color-border);
       }
 
-      .sortable-header {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
+      :host([dense]) td {
+        padding: var(--st-spacing-xs) var(--st-spacing-md);
       }
 
-      .sortable-header:hover {
-        color: var(--st-color-text);
+      tbody tr:last-child td {
+        border-bottom: 0;
       }
 
-      .sort-icon {
-        width: 1rem;
-        height: 1rem;
-        color: var(--st-color-text-muted);
+      :host([striped]) tbody tr:nth-of-type(even) {
+        background: var(--st-color-surface-muted);
       }
 
-      .sort-icon.active {
-        color: var(--st-color-primary);
+      .align-center {
+        text-align: center;
+      }
+      .align-end {
+        text-align: end;
       }
 
-      .sort-priority {
-        font-size: 0.7rem;
-        background: var(--st-color-border);
-        color: var(--st-color-text);
-        border-radius: 50%;
-        width: 1.1rem;
-        height: 1.1rem;
+      tbody tr.clickable {
+        cursor: pointer;
+      }
+
+      tbody tr.clickable:hover,
+      tbody tr.menu-open {
+        background: var(--st-color-surface-hover);
+      }
+
+      tbody tr.clickable:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+
+      .th-btn {
         display: inline-flex;
         align-items: center;
-        justify-content: center;
+        gap: var(--st-spacing-xs);
+        padding: 0;
+        border: 0;
+        background: none;
+        font-weight: inherit;
       }
 
-      td {
-        padding: var(--st-spacing-sm) var(--st-spacing-md);
-        border-bottom: 1px solid var(--st-color-border);
-        color: var(--st-color-text);
+      .th-btn.sorted {
+        color: var(--st-color-primary-text);
       }
 
-      tbody tr:last-child td {
-        border-bottom: none;
+      .sort-icon {
+        width: 0.875rem;
+        height: 0.875rem;
+        opacity: 0.45;
       }
 
-      tbody tr:hover {
-        background-color: var(--st-color-surface-hover, #f1f5f9);
+      .th-btn.sorted .sort-icon {
+        opacity: 1;
       }
 
-      .pagination {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: var(--st-spacing-md) 0;
-        font-size: var(--st-font-size-sm);
+      .priority {
+        min-width: 1rem;
+        border-radius: 999px;
+        background: var(--st-color-primary-bg);
+        font-size: var(--st-font-size-xs);
+        text-align: center;
+      }
+
+      .actions-col {
+        width: 1%;
+        text-align: end;
+      }
+
+      .row-menu-btn {
+        display: inline-flex;
+        padding: var(--st-spacing-xs);
+        border: 0;
+        border-radius: var(--st-radius-sm);
+        background: none;
         color: var(--st-color-text-muted);
       }
 
-      .pagination-controls {
-        display: flex;
-        gap: var(--st-spacing-sm);
+      .row-menu-btn:hover,
+      .row-menu-btn[aria-expanded="true"] {
+        background: var(--st-color-surface-hover);
+        color: var(--st-color-text);
       }
 
-      .drag-handle {
-        opacity: 0.3;
-        cursor: grab;
+      .empty {
+        padding: var(--st-spacing-xl);
+        text-align: center;
+        color: var(--st-color-text-muted);
       }
 
-      .drag-handle:hover {
-        opacity: 0.7;
+      /* ---------- Footer ---------- */
+      .footer {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--st-spacing-md);
+        margin-top: var(--st-spacing-md);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .page-size {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
       }
     `,
 ];
@@ -586,29 +1124,92 @@ __decorate([
     property({ type: Number, attribute: "total-rows" })
 ], StDataTable.prototype, "totalRows", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Boolean, attribute: "server-side" })
+], StDataTable.prototype, "serverSide", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
 ], StDataTable.prototype, "page", void 0);
 __decorate([
     property({ type: Number, attribute: "page-size" })
 ], StDataTable.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], StDataTable.prototype, "pageSizeOptions", void 0);
+__decorate([
+    property({ type: String })
+], StDataTable.prototype, "search", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], StDataTable.prototype, "sort", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], StDataTable.prototype, "filters", void 0);
 __decorate([
     property({ type: Boolean, attribute: "multi-sort" })
 ], StDataTable.prototype, "multiSort", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "single-sort" })
+], StDataTable.prototype, "singleSort", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StDataTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "clickable-rows" })
+], StDataTable.prototype, "clickableRows", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StDataTable.prototype, "dense", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StDataTable.prototype, "striped", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "sticky-header" })
+], StDataTable.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ type: Number, attribute: "fixed-rows" })
+], StDataTable.prototype, "fixedRows", void 0);
+__decorate([
+    property({ type: String })
+], StDataTable.prototype, "caption", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-text" })
+], StDataTable.prototype, "emptyText", void 0);
+__decorate([
+    property({ type: String, attribute: "search-placeholder" })
+], StDataTable.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "hide-search" })
+], StDataTable.prototype, "hideSearch", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "hide-column-menu" })
+], StDataTable.prototype, "hideColumnMenu", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "fixed-columns" })
+], StDataTable.prototype, "fixedColumns", void 0);
+__decorate([
+    property({ attribute: false })
+], StDataTable.prototype, "rowActions", void 0);
+__decorate([
+    property({ type: String, attribute: "row-label-key" })
+], StDataTable.prototype, "rowLabelKey", void 0);
 __decorate([
     state()
 ], StDataTable.prototype, "internalColumns", void 0);
 __decorate([
     state()
-], StDataTable.prototype, "sortState", void 0);
+], StDataTable.prototype, "searchDraft", void 0);
+__decorate([
+    state()
+], StDataTable.prototype, "filtersOpen", void 0);
 __decorate([
     state()
-], StDataTable.prototype, "searchQuery", void 0);
+], StDataTable.prototype, "announcement", void 0);
 __decorate([
     state()
-], StDataTable.prototype, "showColumnMenu", void 0);
+], StDataTable.prototype, "menuOpenFor", void 0);
+__decorate([
+    query("st-context-menu")
+], StDataTable.prototype, "menu", void 0);
 StDataTable = __decorate([
     customElement("st-data-table")
 ], StDataTable);