@flanksource/clicky-ui 0.3.21 → 0.3.22

package/dist/data/DataTable.cjs

@@ -14,6 +14,7 @@ const FilterBar = require("../components/FilterBar.cjs");
 const filterBarUtils = require("../components/filter-bar-utils.cjs");
 const dataTableUtils = require("./data-table-utils.cjs");
 const dataTableServerFilters = require("./data-table-server-filters.cjs");
+const useInfiniteRows = require("./use-infinite-rows.cjs");
 const Icon = require("./Icon.cjs");
 const SortableHeader = require("./SortableHeader.cjs");
 const Timestamp = require("./cells/Timestamp.cjs");
@@ -45,6 +46,8 @@ const DEFAULT_COLUMN_MIN_WIDTH = 64;
 const DEFAULT_COLUMN_WIDTH = 160;
 const DEFAULT_GROW_COLUMN_WIDTH = 224;
 const DEFAULT_SHRINK_COLUMN_WIDTH = 96;
+const DEFAULT_CELL_MAX_WIDTH = 288;
+const DEFAULT_SHRINK_CELL_MAX_WIDTH = 256;
 const COLUMN_WIDTH_STORAGE_PREFIX = "clicky-ui-data-table-column-widths";
 const COLUMN_VISIBILITY_STORAGE_PREFIX = "clicky-ui-data-table-column-visibility";
 const DENSITY_STORAGE_PREFIX = "clicky-ui-data-table-density";
@@ -92,6 +95,8 @@ function DataTableInner({
   cellFilters,
   onCellFilterChange,
   pagination,
+  infinite,
+  scrollContainerRef,
   getRowId,
   rowSelection,
   selectionActions,
@@ -288,15 +293,27 @@ function DataTableInner({
   const hasMenuActions = Boolean(menuActions && menuActions.length > 0);
   const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl || hasMenuActions;
   const densityOverride = densityControlled ? density : localDensityOverride;
-  const timeRangeColumn = react.useMemo(() => {
-    if (manualFilter || externalTimeRange || (filterBarProps == null ? void 0 : filterBarProps.timeRange)) return null;
-    return effectiveColumns.find(
+  const rangeCapableColumn = react.useMemo(
+    () => effectiveColumns.find(
       (column) => {
         var _a;
         return column.kind === "timestamp" && column.filterable !== false && ((_a = column.timestamp) == null ? void 0 : _a.autoRangeFilter) !== false;
       }
-    ) ?? null;
-  }, [effectiveColumns, externalTimeRange, filterBarProps == null ? void 0 : filterBarProps.timeRange, manualFilter]);
+    ) ?? null,
+    [effectiveColumns]
+  );
+  const timeRangeColumn = react.useMemo(() => {
+    if (!autoFilter || manualFilter || externalTimeRange || (filterBarProps == null ? void 0 : filterBarProps.timeRange)) {
+      return null;
+    }
+    return rangeCapableColumn;
+  }, [
+    autoFilter,
+    externalTimeRange,
+    filterBarProps == null ? void 0 : filterBarProps.timeRange,
+    manualFilter,
+    rangeCapableColumn
+  ]);
   const filterableColumns = react.useMemo(
     () => effectiveColumns.filter((column) => {
       if (column.filterable === false) return false;
@@ -439,6 +456,11 @@ function DataTableInner({
     () => new Map((externalFilters ?? []).map((filter) => [filter.key, filter])),
     [externalFilters]
   );
+  const serverTimeRangeFilter = react.useMemo(() => {
+    const key = rangeCapableColumn == null ? void 0 : rangeCapableColumn.filterKey;
+    const filter = key ? serverFilterByKey.get(key) : void 0;
+    return (filter == null ? void 0 : filter.kind) === "date-range" ? filter : null;
+  }, [rangeCapableColumn, serverFilterByKey]);
   const headerFilterByColumn = react.useMemo(() => {
     const bound = /* @__PURE__ */ new Map();
     for (const column of effectiveColumns) {
@@ -448,10 +470,10 @@ function DataTableInner({
         continue;
       }
       const server = column.filterKey ? serverFilterByKey.get(column.filterKey) : void 0;
-      if (server) bound.set(column.key, server);
+      if (server && server !== serverTimeRangeFilter) bound.set(column.key, server);
     }
     return bound;
-  }, [effectiveColumns, nativeFilters, serverFilterByKey]);
+  }, [effectiveColumns, nativeFilters, serverFilterByKey, serverTimeRangeFilter]);
   const hasCustomFilterBarContent = Boolean(
     (filterBarProps == null ? void 0 : filterBarProps.leading) || (filterBarProps == null ? void 0 : filterBarProps.children) || (filterBarProps == null ? void 0 : filterBarProps.trailing) || (filterBarProps == null ? void 0 : filterBarProps.timeRange) || (filterBarProps == null ? void 0 : filterBarProps.dateRange)
   );
@@ -478,6 +500,25 @@ function DataTableInner({
     }
     return next;
   }, [timeRangeColumn, timeRangeFilter.from, timeRangeFilter.to]);
+  const columnTimeRange = react.useMemo(() => {
+    if (serverTimeRangeFilter && rangeCapableColumn) {
+      return {
+        key: rangeCapableColumn.key,
+        range: filterBarUtils.dateRangeFilterProps(serverTimeRangeFilter)
+      };
+    }
+    if (autoTimeRange && timeRangeColumn) {
+      return { key: timeRangeColumn.key, range: autoTimeRange };
+    }
+    return null;
+  }, [autoTimeRange, rangeCapableColumn, serverTimeRangeFilter, timeRangeColumn]);
+  const barTimeRange = externalTimeRange ?? (columnTimeRange == null ? void 0 : columnTimeRange.range) ?? null;
+  const barFilters = react.useMemo(() => {
+    const external = (externalFilters ?? []).filter(
+      (filter) => filter !== serverTimeRangeFilter
+    );
+    return external.length > 0 ? [...external, ...nativeFilters] : nativeFilters;
+  }, [externalFilters, nativeFilters, serverTimeRangeFilter]);
   const resolvedShowGlobalFilter = showGlobalFilter ?? autoFilter;
   dataTableServerFilters.assertDataTableFilterProps({
     autoFilter,
@@ -486,7 +527,7 @@ function DataTableInner({
     globalFilterControlled: globalFilter !== void 0 || onGlobalFilterChange !== void 0,
     hasExternalSearch: externalSearch !== void 0
   });
-  const showFilterBar = resolvedShowGlobalFilter || nativeFilters.length > 0 || !!autoTimeRange || !!externalSearch || !!externalTimeRange || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
+  const showFilterBar = resolvedShowGlobalFilter || nativeFilters.length > 0 || !!barTimeRange || !!externalSearch || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
   const setDensityOverride = (next) => {
     if (!densityControlled) setLocalDensityOverride(next);
     onDensityChange == null ? void 0 : onDensityChange(next);
@@ -500,18 +541,16 @@ function DataTableInner({
       }
     )
   ] }) : filterBarProps == null ? void 0 : filterBarProps.trailing;
-  const showHeaderFilterControls = showHeaderFilters && (headerFilterByColumn.size > 0 || !!autoTimeRange);
+  const showHeaderFilterControls = showHeaderFilters && (headerFilterByColumn.size > 0 || !!columnTimeRange);
   const filteredRows = react.useMemo(() => {
     if (manualFilter) return rows;
     const globalNeedle = effectiveGlobalFilter.trim().toLowerCase();
     const now = /* @__PURE__ */ new Date();
     const rangeFromDate = timeRangeColumn ? timestampFormat.resolveDateMath(timeRangeFilter.from, now) : null;
     const rangeToDate = timeRangeColumn ? timestampFormat.resolveDateMath(timeRangeFilter.to, now) : null;
-    const rangeColumnKey = timeRangeColumn == null ? void 0 : timeRangeColumn.key;
     return rows.filter(({ row }) => {
-      if (rangeColumnKey && (rangeFromDate || rangeToDate)) {
-        const raw = dataTableUtils.resolvePath(row, rangeColumnKey);
-        const ts = timestampFormat.parseTimestamp(raw);
+      if (timeRangeColumn && (rangeFromDate || rangeToDate)) {
+        const ts = timestampFormat.parseTimestamp(dataTableUtils.getFilterCandidate(row, timeRangeColumn));
         if (!ts) return false;
         if (rangeFromDate && ts.getTime() < rangeFromDate.getTime())
           return false;
@@ -591,7 +630,7 @@ function DataTableInner({
     ...(defaultSort == null ? void 0 : defaultSort.key) ? { defaultKey: defaultSort.key } : {}
   });
   const pageLocalSort = !!pagination && !onSortChange;
-  const revealEnabled = !!clientReveal && !pagination;
+  const revealEnabled = !!clientReveal && !pagination && !infinite;
   const revealBatchSize = (clientReveal == null ? void 0 : clientReveal.batchSize) ?? 0;
   const [visibleCount, setVisibleCount] = react.useState(revealBatchSize);
   const revealObserver = react.useRef(null);
@@ -600,6 +639,10 @@ function DataTableInner({
   }, [revealEnabled, revealBatchSize, sorted]);
   const visibleSorted = revealEnabled ? sorted.slice(0, visibleCount) : sorted;
   const hasMoreRows = revealEnabled && visibleCount < sorted.length;
+  const requestMoreRows = useInfiniteRows.useInfiniteRows(infinite, data.length);
+  const infiniteEnabled = !!infinite;
+  const sentinelActive = infinite ? infinite.hasMore : hasMoreRows;
+  const sentinelLabel = !infinite || infinite.loading ? "Loading more…" : "Scroll to load more…";
   const selectedRowIDs = react.useMemo(
     () => new Set((rowSelection == null ? void 0 : rowSelection.selectedRowIds) ?? []),
     [rowSelection == null ? void 0 : rowSelection.selectedRowIds]
@@ -676,7 +719,7 @@ function DataTableInner({
     visibleRowCount: sorted.length,
     totalRowCount: data.length,
     loading: loading$1
-  }) : footer : pagination ? null : loading$1 ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}`;
+  }) : footer : pagination ? null : loading$1 && sorted.length === 0 ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}`;
   const [collapsedGroups, setCollapsedGroups] = react.useState({});
   const groups = react.useMemo(() => {
     if (!grouping) return null;
@@ -733,21 +776,30 @@ function DataTableInner({
   const revealSentinelRef = react.useCallback(
     (node) => {
       if (revealObserver.current) revealObserver.current.disconnect();
-      if (!node || !hasMoreRows) return;
+      if (!node || !sentinelActive) return;
       revealObserver.current = new IntersectionObserver(
         (entries) => {
           var _a;
-          if ((_a = entries[0]) == null ? void 0 : _a.isIntersecting) {
-            setVisibleCount(
-              (current) => Math.min(current + revealBatchSize, sorted.length)
-            );
+          if (!((_a = entries[0]) == null ? void 0 : _a.isIntersecting)) return;
+          if (infiniteEnabled) {
+            requestMoreRows();
+            return;
           }
+          setVisibleCount(
+            (current) => Math.min(current + revealBatchSize, sorted.length)
+          );
         },
         { rootMargin: "200px" }
       );
       revealObserver.current.observe(node);
     },
-    [hasMoreRows, revealBatchSize, sorted.length]
+    [
+      infiniteEnabled,
+      requestMoreRows,
+      revealBatchSize,
+      sentinelActive,
+      sorted.length
+    ]
   );
   const startColumnResize = (event, column) => {
     event.preventDefault();
@@ -836,9 +888,9 @@ function DataTableInner({
                 placeholder: globalFilterPlaceholder
               }
             } : {},
-            ...externalTimeRange ? { timeRange: externalTimeRange } : autoTimeRange ? { timeRange: autoTimeRange } : {},
+            ...barTimeRange ? { timeRange: barTimeRange } : {},
             trailing: filterBarTrailing,
-            filters: externalFilters && externalFilters.length > 0 ? [...externalFilters, ...nativeFilters] : nativeFilters
+            filters: barFilters
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 max-w-full flex-1 flex-col", children: [
@@ -846,6 +898,7 @@ function DataTableInner({
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
+              ref: scrollContainerRef,
               className: utils.cn(
                 "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border bg-background",
                 scrollContainerClassName
@@ -857,8 +910,8 @@ function DataTableInner({
                   visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
                     "col",
                     {
-                      style: columnStyle(column, columnWidths),
-                      className: column.shrink && !column.grow ? "w-px" : void 0
+                      style: error == null ? columnStyle(column, columnWidths) : void 0,
+                      className: column.shrink && !column.grow && error == null ? "w-px" : void 0
                     },
                     column.key
                   ))
@@ -924,14 +977,14 @@ function DataTableInner({
                                   children: column.label
                                 }
                               ) }),
-                              showHeaderFilterControls && (headerFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsxRuntime.jsx(
+                              showHeaderFilterControls && (headerFilterByColumn.has(column.key) || (columnTimeRange == null ? void 0 : columnTimeRange.key) === column.key) && /* @__PURE__ */ jsxRuntime.jsx(
                                 HeaderFilterButton,
                                 {
                                   column,
                                   active: headerFilterByColumn.has(column.key) ? filterBarUtils.isFilterBarFilterActive(
                                     headerFilterByColumn.get(column.key)
                                   ) : Boolean(
-                                    timeRangeFilter.from || timeRangeFilter.to
+                                    (columnTimeRange == null ? void 0 : columnTimeRange.range.from) || (columnTimeRange == null ? void 0 : columnTimeRange.range.to)
                                   ),
                                   onOpen: (event) => openHeaderFilterMenu(event, column.key)
                                 }
@@ -996,6 +1049,8 @@ function DataTableInner({
                         {
                           label: item.group.label,
                           meta: item.group.meta,
+                          metaAlign: (grouping == null ? void 0 : grouping.metaAlign) ?? "end",
+                          ...(grouping == null ? void 0 : grouping.metaClassName) ? { metaClassName: grouping.metaClassName } : {},
                           count: item.group.records.length,
                           colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
                           collapsed: item.group.collapsed,
@@ -1140,28 +1195,25 @@ function DataTableInner({
                                     alignmentClass(column.align),
                                     column.cellClassName
                                   ),
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                                    CellContent,
-                                    {
-                                      column,
-                                      ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
-                                      children: href && index === 0 ? (
-                                        // One real <a href> per row whose ::after
-                                        // overlay stretches across the whole (relative)
-                                        // row: right/middle-click give native "open in
-                                        // new tab", plain left-click routes client-side.
-                                        // The overlay paints over the cell, so a cell
-                                        // with filter actions lifts them above it —
-                                        // otherwise the link swallows the hover that
-                                        // reveals the include/exclude buttons.
-                                        renderLink({
-                                          to: href,
-                                          className: "hover:underline after:absolute after:inset-0 after:content-['']",
-                                          children: hasCellFilterActions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex min-w-0 items-center", children: content }) : content
-                                        })
-                                      ) : content
-                                    }
-                                  )
+                                  style: cellSizingStyle(
+                                    column,
+                                    columnWidths[column.key]
+                                  ),
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(CellContent, { column, children: href && index === 0 ? (
+                                    // One real <a href> per row whose ::after
+                                    // overlay stretches across the whole (relative)
+                                    // row: right/middle-click give native "open in
+                                    // new tab", plain left-click routes client-side.
+                                    // The overlay paints over the cell, so a cell
+                                    // with filter actions lifts them above it —
+                                    // otherwise the link swallows the hover that
+                                    // reveals the include/exclude buttons.
+                                    renderLink({
+                                      to: href,
+                                      className: "hover:underline after:absolute after:inset-0 after:content-['']",
+                                      children: hasCellFilterActions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex min-w-0 items-center", children: content }) : content
+                                    })
+                                  ) : content })
                                 },
                                 column.key
                               );
@@ -1179,12 +1231,12 @@ function DataTableInner({
                       ) })
                     ] }, record.id);
                   }),
-                  error == null && hasMoreRows && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  error == null && sentinelActive && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
                     "td",
                     {
                       colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
                       className: "p-density-2 text-center text-xs text-muted-foreground",
-                      children: "Loading more…"
+                      children: sentinelLabel
                     }
                   ) })
                 ] })
@@ -1206,8 +1258,7 @@ function DataTableInner({
           {
             pagination,
             visibleRowCount: sorted.length,
-            loading: loading$1,
-            loadingMessage
+            infinite: infiniteEnabled
           }
         ) : null,
         detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1250,7 +1301,7 @@ function DataTableInner({
           HeaderFilterMenu,
           {
             filter: headerFilterByColumn.get(headerFilterMenu.columnKey ?? ""),
-            ...autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === headerFilterMenu.columnKey ? { timeRange: autoTimeRange } : {},
+            ...columnTimeRange && columnTimeRange.key === headerFilterMenu.columnKey ? { timeRange: columnTimeRange.range } : {},
             anchor: headerFilterMenu,
             onClose: () => setHeaderFilterMenu(null)
           }
@@ -1297,8 +1348,7 @@ function useCursorTrail(cursor) {
 function DataTablePaginationFooter({
   pagination,
   visibleRowCount,
-  loading: loading2,
-  loadingMessage
+  infinite = false
 }) {
   const { page, pageSize, total, totalRelation, cursor, onPageChange, onPageSizeChange } = pagination;
   const options = Array.from(
@@ -1314,10 +1364,10 @@ function DataTablePaginationFooter({
   const atFirst = safePage === 0;
   const atLast = cursor ? cursor.next == null : pagination.hasMore != null ? !pagination.hasMore : totalPages != null ? safePage >= totalPages - 1 : visibleRowCount < pageSize;
   const hasVisibleRows = visibleRowCount > 0;
-  const rangeStart = total === 0 || !hasVisibleRows ? 0 : safePage * pageSize + 1;
+  const rangeStart = total === 0 || !hasVisibleRows ? 0 : infinite ? 1 : safePage * pageSize + 1;
   const rangeEnd = total != null && hasVisibleRows ? Math.min(approximate ? Infinity : total, rangeStart + Math.max(visibleRowCount - 1, 0)) : visibleRowCount;
   const rangeLabel = total != null ? `${rangeStart}-${rangeEnd} of ${approximate ? `~${total}+` : total}` : `${visibleRowCount} row${visibleRowCount === 1 ? "" : "s"}`;
-  const steppable = cursor != null || onPageChange != null;
+  const steppable = !infinite && (cursor != null || onPageChange != null);
   const goPrevious = () => {
     if (!cursor) {
       onPageChange == null ? void 0 : onPageChange(Math.max(0, safePage - 1));
@@ -1335,7 +1385,7 @@ function DataTablePaginationFooter({
     cursor.onCursorChange(cursor.next);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-9 shrink-0 flex-row items-stretch gap-3 border-t border-border/70 px-1 pt-2 text-xs text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", children: loading2 ? loadingMessage : rangeLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", children: rangeLabel }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap  items-center gap-2 sm:gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page" }),
@@ -1386,6 +1436,8 @@ function DataTablePaginationFooter({
 function DataTableGroupHeaderRow({
   label,
   meta,
+  metaAlign,
+  metaClassName,
   count,
   colSpan,
   collapsed,
@@ -1417,7 +1469,12 @@ function DataTableGroupHeaderRow({
         type: "button",
         "aria-expanded": !collapsed,
         onClick: onToggleCollapsed,
-        className: "flex min-w-0 flex-1 items-center gap-1.5 text-left text-xs font-semibold text-foreground hover:text-primary",
+        className: utils.cn(
+          "flex min-w-0 items-center gap-1.5 text-left text-xs font-semibold text-foreground hover:text-primary",
+          // `flex-1` is what pushes the meta to the trailing edge. Dropping
+          // it lets the meta sit right after the count instead.
+          metaAlign === "end" && "flex-1"
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Icon.Icon,
@@ -1431,7 +1488,16 @@ function DataTableGroupHeaderRow({
         ]
       }
     ),
-    meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: meta }) : null
+    meta ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "shrink-0 text-xs text-muted-foreground",
+          metaClassName
+        ),
+        children: meta
+      }
+    ) : null
   ] }) }) });
 }
 function DataTableLoadingRows({
@@ -1473,6 +1539,7 @@ function DataTableLoadingRows({
             alignmentClass(column.align),
             column.cellClassName
           ),
+          style: cellSizingStyle(column, void 0),
           children: /* @__PURE__ */ jsxRuntime.jsx(CellContent, { column, children: /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -1498,7 +1565,7 @@ function DataTableErrorRow({
     {
       colSpan: Math.max(1, colSpan),
       className: utils.cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-density-3"),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", children: error })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", className: "w-0 min-w-full overflow-hidden", children: error })
     }
   ) });
 }
@@ -1763,6 +1830,7 @@ function MenuActionSection({
   onClose
 }) {
   const groups = groupMenuActions(actions);
+  const [openSubmenu, setOpenSubmenu] = react.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1770,51 +1838,109 @@ function MenuActionSection({
         (separated || index > 0) && "mt-1 border-t border-border pt-1"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group.section }),
-        group.actions.map((action) => {
-          const hasDescription = Boolean(action.description);
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              disabled: action.disabled,
-              className: utils.cn(
-                "flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
-                hasDescription ? "items-start" : "items-center",
-                action.disabled && "cursor-not-allowed opacity-50"
-              ),
-              onClick: () => {
-                if (action.disabled) return;
-                action.onSelect();
-                onClose();
-              },
-              children: [
-                action.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                  Icon.Icon,
-                  {
-                    icon: action.icon,
-                    className: utils.cn(
-                      "shrink-0 text-sm",
-                      hasDescription && "mt-0.5",
-                      action.iconClassName ?? "text-muted-foreground"
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(hasDescription && "font-medium"), children: action.label }),
-                  action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
-                ] })
-              ]
-            },
-            action.id
-          );
-        })
+        group.section && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group.section }),
+        group.actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+          MenuActionItem,
+          {
+            action,
+            submenu: (openSubmenu == null ? void 0 : openSubmenu.id) === action.id ? openSubmenu : null,
+            onOpenSubmenu: setOpenSubmenu,
+            onClose
+          },
+          action.id
+        ))
       ]
     },
     group.section
   )) });
 }
+function MenuActionItem({
+  action,
+  submenu,
+  onOpenSubmenu,
+  onClose
+}) {
+  const hasDescription = Boolean(action.description);
+  const children = action.children ?? [];
+  const isSubmenu = children.length > 0;
+  const openFrom = (element) => {
+    const rect = element.getBoundingClientRect();
+    const width = 224;
+    const x = rect.right + width > window.innerWidth ? rect.left - width : rect.right;
+    onOpenSubmenu({ id: action.id, x, y: rect.top });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": isSubmenu ? "menu" : void 0,
+        "aria-expanded": isSubmenu ? submenu != null : void 0,
+        disabled: action.disabled,
+        className: utils.cn(
+          "flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+          hasDescription ? "items-start" : "items-center",
+          action.disabled && "cursor-not-allowed opacity-50",
+          submenu && "bg-accent text-accent-foreground"
+        ),
+        onClick: (event) => {
+          if (action.disabled) return;
+          if (isSubmenu) {
+            if (submenu) onOpenSubmenu(null);
+            else openFrom(event.currentTarget);
+            return;
+          }
+          action.onSelect();
+          onClose();
+        },
+        children: [
+          action.icon && /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: action.icon,
+              className: utils.cn(
+                "shrink-0 text-sm",
+                hasDescription && "mt-0.5",
+                action.iconClassName ?? "text-muted-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(hasDescription && "font-medium"), children: action.label }),
+            action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
+          ] }),
+          isSubmenu && /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: UiChevronRight.UiChevronRight,
+              className: "shrink-0 text-sm text-muted-foreground"
+            }
+          )
+        ]
+      }
+    ),
+    isSubmenu && submenu && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "menu",
+        "aria-label": typeof action.label === "string" ? action.label : "Submenu",
+        className: "fixed z-50 max-h-[calc(100vh-1rem)] min-w-[14rem] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
+        style: { left: submenu.x, top: submenu.y },
+        children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+          MenuActionItem,
+          {
+            action: child,
+            submenu: null,
+            onOpenSubmenu,
+            onClose
+          },
+          child.id
+        ))
+      }
+    )
+  ] });
+}
 function DensityMenuSection({
   densityOverride,
   separated,
@@ -1918,17 +2044,15 @@ function ThemeMenuSection({
 }
 function CellContent({
   column,
-  width,
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: utils.cn(
-        cellContentClassName(column, width),
+        cellContentClassName(column),
         alignmentClass(column.align)
       ),
-      style: cellContentStyle(width),
       children
     }
   );
@@ -2366,17 +2490,20 @@ function headerAlignmentClass(align) {
 function loadingSkeletonWidth(index) {
   return ["w-24", "w-40", "w-28", "w-56", "w-32", "w-48"][index % 6];
 }
-function cellContentStyle(width) {
-  return width ? { maxWidth: `${width}px` } : void 0;
+function cellSizingStyle(column, width) {
+  if (width !== void 0) return { maxWidth: `${width}px` };
+  if (column.grow) {
+    return {
+      maxWidth: "0px",
+      minWidth: column.minWidth ?? DEFAULT_GROW_COLUMN_WIDTH
+    };
+  }
+  return {
+    maxWidth: column.maxWidth ?? (column.shrink ? DEFAULT_SHRINK_CELL_MAX_WIDTH : DEFAULT_CELL_MAX_WIDTH)
+  };
 }
-function cellContentClassName(column, width) {
-  const resized = width !== void 0;
-  const base = "w-full truncate";
-  if (column.grow)
-    return utils.cn(base, resized ? "min-w-0" : "min-w-56 max-w-[36rem]");
-  if (column.shrink)
-    return utils.cn(base, "min-w-0 whitespace-nowrap", !resized && "max-w-[16rem]");
-  return utils.cn(base, "min-w-0", !resized && "max-w-[18rem]");
+function cellContentClassName(column) {
+  return utils.cn("w-full min-w-0 truncate", column.shrink && "whitespace-nowrap");
 }
 function DataTable({
   theme: themeProp = "system",
@@ -2387,6 +2514,7 @@ function DataTable({
   fullscreenButtonLabel = "Open table full screen",
   className,
   filterBarProps,
+  scrollContainerRef,
   ...inner
 }) {
   const themeControlled = onThemeChange !== void 0;
@@ -2414,10 +2542,12 @@ function DataTable({
         )
       ] })
     } : filterBarProps;
+    const ownsScroll = inFullscreen === fullscreenOpen;
     return /* @__PURE__ */ jsxRuntime.jsx(
       DataTableInner,
       {
         ...inner,
+        ...ownsScroll && scrollContainerRef ? { scrollContainerRef } : {},
         ...mergedFilterBarProps ? { filterBarProps: mergedFilterBarProps } : {},
         themeMenuValue: themeValue,
         showThemeControl,