@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/src/components/table/data-table.ts

@@ -1,38 +1,115 @@
-import {LitElement, html, css, PropertyValues} from "lit";
-import {customElement, property, state} from "lit/decorators.js";
+import {LitElement, html, css, nothing, PropertyValues} 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";
-
-export interface DataTableColumn {
-  header: string;
-  key: string;
-  sortable?: boolean;
-  hidden?: boolean;
-}
-
-export interface SortConfig {
-  key: string;
-  direction: "asc" | "desc";
+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 type {MenuItem, StContextMenu} from "../context-menu/context-menu.js";
+import {
+  applyFilters,
+  cellValue,
+  defaultOperator,
+  deriveOptions,
+  describeFilter,
+  isFilterComplete,
+  nextSort,
+  operatorsFor,
+  paginate,
+  searchRows,
+  sortRows,
+  type DataFilter,
+  type DataTableColumn,
+  type SortConfig,
+} from "./data-table.utils.js";
+
+export type {DataFilter, DataTableColumn, FilterOperator, FilterType, SortConfig} from "./data-table.utils.js";
+export type {MenuItem} from "../context-menu/context-menu.js";
+export type RowActions = MenuItem[] | ((row: any) => MenuItem[]);
+
+const DEBOUNCE_MS = 350;
+const SKELETON_ROWS = 5;
+
+interface View {
+  rows: any[];
+  total: number;
+  page: number;
+  totalPages: number;
+  from: number;
+  to: number;
 }
 
+/**
+ * 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.
+ */
 @customElement("st-data-table")
 export class StDataTable extends LitElement {
   @property({type: Array}) columns: DataTableColumn[] = [];
   @property({type: Array}) data: Record<string, any>[] = [];
+  /** Total rows on the server. Implies server-side handling. */
   @property({type: Number, attribute: "total-rows"}) totalRows = 0;
-  @property({type: Number}) page = 1;
+  @property({type: Boolean, attribute: "server-side"}) serverSide = false;
+  @property({type: Number, reflect: true}) page = 1;
   @property({type: Number, attribute: "page-size"}) pageSize = 10;
-  @property({type: Boolean, attribute: "multi-sort"}) multiSort = false;
+  @property({type: Array, attribute: false}) pageSizeOptions: number[] = [10, 25, 50, 100];
+
+  /** Free-text search across searchable columns. */
+  @property({type: String}) search = "";
+  @property({type: Array, attribute: false}) sort: SortConfig[] = [];
+  @property({type: Array, attribute: false}) filters: DataFilter[] = [];
+
+  /** Sort by several columns with Shift+click (on by default). */
+  @property({type: Boolean, attribute: "multi-sort"}) multiSort = true;
+  @property({type: Boolean, attribute: "single-sort"}) singleSort = false;
+
   @property({type: Boolean, reflect: true}) loading = false;
+  @property({type: Boolean, attribute: "clickable-rows"}) clickableRows = false;
+  @property({type: Boolean, reflect: true}) dense = false;
+  @property({type: Boolean, reflect: true}) striped = false;
+  @property({type: Boolean, reflect: true, attribute: "sticky-header"}) 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).
+   */
+  @property({type: Number, attribute: "fixed-rows"}) fixedRows = 0;
+  @property({type: String}) caption = "";
+  @property({type: String, attribute: "empty-text"}) emptyText = "No data available.";
+  @property({type: String, attribute: "search-placeholder"}) searchPlaceholder = "Search…";
+  @property({type: Boolean, attribute: "hide-search"}) hideSearch = false;
+  @property({type: Boolean, attribute: "hide-column-menu"}) hideColumnMenu = false;
+  @property({type: Boolean, attribute: "fixed-columns"}) fixedColumns = false;
+
+  /** Menu items per row: an array, or a function returning items for a given row. */
+  @property({attribute: false}) rowActions?: RowActions;
+  /** Column used to name a row in assistive text, e.g. "Actions for Ada". Defaults to the first. */
+  @property({type: String, attribute: "row-label-key"}) rowLabelKey = "";
 
   @state() private internalColumns: DataTableColumn[] = [];
-  @state() private sortState: SortConfig[] = [];
-  @state() private searchQuery = "";
-  @state() private showColumnMenu = false;
+  @state() private searchDraft = "";
+  @state() private filtersOpen = false;
+  @state() private announcement = "";
+  @state() private menuOpenFor: unknown = null;
 
-  private searchTimeout?: number;
-  private draggedColumnKey: string | null = null;
+  @query("st-context-menu") private menu!: StContextMenu;
+
+  private view: View = {rows: [], total: 0, page: 1, totalPages: 1, from: 0, to: 0};
+  private menuMode: "row" | "columns" = "row";
+  private debounce?: number;
+  private draggedKey: string | null = null;
+  private announceNext = false;
 
   static styles = [
     resetStyles,
@@ -41,231 +118,504 @@ export class StDataTable extends LitElement {
         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;
+      }
+
+      :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;
-        background-color: var(--st-color-surface-muted, #f8fafc);
-        user-select: none;
+        max-width: var(--st-data-table-cell-max-width, 24rem);
+      }
+
+      .fixed th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
       }
 
-      th[draggable="true"] {
-        cursor: grab;
+      .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);
+      }
+
+      /* ---------- 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);
       }
 
-      .drag-handle:hover {
-        opacity: 0.7;
+      .page-size {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
       }
     `,
   ];
 
-  override willUpdate(changedProperties: PropertyValues) {
-    // 🚀 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};
+  // ---------------------------------------------------------------- lifecycle
+
+  protected willUpdate(changed: PropertyValues) {
+    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;
+  }
+
+  protected 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.
+   */
+  private applyFixedHeight() {
+    const wrapper = this.renderRoot.querySelector<HTMLElement>(".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<HTMLElement>("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`;
   }
 
+  private resizeObserver?: ResizeObserver;
+
   disconnectedCallback() {
-    document.removeEventListener("click", this.handleOutsideClick);
+    this.resizeObserver?.disconnect();
+    window.clearTimeout(this.debounce);
     super.disconnectedCallback();
   }
 
-  private handleOutsideClick = (e: Event) => {
-    const path = e.composedPath();
-    const toggleWrapper = this.shadowRoot?.querySelector(".columns-toggle-wrapper");
+  // --------------------------------------------------------------- derivations
+
+  private get isServer() {
+    return this.serverSide || this.totalRows > 0;
+  }
+
+  private get canMultiSort() {
+    return this.multiSort && !this.singleSort;
+  }
+
+  private get visibleColumns() {
+    return this.internalColumns.filter((c) => !c.hidden);
+  }
+
+  private get filterColumns() {
+    return this.internalColumns.filter((c) => c.filter);
+  }
 
-    // 🚀 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;
+  private get activeFilters() {
+    return this.filters.filter((f) => isFilterComplete(f, this.internalColumns));
+  }
+
+  private get hasQuery() {
+    return this.activeFilters.length > 0 || this.search.trim() !== "";
+  }
+
+  private computeView(): View {
+    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);
+  }
 
-  private emitChange() {
+  private optionsFor(column: DataTableColumn) {
+    return column.options ?? deriveOptions(this.data, column);
+  }
+
+  // ------------------------------------------------------------------- events
+
+  private 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,
@@ -273,350 +623,590 @@ export class StDataTable extends LitElement {
     );
   }
 
-  private handleSearchInput(e: Event) {
-    if (this.loading) return;
-    const val = (e.target as HTMLInputElement).value;
-    window.clearTimeout(this.searchTimeout);
+  private emitDebounced() {
+    window.clearTimeout(this.debounce);
+    this.debounce = window.setTimeout(() => this.emitChange(), DEBOUNCE_MS);
+  }
 
-    this.searchTimeout = window.setTimeout(() => {
-      this.searchQuery = val;
+  private onSearchInput(e: Event) {
+    if (this.loading) return;
+    this.searchDraft = (e.target as HTMLInputElement).value;
+    window.clearTimeout(this.debounce);
+    this.debounce = window.setTimeout(() => {
+      this.search = this.searchDraft;
       this.page = 1;
       this.emitChange();
-    }, 350);
+    }, DEBOUNCE_MS);
   }
 
-  private handleSort(key: string, e: MouseEvent) {
+  private clearSearch() {
+    this.searchDraft = "";
+    this.search = "";
+    this.page = 1;
+    this.emitChange();
+  }
+
+  private onSort(key: string, e: MouseEvent) {
     if (this.loading) return;
-    const isShift = e.shiftKey && this.multiSort;
-    const existingIndex = this.sortState.findIndex((s) => s.key === key);
-    let newDirection: "asc" | "desc" | null = "asc";
+    this.sort = nextSort(this.sort, key, e.shiftKey && this.canMultiSort);
+    this.page = 1;
+    this.emitChange();
+  }
 
-    if (existingIndex !== -1) {
-      newDirection = this.sortState[existingIndex].direction === "asc" ? "desc" : null;
-    }
+  private removeSort(key: string) {
+    this.sort = this.sort.filter((s) => s.key !== key);
+    this.page = 1;
+    this.emitChange();
+  }
 
-    let newSortState = [...this.sortState];
+  private goToPage(page: number) {
+    if (this.loading || page === this.page) return;
+    this.page = page;
+    this.emitChange(false);
+  }
 
-    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 = [];
-      }
-    }
+  private onPageSize(e: Event) {
+    this.pageSize = Number((e.target as HTMLSelectElement).value);
+    this.page = 1;
+    this.emitChange(false);
+  }
 
-    this.sortState = newSortState;
+  private clearAll() {
+    this.searchDraft = "";
+    this.search = "";
+    this.filters = [];
     this.page = 1;
     this.emitChange();
   }
 
-  private get totalPages() {
-    return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
+  // ------------------------------------------------------------------ filters
+
+  private addFilter() {
+    const column = this.filterColumns[0];
+    if (!column) return;
+    this.filters = [...this.filters, {key: column.key, op: defaultOperator(column.filter!), value: ""}];
+    this.filtersOpen = true;
   }
 
-  private prevPage() {
-    if (!this.loading && this.page > 1) {
-      this.page--;
-      this.emitChange();
-    }
+  private updateFilter(index: number, patch: Partial<DataFilter>, debounce = false) {
+    this.filters = this.filters.map((f, i) => (i === index ? {...f, ...patch} : f));
+    this.page = 1;
+    if (debounce) this.emitDebounced();
+    else this.emitChange();
   }
 
-  private nextPage() {
-    if (!this.loading && this.page < this.totalPages) {
-      this.page++;
-      this.emitChange();
-    }
+  private onFilterColumn(index: number, key: string) {
+    const column = this.internalColumns.find((c) => c.key === key);
+    if (!column?.filter) return;
+    this.updateFilter(index, {key, op: defaultOperator(column.filter), value: ""});
   }
 
-  private toggleColumnVisibility(key: string) {
-    this.internalColumns = this.internalColumns.map((col) =>
-      col.key === key ? {...col, hidden: !col.hidden} : col,
-    );
+  private onFilterOperator(index: number, op: DataFilter["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 : ""});
+  }
+
+  private removeFilter(index: number) {
+    this.filters = this.filters.filter((_, i) => i !== index);
+    this.page = 1;
+    this.emitChange();
+  }
+
+  // ------------------------------------------------------------------ columns
+
+  private columnItems(): MenuItem[] {
+    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,
+    }));
+  }
+
+  private openColumnMenu(e: MouseEvent) {
+    this.menuMode = "columns";
+    this.menuOpenFor = null;
+    this.menu.label = "Columns";
+    this.menu.items = this.columnItems();
+    this.menu.showAt(e.currentTarget as HTMLElement);
+  }
+
+  private toggleColumn(key: string) {
+    this.internalColumns = this.internalColumns.map((c) => (c.key === key ? {...c, hidden: !c.hidden} : c));
+    this.menu.items = this.columnItems();
+  }
+
+  private moveColumn(from: string, to: string) {
+    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;
+  }
+
+  private onHeaderKeydown(e: KeyboardEvent, key: string) {
+    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<HTMLElement>(`[data-col="${key}"] .th-btn, [data-col="${key}"]`)?.focus(),
+      );
+    }
   }
 
-  private handleDragStart(e: DragEvent, key: string) {
-    this.draggedColumnKey = key;
+  private onDragStart(e: DragEvent, key: string) {
+    this.draggedKey = key;
     if (e.dataTransfer) {
       e.dataTransfer.effectAllowed = "move";
       e.dataTransfer.setData("text/plain", key);
     }
   }
 
-  private handleDragOver(e: DragEvent) {
+  private onDragOver(e: DragEvent) {
     e.preventDefault();
-    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-    const target = (e.target as HTMLElement).closest("th");
-    if (target) target.classList.add("drag-over");
+    (e.currentTarget as HTMLElement).classList.add("drag-over");
   }
 
-  private handleDragLeave(e: DragEvent) {
-    const target = (e.target as HTMLElement).closest("th");
-    if (target) target.classList.remove("drag-over");
+  private onDrop(e: DragEvent, key: string) {
+    e.preventDefault();
+    (e.currentTarget as HTMLElement).classList.remove("drag-over");
+    if (this.draggedKey) this.moveColumn(this.draggedKey, key);
+    this.draggedKey = null;
   }
 
-  private handleDrop(e: DragEvent, targetKey: string) {
-    e.preventDefault();
-    const targetEl = (e.target as HTMLElement).closest("th");
-    if (targetEl) targetEl.classList.remove("drag-over");
+  // --------------------------------------------------------------- row actions
 
-    if (!this.draggedColumnKey || this.draggedColumnKey === targetKey) return;
+  private itemsFor(row: any): MenuItem[] {
+    if (!this.rowActions) return [];
+    return typeof this.rowActions === "function" ? this.rowActions(row) : this.rowActions;
+  }
 
-    const newCols = [...this.internalColumns];
-    const fromIndex = newCols.findIndex((c) => c.key === this.draggedColumnKey);
-    const toIndex = newCols.findIndex((c) => c.key === targetKey);
+  private rowLabel(row: any) {
+    const column =
+      this.internalColumns.find((c) => c.key === this.rowLabelKey) ?? this.internalColumns[0];
+    return column ? String(cellValue(row, column) ?? "") : "";
+  }
 
-    const [movedCol] = newCols.splice(fromIndex, 1);
-    newCols.splice(toIndex, 0, movedCol);
+  private openRowMenu(row: any, target: {x: number; y: number} | HTMLElement) {
+    const items = this.itemsFor(row);
+    if (!items.length) return;
+    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);
+  }
 
-    this.internalColumns = newCols;
-    this.draggedColumnKey = null;
+  private onRowContextMenu(e: MouseEvent, row: any) {
+    if (!this.rowActions || this.loading || !this.itemsFor(row).length) return;
+    e.preventDefault();
+    this.openRowMenu(row, {x: e.clientX, y: e.clientY});
   }
 
-  private renderSortIcon(key: string) {
-    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>`;
+  private onMenuSelect(e: CustomEvent<{item: MenuItem; value: string; context: unknown}>) {
+    e.stopPropagation();
+    if (this.menuMode === "columns") {
+      this.toggleColumn(e.detail.value);
+      return;
     }
+    this.dispatchEvent(
+      new CustomEvent("st-row-action", {
+        detail: {value: e.detail.value, item: e.detail.item, row: e.detail.context},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
 
-    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>`
-        : "";
+  private onRowClick(row: any) {
+    if (!this.clickableRows || this.loading) return;
+    this.dispatchEvent(new CustomEvent("st-row-click", {detail: row, bubbles: true, composed: true}));
+  }
 
-    return html`${icon}${priority}`;
+  private onRowKeydown(e: KeyboardEvent, row: any) {
+    if (e.target !== e.currentTarget || (e.key !== "Enter" && e.key !== " ")) return;
+    e.preventDefault();
+    this.onRowClick(row);
   }
 
-  render() {
-    const visibleColumns = this.internalColumns.filter((c) => !c.hidden);
-    const skeletonRowsCount = Math.min(this.pageSize, 5);
+  // ------------------------------------------------------------------- render
 
+  private 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
-            ? 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>
+        ${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`
+              <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";
-
-                return html`
-                  <th
-                    scope="col"
-                    aria-sort=${ifDefined(col.sortable ? ariaSort : undefined)}
-                    draggable="true"
-                    @dragstart=${(e: DragEvent) => this.handleDragStart(e, col.key)}
-                    @dragover=${this.handleDragOver}
-                    @dragleave=${this.handleDragLeave}
-                    @drop=${(e: DragEvent) => 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"
-                      >
-                        <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: MouseEvent) => col.sortable && this.handleSort(col.key, e)}
+  private 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`
+            <div class="filter-row" role="group" aria-label="Filter ${index + 1}">
+              <select
+                aria-label="Filter ${index + 1} column"
+                @change=${(e: Event) => this.onFilterColumn(index, (e.target as HTMLSelectElement).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: Event) =>
+                  this.onFilterOperator(index, (e.target as HTMLSelectElement).value as DataFilter["op"])}
+              >
+                ${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: Event) =>
+                          this.updateFilter(index, {value: (e.target as HTMLSelectElement).value})}
                       >
-                        ${col.header} ${col.sortable ? this.renderSortIcon(col.key) : ""}
-                      </div>
-                    </div>
-                  </th>
-                `;
-              })}
-            </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>
-                          `,
+                        <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>`,
                         )}
-                      </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>
+                      </select>
+                    `
+                  : html`
+                      <input
+                        class="filter-value"
+                        type=${type === "number" ? "number" : "text"}
+                        aria-label="Filter ${index + 1} value"
+                        placeholder="Value"
+                        .value=${filter.value ?? ""}
+                        @input=${(e: Event) =>
+                          this.updateFilter(index, {value: (e.target as HTMLInputElement).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>
+          `;
+        })}
+        <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>
+    `;
+  }
 
-      <div class="pagination">
-        <div class="pagination-info">
-          Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
-        </div>
-        <div class="pagination-controls">
-          <st-button
-            variant="secondary"
-            size="sm"
-            ?disabled=${this.loading || this.page === 1}
-            @click=${this.prevPage}
+  private 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>
+    `;
+  }
+
+  private renderSortIcon(key: string) {
+    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}
+    `;
+  }
+
+  private sortLabel(key: string) {
+    const s = this.sort.find((x) => x.key === key);
+    return s ? (s.direction === "asc" ? "ascending" : "descending") : "none";
+  }
+
+  private 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: DragEvent) => this.onDragStart(e, col.key)}
+                @dragover=${this.onDragOver}
+                @dragleave=${(e: DragEvent) => (e.currentTarget as HTMLElement).classList.remove("drag-over")}
+                @drop=${(e: DragEvent) => 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: MouseEvent) => this.onSort(col.key, e)}
+                      @keydown=${(e: KeyboardEvent) => 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>
+    `;
+  }
+
+  private 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. */
+  private renderSpacers(count: number, colSpan: number) {
+    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>`,
+    );
+  }
+
+  private renderRows(_colSpan: number) {
+    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: KeyboardEvent) => this.onRowKeydown(e, row)}
+          @contextmenu=${(e: MouseEvent) => 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: MouseEvent) => {
+                        e.stopPropagation();
+                        this.openRowMenu(row, e.currentTarget as HTMLElement);
+                      }}
+                    >
+                      <st-icon name="ellipsis" size="sm" aria-hidden="true"></st-icon>
+                    </button>`
+                  : nothing}
+              </td>`
+            : nothing}
+        </tr>
+      `;
+    });
+  }
+
+  private 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: CustomEvent<{page: number}>) => {
+                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>
     `;
   }
 }