@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -22,9 +22,14 @@ import type {
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 import { useTable } from "../../composables/table/useTable";
 import type { LabeledColumn } from "../../composables/table/useTableColumns";
+import {
+  defaultSortingState,
+  type SortValueKind,
+} from "../../composables/table-view/utils/sortableColumns";
 import type {
   CustomButton,
   TableViewDisplayCapabilities,
+  TableViewEmptyStatesConfig,
 } from "../../../composables/table-view/types";
 import type {
   FormContainer,
@@ -33,15 +38,66 @@ import type {
 import type { CustomRowAction } from "../../../types/row-action";
 import type { RowActionConfig } from "#dms-core/app/types/row-action";
 import type { TableTabItem } from "./Tabs.vue";
+import type { ColumnDisplay } from "../../composables/data-types/useColumnValueRenderer";
+import type { ResolvedTableChrome } from "../../composables/table-view/utils/chrome";
+import type { ResolvedQuickFilter } from "../../composables/table-view/utils/quickFilters";
+import type { ClearableTableFilters } from "../../composables/table/utils/clearTableFilters";
+import type { EventHookOn } from "@vueuse/core";
+import type { VNodeChild } from "vue";
 
 export interface Data {
   [key: string]: unknown;
 }
 
+export type TableDensity = "default" | "compact";
+
+/**
+ * Rows split into groups under header rows, the `grouped` display: the rows
+ * arrive sorted on the grouped column, and a page starting inside a group
+ * repeats its header.
+ */
+export interface TableRowGrouping<T = Data> {
+  /** Key of the group a row belongs to. */
+  keyOf: (row: T) => string;
+  /** Content of a group's header row, read off its first row. */
+  header: (key: string, row: T) => VNodeChild;
+  /** Number of rows the group holds, once counted. */
+  countOf?: (key: string) => number | undefined;
+  /** A click on the header folds the group's rows. */
+  collapsible?: boolean;
+}
+
+/**
+ * A list growing by pages instead of paging (`loadMore`, `infinite`): what
+ * the footer shows instead of its pager.
+ */
+export interface TableAccumulation {
+  mode: "loadMore" | "infinite";
+  /** Rows listed so far. */
+  shown: number;
+  hasMore: boolean;
+  loading: boolean;
+  /** Appends the next page. */
+  load: () => void;
+}
+
+/** Rows ordered by hand (backend `reorder`): a handle moves a row. */
+export interface TableReorder {
+  /** Off while a search, a filter or a tab narrows the rows. */
+  enabled: boolean;
+  /** Moves the row at `from` to `to`, within the page. */
+  move: (from: number, to: number) => void;
+}
+
+/** Where a table draws its views (see `TableProps.viewsPlacement`). */
+export type TableViewsPlacement = "band" | "header";
+
 export type TableColumn<T> = ColumnDef<T> & {
   type?: DataTypeConfig;
   /** Wrap the default cell renderer without clipping; custom cell slots own their layout. */
   cellWrap?: boolean;
+  /** Data type the cells render through instead of the column's own `type`. */
+  display?: ColumnDisplay;
 };
 
 export interface TableRowActionOptions {
@@ -103,6 +159,13 @@ export interface TableProps<T> {
   formPages?: FormPageUrls;
   routeParams?: Record<string, string>;
   defaultSort?: { field: string; desc?: boolean };
+  /**
+   * Name of the default sort's column in the toolbar sort menu: the field may
+   * not be a displayed column. Defaults to the column's label.
+   */
+  defaultSortLabel?: string;
+  /** How the default sort's values compare, for its direction label. */
+  defaultSortKind?: SortValueKind;
   initialColumnVisibility?: VisibilityState;
   presenceByRow?: TableRowPresenceMap;
   canExport?: boolean;
@@ -110,13 +173,61 @@ export interface TableProps<T> {
    * Displays offered by this table view (registry ∩ config, filtered by
    * availability). When more than one, the options menu shows a "view mode"
    * switcher. In kanban mode the menu also edits the `kanbanGroupBy` model
-   * among `kanbanGroupByOptions`.
+   * among `kanbanGroupByOptions`, in grouped mode the `groupedGroupBy` model
+   * among `groupedGroupByOptions`.
    */
   displays?: TableViewSwitcherItem[];
   kanbanGroupByOptions?: KanbanGroupByOption[];
+  groupedGroupByOptions?: KanbanGroupByOption[];
   /** Chrome capabilities of the active display; gates filters/search/sort/columns. */
   activeCapabilities?: Required<TableViewDisplayCapabilities>;
 
+  /**
+   * Archive mode: shows the "Archived" toolbar toggle (bound to the
+   * `showArchived` model). While on, the table lists archived rows under an
+   * amber strip and swaps the row and bulk actions to restore.
+   */
+  archiveToggle?: boolean;
+  /**
+   * Controls drawn around the rows (the resolved backend `chrome`). Defaults
+   * to the full chrome.
+   */
+  chrome?: ResolvedTableChrome;
+  /** Placeholder of the search field. */
+  searchPlaceholder?: string;
+  /**
+   * One-click dropdown filters of the toolbar, writing the column filters
+   * (the `columnFilters` model).
+   */
+  quickFilters?: ResolvedQuickFilter[];
+  /** Footer texts: the row count (i18n key receiving `{ count }`) and a hint. */
+  footer?: TableFooterTexts;
+  /**
+   * The table's own rows per page, offered in the footer picker next to the
+   * standard sizes.
+   */
+  defaultPageSize?: number;
+  /**
+   * Caps the rows in a scroll area of their own (any CSS length), under a
+   * header band that stays in view.
+   */
+  maxHeight?: string;
+  /**
+   * Where the `views` slot is drawn: a band of its own under the header
+   * (views as tabs or pills), or inside the header (a views menu).
+   */
+  viewsPlacement?: TableViewsPlacement;
+  /** Splits the rows into groups under header rows. */
+  grouping?: TableRowGrouping<T>;
+  /** The list grows by pages instead of paging. */
+  accumulation?: TableAccumulation;
+  /** Rows ordered by hand: a drag handle in front of each row. */
+  reorder?: TableReorder;
+  /** Custom actions the selection bar offers (backend `bulk`). */
+  bulkActions?: CustomRowAction[];
+  /** What the empty body says, per reason it is empty. */
+  emptyStates?: TableViewEmptyStatesConfig;
+
   data?: T[] | null;
   columns?: TableColumn<T>[];
   loading?: boolean;
@@ -145,8 +256,34 @@ export interface TableProps<T> {
   paginationOptions?: Omit<PaginationOptions, "onPaginationChange">;
 }
 
+export interface TableFooterTexts {
+  /** i18n key (`$`-prefixed) receiving `{ count }`, pluralized on it. */
+  countLabel?: string;
+  /** Hint at the right of the count. */
+  hint?: string;
+  /** Figures computed over the listed rows, after the count. */
+  summaries?: TableFooterSummary[];
+  /** A legend of a select column's values. */
+  legend?: TableFooterLegendItem[];
+}
+
+/** A figure of the footer band, its value drawn (absent while it loads). */
+export interface TableFooterSummary {
+  id: string;
+  label: string;
+  value?: VNodeChild;
+}
+
+/** An entry of the footer legend: a value and its color. */
+export interface TableFooterLegendItem {
+  label: string;
+  /** Tone of its dot. */
+  color?: string;
+}
+
 export interface TableEmits<T> {
-  (e: "add" | "refresh"): void;
+  (e: "add" | "refresh" | "exportAll"): void;
+  (e: "bulkAction", action: CustomRowAction): void;
   (e: "details" | "edit", item: T): void;
   (e: "delete" | "archive" | "restore" | "export", itemIds: string[]): void;
   (e: "duplicate", itemId: string): void;
@@ -174,17 +311,55 @@ export interface TableSharedData<T> {
   labeledColumns: ComputedRef<LabeledColumn<T>[]>;
   customNavItems: NavItem[];
   hasCustomSort: ComputedRef<boolean>;
+  /** The table's default sort, if it has one. */
+  defaultSort?: { field: string; desc?: boolean };
+  /** Name of the default sort's column (see `TableProps.defaultSortLabel`). */
+  defaultSortLabel?: string;
+  /** How the default sort's values compare (see `TableProps.defaultSortKind`). */
+  defaultSortKind?: SortValueKind;
+  /** The list is sorted by its default sort: the user sorted nothing. */
+  isUsingDefaultSort: ComputedRef<boolean>;
+  /** Goes back to the default sort (none without one). */
+  resetSorting: () => void;
   hasCustomColumns: ComputedRef<boolean>;
   deleteFilter: (index: number) => void;
+  /**
+   * Clears everything that narrows the rows — filter chips (quick filters
+   * included) and the toolbar search — and goes back to the first page.
+   */
   resetFilters: () => void;
+  /** What `resetFilters` would clear (nothing: no clear action to offer). */
+  clearableFilters: ComputedRef<ClearableTableFilters>;
+  /** A search or a filter chip narrows the rows. */
+  isFiltered: ComputedRef<boolean>;
+  /** Runs after `resetFilters` (e.g. the toolbar folds its search). */
+  onFiltersCleared: EventHookOn;
   deleteSorting: (index: number) => void;
   rowCount: number;
+  /** No row listed yet while the first page loads: footers draw placeholders. */
+  firstPageLoading: boolean;
   displays: TableViewSwitcherItem[];
   hasDisplaySwitcher: boolean;
   activeDisplayState: ModelRef<string>;
   activeCapabilities: ComputedRef<Required<TableViewDisplayCapabilities>>;
   kanbanGroupByState: ModelRef<string>;
   kanbanGroupByOptions: KanbanGroupByOption[];
+  groupedGroupByState: ModelRef<string>;
+  groupedGroupByOptions: KanbanGroupByOption[];
+  showArchivedState: ModelRef<boolean>;
+  /** Row height: `compact` gives 36px rows under a 32px header band. */
+  densityState: ModelRef<TableDensity>;
+  chrome: ComputedRef<ResolvedTableChrome>;
+  footer?: TableFooterTexts;
+  /** See `TableProps.defaultPageSize`. */
+  defaultPageSize?: number;
+  /** See `TableProps.accumulation`. */
+  accumulation?: TableAccumulation;
+  /**
+   * See `TableProps.emptyStates`: a custom display's empty body says them
+   * too.
+   */
+  emptyStates?: TableViewEmptyStatesConfig;
 }
 </script>
 
@@ -201,9 +376,13 @@ import {
   type ModelRef,
   ref,
   shallowRef,
+  useId,
+  useSlots,
+  useTemplateRef,
+  watch,
   watchEffect,
 } from "vue";
-import { provideLocal } from "@vueuse/core";
+import { createEventHook, provideLocal, useElementSize } from "@vueuse/core";
 import { tv } from "tailwind-variants";
 import { get } from "@nuxt/ui/runtime/utils/index.js";
 
@@ -214,57 +393,137 @@ import TableFiltersRow from "./FiltersRow.vue";
 import TableRowSelection from "./RowSelection.vue";
 import TableTabs from "./Tabs.vue";
 import { createTableViewDeleteShortcut } from "../../../composables/table-view/shortcuts/tableViewDelete";
+import { FULL_TABLE_CHROME } from "../../composables/table-view/utils/chrome";
+import {
+  clearTableFilters,
+  clearableTableFilters,
+  isTableNarrowed,
+  type TableNarrowingState,
+} from "../../composables/table/utils/clearTableFilters";
 import {
   DEFAULT_PAGE_INDEX,
   DEFAULT_PAGE_SIZE,
 } from "../../composables/table/constants";
+import { mergeColumnOrder } from "../../composables/table/utils/columnOrder";
+import { EYEBROW_CLASS } from "../../utils/eyebrow";
 
 // Same color as the surrounding card frame (.dms-card) so sticky
 // rail/pinned cells blend in instead of showing a contrasting block.
 const PANEL_MATCH_BG = "bg-(--dms-surface-card)";
 
-// Header cells sit on the muted header band; sticky header cells need the
-// same opaque background as the non-sticky ones.
-const HEADER_MATCH_BG = "bg-muted dark:bg-accented";
+const HEADER_PLACEMENT = "header";
+
+// Header cells sit on the v2 band color; sticky header cells need the same
+// opaque background as the non-sticky ones.
+const HEADER_MATCH_BG = "bg-(--dms-bg-muted)";
 
 // Sticky cells paint their own opaque background over the row's, so they have
 // to repeat the hover tint under the exact same condition as the row itself;
 // otherwise only the pinned column lights up.
-const ROW_HOVER_BG = "hover:bg-elevated dark:hover:bg-accented";
-const ROW_HOVER_CELL_BG =
-  "group-hover:bg-elevated dark:group-hover:bg-accented";
+const ROW_HOVER_BG = "hover:bg-elevated";
+const ROW_HOVER_CELL_BG = "group-hover:bg-elevated";
+
+// A selected row is tinted with the accent; sticky cells need an opaque mix of
+// the same tint so scrolled content never shows through them.
+const ROW_SELECTED_BG = "data-[selected=true]:bg-primary/10";
+const ROW_SELECTED_CELL_BG =
+  "group-data-[selected=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
+
+// An expanded row keeps the hover tint and hands its bottom rule to the detail
+// band below it.
+const ROW_EXPANDED_BG = "data-[expanded=true]:bg-elevated";
+const ROW_EXPANDED_CELL_BG = "group-data-[expanded=true]:bg-elevated";
+
+// Sticky header: the band gains a soft shadow once the body scrolls under it.
+const HEADER_SCROLL_SHADOW =
+  "shadow-[0_8px_10px_-8px_color-mix(in_srgb,var(--ui-border-accented)_90%,transparent)]";
+
+// The v2 bands start 18px from the card edge. The first data cell carries that
+// gutter; after the 2px presence rail (an empty first cell) it takes the rest.
+const FIRST_HEAD_CELL_GUTTER = "first:ps-[18px] [th:empty:first-child+&]:ps-4";
+const FIRST_ROW_CELL_GUTTER = "first:ps-[18px] [td:empty:first-child+&]:ps-4";
 
 const theme = tv({
   slots: {
-    root: "dms-card flow-root p-4 sm:p-6",
-    header: "flex justify-between",
-    caption: "text-lg md:text-xl font-semibold truncate",
-
-    tableRoot:
-      "border-default mt-4 overflow-x-auto rounded-lg border whitespace-nowrap",
+    root: "dms-card flow-root overflow-hidden",
+    header:
+      "flex flex-wrap items-center gap-x-3 gap-y-2.5 py-3 ps-[18px] pe-3.5",
+    caption:
+      "me-auto flex min-w-0 items-center gap-2.5 text-[15px] leading-[1.2] font-[650] tracking-[-0.015em] text-highlighted",
+    captionLabel: "truncate",
+    captionCount: "font-mono text-xs font-medium tabular-nums text-dimmed",
+    captionCountPlaceholder: "h-3 w-6 rounded-[4px]",
+
+    tableRoot: "relative overflow-x-auto whitespace-nowrap",
     tableBase: "inline-block min-w-full align-middle",
-    table: "text-default w-full min-w-full table-fixed text-left text-sm/6",
+    table: "text-default w-full min-w-full table-fixed text-left text-[13px]/5",
     tableCaption: "sr-only",
 
-    headCell: `${HEADER_MATCH_BG} border-b-default text-muted group relative touch-none select-none overflow-hidden border-b px-4 py-3 text-xs font-semibold`,
-    headCellInternal: "flex w-full items-center justify-between",
+    // 2px indeterminate bar riding the bottom edge of the header band.
+    loadingBar:
+      "pointer-events-none absolute inset-x-0 top-9 z-40 h-0.5 overflow-hidden",
+    loadingBarIndicator:
+      "absolute inset-y-0 start-0 w-1/2 rounded-full bg-(--dms-accent-fill) animate-[carousel_1.3s_ease-in-out_infinite]",
+    skeletonRow: "pointer-events-none",
+    skeletonCell: "block h-2.5 rounded-md",
+
+    // Archive mode: an amber strip under the chrome while archived rows show.
+    archiveStrip:
+      "flex flex-wrap items-center gap-x-2.5 gap-y-1.5 border-b border-(--dms-warning-line) bg-(--dms-warning-tint) py-[9px] ps-[18px] pe-3.5 text-[13px] text-highlighted",
+    archiveStripIcon: "size-[17px] shrink-0 text-warning",
+    archiveStripText: "min-w-0",
+    archiveStripTitle: "font-semibold",
+    archiveStripDescription: "text-[12.5px] text-muted",
+    archiveStripAction: "ms-auto",
+
+    // Detail band of an expanded row, on the muted surface and indented to
+    // the content column.
+    expandedCell:
+      "border-b border-default bg-(--dms-bg-muted) p-0 whitespace-normal in-[tr:last-child]:border-b-0",
+    // The band sticks to the visible part of a horizontally scrolled table
+    // (its width is the scroll area's, --dms-table-viewport), so the detail
+    // never hides past the card edge. Phones drop the content-column indent.
+    expandedBody:
+      "sticky start-0 w-[var(--dms-table-viewport,auto)] pt-4 pb-[18px] pe-[18px] ps-[18px] sm:ps-[68px]",
+
+    headCell: `${HEADER_MATCH_BG} ${FIRST_HEAD_CELL_GUTTER} border-b-default text-dimmed group relative touch-none select-none overflow-hidden border-b h-9 px-3.5 py-0 ${EYEBROW_CLASS} last:pe-2.5`,
+    headCellInternal: "flex w-full items-center justify-between gap-1",
     colOptionsTrigger: "opacity-0 transition-opacity group-hover:opacity-100",
     colResizer:
       "bg-primary/40 absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize touch-none select-none opacity-0 hover:opacity-100",
 
-    row: "group",
-    rowCell:
-      "border-b-muted border-b px-4 py-3.5 text-sm in-[tr:last-child]:border-b-0",
-    rowInternal: "",
+    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG}`,
+    rowCell: `${FIRST_ROW_CELL_GUTTER} border-b-muted border-b h-11 px-3.5 py-0 text-[13px] last:pe-2.5 in-[tr:last-child]:border-b-0 group-data-[expanded=true]:border-b-transparent`,
+    rowInternal: "transition-opacity duration-150",
     rowContainer: "relative",
-    rowSpan: "line-clamp-1",
-
-    rowSelection: "opacity-0 transition-opacity group-hover:opacity-100",
-    rowAction: "flex items-center justify-end gap-1",
-
-    columnActiveSortIcon: "size-4",
-
-    skeletonTd: "absolute inset-px",
+    rowSpan: "line-clamp-1 text-ellipsis",
+
+    // The row checkbox and the row actions (the … menu and every other icon
+    // of the last column) stay visible but faded, and come to full strength
+    // when the row is hovered, selected, focused or one of its menus is open.
+    rowSelection:
+      "opacity-40 transition-opacity group-hover:opacity-100 focus-visible:opacity-100",
+    rowAction:
+      "flex items-center justify-end gap-1 opacity-40 transition-opacity group-hover:opacity-100 group-data-[selected=true]:opacity-100 focus-within:opacity-100 has-[[data-state=open]]:opacity-100",
+
+    columnActiveSortIcon: "size-3 shrink-0 text-primary",
+
+    // Group header of the grouped display, on the band color, kept in view
+    // over a horizontally scrolled table like a detail band.
+    groupCell: `${HEADER_MATCH_BG} border-b border-default p-0`,
+    groupHeader:
+      "sticky start-0 flex h-9 w-[var(--dms-table-viewport,auto)] items-center gap-2 ps-[18px] pe-3.5 text-[12.5px] text-muted",
+    groupToggle:
+      "inline-flex min-w-0 items-center gap-2 hover:text-highlighted",
+    groupCount:
+      "rounded-[4px] bg-elevated px-[5px] py-px font-mono text-[10.5px] font-semibold tabular-nums text-dimmed",
+
+    // The move handle of a hand-ordered table, in a narrow first column.
+    handleHeadCell: `${HEADER_MATCH_BG} border-b-default w-8 border-b p-0`,
+    handleCell:
+      "border-b-muted w-8 border-b ps-2 pe-0 in-[tr:last-child]:border-b-0",
+    handle:
+      "inline-flex size-6 cursor-grab items-center justify-center rounded text-dimmed hover:text-highlighted focus-visible:outline-2 focus-visible:outline-(--dms-accent-line) disabled:cursor-not-allowed disabled:opacity-40 [&>svg]:size-4",
   },
   variants: {
     cellWrap: {
@@ -272,20 +531,64 @@ const theme = tv({
         rowSpan: "line-clamp-none whitespace-normal [overflow-wrap:anywhere]",
       },
     },
+    // The header sits straight on the column band when no tabs row follows
+    // it, and then carries the rule itself.
+    headerDivided: {
+      true: {
+        header: "border-b border-default",
+      },
+    },
+    // Tabs up in the header band (no caption): they take its full height and
+    // their underline lands on its bottom rule.
+    tabsInline: {
+      true: {
+        header: "min-h-11 py-0",
+      },
+    },
     pinned: {
       left: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} group-data-[presence=true]:bg-elevated dark:group-data-[presence=true]:bg-accented sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
       },
       right: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} group-data-[presence=true]:bg-elevated dark:group-data-[presence=true]:bg-accented sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
+      },
+    },
+    // Dense lists: 36px rows under a 32px header band.
+    density: {
+      default: "",
+      compact: {
+        headCell: "h-8",
+        rowCell: "h-9 text-[12.5px]",
+        loadingBar: "top-8",
+      },
+    },
+    // The header band sticks to the top of a height-capped scroll area.
+    scrollArea: {
+      true: {
+        tableRoot: "overflow-y-auto overscroll-contain",
+        table: "border-separate border-spacing-0",
+        headCell: "sticky top-0 z-20",
+      },
+    },
+    scrolled: {
+      true: "",
+    },
+    // Rows listed while viewing the archive read as set aside.
+    // Restore stays on show there, it is the only thing to do with them.
+    archived: {
+      true: {
+        rowCell: "text-muted",
+        rowAction: "opacity-100",
       },
     },
+    // A re-fetch keeps the rows on show, faded once it lasts (the delay
+    // spares quick ones a flicker), under the header band's loading bar.
     loading: {
       true: {
         row: "cursor-wait hover:bg-transparent",
-        rowInternal: "opacity-0",
+        rowInternal: "opacity-60 delay-200",
       },
     },
     rowClickable: {
@@ -301,9 +604,15 @@ const theme = tv({
         rowSelection: "opacity-100",
       },
     },
+    // Labelled inline actions are the row's actions on show: never faded.
+    prominent: {
+      true: {
+        rowAction: "opacity-100",
+      },
+    },
     presence: {
       true: {
-        row: "opacity-70 bg-elevated dark:bg-accented",
+        row: "bg-elevated",
       },
     },
   },
@@ -323,6 +632,20 @@ const theme = tv({
         rowCell: ROW_HOVER_CELL_BG,
       },
     },
+    {
+      scrollArea: true,
+      pinned: ["left", "right"],
+      class: {
+        headCell: "z-30",
+      },
+    },
+    {
+      scrollArea: true,
+      scrolled: true,
+      class: {
+        headCell: HEADER_SCROLL_SHADOW,
+      },
+    },
   ],
 });
 
@@ -373,9 +696,70 @@ const activeDisplayState = defineModel<string>("activeDisplay", {
 const kanbanGroupByState = defineModel<string>("kanbanGroupBy", {
   default: "",
 });
+const groupedGroupByState = defineModel<string>("groupedGroupBy", {
+  default: "",
+});
 const expandedState = defineModel<ExpandedState>("expanded", {
   default: (): ExpandedState => ({}),
 });
+const showArchivedState = defineModel<boolean>("showArchived", {
+  default: false,
+});
+const densityState = defineModel<TableDensity>("density", {
+  default: "default",
+});
+// "Select all N matching": a bulk action covers every row the filters match.
+const allMatchingState = defineModel<boolean>("allMatching", {
+  default: false,
+});
+
+const slots = useSlots();
+// A detail renderer turns the expander column on.
+const isExpandable = !!slots.expanded;
+// The caret button names the detail row it opens (aria-controls).
+const tableDomId = `dms-table-${useId()}`;
+const expandedRowDomId = (rowId: string): string =>
+  `${tableDomId}-detail-${rowId.replace(/\s+/g, "_")}`;
+
+// Rows are archived ones only while the toggle is on.
+const isShowingArchived = computed(
+  () => !!props.archiveToggle && showArchivedState.value,
+);
+
+// As many placeholder rows as the page will list (capped), fading out.
+const SKELETON_MAX_ROW_COUNT = 10;
+const SKELETON_TOTAL_FADE = 0.7;
+const SKELETON_WIDTHS = ["62%", "48%", "70%", "54%", "40%"];
+const skeletonWidth = (rowIndex: number, columnIndex: number): string =>
+  SKELETON_WIDTHS[(rowIndex + columnIndex) % SKELETON_WIDTHS.length]!;
+
+// The scroll shadow under a sticky header only shows once rows went under it.
+const hasScrollArea = computed(() => !!props.maxHeight);
+const isScrolled = ref(false);
+const onTableScroll = (event: Event) => {
+  if (!hasScrollArea.value) return;
+  isScrolled.value = (event.target as HTMLElement).scrollTop > 0;
+};
+// Expanded detail bands are as wide as the visible scroll area.
+const tableRootRef = useTemplateRef<HTMLElement>("tableRoot");
+const { width: tableViewportWidth } = useElementSize(tableRootRef);
+const tableRootStyle = computed(() => ({
+  maxHeight: props.maxHeight,
+  "--dms-table-viewport":
+    (isExpandable || !!props.grouping) && tableViewportWidth.value > 0
+      ? `${tableViewportWidth.value}px`
+      : undefined,
+}));
+
+// A clipped cell value reads in full in a native tooltip.
+const syncClippedTitle = (event: MouseEvent) => {
+  const cell = event.currentTarget as HTMLElement;
+  if (cell.scrollWidth > cell.clientWidth) {
+    cell.title = cell.textContent?.trim() ?? "";
+  } else {
+    cell.removeAttribute("title");
+  }
+};
 const paginationState = defineModel<PaginationState>("pagination", {
   default: (): PaginationState => ({
     pageIndex: DEFAULT_PAGE_INDEX,
@@ -383,6 +767,20 @@ const paginationState = defineModel<PaginationState>("pagination", {
   }),
 });
 
+// The first page is on its way: skeleton rows (and placeholders for the
+// counts) hold the list's place instead of its empty state.
+const isFirstPageLoading = computed(
+  () => !!props.loading && !props.data?.length,
+);
+const skeletonRowCount = computed(() =>
+  Math.min(
+    paginationState.value.pageSize || DEFAULT_PAGE_SIZE,
+    SKELETON_MAX_ROW_COUNT,
+  ),
+);
+const skeletonRowOpacity = (rowIndex: number): number =>
+  1 - ((rowIndex - 1) * SKELETON_TOTAL_FADE) / skeletonRowCount.value;
+
 const onResize = (
   event: MouseEvent | TouchEvent,
   header: Header<T, unknown>,
@@ -392,15 +790,61 @@ const onResize = (
 
 const PRESENCE_RAIL_WIDTH = 2;
 const PRESENCE_RAIL_WIDTH_PX = `${PRESENCE_RAIL_WIDTH}px`;
-const PRESENCE_RAIL_ACTIVE_BG = "bg-primary";
+// Someone else editing the row is the violet (AI/collaboration) accent; a row
+// selected here is the cyan one.
+const PRESENCE_RAIL_ACTIVE_BG = "bg-secondary";
+const SELECTION_RAIL_BG = "bg-primary";
 
 const hasPresenceRail = computed(() => props.presenceByRow !== undefined);
+// Cells drawn in front of the columns: the presence rail, the move handle.
+const leadingCellCount = computed(
+  () => (hasPresenceRail.value ? 1 : 0) + (props.reorder ? 1 : 0),
+);
+
+// Moving rows: the row dragged by its handle, dropped on another row; the
+// arrow keys on a handle move its row by one.
+const draggedRowIndex = ref<number | undefined>();
+const dropRow = (index: number) => {
+  const from = draggedRowIndex.value;
+  draggedRowIndex.value = undefined;
+  if (from !== undefined && props.reorder?.enabled) {
+    props.reorder.move(from, index);
+  }
+};
+const stepRow = (index: number, step: number) => {
+  const target = index + step;
+  const count = table.getRowModel().rows.length;
+  if (props.reorder?.enabled && target >= 0 && target < count) {
+    props.reorder.move(index, target);
+  }
+};
+
+// Pinned columns stick only while they cover at most 60% of the visible scroll
+// area: on a phone, labelled row actions or a wide pinned set would otherwise
+// hide every column scrolling under them. The wider side lets go first.
+const PINNED_MAX_VIEWPORT_SHARE = 0.6;
+const stickyPinnedSides = computed(() => {
+  const budget = tableViewportWidth.value * PINNED_MAX_VIEWPORT_SHARE;
+  const left = table.getLeftTotalSize();
+  const right = table.getRightTotalSize();
+  if (!budget || left + right <= budget) return { left: true, right: true };
+  const keepLeft = left < right && left <= budget;
+  const keepRight = left >= right && right <= budget;
+  return { left: keepLeft, right: keepRight };
+});
+
+const getStickyPin = (column: { getIsPinned: () => unknown }) => {
+  const pinned = column.getIsPinned();
+  if (pinned === "left" && stickyPinnedSides.value.left) return "left";
+  if (pinned === "right" && stickyPinnedSides.value.right) return "right";
+  return undefined;
+};
 
 const getPinnedLeftOffset = (column: {
   getIsPinned: () => unknown;
   getStart: (pos: "left") => number;
 }) => {
-  if (column.getIsPinned() !== "left") return undefined;
+  if (getStickyPin(column) !== "left") return undefined;
   const base = column.getStart("left");
   const rail = hasPresenceRail.value ? PRESENCE_RAIL_WIDTH : 0;
   return `${base + rail}px`;
@@ -410,13 +854,43 @@ const getPinnedRightOffset = (column: {
   getIsPinned: () => unknown;
   getAfter: (pos: "right") => number;
 }) => {
-  if (column.getIsPinned() !== "right") return undefined;
+  if (getStickyPin(column) !== "right") return undefined;
   return `${column.getAfter("right")}px`;
 };
 
-const getPinnedVariant = (column: { getIsPinned: () => unknown }) => {
-  const pinned = column.getIsPinned();
-  return pinned === "left" || pinned === "right" ? pinned : undefined;
+const getPinnedVariant = getStickyPin;
+
+// A scrolling column is never wider than the room the sticky columns leave
+// (a 300px identity column on a phone): its content truncates in view
+// instead of running under the pinned actions.
+const MIN_SCROLLING_COLUMN_WIDTH = 120;
+const scrollingColumnMaxWidth = computed(() => {
+  const viewport = tableViewportWidth.value;
+  if (!viewport) return Infinity;
+  const sides = stickyPinnedSides.value;
+  const sticky =
+    (sides.left ? table.getLeftTotalSize() : 0) +
+    (sides.right ? table.getRightTotalSize() : 0) +
+    (hasPresenceRail.value ? PRESENCE_RAIL_WIDTH : 0);
+  return Math.max(viewport - sticky, MIN_SCROLLING_COLUMN_WIDTH);
+});
+
+const getHeaderWidth = (header: Header<T, unknown>): string => {
+  const size = header.getSize();
+  if (getStickyPin(header.column)) return `${size}px`;
+  return `${Math.min(size, scrollingColumnMaxWidth.value)}px`;
+};
+
+// Only a header the list can be sorted on states its order to assistive
+// technologies; the others carry no `aria-sort` at all.
+const headerAriaSort = (
+  column: Header<T, unknown>["column"],
+): "ascending" | "descending" | "none" | undefined => {
+  if (!column.getCanSort()) return undefined;
+  const sorted = column.getIsSorted();
+  if (sorted === "asc") return "ascending";
+  if (sorted === "desc") return "descending";
+  return "none";
 };
 
 const isUsingDefaultSort = computed(() => {
@@ -434,29 +908,144 @@ const uiTableRoot = tv({
   extend: tv(theme),
   ...(appConfig.ui?.table || {}),
 });
-const uiTable = computed(() => uiTableRoot());
+const uiTable = computed(() =>
+  uiTableRoot({
+    density: densityState.value,
+    scrollArea: hasScrollArea.value,
+    scrolled: isScrolled.value,
+    archived: isShowingArchived.value,
+  }),
+);
 
-const { table, labeledColumns, deleteFilter, resetFilters, deleteSorting } =
-  useTable<T>({
-    tableProps: props,
-    emits,
-    states: {
-      globalFilterState,
-      columnFiltersState,
-      columnOrderState,
-      columnVisibilityState,
-      columnPinningState,
-      columnSizingState,
-      rowSelectionState,
-      sortingState,
-      expandedState,
-      paginationState,
-    },
-    ui: uiTable,
-  });
+const {
+  table,
+  declaredColumnOrder,
+  labeledColumns,
+  deleteFilter,
+  deleteSorting,
+} = useTable<T>({
+  tableProps: props,
+  emits,
+  states: {
+    globalFilterState,
+    columnFiltersState,
+    columnOrderState,
+    columnVisibilityState,
+    columnPinningState,
+    columnSizingState,
+    rowSelectionState,
+    sortingState,
+    expandedState,
+    paginationState,
+  },
+  ui: uiTable,
+  expandable: isExpandable,
+  expandedRowDomId,
+  showArchived: props.archiveToggle ? isShowingArchived : undefined,
+  columnMenus: (props.chrome ?? FULL_TABLE_CHROME).columnMenus,
+});
 
 const rowCount = computed(() => props.paginationOptions?.rowCount ?? 0);
 
+type TableRow = ReturnType<typeof table.getRowModel>["rows"][number];
+
+/** A line of the table body: a row, or the header of the group it opens. */
+interface BodyEntry {
+  kind: "row" | "group";
+  id: string;
+  /** The row, or the first row of the group a header opens. */
+  row: TableRow;
+  /** Group key, on a group header. */
+  key?: string;
+  /**
+   * Draws a group header with the grouping it was listed under: a header
+   * still rendering once the grouping is gone reads it, not the prop.
+   */
+  header?: () => VNodeChild;
+}
+
+const GROUP_ENTRY_PREFIX = "group:";
+const collapsedGroups = ref<string[]>([]);
+const toggleGroup = (key: string) => {
+  collapsedGroups.value = collapsedGroups.value.includes(key)
+    ? collapsedGroups.value.filter((collapsed) => collapsed !== key)
+    : [...collapsedGroups.value, key];
+};
+
+const bodyEntries = computed<BodyEntry[]>(() => {
+  const rows = table.getRowModel().rows;
+  const grouping = props.grouping;
+  if (!grouping) return rows.map((row) => ({ kind: "row", id: row.id, row }));
+  const entries: BodyEntry[] = [];
+  let currentKey: string | undefined;
+  for (const row of rows) {
+    const key = grouping.keyOf(row.original);
+    if (key !== currentKey) {
+      currentKey = key;
+      entries.push({
+        kind: "group",
+        id: GROUP_ENTRY_PREFIX + key,
+        row,
+        key,
+        header: () => grouping.header(key, row.original),
+      });
+    }
+    if (!collapsedGroups.value.includes(key)) {
+      entries.push({ kind: "row", id: row.id, row });
+    }
+  }
+  return entries;
+});
+
+const { t, locale } = useI18n();
+
+const formattedRowCount = computed(() =>
+  new Intl.NumberFormat(locale.value).format(rowCount.value),
+);
+
+const captionCountLabel = computed(() =>
+  isShowingArchived.value
+    ? t("dms.table.archived_count", { count: formattedRowCount.value })
+    : formattedRowCount.value,
+);
+
+const hasTabs = computed(() => (props.tabs?.length ?? 0) > 0);
+const hasViewsBand = computed(
+  () => !!slots.views && props.viewsPlacement === "band",
+);
+const hasViewsInHeader = computed(
+  () => !!slots.views && props.viewsPlacement === "header",
+);
+
+const resolvedChrome = computed<ResolvedTableChrome>(
+  () => props.chrome ?? FULL_TABLE_CHROME,
+);
+// Without a caption, the tabs move up into the header band.
+const tabsInline = computed(
+  () => hasTabs.value && !resolvedChrome.value.caption,
+);
+// A button placed in the page header is drawn there, not in the toolbar; it
+// stays pressable by id (header button, quick action).
+const toolbarButtons = computed(() =>
+  (props.customButtons ?? []).filter(
+    (button) => button.placement !== HEADER_PLACEMENT,
+  ),
+);
+const canAddFromToolbar = computed(() => {
+  const add = normalizeActionConfig(props.rowActions?.add);
+  return !!add.isEnabled && add.placement !== HEADER_PLACEMENT;
+});
+
+// The bulk bar shows whenever selected rows have something to go to.
+const hasBulkActions = computed(
+  () =>
+    normalizeActionConfig(props.rowActions?.delete).isEnabled ||
+    normalizeActionConfig(props.rowActions?.archive).isEnabled ||
+    normalizeActionConfig(props.rowActions?.restore).isEnabled ||
+    !!props.canExport ||
+    (props.bulkActions?.length ?? 0) > 0,
+);
+
 // Defined once (stable ref identity) so consumers that capture tableSharedData
 // by value (e.g. Actions.vue via useTableContext) still react when the active
 // display — and thus its capabilities — changes.
@@ -464,7 +1053,31 @@ const resolvedCapabilities = computed<Required<TableViewDisplayCapabilities>>(
   () => props.activeCapabilities ?? DEFAULT_CAPABILITIES,
 );
 
-const baselineColumnOrder = [...columnOrderState.value];
+// The single "clear all" of the table: every clear action goes through it.
+const narrowingState: TableNarrowingState = {
+  columnFilters: columnFiltersState,
+  globalFilter: globalFilterState,
+  pagination: paginationState,
+  searchApplies: computed(() => resolvedCapabilities.value.search),
+};
+const filtersCleared = createEventHook();
+const resetFilters = () => {
+  clearTableFilters(narrowingState);
+  void filtersCleared.trigger();
+};
+const clearableFilters = computed(() => clearableTableFilters(narrowingState));
+const isFiltered = computed(() => isTableNarrowed(narrowingState));
+
+// A partial order (a view's) names some columns: the others follow.
+watch(columnOrderState, (order) => {
+  const merged = mergeColumnOrder(order, declaredColumnOrder);
+  if (!isSameColumnList(merged, order)) columnOrderState.value = merged;
+});
+const baselineColumnOrder = declaredColumnOrder;
+
+function isSameColumnList(a: readonly unknown[], b: readonly unknown[]) {
+  return a.length === b.length && a.every((item, index) => item === b[index]);
+}
 const baselineColumnPinning = JSON.parse(
   JSON.stringify(columnPinningState.value),
 ) as ColumnPinningState;
@@ -476,9 +1089,8 @@ const hasCustomSort = computed(() => {
   return !isUsingDefaultSort.value;
 });
 
-const areArraysEqual = (a: unknown[], b: unknown[]): boolean => {
-  if (a.length !== b.length) return false;
-  return a.every((item, index) => item === b[index]);
+const resetSorting = () => {
+  sortingState.value = defaultSortingState(props.defaultSort);
 };
 
 const arePinningEqual = (
@@ -486,13 +1098,14 @@ const arePinningEqual = (
   b: ColumnPinningState,
 ): boolean => {
   return (
-    areArraysEqual(a.left ?? [], b.left ?? []) &&
-    areArraysEqual(a.right ?? [], b.right ?? [])
+    isSameColumnList(a.left ?? [], b.left ?? []) &&
+    isSameColumnList(a.right ?? [], b.right ?? [])
   );
 };
 
 const hasCustomColumns = computed(() => {
-  if (!areArraysEqual(columnOrderState.value, baselineColumnOrder)) return true;
+  if (!isSameColumnList(columnOrderState.value, baselineColumnOrder))
+    return true;
   if (!arePinningEqual(columnPinningState.value, baselineColumnPinning))
     return true;
 
@@ -527,17 +1140,35 @@ watchEffect(() => {
     labeledColumns,
     customNavItems: props.customNavItems || [],
     hasCustomSort,
+    defaultSort: props.defaultSort,
+    defaultSortLabel: props.defaultSortLabel,
+    defaultSortKind: props.defaultSortKind,
+    isUsingDefaultSort,
+    resetSorting,
     hasCustomColumns,
     deleteFilter,
     resetFilters,
+    clearableFilters,
+    isFiltered,
+    onFiltersCleared: filtersCleared.on,
     deleteSorting,
     rowCount: rowCount.value,
+    firstPageLoading: isFirstPageLoading.value,
     displays: props.displays || [],
     hasDisplaySwitcher: (props.displays?.length ?? 0) > 1,
     activeDisplayState,
     activeCapabilities: resolvedCapabilities,
     kanbanGroupByState,
     kanbanGroupByOptions: props.kanbanGroupByOptions || [],
+    groupedGroupByState,
+    groupedGroupByOptions: props.groupedGroupByOptions || [],
+    showArchivedState,
+    densityState,
+    chrome: resolvedChrome,
+    footer: props.footer,
+    defaultPageSize: props.defaultPageSize,
+    accumulation: props.accumulation,
+    emptyStates: props.emptyStates,
   };
 });
 
@@ -555,8 +1186,6 @@ const handleRowLeave = () => {
   hoveredRowId.value = null;
 };
 
-const { t } = useI18n();
-
 const getRowPresence = (row: T): TableRowPresenceActor[] | undefined => {
   if (!props.presenceByRow) return undefined;
   const id = get(row, rowIdKey) as string | undefined;
@@ -604,39 +1233,127 @@ defineShortcuts({
 
 <template>
   <div :class="uiTable.root()">
-    <header :class="uiTable.header()">
-      <h2 :class="uiTable.caption()">
-        {{ caption }}
-      </h2>
-
-      <TableActions
-        v-model:global-filter="globalFilterState"
-        v-model:column-visibility="columnVisibilityState"
-        v-model:sorting="sortingState"
-        :table
-        :can-add-row="normalizeActionConfig(rowActions?.add).isEnabled"
-        :custom-buttons="customButtons"
-        :on-custom-button="onCustomButton"
+    <template v-if="resolvedCapabilities.header">
+      <header
+        :class="
+          uiTable.header({
+            headerDivided: (!hasTabs && !hasViewsBand) || tabsInline,
+            tabsInline,
+          })
+        "
+      >
+        <TableTabs
+          v-if="tabsInline && tabs"
+          v-model="activeTabId"
+          :tabs="tabs"
+          :label="caption"
+          inline
+        />
+        <h2 v-else-if="resolvedChrome.caption" :class="uiTable.caption()">
+          <span :class="uiTable.captionLabel()" @mouseenter="syncClippedTitle">
+            {{ caption }}
+          </span>
+          <USkeleton
+            v-if="isFirstPageLoading"
+            aria-hidden="true"
+            :class="uiTable.captionCountPlaceholder()"
+          />
+          <span v-else-if="rowCount > 0" :class="uiTable.captionCount()">
+            {{ captionCountLabel }}
+          </span>
+        </h2>
+
+        <slot v-if="hasViewsInHeader" name="views" />
+
+        <TableActions
+          v-model:global-filter="globalFilterState"
+          v-model:column-visibility="columnVisibilityState"
+          v-model:sorting="sortingState"
+          v-model:show-archived="showArchivedState"
+          :table
+          :can-add-row="canAddFromToolbar"
+          :archive-toggle="archiveToggle"
+          :custom-buttons="toolbarButtons"
+          :on-custom-button="onCustomButton"
+          :chrome="resolvedChrome"
+          :search-placeholder="searchPlaceholder"
+          :quick-filters="quickFilters"
+          :class="{
+            'ms-auto': !resolvedChrome.caption && !tabsInline,
+            'py-2': tabsInline,
+          }"
+        />
+      </header>
+
+      <slot v-if="hasViewsBand" name="views" />
+
+      <TableTabs
+        v-if="hasTabs && tabs && !tabsInline"
+        v-model="activeTabId"
+        :tabs="tabs"
       />
-    </header>
 
-    <TableTabs
-      v-if="tabs && tabs.length > 0"
-      v-model="activeTabId"
-      :tabs="tabs"
-    />
-
-    <TableFiltersRow v-if="filtersRowOpen && resolvedCapabilities.filters" />
+      <TableFiltersRow
+        v-if="
+          filtersRowOpen &&
+          resolvedCapabilities.filters &&
+          resolvedChrome.filters
+        "
+      />
 
-    <TableRowSelection
-      v-if="rowActions?.delete || canExport"
-      v-model:row-selection="rowSelectionState"
-      :row-actions="rowActions"
-      :can-export="canExport"
-    />
+      <div
+        v-if="isShowingArchived"
+        role="status"
+        :class="uiTable.archiveStrip()"
+      >
+        <UIcon name="i-ph-archive" :class="uiTable.archiveStripIcon()" />
+        <span :class="uiTable.archiveStripText()">
+          <strong :class="uiTable.archiveStripTitle()">
+            {{ t("dms.table.archive_strip_title") }}
+          </strong>
+          {{ " " }}
+          <span :class="uiTable.archiveStripDescription()">
+            {{ t("dms.table.archive_strip_description") }}
+          </span>
+        </span>
+        <UButton
+          :label="t('dms.table.show_active')"
+          :icon="appConfig.ui.icons.arrowLeft"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :class="uiTable.archiveStripAction()"
+          @click="showArchivedState = false"
+        />
+      </div>
+
+      <TableRowSelection
+        v-if="hasBulkActions"
+        v-model:row-selection="rowSelectionState"
+        v-model:all-matching="allMatchingState"
+        :row-actions="rowActions"
+        :bulk-actions="bulkActions"
+        :total="rowCount"
+        :can-export="canExport"
+        :archived="isShowingArchived"
+      />
+    </template>
 
     <slot name="body" :table="table">
-      <section :class="uiTable.tableRoot()">
+      <section
+        ref="tableRoot"
+        :class="uiTable.tableRoot()"
+        :style="tableRootStyle"
+        @scroll.passive="onTableScroll"
+      >
+        <div
+          v-if="loading && !isFirstPageLoading"
+          aria-hidden="true"
+          :class="uiTable.loadingBar()"
+        >
+          <span :class="uiTable.loadingBarIndicator()" />
+        </div>
+
         <div :class="uiTable.tableBase()">
           <table :class="uiTable.table()">
             <caption v-if="caption" :class="uiTable.tableCaption()">
@@ -653,16 +1370,23 @@ defineShortcuts({
                   :class="[
                     HEADER_MATCH_BG,
                     'border-b-default sticky left-0 z-30 border-b p-0',
+                    hasScrollArea && 'top-0 z-40',
                   ]"
                   :style="{
                     width: PRESENCE_RAIL_WIDTH_PX,
                     minWidth: PRESENCE_RAIL_WIDTH_PX,
                   }"
                 />
+                <th
+                  v-if="reorder"
+                  :class="uiTable.handleHeadCell()"
+                  :aria-label="t('dms.table.reorder.column')"
+                />
                 <th
                   v-for="header in headerGroup.headers"
                   :key="header.id"
                   :colspan="header.colSpan"
+                  :aria-sort="headerAriaSort(header.column)"
                   :data-pinned="header.column.getIsPinned()"
                   :class="
                     uiTable.headCell({
@@ -670,7 +1394,7 @@ defineShortcuts({
                     })
                   "
                   :style="{
-                    width: header.getSize() + 'px',
+                    width: getHeaderWidth(header),
                     left: getPinnedLeftOffset(header.column),
                     right: getPinnedRightOffset(header.column),
                   }"
@@ -703,100 +1427,197 @@ defineShortcuts({
 
             <tbody>
               <template v-if="table.getRowModel().rows?.length">
-                <template v-for="row in table.getRowModel().rows" :key="row.id">
-                  <tr
-                    :data-selected="row.getIsSelected()"
-                    :data-expanded="row.getIsExpanded()"
-                    :data-presence="!!getRowPresence(row.original)"
-                    :title="
-                      getRowPresence(row.original)
-                        ? presenceTooltipText(getRowPresence(row.original)!)
-                        : undefined
-                    "
-                    :class="
-                      uiTable.row({
-                        loading,
-                        rowClickable: isRowClickable(row.original),
-                        presence: !!getRowPresence(row.original),
-                      })
-                    "
-                    @dblclick="handleRowDoubleClick(row.original)"
-                    @mouseenter="handleRowHover(row)"
-                    @mouseleave="handleRowLeave"
-                  >
-                    <td
-                      v-if="hasPresenceRail"
-                      :class="[
-                        'border-b-muted sticky left-0 z-30 border-b p-0 in-[tr:last-child]:border-b-0',
-                        presenceRailBackground(row.original),
-                      ]"
-                      :style="{
-                        width: PRESENCE_RAIL_WIDTH_PX,
-                        minWidth: PRESENCE_RAIL_WIDTH_PX,
-                      }"
-                    />
+                <template
+                  v-for="{ kind, id, row, key, header } in bodyEntries"
+                  :key="id"
+                >
+                  <tr v-if="kind === 'group' && grouping">
                     <td
-                      v-for="cell in row.getVisibleCells()"
-                      :key="cell.id"
-                      :data-pinned="cell.column.getIsPinned()"
+                      :colspan="row.getVisibleCells().length + leadingCellCount"
+                      :class="uiTable.groupCell()"
+                    >
+                      <div :class="uiTable.groupHeader()">
+                        <component
+                          :is="grouping.collapsible ? 'button' : 'span'"
+                          :type="grouping.collapsible ? 'button' : undefined"
+                          :aria-expanded="
+                            grouping.collapsible
+                              ? !collapsedGroups.includes(key!)
+                              : undefined
+                          "
+                          :class="uiTable.groupToggle()"
+                          @click="grouping.collapsible && toggleGroup(key!)"
+                        >
+                          <UIcon
+                            v-if="grouping.collapsible"
+                            :name="
+                              collapsedGroups.includes(key!)
+                                ? 'i-ph-caret-right'
+                                : 'i-ph-caret-down'
+                            "
+                            class="size-3"
+                          />
+                          <component :is="header" />
+                        </component>
+                        <span
+                          v-if="grouping.countOf?.(key!) !== undefined"
+                          :class="uiTable.groupCount()"
+                        >
+                          {{ grouping.countOf(key!) }}
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                  <template v-else>
+                    <tr
+                      :data-selected="row.getIsSelected()"
+                      :data-expanded="row.getIsExpanded()"
+                      :data-presence="!!getRowPresence(row.original)"
+                      :title="
+                        getRowPresence(row.original)
+                          ? presenceTooltipText(getRowPresence(row.original)!)
+                          : undefined
+                      "
                       :class="
-                        uiTable.rowCell({
-                          pinned: getPinnedVariant(cell.column),
+                        uiTable.row({
                           loading,
                           rowClickable: isRowClickable(row.original),
+                          presence: !!getRowPresence(row.original),
                         })
                       "
-                      :style="{
-                        left: getPinnedLeftOffset(cell.column),
-                        right: getPinnedRightOffset(cell.column),
-                      }"
+                      @dblclick="handleRowDoubleClick(row.original)"
+                      @mouseenter="handleRowHover(row)"
+                      @mouseleave="handleRowLeave"
+                      @dragover="reorder?.enabled && $event.preventDefault()"
+                      @drop="dropRow(row.index)"
                     >
-                      <div :class="uiTable.rowContainer()">
-                        <div :class="uiTable.rowInternal({ loading })">
-                          <slot
-                            :name="`${cell.column.id}-cell`"
-                            v-bind="cell.getContext()"
-                          >
-                            <div
-                              :class="
-                                uiTable.rowSpan({
-                                  cellWrap: (
-                                    cell.column.columnDef as TableColumn<T>
-                                  ).cellWrap,
-                                })
-                              "
+                      <td
+                        v-if="hasPresenceRail"
+                        :class="[
+                          'border-b-muted sticky left-0 z-30 border-b p-0 in-[tr:last-child]:border-b-0',
+                          row.getIsSelected() && !getRowPresence(row.original)
+                            ? SELECTION_RAIL_BG
+                            : presenceRailBackground(row.original),
+                        ]"
+                        :style="{
+                          width: PRESENCE_RAIL_WIDTH_PX,
+                          minWidth: PRESENCE_RAIL_WIDTH_PX,
+                        }"
+                      />
+                      <td v-if="reorder" :class="uiTable.handleCell()">
+                        <button
+                          type="button"
+                          :draggable="reorder.enabled"
+                          :disabled="!reorder.enabled"
+                          :aria-label="t('dms.table.reorder.move')"
+                          :title="
+                            reorder.enabled
+                              ? t('dms.table.reorder.move')
+                              : t('dms.table.reorder.disabled')
+                          "
+                          :class="uiTable.handle()"
+                          @dragstart="draggedRowIndex = row.index"
+                          @dragend="draggedRowIndex = undefined"
+                          @keydown.up.prevent="stepRow(row.index, -1)"
+                          @keydown.down.prevent="stepRow(row.index, 1)"
+                        >
+                          <UIcon name="i-ph-dots-six-vertical" />
+                        </button>
+                      </td>
+                      <td
+                        v-for="cell in row.getVisibleCells()"
+                        :key="cell.id"
+                        :data-pinned="cell.column.getIsPinned()"
+                        :class="
+                          uiTable.rowCell({
+                            pinned: getPinnedVariant(cell.column),
+                            loading,
+                            rowClickable: isRowClickable(row.original),
+                          })
+                        "
+                        :style="{
+                          left: getPinnedLeftOffset(cell.column),
+                          right: getPinnedRightOffset(cell.column),
+                        }"
+                      >
+                        <div :class="uiTable.rowContainer()">
+                          <div :class="uiTable.rowInternal({ loading })">
+                            <slot
+                              :name="`${cell.column.id}-cell`"
+                              v-bind="cell.getContext()"
                             >
-                              <FlexRender
-                                :render="cell.column.columnDef.cell"
-                                :props="cell.getContext()"
-                              />
-                            </div>
-                          </slot>
+                              <div
+                                :class="
+                                  uiTable.rowSpan({
+                                    cellWrap: (
+                                      cell.column.columnDef as TableColumn<T>
+                                    ).cellWrap,
+                                  })
+                                "
+                                @mouseenter="syncClippedTitle"
+                              >
+                                <FlexRender
+                                  :render="cell.column.columnDef.cell"
+                                  :props="cell.getContext()"
+                                />
+                              </div>
+                            </slot>
+                          </div>
                         </div>
-
-                        <USkeleton
-                          v-show="loading"
-                          :class="uiTable.skeletonTd()"
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                  <tr v-if="row.getIsExpanded()">
-                    <td
-                      :colspan="
-                        row.getAllCells().length + (hasPresenceRail ? 1 : 0)
-                      "
+                      </td>
+                    </tr>
+                    <tr
+                      v-if="row.getIsExpanded()"
+                      :id="expandedRowDomId(row.id)"
                     >
-                      <slot name="expanded" :row="row" />
-                    </td>
-                  </tr>
+                      <td
+                        :colspan="
+                          row.getVisibleCells().length + leadingCellCount
+                        "
+                        :class="uiTable.expandedCell()"
+                      >
+                        <div :class="uiTable.expandedBody()">
+                          <slot name="expanded" :row="row" />
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
                 </template>
               </template>
+              <!-- First load: skeleton rows keep the column rhythm instead of
+                flashing the empty state. -->
+              <template v-else-if="loading">
+                <tr
+                  v-for="rowIndex in skeletonRowCount"
+                  :key="`skeleton-${rowIndex}`"
+                  aria-hidden="true"
+                  :class="uiTable.skeletonRow()"
+                  :style="{ opacity: skeletonRowOpacity(rowIndex) }"
+                >
+                  <td
+                    v-if="hasPresenceRail"
+                    class="border-b-muted border-b p-0 in-[tr:last-child]:border-b-0"
+                  />
+                  <td v-if="reorder" :class="uiTable.handleCell()" />
+                  <td
+                    v-for="(
+                      column, columnIndex
+                    ) in table.getVisibleLeafColumns()"
+                    :key="column.id"
+                    :class="uiTable.rowCell()"
+                  >
+                    <USkeleton
+                      v-if="column.columnDef.meta"
+                      :class="uiTable.skeletonCell()"
+                      :style="{ width: skeletonWidth(rowIndex, columnIndex) }"
+                    />
+                  </td>
+                </tr>
+              </template>
               <tr v-else>
                 <td
                   :colspan="
-                    table.getVisibleLeafColumns().length +
-                    (hasPresenceRail ? 1 : 0)
+                    table.getVisibleLeafColumns().length + leadingCellCount
                   "
                   class="p-0"
                 >
@@ -805,6 +1626,8 @@ defineShortcuts({
                       normalizeActionConfig(rowActions?.add).isEnabled
                     "
                     :load-error="loadError"
+                    :archived="isShowingArchived"
+                    :empty-states="emptyStates"
                   />
                 </td>
               </tr>