@assure-one/design-system 1.47.0 → 1.48.0

package/dist/{chunk-FIRPQWYR.js → chunk-YRFLK7ER.js}

@@ -1,14 +1,16 @@
-import { slot, badgeAnatomy, stateAttributes, useDsMessages, deprecate, paginationAnatomy, Select, microInteractions, useFieldsetContext, useFieldControl, useControllableState, useFormReset2, useMergedRefs, switchAnatomy, CONTROL_LABEL_TEXT, tableAnatomy, Pressable, Tooltip, TooltipTrigger, TooltipContent, FormBridge, CONTROL_SIZE_CLASSES, FileUpload, FileChip, Button, Avatar, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, dataTableAnatomy, Checkbox, DocumentDetailPanel, DocumentDetailHeader, DocumentDetailTitle, DocumentDetailRequester, DocumentDetailMetaRow, DocumentDetailActions, DropdownMenuItem, DocumentList, DocumentRow, DocumentListSection, Textarea, DropdownMenuCheckboxItem, Popover, PopoverTrigger, PopoverContent, PopoverClose, DropdownMenuShortcut, useId } from './chunk-IIBDSTOG.js';
-import { cn, ShieldIcon, UploadIcon, SendIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpDownIcon, LockIcon, TrashIcon, HelpCircleIcon, ExtractIcon, ArrowRightIcon, CheckIcon, EyeIcon, FileTextIcon, CloseIcon, SparklesIcon, PlusIcon, SearchIcon, AlertTriangleIcon, FolderClosedIcon, CalendarIcon, PencilIcon, LockOpenIcon, FlagIcon, CheckCircleSolidIcon, DownloadIcon, XCircleSolidIcon, MessageCircleIcon, BellIcon, PaperclipIcon, UsersIcon, ClockIcon, PlayIcon, PauseIcon, StopIcon, SettingsIcon, Trash2Icon, FileIcon, SparkleIcon, MailIcon } from './chunk-ARCWF2S3.js';
+import { slot, badgeAnatomy, stateAttributes, useDsMessages, deprecate, paginationAnatomy, Select, microInteractions, useFieldsetContext, useFieldControl, useControllableState, useFormReset2, useMergedRefs, switchAnatomy, CONTROL_LABEL_TEXT, tableAnatomy, Pressable, Tooltip, TooltipTrigger, TooltipContent, FormBridge, CONTROL_SIZE_CLASSES, FileUpload, FileChip, Button, Avatar, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, dataTableAnatomy, Checkbox, IconButton, DropdownMenuItem, DocumentDetailPanel, DocumentDetailHeader, DocumentDetailTitle, DocumentDetailRequester, DocumentDetailMetaRow, DocumentDetailActions, DocumentList, DocumentRow, DocumentListSection, Textarea, DropdownMenuCheckboxItem, Popover, PopoverTrigger, PopoverContent, PopoverClose, DropdownMenuShortcut, useId } from './chunk-HV24JSRN.js';
+import { cn, ShieldIcon, UploadIcon, SendIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpDownIcon, LockIcon, TrashIcon, HelpCircleIcon, ExtractIcon, ArrowRightIcon, CheckIcon, EyeIcon, FileTextIcon, CloseIcon, SparklesIcon, PlusIcon, SearchIcon, ArrowUpIcon, ArrowDownIcon, XIcon, ArrowLeftIcon, PinOffIcon, PinIcon, EyeOffIcon, RotateCcwIcon, AlertTriangleIcon, FolderClosedIcon, CalendarIcon, PencilIcon, LockOpenIcon, FlagIcon, CheckCircleSolidIcon, DownloadIcon, XCircleSolidIcon, MessageCircleIcon, BellIcon, PaperclipIcon, UsersIcon, ClockIcon, PlayIcon, PauseIcon, StopIcon, SettingsIcon, Trash2Icon, FileIcon, SparkleIcon, MailIcon } from './chunk-ARCWF2S3.js';
 import { clsx } from 'clsx';
 import * as React3 from 'react';
-import { forwardRef, useMemo, createContext, useRef, useContext, useState, useCallback, useEffect } from 'react';
+import { forwardRef, useMemo, createContext, useRef, useContext, useState, useCallback, useEffect, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 var LEGACY_PAIRS = {
   default: { variant: "solid", intent: "brand" },
@@ -1039,18 +1041,12 @@ var Switch = React3.forwardRef(
   }
 );
 Switch.displayName = SwitchPrimitive.Root.displayName;
-function useOverflowTooltip() {
-  const ref = React3.useRef(null);
-  const [overflowing, setOverflowing] = React3.useState(false);
-  const measure = React3.useCallback(() => {
-    const el = ref.current;
-    if (!el) return;
-    setOverflowing(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
-  }, []);
-  return { ref, overflowing, onPointerEnter: measure, onFocus: measure };
-}
-var DEFAULT_TABLE_CONTEXT = { headerStyle: "plain", stickyHeader: false };
-var TableContext = createContext(DEFAULT_TABLE_CONTEXT);
+var VisuallyHidden = forwardRef(
+  function VisuallyHidden2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(VisuallyHiddenPrimitive.Root, { ref, ...props, children });
+  }
+);
+VisuallyHidden.displayName = "VisuallyHidden";
 function useOverflowing(target) {
   const [overflowing, setOverflowing] = useState(false);
   useEffect(() => {
@@ -1062,12 +1058,23 @@ function useOverflowing(target) {
     measure();
     const observer = new ResizeObserver(measure);
     observer.observe(element);
-    const table = element.firstElementChild;
-    if (table) observer.observe(table);
+    for (const table of element.querySelectorAll("table")) observer.observe(table);
     return () => observer.disconnect();
   }, [target]);
   return overflowing;
 }
+function useOverflowTooltip() {
+  const ref = React3.useRef(null);
+  const [overflowing, setOverflowing] = React3.useState(false);
+  const measure = React3.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    setOverflowing(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
+  }, []);
+  return { ref, overflowing, onPointerEnter: measure, onFocus: measure };
+}
+var DEFAULT_TABLE_CONTEXT = { headerStyle: "plain", stickyHeader: false };
+var TableContext = createContext(DEFAULT_TABLE_CONTEXT);
 var Table = forwardRef(function Table2({
   className,
   wrapperClassName,
@@ -1076,6 +1083,7 @@ var Table = forwardRef(function Table2({
   density,
   stickyHeader = false,
   messages: messagesOverride,
+  stickyFirstColumn = false,
   ...props
 }, ref) {
   const messages = useDsMessages("table", messagesOverride);
@@ -1088,9 +1096,11 @@ var Table = forwardRef(function Table2({
       ref: wrapperRef,
       ...slot(tableAnatomy, "wrapper"),
       ...density === void 0 ? {} : { "data-ds-density": density },
+      ...stickyFirstColumn ? { "data-sticky-first": "" } : {},
       ...overflowing ? { role: "region", "aria-label": messages.region, tabIndex: 0 } : {},
       className: cn(
-        "ds:rounded-card ds:border-rule-strong ds:bg-surface ds:w-full ds:overflow-x-auto ds:border ds:shadow-quiet",
+        "ds:rounded-card ds:border-rule-strong ds:bg-surface ds:w-full ds:min-w-0 ds:overflow-x-auto ds:border ds:shadow-quiet",
+        stickyFirstColumn && tableStickyFirstColumnClass,
         overflowing && "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
         wrapperClassName,
         classNames?.wrapper
@@ -1203,6 +1213,15 @@ var STICKY_CLASSES = {
   end: "ds:sticky ds:end-0 ds:[box-shadow:inset_1px_0_0_var(--color-rule-soft)]"
 };
 var STICKY_CELL_SURFACE = "ds:bg-surface ds:[tr:hover>&]:bg-surface-hover ds:[tr[data-state=selected]>&]:bg-brand-bg ds:[tr[data-state=selected]:hover>&]:bg-brand-bg-hover";
+var tableStickyFirstColumnClass = cn(
+  // Group rows (`TableGroupRow`) are left out: their label cell spans several
+  // columns and keeps its own surface and sticky-top rule, so it must not
+  // pick up the identity column's edge rule or body surface.
+  "ds:[&_tr:not([data-slot=table-group-row])>:first-child]:sticky ds:[&_tr:not([data-slot=table-group-row])>:first-child]:start-0 ds:[&_tr:not([data-slot=table-group-row])>:first-child]:[box-shadow:inset_-1px_0_0_var(--color-rule-soft)]",
+  "ds:[&_tbody_tr:not([data-slot=table-group-row])>td:first-child]:bg-surface ds:[&_tbody_tr:not([data-slot=table-group-row]):hover>td:first-child]:bg-surface-hover",
+  "ds:[&_tbody_tr[data-state=selected]>td:first-child]:bg-brand-bg ds:[&_tbody_tr[data-state=selected]:hover>td:first-child]:bg-brand-bg-hover",
+  "ds:[&_thead_tr>th:first-child]:z-[calc(var(--z-base)+2)] ds:[&_tbody_tr:not([data-slot=table-group-row])>td:first-child]:z-[var(--z-base)]"
+);
 function cellCommon({ align, numeric, truncate, sticky }, stickySurface) {
   const resolvedAlign = align ?? (numeric ? "end" : void 0);
   return cn(
@@ -1217,6 +1236,10 @@ function widthStyle(width, style) {
   if (width === void 0) return style;
   return { width, ...style };
 }
+var RESIZE_MIN = 48;
+var RESIZE_MAX = 800;
+var RESIZE_STEP = 10;
+var RESIZE_STEP_LARGE = 50;
 var HEAD_TYPOGRAPHY = {
   plain: "ds:font-sans ds:text-sm ds:font-medium ds:tracking-normal ds:normal-case ds:text-fg-3",
   overline: "ds:font-mono ds:text-overline ds:font-medium ds:tracking-[0.14em] ds:uppercase ds:text-fg-4"
@@ -1230,27 +1253,42 @@ var TableHead = forwardRef(function TableHead2({
   sticky,
   sort,
   onSortChange,
+  sortIndex,
+  sortFirstDirection = "asc",
+  menu,
+  resizable = false,
+  onWidthChange,
+  onAutoSize,
+  minWidth = RESIZE_MIN,
+  maxWidth = RESIZE_MAX,
   style,
   children,
   ...props
 }, ref) {
   const { headerStyle, stickyHeader } = useContext(TableContext);
+  const messages = useDsMessages("table");
+  const cellRef = useRef(null);
+  const mergedRef = useMergedRefs(ref, cellRef);
   const sortable = sort !== void 0;
-  const ariaSort = sortable ? sort === "asc" ? "ascending" : sort === "desc" ? "descending" : "none" : void 0;
-  const handleSort = () => {
-    const next = sort === null ? "asc" : sort === "asc" ? "desc" : null;
-    onSortChange?.(next);
+  const ariaSort = sortable ? sortIndex !== void 0 && sortIndex > 1 ? "none" : sort === "asc" ? "ascending" : sort === "desc" ? "descending" : "none" : void 0;
+  const handleSort = (event) => {
+    const second = sortFirstDirection === "asc" ? "desc" : "asc";
+    const next = sort === null || sort === void 0 ? sortFirstDirection : sort === sortFirstDirection ? second : null;
+    onSortChange?.(next, { additive: event.shiftKey });
   };
-  return /* @__PURE__ */ jsx(
+  const showRank = sortable && sort != null && sortIndex !== void 0 && sortIndex > 0;
+  const rankText = showRank && sortIndex !== void 0 ? sort === "asc" ? messages.sortedAscending(sortIndex) : messages.sortedDescending(sortIndex) : void 0;
+  const label = typeof children === "string" ? children : void 0;
+  return /* @__PURE__ */ jsxs(
     "th",
     {
-      ref,
+      ref: mergedRef,
       ...slot(tableAnatomy, "head"),
       ...sortable ? { "aria-sort": ariaSort, ...stateAttributes({ state: sort ?? void 0 }) } : {},
       className: cn(
         // Sentence-case column labels in the body font (Plus Jakarta Sans),
         // quiet gray — not mono uppercase eyebrows.
-        "ds:h-(--table-row-height) ds:px-(--table-cell-padding-x) ds:py-(--table-head-padding-y) ds:text-left ds:align-middle ds:whitespace-nowrap",
+        "ds:group/table-head ds:h-(--table-row-height) ds:px-(--table-cell-padding-x) ds:py-(--table-head-padding-y) ds:text-left ds:align-middle ds:whitespace-nowrap",
         "ds:font-sans ds:text-(length:--control-font-size-md) ds:font-medium ds:tracking-[0.01em] ds:normal-case ds:tabular-nums",
         "ds:text-fg-3 ds:bg-surface-2",
         "ds:border-rule ds:border-b",
@@ -1263,42 +1301,141 @@ var TableHead = forwardRef(function TableHead2({
         ),
         // A head cell that is both a sticky column and in a sticky header is the corner: above both.
         cellCommon({ align, numeric, truncate, sticky }, STICKY_CORNER_Z),
+        // The handle is absolutely positioned on the trailing edge.
+        resizable && !sticky && !stickyHeader && "ds:relative",
         className
       ),
       style: widthStyle(width, style),
       ...props,
-      children: sortable ? /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          onClick: handleSort,
-          ...slot(tableAnatomy, "sort"),
-          className: cn(
-            "ds:-mx-1 ds:-my-1 ds:inline-flex ds:items-center ds:gap-1 ds:rounded-icon ds:px-1 ds:py-1",
-            HEAD_TYPOGRAPHY[headerStyle],
-            "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-            "ds:hover:text-fg"
-          ),
-          children: [
-            children,
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": "true",
-                ...slot(tableAnatomy, "sort-indicator"),
-                className: cn(
-                  "ds:text-fg-5 ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
-                  sort && "ds:text-fg-3"
-                ),
-                children: sort === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : sort === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ds:size-3", strokeWidth: 2 })
-              }
-            )
-          ]
-        }
-      ) : children
+      children: [
+        sortable ? /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            onClick: handleSort,
+            ...slot(tableAnatomy, "sort"),
+            className: cn(
+              "ds:-mx-1 ds:-my-1 ds:inline-flex ds:items-center ds:gap-1 ds:rounded-icon ds:px-1 ds:py-1",
+              HEAD_TYPOGRAPHY[headerStyle],
+              "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+              "ds:hover:text-fg"
+            ),
+            children: [
+              children,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  ...slot(tableAnatomy, "sort-indicator"),
+                  className: cn(
+                    "ds:text-fg-5 ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+                    sort && "ds:text-fg-3"
+                  ),
+                  children: sort === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : sort === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ds:size-3", strokeWidth: 2 })
+                }
+              ),
+              showRank && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  ...slot(tableAnatomy, "sort-rank"),
+                  className: "ds:-ms-0.5 ds:self-start ds:text-(length:--text-caption) ds:leading-none ds:font-semibold ds:text-fg-3 ds:tabular-nums",
+                  children: sortIndex
+                }
+              ),
+              rankText && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                ", ",
+                rankText
+              ] })
+            ]
+          }
+        ) : children,
+        menu,
+        resizable && /* @__PURE__ */ jsx(
+          ResizeHandle,
+          {
+            label: label ? messages.resizeColumnNamed(label) : messages.resizeColumn,
+            cell: cellRef,
+            width: typeof width === "number" ? width : void 0,
+            min: minWidth,
+            max: maxWidth,
+            onWidthChange,
+            onAutoSize
+          }
+        )
+      ]
     }
   );
 });
 TableHead.displayName = "TableHead";
+function ResizeHandle({
+  label,
+  cell,
+  width,
+  min,
+  max,
+  onWidthChange,
+  onAutoSize
+}) {
+  const drag = useRef(null);
+  const current = () => width ?? Math.round(cell.current?.getBoundingClientRect().width ?? min);
+  const clamp = (n) => Math.min(max, Math.max(min, Math.round(n)));
+  return (
+    // A focusable separator with a value is the WAI-ARIA window-splitter pattern; jsx-a11y does not model it.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": label,
+        "aria-valuenow": width ?? void 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        tabIndex: 0,
+        ...slot(tableAnatomy, "resize-handle"),
+        onClick: (event) => event.stopPropagation(),
+        onDoubleClick: (event) => {
+          event.stopPropagation();
+          onAutoSize?.();
+        },
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          const rtl = cell.current ? getComputedStyle(cell.current).direction === "rtl" : false;
+          drag.current = { startX: event.clientX, startWidth: current(), dir: rtl ? -1 : 1 };
+          event.currentTarget.setPointerCapture?.(event.pointerId);
+        },
+        onPointerMove: (event) => {
+          const state = drag.current;
+          if (!state) return;
+          onWidthChange?.(clamp(state.startWidth + (event.clientX - state.startX) * state.dir));
+        },
+        onPointerUp: (event) => {
+          drag.current = null;
+          event.currentTarget.releasePointerCapture?.(event.pointerId);
+        },
+        onKeyDown: (event) => {
+          const step = event.shiftKey ? RESIZE_STEP_LARGE : RESIZE_STEP;
+          if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            event.stopPropagation();
+            onWidthChange?.(clamp(current() + (event.key === "ArrowRight" ? step : -step)));
+          } else if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+            onAutoSize?.();
+          }
+        },
+        className: cn(
+          "ds:absolute ds:inset-y-0 ds:end-0 ds:w-2 ds:cursor-col-resize ds:touch-none ds:select-none",
+          // Reveal the guide on header hover or keyboard focus; the hit target stays available.
+          "ds:after:absolute ds:after:inset-y-2 ds:after:end-0.5 ds:after:w-px ds:after:bg-rule ds:after:opacity-0 ds:group-hover/table-head:after:opacity-100 ds:focus-visible:after:opacity-100 ds:after:transition-colors ds:motion-reduce:after:transition-none",
+          "ds:hover:after:w-0.5 ds:hover:after:bg-brand ds:focus-visible:outline-none ds:focus-visible:after:w-0.5 ds:focus-visible:after:bg-brand"
+        )
+      }
+    )
+  );
+}
 var TableCell = forwardRef(function TableCell2({
   className,
   align,
@@ -1365,6 +1502,24 @@ var TableCell = forwardRef(function TableCell2({
   );
 });
 TableCell.displayName = "TableCell";
+var TableCellSecondary = forwardRef(
+  function TableCellSecondary2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...slot(tableAnatomy, "cell-secondary"),
+        className: cn(
+          "ds:mt-0.5 ds:block ds:truncate ds:text-xs ds:font-normal ds:text-fg-3",
+          "ds:[[data-ds-density=compact]_&]:hidden",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableCellSecondary.displayName = "TableCellSecondary";
 var STICKY_GROUP_ROW_Z = "ds:z-[var(--z-base)]";
 var TableGroupRow = forwardRef(
   function TableGroupRow2({
@@ -1375,65 +1530,102 @@ var TableGroupRow = forwardRef(
     open = true,
     onOpenChange,
     messages: messagesProp,
+    count,
+    totalCount,
+    locale,
+    subtotals,
+    sticky: stickyProp,
     className,
     ...props
   }, ref) {
     const messages = useDsMessages("table", messagesProp);
     const { stickyHeader } = useContext(TableContext);
-    return /* @__PURE__ */ jsx("tr", { ref, ...slot(tableAnatomy, "group-row"), ...props, children: /* @__PURE__ */ jsx(
-      "td",
-      {
-        colSpan,
-        className: cn(
-          "ds:bg-surface-2 ds:border-rule ds:h-(--table-row-height) ds:border-b ds:px-(--table-cell-padding-x) ds:align-middle",
-          // Stuck under the sticky header (W6-10's own token, so the two
-          // heights can never drift apart) rather than on the `<tr>`: a
-          // sticky `<tr>` in a collapsed-border table is the flaky part
-          // across engines, a sticky cell is the reliable one — the same
-          // choice `TableHead`'s own sticky rule makes above.
-          stickyHeader && cn("ds:sticky ds:top-(--table-row-height) ds:[box-shadow:inset_0_-1px_0_var(--color-rule)]", STICKY_GROUP_ROW_Z),
-          className
-        ),
-        children: /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:gap-1.5", children: [
-          collapsible && /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              ...slot(tableAnatomy, "group-row-toggle"),
-              "aria-expanded": open,
-              onClick: () => onOpenChange?.(!open),
-              "aria-label": open ? messages.collapseSection : messages.expandSection,
-              className: "ds:-ml-1 ds:inline-flex ds:size-5 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-icon ds:text-fg-4 ds:hover:text-fg-2",
-              children: /* @__PURE__ */ jsx(
-                ChevronDownIcon,
-                {
-                  className: cn(
-                    "ds:size-3.5 ds:transition-transform ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-                    !open && "ds:-rotate-90"
-                  ),
-                  "aria-hidden": "true"
-                }
-              )
-            }
+    const sticky = stickyProp ?? stickyHeader;
+    const firstSubtotal = subtotals ? subtotals.findIndex((cell, i) => i > 0 && cell != null) : -1;
+    const labelSpan = firstSubtotal > 0 ? firstSubtotal : colSpan;
+    const format = (n) => n.toLocaleString(locale);
+    const countText = count === void 0 ? null : totalCount !== void 0 && totalCount > count ? messages.groupLoadedOf(format(count), format(totalCount)) : format(count);
+    const cellClass = cn(
+      "ds:bg-surface-2 ds:border-rule ds:h-(--table-row-height) ds:border-b ds:px-(--table-cell-padding-x) ds:align-middle",
+      sticky && cn("ds:sticky ds:top-(--table-row-height) ds:[box-shadow:inset_0_-1px_0_var(--color-rule)]", STICKY_GROUP_ROW_Z)
+    );
+    return /* @__PURE__ */ jsxs("tr", { ref, ...slot(tableAnatomy, "group-row"), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: labelSpan,
+          className: cn(
+            "ds:bg-surface-2 ds:border-rule ds:h-(--table-row-height) ds:border-b ds:px-(--table-cell-padding-x) ds:align-middle",
+            // Stuck under the sticky header (W6-10's own token, so the two
+            // heights can never drift apart) rather than on the `<tr>`: a
+            // sticky `<tr>` in a collapsed-border table is the flaky part
+            // across engines, a sticky cell is the reliable one — the same
+            // choice `TableHead`'s own sticky rule makes above.
+            sticky && cn("ds:sticky ds:top-(--table-row-height) ds:[box-shadow:inset_0_-1px_0_var(--color-rule)]", STICKY_GROUP_ROW_Z),
+            className
           ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...slot(tableAnatomy, "group-row-label"),
-              className: "ds:font-mono ds:text-overline ds:text-fg-4 ds:font-medium ds:tracking-[0.14em] ds:uppercase",
-              children: label
-            }
+          children: /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:gap-1.5", children: [
+            collapsible && /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                ...slot(tableAnatomy, "group-row-toggle"),
+                "aria-expanded": open,
+                onClick: () => onOpenChange?.(!open),
+                "aria-label": open ? messages.collapseSection : messages.expandSection,
+                className: "ds:-ml-1 ds:inline-flex ds:size-5 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-icon ds:text-fg-4 ds:hover:text-fg-2",
+                children: /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn(
+                      "ds:size-3.5 ds:transition-transform ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+                      !open && "ds:-rotate-90"
+                    ),
+                    "aria-hidden": "true"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                ...slot(tableAnatomy, "group-row-label"),
+                className: "ds:font-mono ds:text-overline ds:text-fg-4 ds:font-medium ds:tracking-[0.14em] ds:uppercase",
+                children: label
+              }
+            ),
+            countText !== null && /* @__PURE__ */ jsx(
+              "span",
+              {
+                ...slot(tableAnatomy, "group-row-count"),
+                className: "ds:text-fg-3 ds:shrink-0 ds:text-xs ds:tabular-nums",
+                children: countText
+              }
+            ),
+            trailing && /* @__PURE__ */ jsx(
+              "span",
+              {
+                ...slot(tableAnatomy, "group-row-trailing"),
+                className: "ds:text-fg-3 ds:ml-auto ds:shrink-0 ds:text-xs",
+                children: trailing
+              }
+            )
+          ] })
+        }
+      ),
+      subtotals && firstSubtotal > 0 && subtotals.slice(labelSpan, colSpan).map((cell, i) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          ...slot(tableAnatomy, "group-row-subtotal"),
+          className: cn(
+            cellClass,
+            "ds:text-sm ds:font-medium ds:text-fg-2",
+            cell?.numeric && "ds:text-right ds:tabular-nums"
           ),
-          trailing && /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...slot(tableAnatomy, "group-row-trailing"),
-              className: "ds:text-fg-3 ds:ml-auto ds:shrink-0 ds:text-xs",
-              children: trailing
-            }
-          )
-        ] })
-      }
-    ) });
+          children: cell?.value
+        },
+        labelSpan + i
+      ))
+    ] });
   }
 );
 TableGroupRow.displayName = "TableGroupRow";
@@ -1900,8 +2092,26 @@ function filterValues(value) {
   if (value == null || value === "") return EMPTY_LIST;
   return typeof value === "string" ? [value] : value;
 }
-function nextSortDirection(current) {
-  return current === null ? "asc" : current === "asc" ? "desc" : null;
+function nextSortDirection(current, first = "asc") {
+  const second = first === "asc" ? "desc" : "asc";
+  return current === null ? first : current === first ? second : null;
+}
+var EMPTY_PINNING = Object.freeze({ start: EMPTY_LIST });
+function sameSort(a, b) {
+  return a === b || !!a && !!b && a.columnId === b.columnId && a.direction === b.direction;
+}
+function resolveOrder(ids, order) {
+  const known = new Set(ids);
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const id of order) {
+    if (known.has(id) && !seen.has(id)) {
+      seen.add(id);
+      result.push(id);
+    }
+  }
+  for (const id of ids) if (!seen.has(id)) result.push(id);
+  return result;
 }
 function useDataTable(options) {
   const {
@@ -1915,13 +2125,21 @@ function useDataTable(options) {
     resetPageOnChange = true
   } = options;
   const id = useId(options.id, "ds-table");
-  const [sorting, setSortingState] = useSlice(
-    options.sorting,
-    options.state?.sorting,
-    options.defaultSorting,
-    options.defaultState?.sorting,
-    null
-  );
+  const [internalMulti, setInternalMulti] = useState(() => {
+    const multi = options.defaultMultiSorting ?? options.defaultState?.multiSorting;
+    if (multi !== void 0) return multi;
+    const single = options.defaultSorting !== void 0 ? options.defaultSorting : options.defaultState?.sorting;
+    return single ? [single] : EMPTY_LIST;
+  });
+  const controlledMulti = options.multiSorting ?? options.state?.multiSorting;
+  const controlledSorting = options.sorting !== void 0 ? options.sorting : options.state?.sorting;
+  const multiSorting = useMemo(() => {
+    if (controlledMulti !== void 0) return controlledMulti;
+    if (controlledSorting === void 0) return internalMulti;
+    if (controlledSorting === null) return EMPTY_LIST;
+    return sameSort(internalMulti[0], controlledSorting) ? [controlledSorting, ...internalMulti.slice(1)] : [controlledSorting];
+  }, [controlledMulti, controlledSorting, internalMulti]);
+  const sorting = controlledMulti === void 0 && controlledSorting !== void 0 ? controlledSorting : multiSorting[0] ?? null;
   const [pagination, setPaginationState] = useSlice(
     options.pagination,
     options.state?.pagination,
@@ -1960,9 +2178,52 @@ function useDataTable(options) {
     options.defaultState?.filters,
     EMPTY_RECORD
   );
+  const [columnOrderState, setColumnOrderState] = useSlice(
+    options.columnOrder,
+    options.state?.columnOrder,
+    options.defaultColumnOrder,
+    options.defaultState?.columnOrder,
+    EMPTY_LIST
+  );
+  const [columnWidths, setColumnWidthsState] = useSlice(
+    options.columnWidths,
+    options.state?.columnWidths,
+    options.defaultColumnWidths,
+    options.defaultState?.columnWidths,
+    EMPTY_RECORD
+  );
+  const [columnPinning, setColumnPinningState] = useSlice(
+    options.columnPinning,
+    options.state?.columnPinning,
+    options.defaultColumnPinning,
+    options.defaultState?.columnPinning,
+    EMPTY_PINNING
+  );
   const state = useMemo(
-    () => ({ sorting, pagination, search, selection, columnVisibility, filters }),
-    [sorting, pagination, search, selection, columnVisibility, filters]
+    () => ({
+      sorting,
+      pagination,
+      search,
+      selection,
+      columnVisibility,
+      filters,
+      multiSorting,
+      columnOrder: columnOrderState,
+      columnWidths,
+      columnPinning
+    }),
+    [
+      sorting,
+      pagination,
+      search,
+      selection,
+      columnVisibility,
+      filters,
+      multiSorting,
+      columnOrderState,
+      columnWidths,
+      columnPinning
+    ]
   );
   const latest = useRef({ state, options });
   latest.current = { state, options };
@@ -1970,10 +2231,23 @@ function useDataTable(options) {
     (patch) => {
       const { state: current, options: opts } = latest.current;
       const next = { ...current, ...patch };
+      if ("multiSorting" in patch) {
+        next.multiSorting = patch.multiSorting ?? EMPTY_LIST;
+        const head = next.multiSorting[0] ?? null;
+        next.sorting = sameSort(head, current.sorting) ? current.sorting : head;
+      } else if ("sorting" in patch && !Object.is(patch.sorting, current.sorting)) {
+        next.multiSorting = next.sorting ? [next.sorting] : EMPTY_LIST;
+      } else if ("sorting" in patch) {
+        next.sorting = current.sorting;
+      }
       let changed = false;
-      if ("sorting" in patch && !Object.is(patch.sorting, current.sorting)) {
+      if (!Object.is(next.multiSorting, current.multiSorting)) {
+        changed = true;
+        setInternalMulti(next.multiSorting ?? EMPTY_LIST);
+        opts.onMultiSortingChange?.(next.multiSorting ?? EMPTY_LIST);
+      }
+      if (!Object.is(next.sorting, current.sorting)) {
         changed = true;
-        setSortingState(next.sorting);
         opts.onSortingChange?.(next.sorting);
       }
       if ("pagination" in patch && !Object.is(patch.pagination, current.pagination)) {
@@ -2001,28 +2275,56 @@ function useDataTable(options) {
         setFiltersState(next.filters);
         opts.onFiltersChange?.(next.filters);
       }
+      if ("columnOrder" in patch && !Object.is(patch.columnOrder, current.columnOrder)) {
+        changed = true;
+        setColumnOrderState(next.columnOrder ?? EMPTY_LIST);
+        opts.onColumnOrderChange?.(next.columnOrder ?? EMPTY_LIST);
+      }
+      if ("columnWidths" in patch && !Object.is(patch.columnWidths, current.columnWidths)) {
+        changed = true;
+        setColumnWidthsState(next.columnWidths ?? EMPTY_RECORD);
+        opts.onColumnWidthsChange?.(next.columnWidths ?? EMPTY_RECORD);
+      }
+      if ("columnPinning" in patch && !Object.is(patch.columnPinning, current.columnPinning)) {
+        changed = true;
+        setColumnPinningState(next.columnPinning ?? EMPTY_PINNING);
+        opts.onColumnPinningChange?.(next.columnPinning ?? EMPTY_PINNING);
+      }
       if (changed) {
         latest.current = { state: next, options: opts };
         opts.onStateChange?.(next);
       }
     },
     [
-      setSortingState,
       setPaginationState,
       setSearchState,
       setSelectionState,
       setColumnVisibilityState,
-      setFiltersState
+      setFiltersState,
+      setColumnOrderState,
+      setColumnWidthsState,
+      setColumnPinningState
     ]
   );
   const firstPage = useCallback(
     (current) => resetPageOnChange && current.page !== 1 ? { pagination: { ...current, page: 1 } } : {},
     [resetPageOnChange]
   );
-  const columns = useMemo(
-    () => allColumns.filter((column) => columnVisibility[column.id] !== false),
-    [allColumns, columnVisibility]
+  const allIds = useMemo(() => allColumns.map((c) => c.id), [allColumns]);
+  const resolvedOrder = useMemo(
+    () => resolveOrder(allIds, columnOrderState),
+    [allIds, columnOrderState]
   );
+  const columns = useMemo(() => {
+    const ordered = columnOrderState.length === 0 && columnPinning.start.length === 0 ? allColumns : (() => {
+      const byId = new Map(allColumns.map((c) => [c.id, c]));
+      const pinned = columnPinning.start.filter((id2) => byId.has(id2));
+      const pinnedSet = new Set(pinned);
+      const ids = [...pinned, ...resolvedOrder.filter((id2) => !pinnedSet.has(id2))];
+      return ids.map((id2) => byId.get(id2));
+    })();
+    return ordered.filter((column) => columnVisibility[column.id] !== false);
+  }, [allColumns, columnOrderState, columnPinning, resolvedOrder, columnVisibility]);
   const getCellValue = useCallback(
     (row, column) => readAccessor(row, column),
     []
@@ -2046,17 +2348,23 @@ function useDataTable(options) {
       }
       return true;
     });
-    if (sorting) {
-      const column = allColumns.find((c) => c.id === sorting.columnId);
-      if (column) {
-        const sortValue = column.sortValue ?? ((row) => readAccessor(row, column));
-        rows2 = [...rows2].sort(
-          (a, b) => compareSortValues(sortValue(a), sortValue(b), sorting.direction)
-        );
-      }
+    const keys = (multiSorting.length > 0 ? multiSorting : sorting ? [sorting] : []).map((key) => {
+      const column = allColumns.find((c) => c.id === key.columnId);
+      if (!column) return null;
+      const sortValue = column.sortValue ?? ((row) => readAccessor(row, column));
+      return { sortValue, direction: key.direction };
+    }).filter((key) => key !== null);
+    if (keys.length > 0) {
+      rows2 = [...rows2].sort((a, b) => {
+        for (const key of keys) {
+          const order = compareSortValues(key.sortValue(a), key.sortValue(b), key.direction);
+          if (order !== 0) return order;
+        }
+        return 0;
+      });
     }
     return rows2;
-  }, [manual, data, allColumns, filterDefinitions, filters, search, sorting]);
+  }, [manual, data, allColumns, filterDefinitions, filters, search, sorting, multiSorting]);
   const rowCount = manual ? options.rowCount ?? data.length : matching.length;
   const pageSize = Math.max(1, pagination.pageSize);
   const pageCount = Math.max(1, Math.ceil(rowCount / pageSize));
@@ -2097,24 +2405,128 @@ function useDataTable(options) {
   );
   const getColumnId = useCallback((columnId) => `${id}-col-${columnId}`, [id]);
   const getRowDomId = useCallback((rowId) => `${id}-row-${rowId}`, [id]);
+  const multiSortEnabled = options.multiSort === true;
   const sortingApi = useMemo(() => {
-    const getDirection = (columnId) => sorting?.columnId === columnId ? sorting.direction : null;
+    const keys = multiSorting.length > 0 ? multiSorting : sorting ? [sorting] : EMPTY_LIST;
+    const getDirection = (columnId) => keys.find((key) => key.columnId === columnId)?.direction ?? null;
+    const firstDirection = (columnId) => allColumns.find((c) => c.id === columnId)?.sortFirstDirection ?? "asc";
     return {
       value: sorting,
       set: (next) => commit({ sorting: next }),
+      multi: keys,
+      setMulti: (next) => commit({ multiSorting: next }),
       getDirection,
-      toggle: (columnId) => {
-        const direction = nextSortDirection(getDirection(columnId));
-        commit({ sorting: direction ? { columnId, direction } : null });
+      getIndex: (columnId) => keys.findIndex((key) => key.columnId === columnId) + 1,
+      toggle: (columnId, toggleOptions) => {
+        const direction = nextSortDirection(getDirection(columnId), firstDirection(columnId));
+        if (!toggleOptions?.additive || !multiSortEnabled) {
+          commit({ sorting: direction ? { columnId, direction } : null });
+          return;
+        }
+        const index = keys.findIndex((key) => key.columnId === columnId);
+        let next;
+        if (index === -1) next = direction ? [...keys, { columnId, direction }] : [...keys];
+        else if (direction === null) next = keys.filter((_, i) => i !== index);
+        else next = keys.map((key, i) => i === index ? { columnId, direction } : key);
+        commit({ multiSorting: next });
       },
       getAriaSort: (columnId) => {
         const column = allColumns.find((c) => c.id === columnId);
         if (!column?.sortable) return void 0;
-        const direction = getDirection(columnId);
-        return direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none";
+        const primary = keys[0];
+        if (primary?.columnId !== columnId) return "none";
+        return primary.direction === "asc" ? "ascending" : "descending";
+      }
+    };
+  }, [sorting, multiSorting, allColumns, commit, multiSortEnabled]);
+  const columnOrderApi = useMemo(() => {
+    const pinnedSet = new Set(columnPinning.start);
+    const targetOf = (columnId, delta) => {
+      const visible = columns.map((c) => c.id);
+      const from = visible.indexOf(columnId);
+      const to = from + delta;
+      if (from === -1 || delta === 0 || to < 0 || to >= visible.length) return null;
+      const target = visible[to];
+      return pinnedSet.has(target) === pinnedSet.has(columnId) ? target : null;
+    };
+    return {
+      value: resolvedOrder,
+      set: (next) => commit({ columnOrder: next }),
+      canMove: (columnId, delta) => targetOf(columnId, delta) !== null,
+      move: (columnId, delta) => {
+        const target = targetOf(columnId, delta);
+        if (target === null) return;
+        if (pinnedSet.has(columnId)) {
+          const start = [...columnPinning.start];
+          const a = start.indexOf(columnId);
+          const b = start.indexOf(target);
+          start.splice(a, 1);
+          start.splice(b, 0, columnId);
+          commit({ columnPinning: { start } });
+          return;
+        }
+        const order = resolvedOrder.filter((id2) => id2 !== columnId);
+        const at = order.indexOf(target) + (delta > 0 ? 1 : 0);
+        order.splice(at, 0, columnId);
+        commit({ columnOrder: order });
+      },
+      reset: () => {
+        if (latest.current.state.columnOrder?.length) commit({ columnOrder: EMPTY_LIST });
       }
     };
-  }, [sorting, allColumns, commit]);
+  }, [columns, columnPinning, resolvedOrder, commit]);
+  const columnWidthsApi = useMemo(
+    () => ({
+      value: columnWidths,
+      get: (columnId) => columnWidths[columnId],
+      set: (columnId, width) => {
+        const current = latest.current.state.columnWidths ?? EMPTY_RECORD;
+        const rounded = Math.round(width);
+        if (current[columnId] === rounded) return;
+        commit({ columnWidths: { ...current, [columnId]: rounded } });
+      },
+      reset: (columnId) => {
+        const current = latest.current.state.columnWidths ?? EMPTY_RECORD;
+        if (columnId === void 0) {
+          if (Object.keys(current).length > 0) commit({ columnWidths: EMPTY_RECORD });
+          return;
+        }
+        if (!(columnId in current)) return;
+        const next = { ...current };
+        delete next[columnId];
+        commit({ columnWidths: next });
+      }
+    }),
+    [columnWidths, commit]
+  );
+  const columnPinningApi = useMemo(() => {
+    const isPinned = (columnId) => columnPinning.start.includes(columnId);
+    return {
+      value: columnPinning,
+      isPinned,
+      pin: (columnId) => {
+        if (!isPinned(columnId)) commit({ columnPinning: { start: [...columnPinning.start, columnId] } });
+      },
+      unpin: (columnId) => {
+        if (isPinned(columnId)) {
+          commit({ columnPinning: { start: columnPinning.start.filter((id2) => id2 !== columnId) } });
+        }
+      },
+      set: (next) => commit({ columnPinning: next }),
+      reset: () => {
+        if (columnPinning.start.length > 0) commit({ columnPinning: EMPTY_PINNING });
+      }
+    };
+  }, [columnPinning, commit]);
+  const resetColumns = useCallback(() => {
+    const current = latest.current.state;
+    const patch = {};
+    if (current.columnOrder?.length) patch.columnOrder = EMPTY_LIST;
+    if (current.columnWidths && Object.keys(current.columnWidths).length) patch.columnWidths = EMPTY_RECORD;
+    if (current.columnPinning?.start.length) patch.columnPinning = EMPTY_PINNING;
+    if (Object.keys(current.columnVisibility).length) patch.columnVisibility = EMPTY_RECORD;
+    if (Object.keys(patch).length > 0) commit(patch);
+  }, [commit]);
   const paginationApi = useMemo(() => {
     const setPage = (next) => commit({ pagination: { page: Math.min(Math.max(1, next), pageCount), pageSize } });
     return {
@@ -2263,7 +2675,11 @@ function useDataTable(options) {
     search: searchApi,
     selection: selectionApi,
     columnVisibility: columnVisibilityApi,
-    filters: filtersApi
+    filters: filtersApi,
+    columnOrder: columnOrderApi,
+    columnWidths: columnWidthsApi,
+    columnPinning: columnPinningApi,
+    resetColumns
   };
 }
 function useSlice(prop, stateProp, defaultProp, defaultStateProp, fallback) {
@@ -2281,6 +2697,104 @@ function useSlice(prop, stateProp, defaultProp, defaultStateProp, fallback) {
   );
   return [value, setValue];
 }
+var DATA_TABLE_NO_GROUPING = "none";
+var EMPTY = [];
+function readStored(storage, key) {
+  try {
+    const raw = (storage ?? window.localStorage).getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.filter((v) => typeof v === "string") : null;
+  } catch {
+    return null;
+  }
+}
+function useDataTableGrouping({
+  rows,
+  groupBy,
+  getGroupKey,
+  getRowKey,
+  compareGroups,
+  collapsed: collapsedProp,
+  defaultCollapsed = EMPTY,
+  onCollapsedChange,
+  persistKey,
+  storage
+}) {
+  const enabled = groupBy != null && groupBy !== DATA_TABLE_NO_GROUPING;
+  const [collapsed, setCollapsed] = useControllableState({
+    prop: collapsedProp,
+    defaultProp: defaultCollapsed,
+    onChange: onCollapsedChange
+  });
+  const controlled = collapsedProp !== void 0;
+  const storageKey = persistKey && enabled ? `ds-groups:${persistKey}:${groupBy}` : null;
+  const restoredFor = useRef(null);
+  useEffect(() => {
+    if (controlled || !storageKey || restoredFor.current === storageKey) return;
+    restoredFor.current = storageKey;
+    if (typeof window === "undefined") return;
+    setCollapsed(readStored(storage, storageKey) ?? defaultCollapsed);
+  }, [controlled, storageKey, storage, setCollapsed]);
+  useEffect(() => {
+    if (controlled || !storageKey || restoredFor.current !== storageKey) return;
+    try {
+      (storage ?? window.localStorage).setItem(storageKey, JSON.stringify(collapsed));
+    } catch {
+    }
+  }, [controlled, storageKey, storage, collapsed]);
+  const collapsedSet = useMemo(() => new Set(collapsed), [collapsed]);
+  const groups = useMemo(() => {
+    if (!enabled) return [];
+    const byKey = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const key = getGroupKey(row, groupBy);
+      const bucket = byKey.get(key);
+      if (bucket) bucket.push(row);
+      else byKey.set(key, [row]);
+    }
+    const keys = Array.from(byKey.keys());
+    if (compareGroups) keys.sort(compareGroups);
+    return keys.map((key) => {
+      const groupRows = byKey.get(key) ?? [];
+      return { key, rows: groupRows, count: groupRows.length, open: !collapsedSet.has(key) };
+    });
+  }, [enabled, rows, groupBy, getGroupKey, compareGroups, collapsedSet]);
+  const items = useMemo(() => {
+    if (!enabled) {
+      return rows.map((row, index2) => ({ type: "row", key: getRowKey(row, index2), row, groupKey: null }));
+    }
+    const out = [];
+    let index = 0;
+    for (const group of groups) {
+      out.push({ type: "group", key: `group:${group.key}`, group });
+      for (const row of group.rows) {
+        if (group.open) out.push({ type: "row", key: getRowKey(row, index), row, groupKey: group.key });
+        index += 1;
+      }
+    }
+    return out;
+  }, [enabled, rows, groups, getRowKey]);
+  const setOpen = useCallback(
+    (groupKey, open) => setCollapsed((prev) => {
+      const has = prev.includes(groupKey);
+      if (open === !has) return prev;
+      return open ? prev.filter((k) => k !== groupKey) : [...prev, groupKey];
+    }),
+    [setCollapsed]
+  );
+  return {
+    enabled,
+    groups,
+    items,
+    collapsed,
+    isOpen: (groupKey) => !collapsedSet.has(groupKey),
+    setOpen,
+    toggle: (groupKey) => setOpen(groupKey, collapsedSet.has(groupKey)),
+    collapseAll: () => setCollapsed(groups.map((g) => g.key)),
+    expandAll: () => setCollapsed(EMPTY)
+  };
+}
 var DocumentRequestUpload = forwardRef(
   function DocumentRequestUpload2({
     label,
@@ -3662,11 +4176,16 @@ var NewMenu = forwardRef(function NewMenu2({ actions, groups, triggerLabel = "Ne
   ] });
 });
 NewMenu.displayName = "NewMenu";
-var DataTable = forwardRef(function DataTable2({ withToolbar, className, children, ...props }, ref) {
+var DataTable = forwardRef(function DataTable2({ withToolbar, stickyHeader = false, regionLabel, className, children, ...props }, ref) {
+  const wrapperRef = useRef(null);
+  const mergedRef = useMergedRefs(ref, wrapperRef);
+  const overflowing = useOverflowing(wrapperRef);
+  const messages = useDsMessages("table");
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      ref: mergedRef,
+      ...overflowing ? { role: "region", "aria-label": regionLabel ?? messages.region, tabIndex: 0 } : {},
       "data-with-toolbar": withToolbar ? "true" : void 0,
       ...slot(dataTableAnatomy, "root"),
       className: cn(
@@ -3675,12 +4194,14 @@ var DataTable = forwardRef(function DataTable2({ withToolbar, className, childre
         // card. The overflow clips the header/cell backgrounds to the
         // rounded corners; a table wider than the card scrolls sideways
         // inside it instead of being cut off (the toolbar stays put).
-        "ds:w-full ds:overflow-x-auto ds:overflow-y-hidden ds:rounded-card ds:border ds:border-rule-strong ds:bg-surface ds:shadow-quiet",
+        "ds:w-full ds:min-w-0 ds:overflow-x-auto ds:overflow-y-hidden ds:rounded-card ds:border ds:border-rule-strong ds:bg-surface ds:shadow-quiet",
         "ds:[&_table]:bg-surface ds:[&_table]:w-full ds:[&_table]:border-collapse",
+        stickyHeader && "ds:overflow-y-auto",
+        overflowing && "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
         className
       ),
       ...props,
-      children
+      children: /* @__PURE__ */ jsx(TableContext.Provider, { value: { headerStyle: "plain", stickyHeader }, children })
     }
   );
 });
@@ -3784,19 +4305,34 @@ var DataTableRow = forwardRef(
 );
 DataTableRow.displayName = "DataTableRow";
 var DataTableHeader = forwardRef(
-  function DataTableHeader2({ sortable = false, defaultSort, sort: controlledSort, onSortChange, children, ...props }, ref) {
+  function DataTableHeader2({
+    sortable = false,
+    defaultSort,
+    sort: controlledSort,
+    onSortChange,
+    sortIndex,
+    sortFirstDirection = "asc",
+    children,
+    ...props
+  }, ref) {
+    const tableMessages = useDsMessages("table");
     const [uncontrolledSort, setUncontrolledSort] = useState(
       defaultSort ?? null
     );
     const isControlled = controlledSort !== void 0;
     const currentSort = isControlled ? controlledSort : uncontrolledSort;
-    const handleClick = useCallback(() => {
-      if (!sortable) return;
-      const next = currentSort === null ? "asc" : currentSort === "asc" ? "desc" : null;
-      if (!isControlled) setUncontrolledSort(next);
-      onSortChange?.(next);
-    }, [sortable, currentSort, isControlled, onSortChange]);
-    const ariaSort = sortable ? currentSort === "asc" ? "ascending" : currentSort === "desc" ? "descending" : "none" : void 0;
+    const handleClick = useCallback(
+      (event) => {
+        if (!sortable) return;
+        const second = sortFirstDirection === "asc" ? "desc" : "asc";
+        const next = currentSort === null ? sortFirstDirection : currentSort === sortFirstDirection ? second : null;
+        if (!isControlled) setUncontrolledSort(next);
+        onSortChange?.(next, { additive: event.shiftKey });
+      },
+      [sortable, currentSort, isControlled, onSortChange, sortFirstDirection]
+    );
+    const showRank = sortable && currentSort !== null && sortIndex !== void 0 && sortIndex > 0;
+    const ariaSort = sortable ? sortIndex !== void 0 && sortIndex > 1 ? "none" : currentSort === "asc" ? "ascending" : currentSort === "desc" ? "descending" : "none" : void 0;
     return /* @__PURE__ */ jsx(
       TableHead,
       {
@@ -3832,7 +4368,23 @@ var DataTableHeader = forwardRef(
                   ),
                   children: currentSort === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : currentSort === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ds:size-3", strokeWidth: 2 })
                 }
-              )
+              ),
+              showRank && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    ...slot(tableAnatomy, "sort-rank"),
+                    className: "ds:-ms-0.5 ds:self-start ds:text-(length:--text-caption) ds:leading-none ds:font-semibold ds:text-fg-3 ds:tabular-nums",
+                    children: sortIndex
+                  }
+                ),
+                /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                  ",",
+                  " ",
+                  currentSort === "asc" ? tableMessages.sortedAscending(sortIndex) : tableMessages.sortedDescending(sortIndex)
+                ] })
+              ] })
             ]
           }
         ) : children
@@ -3956,6 +4508,266 @@ var DataTableCheckbox = forwardRef(
   }
 );
 DataTableCheckbox.displayName = "DataTableCheckbox";
+var DataTableCellSecondary = forwardRef(
+  function DataTableCellSecondary2(props, ref) {
+    return /* @__PURE__ */ jsx(TableCellSecondary, { ref, ...slot(dataTableAnatomy, "cell-secondary"), ...props });
+  }
+);
+DataTableCellSecondary.displayName = "DataTableCellSecondary";
+var DEFAULT_ROW_ESTIMATE = 44;
+var DEFAULT_OVERSCAN = 15;
+function useDataTableVirtualRows({
+  count,
+  getScrollElement,
+  estimateSize,
+  overscan = DEFAULT_OVERSCAN,
+  getItemKey
+}) {
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement,
+    estimateSize: estimateSize ?? (() => DEFAULT_ROW_ESTIMATE),
+    overscan,
+    ...getItemKey ? { getItemKey } : {}
+  });
+  const virtual = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const first = virtual[0];
+  const last = virtual[virtual.length - 1];
+  return {
+    items: virtual.map((v) => ({ index: v.index, key: v.key, start: v.start })),
+    paddingTop: first ? first.start : 0,
+    paddingBottom: last ? totalSize - last.end : 0,
+    totalSize,
+    measureElement: virtualizer.measureElement,
+    scrollToIndex: (index) => virtualizer.scrollToIndex(index)
+  };
+}
+var DataTableSpacerRow = forwardRef(
+  function DataTableSpacerRow2({ height, colSpan, className, ...props }, ref) {
+    if (height <= 0) return null;
+    return /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        ref,
+        "aria-hidden": "true",
+        ...slot(tableAnatomy, "spacer-row"),
+        className: cn("ds:border-0 ds:hover:bg-transparent", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(TableCell, { colSpan, style: { height, padding: 0, border: 0 } })
+      }
+    );
+  }
+);
+DataTableSpacerRow.displayName = "DataTableSpacerRow";
+var DataTableLoadMore = forwardRef(
+  function DataTableLoadMore2({
+    hasMore,
+    loading = false,
+    error,
+    onLoadMore,
+    loadedCount,
+    totalCount,
+    root,
+    rootMargin = "400px",
+    locale,
+    className,
+    ...props
+  }, ref) {
+    const messages = useDsMessages("dataTable");
+    const errorMessages = useDsMessages("errorState");
+    const sentinel = useRef(null);
+    const latest = useRef({ hasMore, loading, error, loadedCount, onLoadMore });
+    latest.current = { hasMore, loading, error, loadedCount, onLoadMore };
+    const firing = useRef(false);
+    const lastAutomaticCount = useRef(void 0);
+    useEffect(() => {
+      if (!loading) firing.current = false;
+    }, [loading, loadedCount, hasMore, error]);
+    useEffect(() => {
+      const element = sentinel.current;
+      if (!element || typeof IntersectionObserver === "undefined") return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const { hasMore: more, loading: busy, error: failed, loadedCount: count, onLoadMore: load } = latest.current;
+          if (!entries.some((e) => e.isIntersecting) || !more || busy || failed || firing.current) return;
+          if (count !== void 0 && count === lastAutomaticCount.current) return;
+          lastAutomaticCount.current = count;
+          firing.current = true;
+          load();
+        },
+        { root: root?.current ?? null, rootMargin }
+      );
+      observer.observe(element);
+      return () => observer.disconnect();
+    }, [root, rootMargin, loading, hasMore, loadedCount, error]);
+    const format = (n) => n.toLocaleString(locale);
+    const status = loading ? messages.loadingMore : !hasMore && loadedCount !== void 0 ? messages.allLoaded(format(loadedCount)) : loadedCount !== void 0 && totalCount !== void 0 ? messages.loadedOf(format(loadedCount), format(totalCount)) : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        ...slot(dataTableAnatomy, "load-more"),
+        className: cn("ds:flex ds:items-center ds:justify-center ds:gap-3 ds:px-4 ds:py-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: sentinel, "aria-hidden": "true", className: "ds:h-px ds:w-px" }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "ds:text-xs ds:text-fg-3 ds:tabular-nums", children: status }),
+          error && /* @__PURE__ */ jsx("span", { role: "alert", className: "ds:text-sm ds:text-danger-fg", children: error }),
+          hasMore && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              loading,
+              disabled: loading,
+              onClick: () => {
+                if (!latest.current.hasMore || latest.current.loading || firing.current) return;
+                firing.current = true;
+                onLoadMore();
+              },
+              children: error ? errorMessages.retry : messages.loadMore
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DataTableLoadMore.displayName = "DataTableLoadMore";
+var SAVE_THROTTLE_MS = 150;
+function useScrollRestoration(key, ref, options) {
+  const ready = options?.ready ?? true;
+  const storageOption = options?.storage;
+  const restored = useRef(null);
+  useEffect(() => {
+    if (restored.current === key || !ready) return;
+    const element = ref.current;
+    if (!element || typeof window === "undefined") return;
+    restored.current = key;
+    try {
+      const storage = storageOption ?? window.sessionStorage;
+      const saved = Number(storage.getItem(`ds-scroll:${key}`));
+      element.scrollTop = Number.isFinite(saved) && saved > 0 ? saved : 0;
+    } catch {
+    }
+  }, [key, ref, ready, storageOption]);
+  useEffect(() => {
+    const element = ref.current;
+    if (!ready || !element || typeof window === "undefined") return;
+    let timer = null;
+    const save = () => {
+      try {
+        (storageOption ?? window.sessionStorage).setItem(`ds-scroll:${key}`, String(element.scrollTop));
+      } catch {
+      }
+    };
+    const onScroll = () => {
+      if (timer) return;
+      timer = setTimeout(() => {
+        timer = null;
+        save();
+      }, SAVE_THROTTLE_MS);
+    };
+    element.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("pagehide", save);
+    return () => {
+      if (timer) clearTimeout(timer);
+      save();
+      element.removeEventListener("scroll", onScroll);
+      window.removeEventListener("pagehide", save);
+    };
+  }, [key, ref, ready, storageOption]);
+}
+var DataTableHeaderMenu = forwardRef(
+  function DataTableHeaderMenu2({
+    label,
+    onSortAscending,
+    onSortDescending,
+    onClearSort,
+    sorted = false,
+    onMoveLeft,
+    onMoveRight,
+    canMoveLeft = true,
+    canMoveRight = true,
+    onHide,
+    pinned = false,
+    onPinChange,
+    onAutoSize,
+    onResetColumns,
+    className
+  }, ref) {
+    const messages = useDsMessages("dataTable");
+    const sortGroup = Boolean(onSortAscending || onSortDescending || sorted && onClearSort);
+    const moveGroup = Boolean(onMoveLeft || onMoveRight);
+    const columnGroup = Boolean(onHide || onPinChange || onAutoSize);
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          ref,
+          variant: "ghost",
+          intent: "neutral",
+          size: "xs",
+          tooltip: false,
+          label: messages.columnOptions(label),
+          icon: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
+          ...slot(dataTableAnatomy, "head-menu"),
+          className: cn(
+            "ds:ms-1 ds:size-6 ds:align-middle ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none",
+            "ds:[th:hover_&]:opacity-100 ds:focus-visible:opacity-100 ds:data-[state=open]:opacity-100",
+            className
+          ),
+          onClick: (event) => event.stopPropagation()
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+        onSortAscending && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSortAscending, children: [
+          /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": "true" }),
+          messages.sortAscending
+        ] }),
+        onSortDescending && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSortDescending, children: [
+          /* @__PURE__ */ jsx(ArrowDownIcon, { "aria-hidden": "true" }),
+          messages.sortDescending
+        ] }),
+        sorted && onClearSort && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onClearSort, children: [
+          /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }),
+          messages.clearSort
+        ] }),
+        sortGroup && (moveGroup || columnGroup || onResetColumns) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        onMoveLeft && /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: !canMoveLeft, onSelect: onMoveLeft, children: [
+          /* @__PURE__ */ jsx(ArrowLeftIcon, { "aria-hidden": "true" }),
+          messages.moveLeft
+        ] }),
+        onMoveRight && /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: !canMoveRight, onSelect: onMoveRight, children: [
+          /* @__PURE__ */ jsx(ArrowRightIcon, { "aria-hidden": "true" }),
+          messages.moveRight
+        ] }),
+        moveGroup && (columnGroup || onResetColumns) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        onPinChange && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => onPinChange(!pinned), children: [
+          pinned ? /* @__PURE__ */ jsx(PinOffIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PinIcon, { "aria-hidden": "true" }),
+          pinned ? messages.unpinColumn : messages.pinColumn
+        ] }),
+        onAutoSize && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onAutoSize, children: [
+          /* @__PURE__ */ jsx(ArrowRightIcon, { "aria-hidden": "true" }),
+          messages.autosizeColumn
+        ] }),
+        onHide && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onHide, children: [
+          /* @__PURE__ */ jsx(EyeOffIcon, { "aria-hidden": "true" }),
+          messages.hideColumn
+        ] }),
+        onResetColumns && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (columnGroup || moveGroup || sortGroup) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onResetColumns, children: [
+            /* @__PURE__ */ jsx(RotateCcwIcon, { "aria-hidden": "true" }),
+            messages.resetColumns
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+);
+DataTableHeaderMenu.displayName = "DataTableHeaderMenu";
 var ALL = "__all";
 var SEARCH_ONLY = "__search:";
 function colStyle(width) {
@@ -3986,8 +4798,39 @@ function DataTableView({
   hideOnSinglePage = true,
   itemLabel = "items",
   selection,
-  className
+  className,
+  loadMore,
+  multiSort,
+  multiSorting,
+  onMultiSortingChange,
+  columnMenu = false,
+  resizableColumns = false,
+  columnOrder,
+  defaultColumnOrder,
+  onColumnOrderChange,
+  columnVisibility,
+  defaultColumnVisibility,
+  onColumnVisibilityChange,
+  columnWidths,
+  defaultColumnWidths,
+  onColumnWidthsChange,
+  columnPinning,
+  defaultColumnPinning,
+  onColumnPinningChange,
+  stickyFirstColumn = false,
+  stickyHeader = false,
+  regionLabel,
+  density,
+  groupBy,
+  getGroupKey,
+  renderGroupLabel,
+  compareGroups,
+  collapsedGroups,
+  defaultCollapsedGroups,
+  onCollapsedGroupsChange,
+  groupPersistKey
 }) {
+  const scrollRef = useRef(null);
   const [uncontrolledPage, setUncontrolledPage] = useState(1);
   const page = pageProp ?? uncontrolledPage;
   const controllerColumns = useMemo(() => {
@@ -3997,6 +4840,8 @@ function DataTableView({
       header: c.header,
       sortable: c.sortable,
       sortValue: c.sortValue,
+      sortFirstDirection: c.sortFirstDirection,
+      ...c.hideable === void 0 ? {} : { hideable: c.hideable },
       searchable: searched.has(c.key),
       searchText: (row) => fieldText(row, c.key)
     }));
@@ -4035,7 +4880,7 @@ function DataTableView({
     sorting: toControllerSort(sortingProp),
     defaultSorting: toControllerSort(initialSort),
     onSortingChange: onSortingChange ? (next) => onSortingChange(fromControllerSort(next)) : void 0,
-    pagination: { page, pageSize },
+    pagination: loadMore ? { page: 1, pageSize: Math.max(1, data.length) } : { page, pageSize },
     onPaginationChange: (next) => {
       setUncontrolledPage(next.page);
       onPageChange?.(next.page);
@@ -4044,8 +4889,67 @@ function DataTableView({
     search: searchKeys.length > 0 ? searchProp : "",
     onSearchChange,
     selection: controlledSelection,
-    onSelectionChange: selection ? (next) => selection.onSelectionChange(new Set(next)) : void 0
+    onSelectionChange: selection ? (next) => selection.onSelectionChange(new Set(next)) : void 0,
+    multiSort,
+    multiSorting,
+    onMultiSortingChange,
+    columnOrder,
+    defaultColumnOrder,
+    onColumnOrderChange,
+    columnVisibility,
+    defaultColumnVisibility,
+    onColumnVisibilityChange,
+    columnWidths,
+    defaultColumnWidths,
+    onColumnWidthsChange,
+    columnPinning,
+    defaultColumnPinning,
+    onColumnPinningChange
+  });
+  const byKey = useMemo(() => new Map(columns.map((c) => [c.key, c])), [columns]);
+  const visibleColumns = table.columns.map((c) => byKey.get(c.id)).filter((c) => c !== void 0);
+  const columnCount = visibleColumns.length + (selection != null ? 1 : 0);
+  const pxWidth = (c) => {
+    const own = c.width?.match(/^([\d.]+)px$/) ?? c.width?.match(/minmax\(\s*([\d.]+)px/);
+    return table.columnWidths.get(c.key) ?? (own ? Number(own[1]) : 160);
+  };
+  const tableElement = useRef(null);
+  const [pinnedOffsets, setPinnedOffsets] = useState({});
+  useLayoutEffect(() => {
+    const element = tableElement.current;
+    if (!element || table.columnPinning.value.start.length === 0) return;
+    const measure = () => {
+      const next = {};
+      const cells = element.tHead?.rows[0]?.cells;
+      let offset = selection && stickyFirstColumn ? cells?.[0]?.getBoundingClientRect().width ?? 0 : 0;
+      visibleColumns.forEach((column, index) => {
+        if (!table.columnPinning.isPinned(column.key)) return;
+        next[column.key] = offset;
+        offset += cells?.[index + (selection ? 1 : 0)]?.getBoundingClientRect().width ?? 0;
+      });
+      setPinnedOffsets(
+        (previous) => Object.keys(previous).length === Object.keys(next).length && Object.keys(next).every((key) => previous[key] === next[key]) ? previous : next
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    for (const cell of Array.from(element.tHead?.rows[0]?.cells ?? [])) observer.observe(cell);
+    return () => observer.disconnect();
   });
+  const pinProps = (key) => table.columnPinning.isPinned(key) ? { sticky: "start", style: { insetInlineStart: pinnedOffsets[key] ?? 0 } } : {};
+  const grouping = useDataTableGrouping({
+    rows: table.rows,
+    groupBy,
+    getGroupKey: (entry, by) => getGroupKey ? getGroupKey(entry.row, by) : fieldText(entry.row, by),
+    getRowKey: (entry) => entry.id,
+    compareGroups,
+    collapsed: collapsedGroups,
+    defaultCollapsed: defaultCollapsedGroups,
+    onCollapsedChange: onCollapsedGroupsChange,
+    persistKey: groupPersistKey
+  });
+  const hasSubtotals = visibleColumns.some((c) => c.subtotal);
   const total = table.pagination.rowCount;
   const hasToolbar = searchKeys.length > 0 || filters.length > 0;
   const selectCol = selection != null;
@@ -4067,125 +4971,209 @@ function DataTableView({
     }
   };
   const selectAllLabel = filteredScope ? `Select all ${scopeIds.length} ${itemLabel}` : `Select all ${itemLabel} on this page`;
-  return /* @__PURE__ */ jsxs(DataTable, { withToolbar: hasToolbar, className, children: [
-    hasToolbar && /* @__PURE__ */ jsxs(DataTableToolbar, { children: [
-      searchKeys.length > 0 && /* @__PURE__ */ jsx(
-        DataTableSearch,
-        {
-          placeholder: searchPlaceholder,
-          value: table.search.value,
-          onChange: (e) => table.search.set(e.target.value)
-        }
-      ),
-      filters.map((filter) => {
-        const options = [
-          { value: ALL, label: filter.allLabel ?? `All ${filter.label ?? ""}`.trim() },
-          ...filter.options.map((o) => typeof o === "string" ? { value: o, label: o } : o)
-        ];
-        return /* @__PURE__ */ jsx(
-          Select,
-          {
-            options,
-            value: table.filters.get(filter.key) ?? ALL,
-            onValueChange: (value) => table.filters.set(filter.key, value === ALL ? null : value),
-            "aria-label": filter.label ?? filter.key,
-            className: "ds:w-auto ds:min-w-[150px]"
-          },
-          filter.key
-        );
-      }),
-      /* @__PURE__ */ jsx(DataTableSpacer, {}),
-      /* @__PURE__ */ jsx(DataTableResultsCount, { current: total, total: data.length })
-    ] }),
-    /* @__PURE__ */ jsxs("table", { className: "ds:table-auto", children: [
-      /* @__PURE__ */ jsxs("colgroup", { children: [
-        selectCol && /* @__PURE__ */ jsx("col", { style: { width: "32px", minWidth: "32px" } }),
-        columns.map((c) => /* @__PURE__ */ jsx("col", { style: colStyle(c.width) }, c.key))
-      ] }),
-      /* @__PURE__ */ jsx(DataTableHead, { children: /* @__PURE__ */ jsxs(DataTableRow, { children: [
-        selection && /* @__PURE__ */ jsx(
-          DataTableCheckbox,
-          {
-            asHeader: true,
-            checked: allInScopeSelected ? true : someInScopeSelected ? "indeterminate" : false,
-            onCheckedChange: toggleAll,
-            disabled: scopeIds.length === 0,
-            ariaLabel: selectAllLabel
-          }
-        ),
-        columns.map(
-          (c) => c.sortable ? /* @__PURE__ */ jsx(
-            DataTableHeader,
-            {
-              sortable: true,
-              sort: table.sorting.getDirection(c.key),
-              onSortChange: () => table.sorting.toggle(c.key),
-              className: c.align === "right" ? "ds:text-right ds:[&>button]:ml-auto" : void 0,
-              children: c.header
-            },
-            c.key
-          ) : /* @__PURE__ */ jsx(
-            DataTableHeader,
+  return /* @__PURE__ */ jsxs(
+    DataTable,
+    {
+      ref: scrollRef,
+      withToolbar: hasToolbar,
+      stickyHeader,
+      regionLabel,
+      className: cn(stickyFirstColumn && tableStickyFirstColumnClass, className),
+      ...density === void 0 ? {} : { "data-ds-density": density },
+      ...stickyFirstColumn ? { "data-sticky-first": "" } : {},
+      children: [
+        hasToolbar && /* @__PURE__ */ jsxs(DataTableToolbar, { children: [
+          searchKeys.length > 0 && /* @__PURE__ */ jsx(
+            DataTableSearch,
             {
-              className: c.align === "right" ? "ds:text-right" : void 0,
-              children: c.header
-            },
-            c.key
-          )
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx(DataTableBody, { children: table.rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(
-        DataTableCell,
-        {
-          colSpan: columns.length + (selectCol ? 1 : 0),
-          className: "ds:text-fg-3 ds:py-12 ds:text-center",
-          children: [
-            "No ",
-            itemLabel,
-            " match your filters."
-          ]
-        }
-      ) }) : table.rows.map(({ id, row, selected, selectable }) => /* @__PURE__ */ jsxs(
-        DataTableRow,
-        {
-          selected: selection ? selected : void 0,
-          onClick: onRowClick ? () => onRowClick(row) : void 0,
-          className: onRowClick ? "ds:cursor-pointer" : void 0,
-          children: [
+              placeholder: searchPlaceholder,
+              value: table.search.value,
+              onChange: (e) => table.search.set(e.target.value)
+            }
+          ),
+          filters.map((filter) => {
+            const options = [
+              { value: ALL, label: filter.allLabel ?? `All ${filter.label ?? ""}`.trim() },
+              ...filter.options.map((o) => typeof o === "string" ? { value: o, label: o } : o)
+            ];
+            return /* @__PURE__ */ jsx(
+              Select,
+              {
+                options,
+                value: table.filters.get(filter.key) ?? ALL,
+                onValueChange: (value) => table.filters.set(filter.key, value === ALL ? null : value),
+                "aria-label": filter.label ?? filter.key,
+                className: "ds:w-auto ds:min-w-[150px]"
+              },
+              filter.key
+            );
+          }),
+          /* @__PURE__ */ jsx(DataTableSpacer, {}),
+          /* @__PURE__ */ jsx(DataTableResultsCount, { current: total, total: data.length })
+        ] }),
+        /* @__PURE__ */ jsxs("table", { ref: tableElement, className: "ds:table-auto", children: [
+          /* @__PURE__ */ jsxs("colgroup", { children: [
+            selectCol && /* @__PURE__ */ jsx("col", { style: { width: "32px", minWidth: "32px" } }),
+            visibleColumns.map((c) => {
+              const resized = table.columnWidths.get(c.key);
+              return /* @__PURE__ */ jsx(
+                "col",
+                {
+                  style: resized === void 0 ? colStyle(c.width) : { width: resized, minWidth: resized }
+                },
+                c.key
+              );
+            })
+          ] }),
+          /* @__PURE__ */ jsx(DataTableHead, { children: /* @__PURE__ */ jsxs(DataTableRow, { children: [
             selection && /* @__PURE__ */ jsx(
               DataTableCheckbox,
               {
-                checked: selected,
-                onCheckedChange: () => table.selection.toggle(id),
-                disabled: !selectable,
-                ariaLabel: selection.rowLabel?.(row) ?? `Select ${id}`,
-                onClick: (event) => event.stopPropagation()
+                asHeader: true,
+                checked: allInScopeSelected ? true : someInScopeSelected ? "indeterminate" : false,
+                onCheckedChange: toggleAll,
+                disabled: scopeIds.length === 0,
+                ariaLabel: selectAllLabel
               }
             ),
-            columns.map((c) => /* @__PURE__ */ jsx(
-              DataTableCell,
+            visibleColumns.map((c) => {
+              const right = c.align === "right" || c.numeric;
+              const rank = table.sorting.getIndex(c.key);
+              const extras = {
+                ...pinProps(c.key),
+                ...resizableColumns ? {
+                  resizable: true,
+                  width: pxWidth(c),
+                  onWidthChange: (w) => table.columnWidths.set(c.key, w),
+                  onAutoSize: () => table.columnWidths.reset(c.key)
+                } : {},
+                ...columnMenu ? {
+                  menu: /* @__PURE__ */ jsx(
+                    DataTableHeaderMenu,
+                    {
+                      label: c.header,
+                      sorted: c.sortable ? table.sorting.getDirection(c.key) !== null : void 0,
+                      onSortAscending: c.sortable ? () => table.sorting.set({ columnId: c.key, direction: "asc" }) : void 0,
+                      onSortDescending: c.sortable ? () => table.sorting.set({ columnId: c.key, direction: "desc" }) : void 0,
+                      onClearSort: c.sortable ? () => table.sorting.set(null) : void 0,
+                      onMoveLeft: () => table.columnOrder.move(c.key, -1),
+                      onMoveRight: () => table.columnOrder.move(c.key, 1),
+                      canMoveLeft: table.columnOrder.canMove(c.key, -1),
+                      canMoveRight: table.columnOrder.canMove(c.key, 1),
+                      onHide: c.hideable === false || visibleColumns.length < 2 ? void 0 : () => table.columnVisibility.setVisible(c.key, false),
+                      pinned: table.columnPinning.isPinned(c.key),
+                      onPinChange: (pin) => pin ? table.columnPinning.pin(c.key) : table.columnPinning.unpin(c.key),
+                      onAutoSize: resizableColumns ? () => table.columnWidths.reset(c.key) : void 0,
+                      onResetColumns: table.resetColumns
+                    }
+                  )
+                } : {}
+              };
+              return c.sortable ? /* @__PURE__ */ jsx(
+                DataTableHeader,
+                {
+                  sortable: true,
+                  sort: table.sorting.getDirection(c.key),
+                  sortFirstDirection: c.sortFirstDirection,
+                  sortIndex: multiSort && table.sorting.multi.length > 1 && rank > 0 ? rank : void 0,
+                  onSortChange: (_, meta) => table.sorting.toggle(c.key, meta),
+                  className: right ? "ds:text-right ds:[&>button]:ml-auto" : void 0,
+                  ...extras,
+                  children: c.header
+                },
+                c.key
+              ) : /* @__PURE__ */ jsx(DataTableHeader, { className: right ? "ds:text-right" : void 0, ...extras, children: c.header }, c.key);
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx(DataTableBody, { children: table.rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(
+            DataTableCell,
+            {
+              colSpan: columnCount,
+              className: "ds:text-fg-3 ds:py-12 ds:text-center",
+              children: [
+                "No ",
+                itemLabel,
+                " match your filters."
+              ]
+            }
+          ) }) : grouping.items.map((item) => {
+            if (item.type === "group") {
+              const { group } = item;
+              const groupRows = group.rows.map((entry) => entry.row);
+              const subtotals = hasSubtotals ? [
+                ...selectCol ? [null] : [],
+                ...visibleColumns.map(
+                  (c, i) => (
+                    // The first cell holds the label, so a subtotal there is skipped.
+                    c.subtotal && (i > 0 || selectCol) ? { value: c.subtotal(groupRows), numeric: c.numeric || c.align === "right" } : null
+                  )
+                )
+              ] : void 0;
+              return /* @__PURE__ */ jsx(
+                TableGroupRow,
+                {
+                  colSpan: columnCount,
+                  label: renderGroupLabel ? renderGroupLabel(group.key, groupRows) : group.key,
+                  count: group.count,
+                  collapsible: true,
+                  open: group.open,
+                  onOpenChange: (open) => grouping.setOpen(group.key, open),
+                  subtotals
+                },
+                item.key
+              );
+            }
+            const { id, row, selected, selectable } = item.row;
+            return /* @__PURE__ */ jsxs(
+              DataTableRow,
               {
-                className: c.align === "right" ? "ds:text-right" : void 0,
-                children: c.render ? c.render(row) : row[c.key] ?? /* @__PURE__ */ jsx(EmptyValue, {})
+                selected: selection ? selected : void 0,
+                onClick: onRowClick ? () => onRowClick(row) : void 0,
+                className: onRowClick ? "ds:cursor-pointer" : void 0,
+                children: [
+                  selection && /* @__PURE__ */ jsx(
+                    DataTableCheckbox,
+                    {
+                      checked: selected,
+                      onCheckedChange: () => table.selection.toggle(id),
+                      disabled: !selectable,
+                      ariaLabel: selection.rowLabel?.(row) ?? `Select ${id}`,
+                      onClick: (event) => event.stopPropagation()
+                    }
+                  ),
+                  visibleColumns.map((c) => /* @__PURE__ */ jsxs(
+                    DataTableCell,
+                    {
+                      numeric: c.numeric,
+                      ...pinProps(c.key),
+                      className: c.align === "right" ? "ds:text-right" : void 0,
+                      children: [
+                        c.render ? c.render(row) : row[c.key] ?? /* @__PURE__ */ jsx(EmptyValue, {}),
+                        c.secondary && /* @__PURE__ */ jsx(DataTableCellSecondary, { children: c.secondary(row) })
+                      ]
+                    },
+                    c.key
+                  ))
+                ]
               },
-              c.key
-            ))
-          ]
-        },
-        id
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      DataTablePagination,
-      {
-        page: table.pagination.page,
-        totalItems: total,
-        pageSize,
-        onPageChange: table.pagination.setPage,
-        hideOnSinglePage
-      }
-    )
-  ] });
+              id
+            );
+          }) })
+        ] }),
+        loadMore ? /* @__PURE__ */ jsx(DataTableLoadMore, { loadedCount: data.length, ...loadMore, root: scrollRef }) : /* @__PURE__ */ jsx(
+          DataTablePagination,
+          {
+            className: "ds:mt-0 ds:border-t ds:border-rule ds:px-(--table-cell-padding-x) ds:py-3",
+            page: table.pagination.page,
+            totalItems: total,
+            pageSize,
+            onPageChange: table.pagination.setPage,
+            hideOnSinglePage
+          }
+        )
+      ]
+    }
+  );
 }
 function EmptyValue() {
   return /* @__PURE__ */ jsx("span", { className: "ds:text-fg-5", children: "\u2014" });
@@ -5749,6 +6737,6 @@ function SignatureEditor({
 }
 SignatureEditor.displayName = "SignatureEditor";
 
-export { AIReceiptPanel, AiDraftCard, Assignee, AttentionItem, Badge, Blockquote, BottomNav, CategoryDivider, CategoryTag, ChannelTabs, ClientRailGroupHeader, ClientRailItem, Dash, DashGrid, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DocumentChecklist, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, EmailMessageCard, EmptyValue, EngagementCard, EngagementTimeline, EngagementTimelineStep, IntentBadge, MissingDocumentsPanel, MoneyCell, NewMenu, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, Section, SectionHead, SectionHeader, SegmentedProgress, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, StagePill, Stat, StatusDot, StatusPill, SuggestionPills, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableGroupRow, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagsCell, TeamMemberSelect, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, formatClock, formatCurrency, formatDuration, nextSortDirection, parseDuration, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable, useOverflowTooltip, useStopwatch };
-//# sourceMappingURL=chunk-FIRPQWYR.js.map
-//# sourceMappingURL=chunk-FIRPQWYR.js.map
+export { AIReceiptPanel, AiDraftCard, Assignee, AttentionItem, Badge, Blockquote, BottomNav, CategoryDivider, CategoryTag, ChannelTabs, ClientRailGroupHeader, ClientRailItem, DATA_TABLE_NO_GROUPING, Dash, DashGrid, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCellSecondary, DataTableCheckbox, DataTableHead, DataTableHeader, DataTableHeaderMenu, DataTableLoadMore, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableSpacerRow, DataTableToolbar, DataTableView, DocumentChecklist, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, EmailMessageCard, EmptyValue, EngagementCard, EngagementTimeline, EngagementTimelineStep, IntentBadge, MissingDocumentsPanel, MoneyCell, NewMenu, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, Section, SectionHead, SectionHeader, SegmentedProgress, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, StagePill, Stat, StatusDot, StatusPill, SuggestionPills, Switch, Table, TableBody, TableCaption, TableCell, TableCellSecondary, TableFooter, TableGroupRow, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagsCell, TeamMemberSelect, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToggleGroup, ToggleGroupItem, VisuallyHidden, badgeVariants, compareSortValues, formatClock, formatCurrency, formatDuration, nextSortDirection, parseDuration, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable, useDataTableGrouping, useDataTableVirtualRows, useOverflowTooltip, useScrollRestoration, useStopwatch };
+//# sourceMappingURL=chunk-YRFLK7ER.js.map
+//# sourceMappingURL=chunk-YRFLK7ER.js.map