@revenexx/studio-shared 0.3.2 → 0.4.0

package/dist/runtime/components/DataTable/DataTable.vue

@@ -3,6 +3,7 @@ import {
   Eye,
   EyeClosed,
   Filter,
+  HamburgerMenu as DragHandle,
   ListArrowDownMinimalistic,
   Magnifier as Search,
   SidebarMinimalistic,
@@ -19,7 +20,12 @@ import {
 import { orderColumnsBy } from "../../lib/columnOrder";
 import { initiallyHidden, visibleColumnsOf } from "../../lib/columnVisibility";
 import { countByValue, matchesFilter } from "../../lib/dataTableFilters";
+import { gridTemplateColumns } from "../../lib/gridTracks";
+const RIGHT_ALIGNED = "text-right pr-4";
+import { dropEdge, dropTargetIndex, moveKey, stepTarget } from "../../lib/rowMove";
 import SortHeader from "../Shared/SortHeader.vue";
+import FacetChips from "./FacetChips.vue";
+import FacetPanel from "./FacetPanel.vue";
 import FilterMenu from "./FilterMenu.vue";
 import SavedViewsMenu from "./SavedViewsMenu.vue";
 import SortMenu from "./SortMenu.vue";
@@ -31,10 +37,12 @@ const props = defineProps({
   columnsMenu: { type: Boolean, required: false, default: true },
   filter: { type: [Boolean, Object], required: false, default: false },
   filterTabs: { type: [Object, Array], required: false },
+  facets: { type: Array, required: false, default: () => [] },
+  chipFacetLabels: { type: Boolean, required: false, default: false },
   savedViews: { type: [Object, null], required: false, default: null },
   viewModes: { type: [Array, null], required: false, default: null },
   rail: { type: [Boolean, Object], required: false, default: false },
-  scrollBody: { type: [Boolean, Object], required: false },
+  scrollBody: { type: [Boolean, String, Object], required: false },
   pagination: { type: [Boolean, Object], required: false, default: true },
   defaultSort: { type: Object, required: false },
   serverMode: { type: Boolean, required: false, default: false },
@@ -42,9 +50,13 @@ const props = defineProps({
   loading: { type: Boolean, required: false, default: false },
   emptyText: { type: String, required: false },
   groupBy: { type: [Function, null], required: false, default: null },
-  groupEmptyLabel: { type: String, required: false }
+  groupEmptyLabel: { type: String, required: false },
+  activeRowKey: { type: [String, Number, null], required: false },
+  rowClass: { type: [Function, null], required: false, default: null },
+  reorderable: { type: Boolean, required: false, default: false },
+  reorderDisabled: { type: [String, null], required: false, default: null }
 });
-const emit = defineEmits(["rowClick", "stateChange"]);
+const emit = defineEmits(["rowClick", "stateChange", "orderChange", "rowMove"]);
 const t = useT();
 const query = ref("");
 const sort = defineModel("sort", { type: Object, ...{
@@ -56,6 +68,8 @@ const sort = defineModel("sort", { type: Object, ...{
 const page = defineModel("page", { type: Number, ...{ default: 0 } });
 const viewMode = defineModel("viewMode", { type: String, ...{ default: "list" } });
 const railOpen = defineModel("railOpen", { type: Boolean, ...{ default: true } });
+const facetSelection = defineModel("facetSelection", { type: Object, ...{ default: () => ({}) } });
+const panelFacets = computed(() => props.facets);
 if (props.defaultSort && sort.value.column == null) {
   sort.value = { column: props.defaultSort.column, direction: props.defaultSort.direction };
 }
@@ -157,9 +171,24 @@ const sorted = computed(() => {
     return 0;
   });
 });
+watch(sorted, (rows) => emit("orderChange", rows.map(rowKeyFor)), { immediate: true });
 const totalCount = computed(
   () => props.serverMode ? props.total ?? props.data.length : sorted.value.length
 );
+const activeNarrowing = computed(() => filterDims.value.map((d) => ({
+  label: d.label,
+  values: (activeFilters.value[d.key] ?? []).map((v) => d.options.find((o) => o.value === v)?.label ?? v)
+})).filter((d) => d.values.length > 0));
+function clearNarrowing() {
+  query.value = "";
+  activeFilters.value = {};
+  facetSelection.value = {};
+}
+const liveStatus = computed(() => {
+  if (!showTable.value) return "";
+  if (props.loading) return t("shared.datatable.state.loading");
+  return totalCount.value === 0 ? t("shared.datatable.footer.noresults") : t("shared.datatable.footer.showing", { start: rangeStart.value, end: rangeEnd.value, total: totalCount.value });
+});
 const paginated = computed(() => {
   if (props.serverMode || !props.pagination) return sorted.value;
   const start = page.value * pageSize.value;
@@ -233,10 +262,8 @@ function rowKeyFor(row) {
   if (typeof props.rowKey === "function") return props.rowKey(row);
   return row[props.rowKey];
 }
-const gridTemplate = computed(() => {
-  const tracks = visibleColumns.value.map((c) => c.width ?? "minmax(0,1fr)");
-  return `grid-template-columns: ${tracks.join(" ")};`;
-});
+const gridTemplate = computed(() => `grid-template-columns: ${gridTemplateColumns(renderColumns.value.map((c) => c.width))};`);
+const SUBGRID_ROW = "grid-column: 1 / -1; grid-template-columns: subgrid;";
 const placeholder = computed(
   () => typeof props.search === "object" ? props.search.placeholder ?? t("shared.datatable.toolbar.search.placeholder.default") : t("shared.datatable.toolbar.search.placeholder.default")
 );
@@ -249,7 +276,7 @@ const showToolbar = computed(
   () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!props.savedViews || !!props.viewModes?.length || !!props.rail || !!slots.actions || !!slots.scope || !!slots["toolbar-left"] || !!slots["toolbar-right"]
 );
 const railLabel = computed(
-  () => (typeof props.rail === "object" ? props.rail.label : void 0) ?? t("shared.datatable.toolbar.rail.label.default")
+  () => (typeof props.rail === "object" ? props.rail.label : void 0) ?? null
 );
 const showTable = computed(() => !props.viewModes?.length || viewMode.value === "list");
 const sortableColumns = computed(() => props.columns.filter((c) => c.sortable));
@@ -257,8 +284,121 @@ const showSortMenu = computed(() => !showTable.value && sortableColumns.value.le
 function cellIconFor(col) {
   return col.cellIcon ?? null;
 }
+const scrollEl = ref(null);
+const footerEl = ref(null);
+const fitHeight = ref(null);
+const MIN_FIT_PX = 220;
+const BOTTOM_GAP_PX = 16;
+function scrollParent(el) {
+  let node = el.parentElement;
+  while (node && node !== document.body) {
+    const overflow = getComputedStyle(node).overflowY;
+    if (overflow === "auto" || overflow === "scroll") return node;
+    node = node.parentElement;
+  }
+  return document.documentElement;
+}
+function measureFit() {
+  if (props.scrollBody !== "fit" || !import.meta.client) return;
+  const el = scrollEl.value;
+  if (!el) return;
+  const container = scrollParent(el);
+  const offset = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+  const reserve = (footerEl.value?.offsetHeight ?? 0) + BOTTOM_GAP_PX;
+  const overflow = Math.max(container.scrollHeight - container.clientHeight, 0);
+  const available = Math.max(
+    Math.floor(container.clientHeight - offset - reserve - overflow) - 1,
+    MIN_FIT_PX
+  );
+  const current = fitHeight.value ? Number.parseInt(fitHeight.value, 10) : null;
+  if (current !== null && Math.abs(current - available) < 8) return;
+  fitHeight.value = `${available}px`;
+}
+if (import.meta.client) {
+  let frame = 0;
+  let timers = [];
+  const schedule = () => {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      measureFit();
+    });
+  };
+  onMounted(() => {
+    measureFit();
+    window.addEventListener("resize", schedule);
+    timers = [setTimeout(schedule, 250), setTimeout(schedule, 1200)];
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", schedule);
+    for (const timer of timers) clearTimeout(timer);
+    timers = [];
+    if (frame) cancelAnimationFrame(frame);
+  });
+  watch(() => [props.data.length, props.loading], () => nextTick(() => {
+    schedule();
+    syncThumb();
+  }));
+  onMounted(() => {
+    nextTick(syncThumb);
+    window.addEventListener("resize", syncThumb);
+  });
+  onBeforeUnmount(() => window.removeEventListener("resize", syncThumb));
+  watch(fitHeight, () => nextTick(syncThumb));
+}
+const headerRowEl = ref(null);
+const headerHeight = ref(0);
+const rowsOverflow = ref(false);
+const thumbHeight = ref(0);
+const thumbOffset = ref(0);
+const MIN_THUMB_PX = 32;
+const drawnBarSupported = import.meta.client && typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("selector(::-webkit-scrollbar)");
+function syncThumb() {
+  const el = scrollEl.value;
+  if (!props.scrollBody || !el) return;
+  headerHeight.value = headerRowEl.value?.offsetHeight ?? 0;
+  const trackHeight = el.clientHeight - headerHeight.value;
+  const scrollable = el.scrollHeight - el.clientHeight;
+  rowsOverflow.value = drawnBarSupported && scrollable > 1 && trackHeight > MIN_THUMB_PX;
+  if (!rowsOverflow.value) return;
+  const ratio = el.clientHeight / el.scrollHeight;
+  const height = Math.max(Math.round(trackHeight * ratio), MIN_THUMB_PX);
+  thumbHeight.value = height;
+  thumbOffset.value = Math.round(el.scrollTop / scrollable * (trackHeight - height));
+}
+function onRowsScroll() {
+  syncThumb();
+}
+function startThumbDrag(event) {
+  const el = scrollEl.value;
+  if (!el) return;
+  event.preventDefault();
+  const startY = event.clientY;
+  const startScroll = el.scrollTop;
+  const trackHeight = el.clientHeight - headerHeight.value;
+  const scrollable = el.scrollHeight - el.clientHeight;
+  const travel = trackHeight - thumbHeight.value;
+  if (travel <= 0) return;
+  const target = event.target;
+  target.setPointerCapture(event.pointerId);
+  const move = (e) => {
+    el.scrollTop = startScroll + (e.clientY - startY) / travel * scrollable;
+  };
+  const up = (e) => {
+    target.releasePointerCapture(e.pointerId);
+    target.removeEventListener("pointermove", move);
+    target.removeEventListener("pointerup", up);
+    target.removeEventListener("pointercancel", up);
+  };
+  target.addEventListener("pointermove", move);
+  target.addEventListener("pointerup", up);
+  target.addEventListener("pointercancel", up);
+}
 const scrollStyle = computed(() => {
   if (!props.scrollBody) return void 0;
+  if (props.scrollBody === "fit") {
+    return fitHeight.value ? { maxHeight: fitHeight.value } : void 0;
+  }
   const configured = typeof props.scrollBody === "object" ? props.scrollBody.maxHeight : void 0;
   return { maxHeight: configured ?? "calc(100vh - 22rem)" };
 });
@@ -276,6 +416,88 @@ function prevPage() {
 function nextPage() {
   if (page.value < lastPage.value) page.value += 1;
 }
+const MOVE_COLUMN = "__move";
+const renderColumns = computed(() => props.reorderable ? [{ key: MOVE_COLUMN, label: "", width: "max-content" }, ...visibleColumns.value] : visibleColumns.value);
+const reorderBlocked = computed(() => {
+  if (!props.reorderable) return null;
+  if (props.reorderDisabled) return props.reorderDisabled;
+  if (!props.serverMode && query.value.trim()) return t("shared.datatable.reorder.blocked.search");
+  if (Object.values(activeFilters.value).some((v) => v.length)) return t("shared.datatable.reorder.blocked.filter");
+  if (props.groupBy) return t("shared.datatable.reorder.blocked.group");
+  return null;
+});
+const dragKey = ref(null);
+const dropAt = ref(null);
+const moveStatus = ref("");
+function orderedKeys() {
+  return sorted.value.map(rowKeyFor);
+}
+function commitMove(keys, from, to) {
+  emit("rowMove", { key: keys[from], from, to, keys: moveKey(keys, from, to) });
+  moveStatus.value = t("shared.datatable.reorder.moved", { position: to + 1, total: keys.length });
+}
+function finishDrag() {
+  dragKey.value = null;
+  dropAt.value = null;
+}
+function onHandleDragStart(event, row) {
+  if (reorderBlocked.value) {
+    event.preventDefault();
+    return;
+  }
+  const key = rowKeyFor(row);
+  dragKey.value = key;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(key));
+    const rowEl = event.target?.closest('[role="row"]');
+    if (rowEl) event.dataTransfer.setDragImage(rowEl, 16, 16);
+  }
+}
+function onRowDragOver(event, row) {
+  if (dragKey.value == null) return;
+  event.preventDefault();
+  if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+  const rect = event.currentTarget.getBoundingClientRect();
+  dropAt.value = { key: rowKeyFor(row), edge: dropEdge(event.clientY, rect.top, rect.height) };
+}
+function onRowDrop(event, row) {
+  if (dragKey.value == null) return;
+  event.preventDefault();
+  const keys = orderedKeys();
+  const from = keys.indexOf(dragKey.value);
+  const target = keys.indexOf(rowKeyFor(row));
+  const edge = dropAt.value?.edge ?? "before";
+  finishDrag();
+  const to = dropTargetIndex(from, target, edge);
+  if (to !== null) commitMove(keys, from, to);
+}
+function onHandleKeydown(event, row) {
+  if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+  event.preventDefault();
+  if (reorderBlocked.value) return;
+  const keys = orderedKeys();
+  const key = rowKeyFor(row);
+  const from = keys.indexOf(key);
+  const to = stepTarget(from, event.key === "ArrowUp" ? -1 : 1, keys.length);
+  if (to === null) return;
+  commitMove(keys, from, to);
+  const handle = event.currentTarget;
+  const root = handle.closest('[role="table"]');
+  void nextTick(() => setTimeout(() => {
+    const again = root?.querySelector(`[data-move-key="${CSS.escape(String(key))}"]`);
+    again?.focus();
+  }, 0));
+}
+function dropClass(row) {
+  const at = dropAt.value;
+  if (!at || dragKey.value == null || at.key !== rowKeyFor(row)) return "";
+  return at.edge === "before" ? "shadow-[inset_0_2px_0_0_var(--color-primary)]" : "shadow-[inset_0_-2px_0_0_var(--color-primary)]";
+}
+function rowGround(row) {
+  if (props.activeRowKey != null && rowKeyFor(row) === props.activeRowKey) return "bg-primary/[0.06]";
+  return props.rowClass?.(row) || "bg-gray-50";
+}
 function defaultCell(col, row) {
   const v = col.sortGetter ? col.sortGetter(row) : row[col.key];
   if (v == null) return "\u2014";
@@ -329,13 +551,16 @@ function defaultCell(col, row) {
           variant="outline"
           size="sm"
           class="h-7 shrink-0 gap-1.5 text-sm"
-          :class="railOpen ? 'border-primary/30 text-primary' : ''"
+          :class="[
+  railOpen ? 'border-primary/30 text-primary' : '',
+  railLabel ? '' : 'w-7 px-0 justify-center'
+]"
           :aria-pressed="railOpen"
-          :aria-label="railOpen ? t('shared.datatable.toolbar.rail.aria.hide', { label: railLabel }) : t('shared.datatable.toolbar.rail.aria.show', { label: railLabel })"
+          :aria-label="railLabel ? railOpen ? t('shared.datatable.toolbar.rail.aria.hide', { label: railLabel }) : t('shared.datatable.toolbar.rail.aria.show', { label: railLabel }) : railOpen ? t('shared.datatable.toolbar.rail.aria.hideUnnamed') : t('shared.datatable.toolbar.rail.aria.showUnnamed')"
           @click="railOpen = !railOpen"
         >
           <SidebarMinimalistic :size="14" />
-          {{ railLabel }}
+          <template v-if="railLabel">{{ railLabel }}</template>
         </Button>
         <!-- Shrinks (never wraps the row) once the toolbar carries scope /
              view-mode / saved-view controls next to it.
@@ -384,8 +609,20 @@ function defaultCell(col, row) {
             <Filter :size="14" weight="BoldDuotone" />
           </template>
         </FilterPanel>
+        <!--
+          The one filter control, for a surface that owns its own query.
+
+          Drawn in the same slot as the other two so a surface never shows two
+          filter triggers: `facets` and `filter` are alternatives, and
+          `filterTabs` is the in-memory path this replaces.
+        -->
+        <FacetPanel
+          v-if="panelFacets.length"
+          v-model="facetSelection"
+          :facets="facets"
+        />
         <FilterMenu
-          v-if="filter"
+          v-if="filter && !panelFacets.length"
           :width="typeof filter === 'object' ? filter.width : void 0"
           :active="typeof filter === 'object' ? filter.active : void 0"
           :count="typeof filter === 'object' ? filter.count : void 0"
@@ -422,23 +659,51 @@ function defaultCell(col, row) {
             <EyeClosed :size="16" weight="Linear" />
           </template>
         </ColumnPicker>
+        <!--
+          Saved views, beside the columns picker rather than out past the market
+          scope and the view-mode switch.
+
+          It belongs with what it saves. Filters, sort and columns are the three
+          things a view is made of, so the control that names one sits at the end
+          of that group — not after the market scope, which is not part of a
+          view, or the view-mode switch, which is about what you are looking at.
+        -->
+        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
         <!-- Market scope — the surface passes the shared MarketScopeToggle in;
              the row position is fixed here. -->
         <slot name="scope" />
         <!-- The editor's device switch, which is the right shape wherever the
              choice changes what you are LOOKING AT rather than which rows. -->
         <SegmentedToggle v-if="viewModes?.length" v-model="viewMode" variant="inset">
+          <!--
+            Violet on hover, and violet while it is the one in effect — the
+            same language the filter trigger, the column picker and the saved
+            views speak two controls to the left. The track's own variant only
+            lifts the active segment onto a white pill, which says WHICH is
+            picked but not that the row is a set of live controls.
+
+            The hover is written against `data-[state=off]` and marked
+            important because the design system's own toggle already ships
+            `data-[state=off]:hover:text-foreground`. A plain `hover:` loses to
+            it on specificity, and matching the specificity alone would leave
+            the winner to whatever order Tailwind happened to emit the two
+            utilities in — a coin toss that reads as a bug the day it lands the
+            other way. Delete the `!` if the toggle's own hover ever goes violet.
+
+            `aria-label` because these are icon-only: the mode still has to
+            announce itself.
+          -->
           <SegmentedToggleItem
             v-for="m in viewModes"
             :key="m.value"
             :value="m.value"
             :aria-label="m.label"
+            class="transition-colors data-[state=on]:text-primary data-[state=off]:hover:text-primary!"
           >
             <component :is="m.icon" v-if="m.icon" :size="14" weight="Bold" />
             <template v-if="!m.icon">{{ m.label }}</template>
           </SegmentedToggleItem>
         </SegmentedToggle>
-        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
         <slot name="toolbar-left" />
       </div>
       <div class="flex items-center gap-2 ml-auto shrink-0">
@@ -447,15 +712,40 @@ function defaultCell(col, row) {
       </div>
     </div>
 
+    <!--
+      What is filtering right now. Not optional beside a paned panel: with it
+      closed, a count on an icon says that something narrows the list and never
+      what.
+    -->
+    <FacetChips
+      v-if="facets.length"
+      v-model="facetSelection"
+      :facets="facets"
+      :show-facet="chipFacetLabels"
+    />
+
     <!-- Alternate view mode (gallery, board, …) — same toolbar, same footer. -->
     <div v-if="!showTable" class="border-t border-black/[0.04] bg-white/55">
       <slot name="view" :rows="displayedRows" :loading="loading" />
     </div>
 
-    <!-- The header and the rows share one box so their columns cannot drift.
-         `display: contents` when scrolling is off makes this element vanish
-         from layout entirely, so every table that has not asked for it renders
-         exactly as it did.
+    <!-- Two boxes: one that scrolls, and the table itself.
+
+         The table is ONE GRID and the rows are subgrids of it (`SUBGRID_ROW`),
+         which is what keeps a heading over its own column. It used to be a grid
+         per row, and a content-sized track then measured itself separately in
+         each one — see `SUBGRID_ROW` for what that did to every list with row
+         actions.
+
+         The scrolling is the outer box's job, and it has to be, because the
+         grid carries `min-w-min`: a box that grows to its own content cannot
+         also be the thing that scrolls it. The panel around them clips
+         (`overflow-hidden`, for the rounded corners), so without this a table
+         whose declared widths outgrow the panel simply lost the excess.
+
+         The inner element used to be `display: contents` when scrolling was
+         off, which made it vanish from layout — and a box that is not in the
+         layout can be neither a grid nor a scroller.
 
          IT IS ALSO THE TABLE. The box that holds the header and the rows and
          nothing else is the only element in this component that can carry the
@@ -470,20 +760,33 @@ function defaultCell(col, row) {
          that. A static table read with a screen reader's own table commands is
          what these lists actually are, and both roles announce the column
          heading with the cell, which is the thing that was missing. -->
+    <div :class="scrollBody ? 'relative flex min-h-0 flex-col' : ''">
     <div
-      :role="showTable ? 'table' : void 0"
-      :aria-busy="showTable && loading ? 'true' : void 0"
-      :class="scrollBody ? 'min-h-0 overflow-y-auto' : 'contents'"
+      ref="scrollEl"
+      :class="scrollBody ? 'rx-rows min-h-0 overflow-auto' : 'overflow-x-auto'"
       :style="scrollStyle"
+      @scroll="onRowsScroll"
     >
+      <div
+        :role="showTable ? 'table' : void 0"
+        :aria-busy="showTable && loading ? 'true' : void 0"
+        :class="showTable ? 'grid min-w-min gap-x-2' : ''"
+        :style="showTable ? gridTemplate : void 0"
+      >
     <!-- Header row -------------------------------------------------- -->
     <div
       v-if="showTable"
+      ref="headerRowEl"
       role="row"
-      class="grid items-center gap-2 border-t rounded-t-lg border-gray-200 bg-gray-100 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
+      class="grid items-center gap-x-2 border-t rounded-t-lg border-gray-200 bg-gray-100 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
       :class="scrollBody ? 'sticky top-0 z-10' : ''"
-      :style="gridTemplate"
+      :style="SUBGRID_ROW"
     >
+      <!-- The handle column's heading: nothing to see, but a columnheader the
+           handles' cells can be named by. -->
+      <div v-if="reorderable" role="columnheader" class="w-6">
+        <span class="sr-only">{{ t("shared.datatable.reorder.column") }}</span>
+      </div>
       <!-- `columnheader` is what names every cell underneath it, so this is
            the half of the fix that does the work. `aria-sort` goes with it:
            a heading that carries a sort button and says nothing about the
@@ -494,7 +797,9 @@ function defaultCell(col, row) {
         :key="col.key"
         role="columnheader"
         :aria-sort="ariaSortFor(col)"
-        :class="col.alignRight ? 'text-right' : ''"
+        :title="col.label || void 0"
+        class="min-w-0"
+        :class="col.alignRight ? RIGHT_ALIGNED : ''"
       >
         <!-- `#header-<key>` lets a page take over a header cell (e.g. a
              select-all checkbox in a selection column). Default: sortable
@@ -514,7 +819,7 @@ function defaultCell(col, row) {
                the row's uppercase. Without it a column reads "LAST CHECK"
                beside "Channel" and "Provider" for no reason a reader can see —
                the header shouts wherever a column happens not to be sortable. -->
-          <span v-else class="normal-case">{{ col.label }}</span>
+          <span v-else class="block truncate normal-case">{{ col.label }}</span>
         </slot>
       </div>
     </div>
@@ -527,9 +832,12 @@ function defaultCell(col, row) {
       <div
         v-if="entry.kind === 'header'"
         role="row"
-        class="border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+        class="col-[1/-1] border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
       >
-        <div role="cell" :aria-colspan="visibleColumns.length" class="flex items-center gap-2">
+        <!-- Spans every column like the rows do, so a table wide enough to
+             scroll does not show this band stopping short of the rows it
+             groups. No subgrid: it holds one cell, not a set of columns. -->
+        <div role="cell" :aria-colspan="renderColumns.length" class="flex items-center gap-2">
           {{ entry.label }}
           <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
         </div>
@@ -537,16 +845,40 @@ function defaultCell(col, row) {
       <div
         v-else
         role="row"
-        class="group grid items-center gap-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer bg-gray-50 transition-colors"
-        :style="gridTemplate"
+        class="group grid items-center gap-x-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer transition-colors"
+        :class="[rowGround(entry.row), dropClass(entry.row), dragKey != null && dragKey === rowKeyFor(entry.row) ? 'opacity-50' : '']"
+        :aria-current="activeRowKey != null && rowKeyFor(entry.row) === activeRowKey ? 'true' : void 0"
+        :style="SUBGRID_ROW"
         @click="emit('rowClick', entry.row)"
+        @dragover="onRowDragOver($event, entry.row)"
+        @drop="onRowDrop($event, entry.row)"
       >
+        <!-- The grip. A button, so it is reachable and the arrow keys can move
+             the row; `draggable` on it rather than on the row, so selecting a
+             cell's text or clicking an inline input never starts a drag. -->
+        <div v-if="reorderable" role="cell" class="flex items-center" @click.stop>
+          <button
+            type="button"
+            :data-move-key="String(rowKeyFor(entry.row))"
+            :draggable="!reorderBlocked"
+            :aria-disabled="reorderBlocked ? 'true' : void 0"
+            :aria-label="t('shared.datatable.reorder.handle')"
+            :title="reorderBlocked ?? t('shared.datatable.reorder.hint')"
+            class="inline-flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors"
+            :class="reorderBlocked ? 'cursor-not-allowed opacity-30' : 'cursor-grab hover:bg-muted hover:text-primary active:cursor-grabbing'"
+            @dragstart="onHandleDragStart($event, entry.row)"
+            @dragend="finishDrag"
+            @keydown="onHandleKeydown($event, entry.row)"
+          >
+            <DragHandle :size="14" weight="Linear" />
+          </button>
+        </div>
         <div
           v-for="col in visibleColumns"
           :key="col.key"
           role="cell"
           class="min-w-0"
-          :class="col.alignRight ? 'text-right' : ''"
+          :class="col.alignRight ? RIGHT_ALIGNED : ''"
         >
           <slot :name="`cell-${col.key}`" :row="entry.row">
             <!-- Primary column: bold record anchor + optional tinted icon tile. -->
@@ -578,11 +910,11 @@ function defaultCell(col, row) {
         v-for="n in 6"
         :key="`sk-${n}`"
         aria-hidden="true"
-        class="grid items-center gap-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
-        :style="gridTemplate"
+        class="grid items-center gap-x-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
+        :style="SUBGRID_ROW"
       >
         <div
-          v-for="col in visibleColumns"
+          v-for="col in renderColumns"
           :key="col.key"
           :class="col.alignRight ? 'flex justify-end' : ''"
         >
@@ -598,21 +930,50 @@ function defaultCell(col, row) {
     <div
       v-if="showTable && !displayedRows.length && !loading"
       role="row"
-      class="px-3 py-8 text-center text-sm text-muted-foreground"
+      class="col-[1/-1] px-3 py-8 text-center text-sm text-muted-foreground"
     >
-      <div role="cell" :aria-colspan="visibleColumns.length">
-        <slot name="empty">
+      <div role="cell" :aria-colspan="renderColumns.length">
+        <slot name="empty" :query="query" :filters="activeNarrowing" :clear="clearNarrowing">
           {{ emptyText ?? t("shared.datatable.empty.default") }}
         </slot>
       </div>
     </div>
 
+      </div>
     </div>
 
+      <!-- The rows' scrollbar ---------------------------------------- -->
+      <!-- Drawn, not borrowed. A browser's own bar belongs to the scrolling
+           box, and the column head is inside that box — it has to be, because
+           the head and the rows are one grid and a `max-content` track resolves
+           per grid (PE-610). So the native bar runs beside the head, which is
+           not where a bar over the ROWS belongs. This one starts under the
+           head, ends at the footer, and drives the same native scrolling. -->
+      <div
+        v-if="scrollBody && rowsOverflow"
+        class="pointer-events-none absolute right-0 z-20 w-3.5"
+        :style="{ top: `${headerHeight}px`, bottom: '0px' }"
+      >
+        <div
+          class="rx-thumb pointer-events-auto absolute right-[3px] w-2 cursor-default rounded-full bg-[rgb(11_5_34_/_0.18)] transition-colors hover:bg-[rgb(11_5_34_/_0.32)]"
+          :style="{ height: `${thumbHeight}px`, transform: `translateY(${thumbOffset}px)` }"
+          @pointerdown="startThumbDrag"
+        />
+      </div>
+    </div>
+
+    <!-- Result count, spoken. Outside the table role: a live region is not
+         a row, and the table may own rows only. -->
+    <span role="status" class="sr-only">{{ liveStatus }}</span>
+    <!-- A move, said once: a reader who stepped a row with the arrow keys
+         hears where it landed. -->
+    <span v-if="reorderable" role="status" class="sr-only">{{ moveStatus }}</span>
+
     <!-- Footer ------------------------------------------------------- -->
     <div
       v-if="showFooter"
-      class="flex items-center justify-between gap-2 border-t border-gray-200 bg-white/55 backdrop-blur-md px-4 py-3 text-sm text-muted-foreground/60"
+      ref="footerEl"
+      class="flex items-center justify-between gap-2 border-t border-gray-200 bg-white/55 backdrop-blur-md px-4 py-3 text-sm text-muted-foreground"
     >
       <div class="flex items-center gap-2.5">
         <span class="tabular-nums">
@@ -634,7 +995,7 @@ function defaultCell(col, row) {
         <Button
           variant="outline"
           size="sm"
-          class="h-7 text-sm"
+          class="h-7 text-sm disabled:opacity-100 disabled:text-muted-foreground"
           :disabled="page === 0 || loading"
           @click="prevPage"
         >
@@ -646,7 +1007,7 @@ function defaultCell(col, row) {
         <Button
           variant="outline"
           size="sm"
-          class="h-7 text-sm"
+          class="h-7 text-sm disabled:opacity-100 disabled:text-muted-foreground"
           :disabled="page >= lastPage || loading"
           @click="nextPage"
         >
@@ -656,3 +1017,7 @@ function defaultCell(col, row) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.rx-rows::-webkit-scrollbar{height:10px;width:0}.rx-rows::-webkit-scrollbar-track{background:transparent}.rx-rows::-webkit-scrollbar-thumb{background:rgba(11,5,34,.18);background-clip:padding-box;border:3px solid transparent;border-radius:9999px}.rx-thumb{min-height:32px}
+</style>