@godxjp/ui 20.0.0 → 20.1.0

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
   columnFilteringFeature,
@@ -20,11 +20,13 @@ import {
   AlertCircle,
   ArrowDown,
   ArrowUp,
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   ChevronsUpDown,
   Layers,
   Layers2,
+  ListFilter,
   MoreHorizontal,
   RefreshCw,
   ShieldAlert,
@@ -47,10 +49,15 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "../navigation/dropdown-menu.js";
+import { RadioGroupRoot, RadioItem } from "../data-entry/radio.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import {
   Table,
   TableBody,
@@ -81,16 +88,81 @@ function dataTableFeatures() {
     columnMeta: {}
   });
 }
+const DEFAULT_SORT_DIRECTIONS = ["asc", "desc"];
+function columnIsSortable(col) {
+  if (col.sortable) return true;
+  if (col.sorter === true || typeof col.sorter === "function") return true;
+  return typeof col.sorter === "object" && col.sorter !== null;
+}
+function columnCompare(col) {
+  if (typeof col.sorter === "function") return col.sorter;
+  if (col.sorter && typeof col.sorter === "object") return col.sorter.compare;
+  return void 0;
+}
+function columnSortPriority(col) {
+  return col.sorter && typeof col.sorter === "object" ? col.sorter.multiple : void 0;
+}
+function columnSortDirections(col, tableDirections) {
+  const declared = col.sortDirections ?? tableDirections ?? DEFAULT_SORT_DIRECTIONS;
+  return declared.length > 0 ? declared : DEFAULT_SORT_DIRECTIONS;
+}
+function nextSortDirection(current, directions) {
+  if (!current) return directions[0];
+  const at = directions.indexOf(current);
+  if (at === -1) return directions[0];
+  return directions[at + 1];
+}
+function applySortToState(state, key, direction, priority, priorities) {
+  if (priority === void 0) {
+    return direction ? [{ id: key, desc: direction === "desc" }] : [];
+  }
+  const kept = state.filter((entry) => entry.id !== key && priorities[entry.id] !== void 0);
+  const next = direction ? [...kept, { id: key, desc: direction === "desc" }] : kept;
+  return next.sort((a, b) => (priorities[b.id] ?? 0) - (priorities[a.id] ?? 0));
+}
+function directionOf(state, key) {
+  const entry = state.find((s) => s.id === key);
+  return entry ? entry.desc ? "desc" : "asc" : void 0;
+}
+function columnFilterPredicate(col, row, values) {
+  if (values.length === 0) return true;
+  const onFilter = col.onFilter;
+  if (onFilter) return values.some((value) => onFilter(value, row));
+  const raw = row[col.key];
+  return values.some((value) => value === raw || String(value) === String(raw));
+}
+function useStableValue(value) {
+  const key = JSON.stringify(value);
+  const ref = React.useRef({ key, value });
+  if (ref.current.key !== key) ref.current = { key, value };
+  return ref.current.value;
+}
+function cssLength(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
 function toTanstackColumns(columns) {
-  return columns.map((col) => ({
-    id: col.key,
-    accessorFn: (row) => row[col.key],
-    header: () => col.header,
-    enableSorting: !!col.sortable,
-    enableHiding: col.enableHiding ?? true,
-    enableGlobalFilter: true,
-    meta: { lean: col }
-  }));
+  return columns.map((col) => {
+    const compare = columnCompare(col);
+    return {
+      id: col.key,
+      accessorFn: (row) => row[col.key],
+      header: () => col.header,
+      enableSorting: columnIsSortable(col),
+      enableHiding: col.enableHiding ?? true,
+      enableGlobalFilter: true,
+      enableColumnFilter: !!col.filters,
+      ...compare ? {
+        sortFn: (rowA, rowB) => compare(rowA.original, rowB.original)
+      } : {},
+      filterFn: (row, _id, filterValue) => columnFilterPredicate(
+        col,
+        row.original,
+        Array.isArray(filterValue) ? filterValue : []
+      ),
+      meta: { lean: col }
+    };
+  });
 }
 const DataTableContext = React.createContext(null);
 function useDataTableContext() {
@@ -128,7 +200,7 @@ function DataTable({
   onSortChange,
   globalFilter: controlledGlobalFilter,
   onGlobalFilterChange,
-  pagination: controlledPagination,
+  pagination: paginationProp,
   onPaginationChange,
   rowCount,
   columnVisibility: controlledVisibility,
@@ -147,6 +219,16 @@ function DataTable({
   preset = "default",
   collapseBelow = "sm",
   rowClassName,
+  rowSelection,
+  expandable,
+  summary,
+  scroll,
+  sticky,
+  onRow,
+  bordered = false,
+  showSorterTooltip = false,
+  sortDirections,
+  onFilterChange,
   className,
   children
 }) {
@@ -156,23 +238,90 @@ function DataTable({
     setInternalDensity(d);
     onDensityChange?.(d);
   };
-  const [internalSorting, setInternalSorting] = React.useState([]);
-  const [internalFilters] = React.useState([]);
+  const pagerHidden = paginationProp === false;
+  const paginationConfig = paginationProp && typeof paginationProp === "object" && !("pageIndex" in paginationProp) ? paginationProp : void 0;
+  const controlledPagination = paginationProp && typeof paginationProp === "object" && "pageIndex" in paginationProp ? paginationProp : void 0;
+  const [internalSorting, setInternalSorting] = React.useState(
+    () => columns.filter((col) => col.defaultSortOrder).map((col) => ({ id: col.key, desc: col.defaultSortOrder === "desc" }))
+  );
+  const [internalFilters, setInternalFilters] = React.useState(
+    () => columns.filter((col) => (col.defaultFilteredValue?.length ?? 0) > 0).map((col) => ({ id: col.key, value: col.defaultFilteredValue }))
+  );
   const [internalGlobal, setInternalGlobal] = React.useState("");
   const [internalPagination, setInternalPagination] = React.useState({
     pageIndex: 0,
-    pageSize: 10
+    pageSize: paginationConfig?.pageSize ?? 10
   });
-  const [internalSelection, setInternalSelection] = React.useState({});
+  const [internalSelection, setInternalSelection] = React.useState(
+    () => Object.fromEntries(
+      (rowSelection?.defaultSelectedRowKeys ?? []).map((key) => [key, true])
+    )
+  );
   const [internalVisibility, setInternalVisibility] = React.useState({});
+  const [internalExpanded, setInternalExpanded] = React.useState(
+    () => expandable?.defaultExpandAllRows ? data.map(getRowId) : []
+  );
+  const pageIndex = controlledPagination?.pageIndex ?? (paginationConfig?.current !== void 0 ? Math.max(0, paginationConfig.current - 1) : internalPagination.pageIndex);
+  const pageSize = controlledPagination?.pageSize ?? paginationConfig?.pageSize ?? internalPagination.pageSize;
+  const resolvedPagination = React.useMemo(
+    () => ({ pageIndex, pageSize }),
+    [pageIndex, pageSize]
+  );
+  const handlePaginationChange = (updater) => {
+    const next = typeof updater === "function" ? updater(resolvedPagination) : updater;
+    setInternalPagination(next);
+    onPaginationChange?.(next);
+    paginationConfig?.onChange?.(next.pageIndex + 1, next.pageSize);
+  };
   const selectionFromSet = React.useCallback(
     (set) => Object.fromEntries([...set].map((id) => [id, true])),
     []
   );
-  const sortingState = sort !== void 0 ? sortToSortingState(sort) : internalSorting;
-  const rowSelection = controlledSelected !== void 0 ? selectionFromSet(controlledSelected) : internalSelection;
+  const sortPriorities = React.useMemo(() => {
+    const map = {};
+    for (const col of columns) {
+      const priority = columnSortPriority(col);
+      if (priority !== void 0) map[col.key] = priority;
+    }
+    return map;
+  }, [columns]);
+  const columnSortOrders = columns.filter((col) => col.sortOrder !== void 0);
+  const sortingState = useStableValue(
+    columnSortOrders.length > 0 ? columnSortOrders.filter((col) => col.sortOrder).map((col) => ({ id: col.key, desc: col.sortOrder === "desc" })).sort((a, b) => (sortPriorities[b.id] ?? 0) - (sortPriorities[a.id] ?? 0)) : sort !== void 0 ? sortToSortingState(sort) : internalSorting
+  );
+  const controlledFilterKeys = new Set(
+    columns.filter((col) => col.filteredValue !== void 0).map((col) => col.key)
+  );
+  const columnFilters = useStableValue([
+    ...internalFilters.filter((entry) => !controlledFilterKeys.has(entry.id)),
+    ...columns.filter((col) => (col.filteredValue?.length ?? 0) > 0).map((col) => ({ id: col.key, value: col.filteredValue }))
+  ]);
+  const filterValues = Object.fromEntries(
+    columnFilters.map((entry) => [entry.id, entry.value ?? []])
+  );
+  const setFilterValue = (key, next) => {
+    if (!controlledFilterKeys.has(key)) {
+      setInternalFilters((prev) => {
+        const rest = prev.filter((entry) => entry.id !== key);
+        return next.length > 0 ? [...rest, { id: key, value: next }] : rest;
+      });
+    }
+    const merged = { ...filterValues };
+    if (next.length > 0) {
+      merged[key] = next;
+    } else {
+      delete merged[key];
+    }
+    onFilterChange?.(merged);
+  };
+  const rowSelectionKeys = rowSelection?.selectedRowKeys;
+  const rowSelectionState = rowSelectionKeys !== void 0 ? Object.fromEntries(rowSelectionKeys.map((key) => [key, true])) : controlledSelected !== void 0 ? selectionFromSet(controlledSelected) : internalSelection;
   const onSortingChange = (updater) => {
     const next = typeof updater === "function" ? updater(sortingState) : updater;
+    if (columnSortOrders.length > 0) {
+      onSortChange?.(sortingStateToSort(next));
+      return;
+    }
     if (sort !== void 0 || onSortChange) {
       onSortChange?.(sortingStateToSort(next));
     } else {
@@ -180,14 +329,38 @@ function DataTable({
     }
   };
   const onRowSelectionChange = (updater) => {
-    const next = typeof updater === "function" ? updater(rowSelection) : updater;
-    if (controlledSelected !== void 0 || onSelectChange) {
-      const set = new Set(Object.keys(next).filter((id) => next[id]));
-      onSelectChange?.(set);
-      if (controlledSelected === void 0) setInternalSelection(next);
-    } else {
+    let next = typeof updater === "function" ? updater(rowSelectionState) : updater;
+    if (rowSelection?.type === "radio") {
+      const added = Object.keys(next).filter((key) => next[key] && !rowSelectionState[key]);
+      const only = added[added.length - 1];
+      next = only ? { [only]: true } : {};
+    }
+    if (rowSelection) {
+      const onPage = new Set(data.map(getRowId));
+      if (rowSelection.preserveSelectedRowKeys) {
+        const offPage = Object.keys(rowSelectionState).filter(
+          (key) => rowSelectionState[key] && !onPage.has(key)
+        );
+        next = {
+          ...next,
+          ...Object.fromEntries(offPage.map((key) => [key, true]))
+        };
+      } else {
+        next = Object.fromEntries(
+          Object.entries(next).filter(([key, on]) => on && onPage.has(key))
+        );
+      }
+    }
+    const keys = Object.keys(next).filter((key) => next[key]);
+    if (rowSelectionKeys === void 0 && controlledSelected === void 0) {
       setInternalSelection(next);
     }
+    onSelectChange?.(new Set(keys));
+    const byId = new Map(data.map((row) => [getRowId(row), row]));
+    rowSelection?.onChange?.(
+      keys,
+      keys.map((key) => byId.get(key)).filter((row) => row !== void 0)
+    );
   };
   const onGlobalFilterChangeFn = (updater) => {
     const current = controlledGlobalFilter ?? internalGlobal;
@@ -203,8 +376,9 @@ function DataTable({
   const hasNumberedPager = React.Children.toArray(children).some(
     (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Pagination" && typeof c.props.onChange !== "function"
   );
-  const paginationEngaged = manualPagination || controlledPagination !== void 0 || onPaginationChange !== void 0 || hasNumberedPager;
+  const paginationEngaged = !pagerHidden && (manualPagination || controlledPagination !== void 0 || paginationConfig !== void 0 || onPaginationChange !== void 0 || hasNumberedPager);
   const features = React.useMemo(() => dataTableFeatures(), []);
+  const selectionEnabled = selectable || rowSelection !== void 0;
   const table = useTable({
     features,
     data,
@@ -215,27 +389,33 @@ function DataTable({
     // "no pager on this table" is expressed the same way as "the server paginates" — leave the
     // rows unsliced. Page count still derives from `rowCount`/the pre-paginated model either way.
     manualPagination: manualPagination || !paginationEngaged,
-    rowCount,
-    enableRowSelection: selectable,
+    rowCount: paginationConfig?.total ?? rowCount,
+    enableRowSelection: selectionEnabled,
     state: {
       sorting: sortingState,
-      columnFilters: internalFilters,
+      columnFilters,
       globalFilter: controlledGlobalFilter ?? internalGlobal,
-      pagination: controlledPagination ?? internalPagination,
-      rowSelection,
+      pagination: resolvedPagination,
+      rowSelection: rowSelectionState,
       columnVisibility: controlledVisibility ?? internalVisibility
     },
     onSortingChange,
     onGlobalFilterChange: onGlobalFilterChangeFn,
-    onPaginationChange: onPaginationChange ?? setInternalPagination,
+    onPaginationChange: handlePaginationChange,
     onRowSelectionChange,
     onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalVisibility
   });
+  const expandedKeys = expandable?.expandedRowKeys ?? internalExpanded;
+  const toggleExpanded = (key) => {
+    const next = expandedKeys.includes(key) ? expandedKeys.filter((k) => k !== key) : [...expandedKeys, key];
+    if (expandable?.expandedRowKeys === void 0) setInternalExpanded(next);
+    expandable?.onExpandedRowsChange?.(next);
+  };
   const ctx = {
     table,
     density,
     setDensity,
-    selectable,
+    selectable: selectionEnabled,
     sort,
     onSortChange,
     onRowClick,
@@ -246,10 +426,28 @@ function DataTable({
     onRetry,
     striped,
     hoverable,
-    stickyHeader,
+    // antd `sticky` supersedes `stickyHeader` whenever it is given (either form of it).
+    stickyHeader: sticky === void 0 ? stickyHeader : sticky !== false,
     preset,
     collapseBelow,
-    rowClassName
+    rowClassName,
+    bordered,
+    scroll,
+    sticky,
+    onRow,
+    summary,
+    expandable,
+    expandedKeys,
+    toggleExpanded,
+    rowSelection,
+    getRowId,
+    showSorterTooltip,
+    sortDirections,
+    sortPriorities,
+    filterValues,
+    setFilterValue,
+    paginationConfig,
+    pagerHidden
   };
   const hasContent = React.Children.toArray(children).some(
     (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Content"
@@ -342,12 +540,15 @@ function columnLabel(column) {
   return column.id;
 }
 DataTable.SelectAll = function DataTableSelectAll() {
-  const { table, selectable } = useDataTableContext();
+  const { table, selectable, rowSelection, getRowId } = useDataTableContext();
   const { t } = useTranslation();
   if (!selectable) return null;
+  if (rowSelection?.type === "radio" || rowSelection?.hideSelectAll) {
+    return /* @__PURE__ */ jsx(Fragment, { children: rowSelection.columnTitle ?? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataTable.selectColumn") }) });
+  }
   const allSelected = table.getIsAllPageRowsSelected();
   const someSelected = table.getIsSomePageRowsSelected();
-  return /* @__PURE__ */ jsx(
+  const box = /* @__PURE__ */ jsx(
     Checkbox,
     {
       checked: allSelected ? true : someSelected ? "indeterminate" : false,
@@ -355,6 +556,54 @@ DataTable.SelectAll = function DataTableSelectAll() {
       "aria-label": t("dataTable.selectAll")
     }
   );
+  if (rowSelection?.columnTitle !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: rowSelection.columnTitle });
+  if (!rowSelection?.selections) return box;
+  const pageKeys = table.getRowModel().rows.map((row) => getRowId(row.original));
+  const selectedKeys = table.getSelectedRowModel().rows.map((row) => getRowId(row.original));
+  const builtIn = [
+    {
+      key: "all",
+      text: t("dataTable.selectAll"),
+      onSelect: () => table.toggleAllPageRowsSelected(true)
+    },
+    {
+      key: "invert",
+      text: t("dataTable.selectInvert"),
+      onSelect: () => {
+        table.setRowSelection(
+          Object.fromEntries(
+            table.getRowModel().rows.filter((row) => !row.getIsSelected()).map((row) => [getRowId(row.original), true])
+          )
+        );
+      }
+    },
+    {
+      key: "none",
+      text: t("dataTable.selectNone"),
+      onSelect: () => table.toggleAllPageRowsSelected(false)
+    }
+  ];
+  const entries = rowSelection.selections === true ? builtIn : rowSelection.selections.map((entry) => ({
+    key: entry.key,
+    text: entry.text,
+    onSelect: () => entry.onSelect(pageKeys.length > 0 ? pageKeys : selectedKeys)
+  }));
+  return /* @__PURE__ */ jsxs("span", { className: "ui-data-table-selection-menu", children: [
+    box,
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-xs",
+          "aria-label": t("dataTable.selectionMenu"),
+          className: "ui-data-table-selection-trigger",
+          children: /* @__PURE__ */ jsx(ChevronDown, { className: "ui-data-table-sort-icon", "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: entries.map((entry) => /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: entry.onSelect, children: entry.text }, entry.key)) })
+    ] })
+  ] });
 };
 DataTable.SelectAll.displayName = "DataTable.SelectAll";
 DataTable.BulkActions = function DataTableBulkActions({
@@ -418,12 +667,78 @@ DataTable.DensityToggle = function DataTableDensityToggle() {
   );
 };
 DataTable.DensityToggle.displayName = "DataTable.DensityToggle";
+function fixedEdge(col) {
+  return col.fixed ?? (col.pin === "end" ? "end" : void 0);
+}
+function sameOffsets(a, b) {
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  return keys.every((key) => a[key] === b[key]);
+}
+function ColumnFilterMenu({ column }) {
+  const { filterValues, setFilterValue } = useDataTableContext();
+  const { t } = useTranslation();
+  const options = column.filters ?? [];
+  const active = filterValues[column.key] ?? [];
+  const multiple = column.filterMultiple ?? true;
+  const apply = (next) => {
+    setFilterValue(column.key, next);
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-xs",
+        "aria-label": t("dataTable.filterColumn"),
+        "data-filtered": active.length > 0 ? "" : void 0,
+        className: "ui-data-table-filter-trigger",
+        children: /* @__PURE__ */ jsx(ListFilter, { className: "ui-data-table-sort-icon", "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("dataTable.filterColumn") }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      multiple ? options.map((option) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: active.includes(option.value),
+          onCheckedChange: (checked) => {
+            apply(
+              checked ? [...active, option.value] : active.filter((value) => value !== option.value)
+            );
+          },
+          children: option.text
+        },
+        String(option.value)
+      )) : /* @__PURE__ */ jsx(
+        DropdownMenuRadioGroup,
+        {
+          value: active.length > 0 ? String(active[0]) : "",
+          onValueChange: (value) => {
+            const picked = options.find((option) => String(option.value) === value);
+            apply(picked ? [picked.value] : []);
+          },
+          children: options.map((option) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: String(option.value), children: option.text }, String(option.value)))
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onSelect: () => {
+            apply([]);
+          },
+          children: t("dataTable.filterReset")
+        }
+      )
+    ] })
+  ] });
+}
 DataTable.Content = function DataTableContent() {
   const {
     table,
     selectable,
-    sort,
-    onSortChange,
     onRowClick,
     loading,
     empty,
@@ -435,7 +750,20 @@ DataTable.Content = function DataTableContent() {
     stickyHeader,
     preset,
     collapseBelow,
-    rowClassName
+    rowClassName,
+    bordered,
+    scroll,
+    sticky,
+    onRow,
+    summary,
+    expandable,
+    expandedKeys,
+    toggleExpanded,
+    rowSelection,
+    getRowId,
+    showSorterTooltip,
+    sortDirections,
+    sortPriorities
   } = useDataTableContext();
   const { t } = useTranslation();
   const presetAttr = preset === "default" ? void 0 : preset;
@@ -444,8 +772,13 @@ DataTable.Content = function DataTableContent() {
   const rowPadding = tableRowHeightClass;
   const cellPadding = tableCellPaddingClass;
   const visibleColumns = table.getVisibleLeafColumns().map((c) => c.columnDef.meta?.lean).filter((c) => !!c);
-  const emptyColSpan = visibleColumns.length + (selectable ? 1 : 0);
-  const hasPinEnd = visibleColumns.some((col) => col.pin === "end");
+  const expandColumnShown = !!expandable?.expandedRowRender;
+  const leadingColumnCount = (expandColumnShown ? 1 : 0) + (selectable ? 1 : 0);
+  const emptyColSpan = visibleColumns.length + leadingColumnCount;
+  const hasPinEnd = visibleColumns.some((col) => fixedEdge(col) === "end");
+  const hasFixedStart = visibleColumns.some((col) => fixedEdge(col) === "start");
+  const leadingFixed = hasFixedStart ? "start" : void 0;
+  const fixedTableLayout = scroll?.x !== void 0 || visibleColumns.some((col) => col.ellipsis || columnWidth(col.width).style !== void 0);
   const missingHeaderNames = visibleColumns.filter((col) => isEmptyHeader(col.header) && !col.ariaLabel).map((col) => col.key).join("|");
   React.useEffect(() => {
     if (process.env.NODE_ENV === "production" || !missingHeaderNames) return;
@@ -475,24 +808,82 @@ DataTable.Content = function DataTableContent() {
       observer.disconnect();
     };
   }, []);
-  const activeSort = sort ?? sortingStateToSort(table.state.sorting);
-  const isControlledSort = sort !== void 0 || !!onSortChange;
-  const onHeaderClick = (col) => {
-    if (!col.sortable) return;
-    if (isControlledSort) {
-      if (activeSort?.key !== col.key) {
-        onSortChange?.({ key: col.key, direction: "asc" });
-      } else if (activeSort.direction === "asc") {
-        onSortChange?.({ key: col.key, direction: "desc" });
-      } else {
-        onSortChange?.(void 0);
+  const [fixedOffsets, setFixedOffsets] = React.useState({});
+  const fixedSignature = [
+    leadingFixed ?? "",
+    expandColumnShown ? "x" : "",
+    selectable ? "s" : "",
+    ...visibleColumns.map((col) => `${col.key}:${fixedEdge(col) ?? ""}`)
+  ].join("|");
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const measure = () => {
+      const headerRow2 = el.querySelector("thead tr");
+      if (!headerRow2) return;
+      const cells = Array.from(headerRow2.children);
+      const next = {};
+      let start = 0;
+      for (const cell of cells) {
+        if (cell.dataset.fixed !== "start") continue;
+        next[cell.dataset.columnKey ?? ""] = start;
+        start += cell.offsetWidth;
       }
-      return;
-    }
-    table.getColumn(col.key)?.toggleSorting();
+      let end = 0;
+      for (const cell of [...cells].reverse()) {
+        if (cell.dataset.fixed !== "end") continue;
+        next[cell.dataset.columnKey ?? ""] = end;
+        end += cell.offsetWidth;
+      }
+      setFixedOffsets((prev) => sameOffsets(prev, next) ? prev : next);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    const headerRow = el.querySelector("thead tr");
+    if (headerRow) observer.observe(headerRow);
+    return () => {
+      observer.disconnect();
+    };
+  }, [fixedSignature]);
+  const fixedCellProps = (key, edge) => edge ? { "data-column-key": key, "data-fixed": edge } : { "data-column-key": key };
+  const leadingFixedStyle = (key) => leadingFixed ? { "--table-fixed-offset": fixedOffsets[key] ?? 0 } : void 0;
+  const columnCellClass = (col) => {
+    const edge = fixedEdge(col);
+    return cn(
+      columnWidth(col.width).className,
+      col.align === "right" && "text-end",
+      col.align === "center" && "text-center",
+      col.hiddenOnMobile && "hidden md:table-cell",
+      col.ellipsis && "ui-data-table-ellipsis",
+      edge === "end" && "ui-data-table-pin-end",
+      edge === "start" && "ui-data-table-pin-start"
+    );
+  };
+  const columnCellStyle = (col) => {
+    const base = columnWidth(col.width).style;
+    const edge = fixedEdge(col);
+    if (!edge) return base;
+    return { ...base, "--table-fixed-offset": fixedOffsets[col.key] ?? 0 };
+  };
+  const sortingState = table.state.sorting;
+  const onHeaderClick = (col) => {
+    if (!columnIsSortable(col)) return;
+    const directions = columnSortDirections(col, sortDirections);
+    const next = nextSortDirection(directionOf(sortingState, col.key), directions);
+    table.setSorting(
+      applySortToState(sortingState, col.key, next, sortPriorities[col.key], sortPriorities)
+    );
   };
   const dataRows = table.getRowModel().rows;
   const rowCount = dataRows.length;
+  const scrollStyle = {};
+  const scrollVars = scrollStyle;
+  if (scroll?.x !== void 0) scrollVars["--table-scroll-inline-size"] = cssLength(scroll.x);
+  if (scroll?.y !== void 0) scrollVars["--table-scroll-block-size"] = cssLength(scroll.y);
+  if (typeof sticky === "object" && sticky.offsetHeader !== void 0) {
+    scrollVars["--table-sticky-offset"] = cssLength(sticky.offsetHeader);
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -502,6 +893,9 @@ DataTable.Content = function DataTableContent() {
         hasPinEnd && "ui-data-table-has-pin-end",
         hasOverflowEnd && "ui-data-table-has-overflow-end"
       ),
+      style: scrollStyle,
+      "data-scroll-x": scroll?.x !== void 0 ? "" : void 0,
+      "data-scroll-y": scroll?.y !== void 0 ? "" : void 0,
       "aria-busy": loading,
       tabIndex: presetAttr ? void 0 : 0,
       children: /* @__PURE__ */ jsx(
@@ -509,52 +903,69 @@ DataTable.Content = function DataTableContent() {
         {
           className: "ui-data-table-surface",
           "data-preset": presetAttr,
+          "data-table-layout": fixedTableLayout ? "fixed" : void 0,
           "data-striped": striped ? "" : void 0,
           "data-hoverable": hoverable ? "" : void 0,
-          children: /* @__PURE__ */ jsxs(Table, { scrollable: preset !== "default", preset, collapseBelow, children: [
-            /* @__PURE__ */ jsx(
-              TableHeader,
-              {
-                className: cn("bg-secondary", stickyHeader && "ui-data-table-sticky-header"),
-                children: /* @__PURE__ */ jsxs(TableRow, { children: [
-                  selectable && /* @__PURE__ */ jsx(TableHead, { className: "ui-data-table-select-column", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
-                  visibleColumns.map((col) => {
-                    const isSortable = !!col.sortable;
-                    const isActiveSort = isSortable && activeSort?.key === col.key;
-                    const sortIndicator = isSortable ? isActiveSort ? activeSort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
-                      ChevronsUpDown,
-                      {
-                        className: "ui-data-table-sort-icon text-muted-foreground",
-                        "aria-hidden": "true"
-                      }
-                    ) : null;
-                    const headerEmpty = isEmptyHeader(col.header);
-                    const headerContent = headerEmpty && col.ariaLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.ariaLabel }) : col.header;
-                    const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
-                      headerContent,
-                      sortIndicator
-                    ] });
-                    return /* @__PURE__ */ jsx(
-                      TableHead,
-                      {
-                        priority: col.priority,
-                        "data-empty": headerEmpty || void 0,
-                        "data-align": col.headerAlign ?? col.align,
-                        "aria-sort": isSortable ? isActiveSort ? activeSort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
-                        style: columnWidth(col.width).style,
-                        className: cn(
-                          columnWidth(col.width).className,
-                          // `headerAlign` when the heading differs from the rows,
-                          // `align` otherwise. A table wanting centred headings
-                          // over start-aligned text could not say so before, and
-                          // consumers reached for `[&_th_button]:justify-center`.
-                          (col.headerAlign ?? col.align) === "right" && "text-end",
-                          (col.headerAlign ?? col.align) === "center" && "text-center",
-                          col.hiddenOnMobile && "hidden md:table-cell",
-                          isSortable && "select-none",
-                          col.pin === "end" && "ui-data-table-pin-end"
-                        ),
-                        children: isSortable ? /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs(
+            Table,
+            {
+              scrollable: preset !== "default",
+              preset,
+              collapseBelow,
+              bordered,
+              children: [
+                /* @__PURE__ */ jsx(
+                  TableHeader,
+                  {
+                    className: cn("bg-secondary", stickyHeader && "ui-data-table-sticky-header"),
+                    children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                      expandColumnShown && /* @__PURE__ */ jsx(
+                        TableHead,
+                        {
+                          className: cn(
+                            "ui-data-table-expand-column",
+                            leadingFixed === "start" && "ui-data-table-pin-start"
+                          ),
+                          ...fixedCellProps("__expand", leadingFixed),
+                          style: leadingFixedStyle("__expand"),
+                          children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: expandable?.columnTitle ?? t("dataTable.expandColumn") })
+                        }
+                      ),
+                      selectable && /* @__PURE__ */ jsx(
+                        TableHead,
+                        {
+                          className: cn(
+                            "ui-data-table-select-column",
+                            leadingFixed === "start" && "ui-data-table-pin-start"
+                          ),
+                          ...fixedCellProps("__select", leadingFixed),
+                          style: leadingFixedStyle("__select"),
+                          children: /* @__PURE__ */ jsx(DataTable.SelectAll, {})
+                        }
+                      ),
+                      visibleColumns.map((col) => {
+                        const isSortable = columnIsSortable(col);
+                        const activeDirection = directionOf(sortingState, col.key);
+                        const sortIndicator = isSortable ? activeDirection ? activeDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "ui-data-table-sort-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+                          ChevronsUpDown,
+                          {
+                            className: "ui-data-table-sort-icon text-muted-foreground",
+                            "aria-hidden": "true"
+                          }
+                        ) : null;
+                        const headerEmpty = isEmptyHeader(col.header);
+                        const headerContent = headerEmpty && col.ariaLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.ariaLabel }) : col.header;
+                        const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+                          headerContent,
+                          sortIndicator
+                        ] });
+                        const tooltipOn = col.showSorterTooltip ?? showSorterTooltip;
+                        const nextDirection = nextSortDirection(
+                          activeDirection,
+                          columnSortDirections(col, sortDirections)
+                        );
+                        const sortHint = nextDirection === "asc" ? t("dataTable.sortAscending") : nextDirection === "desc" ? t("dataTable.sortDescending") : t("dataTable.sortCancel");
+                        const sortButton = /* @__PURE__ */ jsx(
                           "button",
                           {
                             type: "button",
@@ -564,179 +975,300 @@ DataTable.Content = function DataTableContent() {
                             },
                             children: label
                           }
-                        ) : label
-                      },
-                      col.key
-                    );
-                  })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx(TableBody, { children: loading ? (
-              // Shaped skeleton rows rendered INSIDE the real table grid so they
-              // share its borders + column widths — no second framed container
-              // (which double-borders when the table sits in a Card). Count is
-              // bounded to the previous page so the height barely shifts.
-              Array.from({ length: Math.min(Math.max(rowCount, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
-                selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block ui-data-table-skeleton-check" }) }),
-                visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    priority: col.priority,
-                    "data-align": col.align,
-                    style: columnWidth(col.width).style,
-                    className: cn(
-                      cellPadding,
-                      columnWidth(col.width).className,
-                      col.align === "right" && "text-end",
-                      col.align === "center" && "text-center",
-                      col.hiddenOnMobile && "hidden md:table-cell",
-                      col.pin === "end" && "ui-data-table-pin-end"
-                    ),
-                    children: /* @__PURE__ */ jsx(
-                      "div",
+                        );
+                        return /* @__PURE__ */ jsxs(
+                          TableHead,
+                          {
+                            priority: col.priority,
+                            "data-empty": headerEmpty || void 0,
+                            "data-align": col.headerAlign ?? col.align,
+                            "aria-sort": isSortable ? activeDirection ? activeDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
+                            ...fixedCellProps(col.key, fixedEdge(col)),
+                            style: columnCellStyle(col),
+                            className: cn(
+                              columnCellClass(col),
+                              // `headerAlign` when the heading differs from the rows,
+                              // `align` otherwise. A table wanting centred headings
+                              // over start-aligned text could not say so before, and
+                              // consumers reached for `[&_th_button]:justify-center`.
+                              (col.headerAlign ?? col.align) === "right" && "text-end",
+                              (col.headerAlign ?? col.align) === "center" && "text-center",
+                              isSortable && "select-none"
+                            ),
+                            children: [
+                              isSortable ? tooltipOn ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: sortButton }),
+                                /* @__PURE__ */ jsx(TooltipContent, { children: sortHint })
+                              ] }) : sortButton : label,
+                              col.filters ? /* @__PURE__ */ jsx(ColumnFilterMenu, { column: col }) : null
+                            ]
+                          },
+                          col.key
+                        );
+                      })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(TableBody, { children: loading ? (
+                  // Shaped skeleton rows rendered INSIDE the real table grid so they
+                  // share its borders + column widths — no second framed container
+                  // (which double-borders when the table sits in a Card). Count is
+                  // bounded to the previous page so the height barely shifts.
+                  Array.from({ length: Math.min(Math.max(rowCount, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
+                    expandColumnShown && /* @__PURE__ */ jsx(TableCell, { className: cellPadding }),
+                    selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block ui-data-table-skeleton-check" }) }),
+                    visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
+                      TableCell,
                       {
-                        className: cn(
-                          "ui-skeleton-block ui-data-table-skeleton-line",
-                          j === 0 ? "w-1/2" : "w-3/4",
-                          col.align === "right" && "ms-auto",
-                          col.align === "center" && "mx-auto"
+                        priority: col.priority,
+                        "data-align": col.align,
+                        style: columnCellStyle(col),
+                        className: cn(cellPadding, columnCellClass(col)),
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "ui-skeleton-block ui-data-table-skeleton-line",
+                              j === 0 ? "w-1/2" : "w-3/4",
+                              col.align === "right" && "ms-auto",
+                              col.align === "center" && "mx-auto"
+                            )
+                          }
                         )
-                      }
-                    )
-                  },
-                  col.key
-                ))
-              ] }, `skeleton-${i}`))
-            ) : isDenied ? (
-              // repeating a 403 cannot succeed. `warning` (not destructive) keeps it a policy
-              // statement rather than a system fault. Announced politely: a permission boundary
-              // is expected information, not an interruption.
-              /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
-                TableCell,
-                {
-                  colSpan: emptyColSpan,
-                  className: "ui-data-table-empty",
-                  "aria-live": "polite",
-                  children: denied === true ? /* @__PURE__ */ jsx(
+                      },
+                      col.key
+                    ))
+                  ] }, `skeleton-${i}`))
+                ) : isDenied ? (
+                  // repeating a 403 cannot succeed. `warning` (not destructive) keeps it a policy
+                  // statement rather than a system fault. Announced politely: a permission boundary
+                  // is expected information, not an interruption.
+                  /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      colSpan: emptyColSpan,
+                      className: "ui-data-table-empty",
+                      "aria-live": "polite",
+                      children: denied === true ? /* @__PURE__ */ jsx(
+                        EmptyState,
+                        {
+                          icon: ShieldAlert,
+                          tone: "warning",
+                          title: t("dataTable.denied"),
+                          description: t("dataTable.deniedDescription"),
+                          titleAs: "p"
+                        }
+                      ) : denied
+                    }
+                  ) })
+                ) : isError ? (
+                  // Announced assertively (`role="alert"`) because the
+                  // user's request did not complete — unlike empty/denied, which are states of the data
+                  // itself. The role sits on an inner wrapper, never on the <td>: overriding a cell's
+                  // role would strip it out of the table's grid semantics for AT.
+                  /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "ui-data-table-empty", children: /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
                     EmptyState,
                     {
-                      icon: ShieldAlert,
-                      tone: "warning",
-                      title: t("dataTable.denied"),
-                      description: t("dataTable.deniedDescription"),
-                      titleAs: "p"
+                      icon: AlertCircle,
+                      tone: "destructive",
+                      title: t("dataTable.error"),
+                      description: t("dataTable.errorDescription"),
+                      titleAs: "p",
+                      action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+                        /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
+                        t("common.retry")
+                      ] }) : void 0
                     }
-                  ) : denied
-                }
-              ) })
-            ) : isError ? (
-              // Announced assertively (`role="alert"`) because the
-              // user's request did not complete — unlike empty/denied, which are states of the data
-              // itself. The role sits on an inner wrapper, never on the <td>: overriding a cell's
-              // role would strip it out of the table's grid semantics for AT.
-              /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "ui-data-table-empty", children: /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
-                EmptyState,
-                {
-                  icon: AlertCircle,
-                  tone: "destructive",
-                  title: t("dataTable.error"),
-                  description: t("dataTable.errorDescription"),
-                  titleAs: "p",
-                  action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
-                    /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
-                    t("common.retry")
-                  ] }) : void 0
-                }
-              ) : error }) }) })
-            ) : rowCount === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
-              TableCell,
-              {
-                colSpan: emptyColSpan,
-                className: "ui-data-table-empty",
-                "aria-live": "polite",
-                children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty"), titleAs: "p" })
-              }
-            ) }) : dataRows.map((row) => {
-              const original = row.original;
-              const isSelected = row.getIsSelected();
-              const isInteractiveTarget = (target) => !!target.closest(
-                "button, a, input, select, textarea, [role=menuitem], [role=checkbox]"
-              );
-              return /* @__PURE__ */ jsxs(
-                TableRow,
-                {
-                  "data-state": isSelected ? "selected" : void 0,
-                  tabIndex: onRowClick ? 0 : void 0,
-                  onClick: (e) => {
-                    const target = e.target;
-                    if (isInteractiveTarget(target)) return;
-                    onRowClick?.(original);
-                  },
-                  onKeyDown: onRowClick ? (e) => {
-                    if (e.key !== "Enter" && e.key !== " ") return;
-                    if (e.target !== e.currentTarget) return;
-                    e.preventDefault();
-                    onRowClick?.(original);
-                  } : void 0,
-                  className: cn(
-                    rowPadding,
-                    // Hover highlight when rows are clickable OR explicitly hoverable…
-                    (onRowClick || hoverable) && "hover:bg-muted/50",
-                    // …but the affordance (cursor + focus mark) only when clickable.
-                    //
-                    // `ui-focus-ring` = the single focus source (styles/focus-ring.css). It
-                    // replaces `focus-visible:ring-ring focus-visible:ring-2
-                    // focus-visible:ring-inset`, which was a hand-rolled second ring: it read no
-                    // `--focus-ring-*` knob, so a service could not retune it, and — being a
-                    // utility — it painted regardless of the `--focus-outline` switch, which is
-                    // exactly the hole the switch exists to close.
-                    onRowClick && "ui-focus-ring cursor-pointer",
-                    isSelected && "bg-muted/30",
-                    rowClassName?.(original)
-                  ),
-                  children: [
-                    selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
-                      Checkbox,
+                  ) : error }) }) })
+                ) : rowCount === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    colSpan: emptyColSpan,
+                    className: "ui-data-table-empty",
+                    "aria-live": "polite",
+                    children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty"), titleAs: "p" })
+                  }
+                ) }) : dataRows.map((row, rowIndex) => {
+                  const original = row.original;
+                  const rowKey = getRowId(original);
+                  const isSelected = row.getIsSelected();
+                  const checkboxProps = rowSelection?.getCheckboxProps?.(original) ?? {};
+                  const canExpand = expandColumnShown && (expandable?.rowExpandable?.(original) ?? true);
+                  const isExpanded = canExpand && expandedKeys.includes(rowKey);
+                  const rowProps = onRow?.(original, rowIndex) ?? {};
+                  const isInteractiveTarget = (target) => !!target.closest(
+                    "button, a, input, select, textarea, [role=menuitem], [role=checkbox], [role=radio]"
+                  );
+                  const expandByClick = canExpand && expandable?.expandRowByClick;
+                  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                    /* @__PURE__ */ jsxs(
+                      TableRow,
                       {
-                        checked: isSelected,
-                        onCheckedChange: (v) => {
-                          row.toggleSelected(!!v);
-                        },
-                        "aria-label": t("dataTable.selectRow", { id: row.id }),
+                        ...rowProps,
+                        "data-state": isSelected ? "selected" : void 0,
+                        tabIndex: onRowClick ? 0 : rowProps.tabIndex,
                         onClick: (e) => {
-                          e.stopPropagation();
-                        }
-                      }
-                    ) }),
-                    visibleColumns.map((col) => /* @__PURE__ */ jsx(
-                      TableCell,
-                      {
-                        priority: col.priority,
-                        "data-align": col.align,
-                        style: columnWidth(col.width).style,
+                          rowProps.onClick?.(e);
+                          const target = e.target;
+                          if (isInteractiveTarget(target)) return;
+                          if (expandByClick) toggleExpanded(rowKey);
+                          onRowClick?.(original);
+                        },
+                        onKeyDown: onRowClick ? (e) => {
+                          rowProps.onKeyDown?.(e);
+                          if (e.key !== "Enter" && e.key !== " ") return;
+                          if (e.target !== e.currentTarget) return;
+                          e.preventDefault();
+                          onRowClick?.(original);
+                        } : rowProps.onKeyDown,
                         className: cn(
-                          cellPadding,
-                          columnWidth(col.width).className,
-                          col.align === "right" && "text-end",
-                          col.align === "center" && "text-center",
-                          col.hiddenOnMobile && "hidden md:table-cell",
-                          col.pin === "end" && "ui-data-table-pin-end"
+                          rowPadding,
+                          // Hover highlight when rows are clickable OR explicitly hoverable…
+                          (onRowClick || hoverable) && "hover:bg-muted/50",
+                          // …but the affordance (cursor + focus mark) only when clickable.
+                          //
+                          // `ui-focus-ring` = the single focus source (styles/focus-ring.css). It
+                          // replaces `focus-visible:ring-ring focus-visible:ring-2
+                          // focus-visible:ring-inset`, which was a hand-rolled second ring: it read no
+                          // `--focus-ring-*` knob, so a service could not retune it, and — being a
+                          // utility — it painted regardless of the `--focus-outline` switch, which is
+                          // exactly the hole the switch exists to close.
+                          onRowClick && "ui-focus-ring cursor-pointer",
+                          isSelected && "bg-muted/30",
+                          rowProps.className,
+                          rowClassName?.(original)
                         ),
-                        children: col.render ? col.render(original) : (() => {
-                          const v = original[col.key];
-                          const text = v == null || !(typeof v === "string" || typeof v === "number") ? "\u2014" : String(v);
-                          return /* @__PURE__ */ jsx("span", { "data-slot": "table-cell-text", children: text });
-                        })()
-                      },
-                      col.key
-                    ))
-                  ]
-                },
-                row.id
-              );
-            }) })
-          ] })
+                        children: [
+                          expandColumnShown && /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              className: cn(
+                                cellPadding,
+                                leadingFixed === "start" && "ui-data-table-pin-start"
+                              ),
+                              ...fixedCellProps("__expand", leadingFixed),
+                              style: leadingFixedStyle("__expand"),
+                              children: canExpand ? /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  "aria-expanded": isExpanded,
+                                  "aria-label": isExpanded ? t("dataTable.collapseRow") : t("dataTable.expandRow"),
+                                  className: "ui-data-table-expand-trigger",
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    toggleExpanded(rowKey);
+                                  },
+                                  children: isExpanded ? /* @__PURE__ */ jsx(
+                                    ChevronDown,
+                                    {
+                                      className: "ui-data-table-sort-icon",
+                                      "aria-hidden": "true"
+                                    }
+                                  ) : /* @__PURE__ */ jsx(
+                                    ChevronRight,
+                                    {
+                                      className: "ui-data-table-sort-icon",
+                                      "aria-hidden": "true"
+                                    }
+                                  )
+                                }
+                              ) : null
+                            }
+                          ),
+                          selectable && /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              className: cn(
+                                cellPadding,
+                                leadingFixed === "start" && "ui-data-table-pin-start"
+                              ),
+                              ...fixedCellProps("__select", leadingFixed),
+                              style: leadingFixedStyle("__select"),
+                              children: rowSelection?.type === "radio" ? (
+                                // One choice per table, so each cell is its own single-item group:
+                                // Radix requires a Root for an Item, and a Root cannot legally span
+                                // <tr> boundaries without rewriting the table's own semantics.
+                                /* @__PURE__ */ jsx(
+                                  RadioGroupRoot,
+                                  {
+                                    value: isSelected ? rowKey : "",
+                                    disabled: checkboxProps.disabled,
+                                    onValueChange: () => {
+                                      row.toggleSelected(true);
+                                    },
+                                    children: /* @__PURE__ */ jsx(
+                                      RadioItem,
+                                      {
+                                        value: rowKey,
+                                        "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                        onClick: (e) => {
+                                          e.stopPropagation();
+                                        }
+                                      }
+                                    )
+                                  }
+                                )
+                              ) : /* @__PURE__ */ jsx(
+                                Checkbox,
+                                {
+                                  checked: isSelected,
+                                  disabled: checkboxProps.disabled,
+                                  onCheckedChange: (v) => {
+                                    row.toggleSelected(!!v);
+                                  },
+                                  "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          visibleColumns.map((col) => {
+                            const rendered = col.render ? col.render(original) : (() => {
+                              const v = original[col.key];
+                              const text = v == null || !(typeof v === "string" || typeof v === "number") ? "\u2014" : String(v);
+                              return /* @__PURE__ */ jsx("span", { "data-slot": "table-cell-text", children: text });
+                            })();
+                            const rawValue = original[col.key];
+                            const title = col.ellipsis && !col.render && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                            return /* @__PURE__ */ jsx(
+                              TableCell,
+                              {
+                                priority: col.priority,
+                                "data-align": col.align,
+                                title,
+                                ...fixedCellProps(col.key, fixedEdge(col)),
+                                style: columnCellStyle(col),
+                                className: cn(cellPadding, columnCellClass(col)),
+                                children: rendered
+                              },
+                              col.key
+                            );
+                          })
+                        ]
+                      }
+                    ),
+                    isExpanded && expandable?.expandedRowRender ? /* @__PURE__ */ jsx(
+                      TableRow,
+                      {
+                        className: "ui-data-table-expanded-row hover:bg-transparent",
+                        "data-expanded-row": "",
+                        children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, flush: true, children: expandable.expandedRowRender(original, rowIndex, true) })
+                      }
+                    ) : null
+                  ] }, row.id);
+                }) }),
+                summary ? (
+                  // A real <tfoot>: the totals row belongs to the table's own grid, so it keeps the
+                  // column widths, the header association and the screen-reader row navigation.
+                  /* @__PURE__ */ jsx("tfoot", { "data-slot": "table-footer", className: "ui-data-table-summary", children: summary(dataRows.map((row) => row.original)) })
+                ) : null
+              ]
+            }
+          )
         }
       )
     }
@@ -779,14 +1311,14 @@ function CursorPagination({ cursor, hasMore, onChange, className }) {
     )
   ] });
 }
-function NumberedPagination({
-  pageSizeOptions = [10, 20, 50, 100],
-  className
-}) {
-  const { table } = useDataTableContext();
+function NumberedPagination({ pageSizeOptions, className }) {
+  const { table, paginationConfig, pagerHidden } = useDataTableContext();
   const { t } = useTranslation();
   const { pageIndex, pageSize } = table.state.pagination;
   const pageCount = table.getPageCount();
+  if (pagerHidden) return null;
+  const options = pageSizeOptions ?? paginationConfig?.pageSizeOptions ?? [10, 20, 50, 100];
+  const showSizeChanger = paginationConfig?.showSizeChanger ?? true;
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -797,7 +1329,7 @@ function NumberedPagination({
       wrap: true,
       className: cn("ui-data-table-pagination ui-data-table-pagination--numbered", className),
       children: [
-        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", className: "ui-data-table-page-size", children: [
+        showSizeChanger ? /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", className: "ui-data-table-page-size", children: [
           /* @__PURE__ */ jsx("span", { className: "ui-data-table-page-size-label ui-data-table-pagination-text", children: t("dataGrid.rowsPerPage") }),
           /* @__PURE__ */ jsxs(
             Select,
@@ -814,11 +1346,11 @@ function NumberedPagination({
                     children: /* @__PURE__ */ jsx(SelectValue, {})
                   }
                 ),
-                /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), className: "tabular-nums", children: n }, n)) })
+                /* @__PURE__ */ jsx(SelectContent, { children: options.map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), className: "tabular-nums", children: n }, n)) })
               ]
             }
           )
-        ] }),
+        ] }) : /* @__PURE__ */ jsx("span", {}),
         /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", className: "ui-data-table-page-nav", children: [
           /* @__PURE__ */ jsx("span", { className: "ui-data-table-pagination-text tabular-nums", children: t("dataGrid.pageOf", { page: pageIndex + 1, total: Math.max(1, pageCount) }) }),
           /* @__PURE__ */ jsx(