@flanksource/clicky-ui 0.3.21 → 0.3.23

package/dist/data/DataTable.js

@@ -9,9 +9,10 @@ import { useRouter } from "../rpc/router.js";
 import { Modal } from "../overlay/Modal.js";
 import { useEscapeLayer } from "../overlay/modalStack.js";
 import { FilterBar, FilterBarFilterPanel, FilterBarRangePanel } from "../components/FilterBar.js";
-import { isFilterBarFilterActive, clearFilterBarFilter } from "../components/filter-bar-utils.js";
-import { resolveColumnValue, getFilterTokens, resolvePath, getFilterCandidate, prettifyKey } from "./data-table-utils.js";
+import { dateRangeFilterProps, isFilterBarFilterActive, clearFilterBarFilter } from "../components/filter-bar-utils.js";
+import { resolveColumnValue, getFilterTokens, getFilterCandidate, prettifyKey } from "./data-table-utils.js";
 import { assertDataTableFilterProps } from "./data-table-server-filters.js";
+import { useInfiniteRows } from "./use-infinite-rows.js";
 import { Icon } from "./Icon.js";
 import { SortableHeader } from "./SortableHeader.js";
 import { Timestamp } from "./cells/Timestamp.js";
@@ -21,7 +22,8 @@ import { CellFilterActions } from "./cells/CellFilterActions.js";
 import { tagActionsFromRecord, tagFilterTokens, normalizeTags, splitTagToken } from "./cells/tag-utils.js";
 import { StatusDot } from "./cells/StatusDot.js";
 import { normalizeStatus } from "./cells/status-mapping.js";
-import { groupRecords, isGroupCollapsedByDefault } from "./DataTable.grouping.js";
+import { dataTableGroupLabel, dataTableGroupKey, groupRecords, isGroupCollapsedByDefault } from "./DataTable.grouping.js";
+import { DataTableGroupingControls } from "./DataTableGroupingControls.js";
 import { UiEllipsis } from "../icons/components/UiEllipsis.js";
 import { UiFilterFilled, UiFilter } from "../icons/components/UiFilter.js";
 import { UiChevronRight } from "../icons/components/UiChevronRight.js";
@@ -43,6 +45,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";
@@ -62,6 +66,44 @@ const TIMESTAMP_RANGE_PRESETS = [
   { label: "Last 7 days", from: "now-7d", to: "now" },
   { label: "Last 30 days", from: "now-30d", to: "now" }
 ];
+function assertDataTableGroupingProps({
+  grouping,
+  groupingModes,
+  groupingMode,
+  defaultGroupingMode,
+  onGroupingModeChange
+}) {
+  if (grouping && groupingModes) {
+    throw new Error("DataTable accepts grouping or groupingModes, not both");
+  }
+  if (!groupingModes) {
+    if (groupingMode !== void 0 || defaultGroupingMode !== void 0) {
+      throw new Error("DataTable groupingMode values require groupingModes");
+    }
+    return;
+  }
+  if (groupingModes.length === 0) {
+    throw new Error("DataTable groupingModes must not be empty");
+  }
+  const values = new Set(groupingModes.map((mode) => mode.value));
+  if (values.size !== groupingModes.length) {
+    throw new Error("DataTable groupingModes values must be unique");
+  }
+  if (groupingMode !== void 0 && !onGroupingModeChange) {
+    throw new Error(
+      "DataTable controlled groupingMode requires onGroupingModeChange"
+    );
+  }
+  if (groupingMode !== void 0 && defaultGroupingMode !== void 0) {
+    throw new Error(
+      "DataTable cannot combine groupingMode with defaultGroupingMode"
+    );
+  }
+  const selected = groupingMode ?? defaultGroupingMode;
+  if (selected !== void 0 && !values.has(selected)) {
+    throw new Error(`DataTable grouping mode "${selected}" does not exist`);
+  }
+}
 function DataTableInner({
   data,
   error,
@@ -90,12 +132,18 @@ function DataTableInner({
   cellFilters,
   onCellFilterChange,
   pagination,
+  infinite,
+  scrollContainerRef,
   getRowId,
   rowSelection,
   selectionActions,
   getRowClassName,
   footer,
   grouping,
+  groupingModes,
+  groupingMode,
+  defaultGroupingMode,
+  onGroupingModeChange,
   onRowClick,
   isRowClickable,
   getRowHref,
@@ -121,6 +169,14 @@ function DataTableInner({
   showHeaderFilters = true,
   menuActions
 }) {
+  var _a;
+  assertDataTableGroupingProps({
+    grouping,
+    groupingModes,
+    groupingMode,
+    defaultGroupingMode,
+    onGroupingModeChange
+  });
   const columns = useMemo(
     () => columnsInput.map(
       (column) => typeof column === "string" ? { key: column, label: column } : column
@@ -154,17 +210,18 @@ function DataTableInner({
   const [numberFilters, setNumberFilters] = useState({});
   const [expandedRows, setExpandedRows] = useState({});
   const [detailRow, setDetailRow] = useState(null);
+  const [localGroupingMode, setLocalGroupingMode] = useState(defaultGroupingMode);
   const [localGlobalFilter, setLocalGlobalFilter] = useState("");
   const [timeRangeFilter, setTimeRangeFilter] = useState(() => {
-    var _a, _b, _c, _d;
+    var _a2, _b, _c, _d;
     const seed = columns.find(
       (column) => {
-        var _a2;
-        return column.kind === "timestamp" && ((_a2 = column.timestamp) == null ? void 0 : _a2.defaultRange);
+        var _a3;
+        return column.kind === "timestamp" && ((_a3 = column.timestamp) == null ? void 0 : _a3.defaultRange);
       }
     );
     return {
-      from: ((_b = (_a = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _a.defaultRange) == null ? void 0 : _b.from) ?? "",
+      from: ((_b = (_a2 = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _a2.defaultRange) == null ? void 0 : _b.from) ?? "",
       to: ((_d = (_c = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _c.defaultRange) == null ? void 0 : _d.to) ?? ""
     };
   });
@@ -242,7 +299,7 @@ function DataTableInner({
     [data, getRowId]
   );
   const timestampFormats = useMemo(() => {
-    var _a;
+    var _a2;
     const out = {};
     for (const column of columns) {
       if (column.kind !== "timestamp") continue;
@@ -254,7 +311,7 @@ function DataTableInner({
       }
       const dataFormat = chooseTimestampFormat(dates);
       out[column.key] = modeToFormat(
-        ((_a = column.timestamp) == null ? void 0 : _a.mode) ?? "auto",
+        ((_a2 = column.timestamp) == null ? void 0 : _a2.mode) ?? "auto",
         dataFormat
       );
     }
@@ -266,6 +323,35 @@ function DataTableInner({
     ),
     [columns, timestampFormats]
   );
+  const activeGroupingModeValue = groupingMode ?? localGroupingMode ?? defaultGroupingMode ?? ((_a = groupingModes == null ? void 0 : groupingModes[0]) == null ? void 0 : _a.value);
+  const activeGroupingMode = groupingModes == null ? void 0 : groupingModes.find(
+    (mode) => mode.value === activeGroupingModeValue
+  );
+  const effectiveGrouping = useMemo(() => {
+    if (!activeGroupingMode) return grouping;
+    if (activeGroupingMode.type === "none") return void 0;
+    if (activeGroupingMode.type === "custom") return activeGroupingMode;
+    const column = effectiveColumns.find(
+      (candidate) => candidate.key === activeGroupingMode.columnKey
+    );
+    if (!column) {
+      throw new Error(
+        `DataTable grouping mode "${activeGroupingMode.value}" references missing column "${activeGroupingMode.columnKey}"`
+      );
+    }
+    return {
+      ...activeGroupingMode,
+      getGroupKey: (row) => dataTableGroupKey(resolveColumnValue(row, column)),
+      // `emptyGroupLabel` is a header label, never a key — resolving it here
+      // keeps rows with no value apart from rows whose value happens to read
+      // like the label.
+      getGroupLabel: (key, rows2) => {
+        var _a2;
+        const custom = (_a2 = activeGroupingMode.getGroupLabel) == null ? void 0 : _a2.call(activeGroupingMode, key, rows2);
+        return custom !== void 0 ? custom : dataTableGroupLabel(key, activeGroupingMode.emptyGroupLabel);
+      }
+    };
+  }, [activeGroupingMode, effectiveColumns, grouping]);
   const visibleColumns = useMemo(() => {
     if (!hideableColumns) return effectiveColumns;
     const next = effectiveColumns.filter(
@@ -286,15 +372,27 @@ function DataTableInner({
   const hasMenuActions = Boolean(menuActions && menuActions.length > 0);
   const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl || hasMenuActions;
   const densityOverride = densityControlled ? density : localDensityOverride;
-  const timeRangeColumn = useMemo(() => {
-    if (manualFilter || externalTimeRange || (filterBarProps == null ? void 0 : filterBarProps.timeRange)) return null;
-    return effectiveColumns.find(
+  const rangeCapableColumn = useMemo(
+    () => effectiveColumns.find(
       (column) => {
-        var _a;
-        return column.kind === "timestamp" && column.filterable !== false && ((_a = column.timestamp) == null ? void 0 : _a.autoRangeFilter) !== false;
+        var _a2;
+        return column.kind === "timestamp" && column.filterable !== false && ((_a2 = column.timestamp) == null ? void 0 : _a2.autoRangeFilter) !== false;
       }
-    ) ?? null;
-  }, [effectiveColumns, externalTimeRange, filterBarProps == null ? void 0 : filterBarProps.timeRange, manualFilter]);
+    ) ?? null,
+    [effectiveColumns]
+  );
+  const timeRangeColumn = 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 = useMemo(
     () => effectiveColumns.filter((column) => {
       if (column.filterable === false) return false;
@@ -306,7 +404,7 @@ function DataTableInner({
   const generatedFilters = useMemo(() => {
     if (!autoFilter || loading) return [];
     return filterableColumns.map((column) => {
-      var _a;
+      var _a2;
       const numberBounds = getNumericFilterBounds(rows, column);
       if (numberBounds) {
         return {
@@ -328,7 +426,7 @@ function DataTableInner({
       const multiCap = column.kind === "tags" ? 50 : 20;
       const fitsMulti = options.length >= 2 && options.length <= multiCap;
       if (column.kind === "tags" && fitsMulti) {
-        const separator = ((_a = column.tags) == null ? void 0 : _a.separator) ?? "=";
+        const separator = ((_a2 = column.tags) == null ? void 0 : _a2.separator) ?? "=";
         const groups2 = groupTagOptions(options, separator);
         if (groups2.length >= 2) {
           return {
@@ -374,7 +472,7 @@ function DataTableInner({
   }) : setLocalGlobalFilter;
   const nativeFilters = useMemo(
     () => generatedFilters.map((filter) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       const columnKey = filter.column.key;
       if (filter.kind === "multi") {
         return {
@@ -410,7 +508,7 @@ function DataTableInner({
             (current) => updateNumberFilterValue(current, columnKey, next)
           )
         };
-        if (((_a = filter.numberBounds) == null ? void 0 : _a.min) !== void 0) {
+        if (((_a2 = filter.numberBounds) == null ? void 0 : _a2.min) !== void 0) {
           numberFilter.domainMin = filter.numberBounds.min;
         }
         if (((_b = filter.numberBounds) == null ? void 0 : _b.max) !== void 0) {
@@ -437,6 +535,11 @@ function DataTableInner({
     () => new Map((externalFilters ?? []).map((filter) => [filter.key, filter])),
     [externalFilters]
   );
+  const serverTimeRangeFilter = 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 = useMemo(() => {
     const bound = /* @__PURE__ */ new Map();
     for (const column of effectiveColumns) {
@@ -446,21 +549,21 @@ 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)
   );
   const autoTimeRange = useMemo(() => {
-    var _a, _b, _c, _d;
+    var _a2, _b, _c, _d;
     if (!timeRangeColumn) return null;
     const next = {
       from: timeRangeFilter.from,
       to: timeRangeFilter.to,
       onApply: (from, to) => setTimeRangeFilter({ from, to }),
-      presets: ((_a = timeRangeColumn.timestamp) == null ? void 0 : _a.rangePresets) ?? TIMESTAMP_RANGE_PRESETS,
+      presets: ((_a2 = timeRangeColumn.timestamp) == null ? void 0 : _a2.rangePresets) ?? TIMESTAMP_RANGE_PRESETS,
       fromPlaceholder: "now-24h",
       toPlaceholder: "now",
       emptyLabel: "Any time"
@@ -476,6 +579,25 @@ function DataTableInner({
     }
     return next;
   }, [timeRangeColumn, timeRangeFilter.from, timeRangeFilter.to]);
+  const columnTimeRange = useMemo(() => {
+    if (serverTimeRangeFilter && rangeCapableColumn) {
+      return {
+        key: rangeCapableColumn.key,
+        range: 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 = useMemo(() => {
+    const external = (externalFilters ?? []).filter(
+      (filter) => filter !== serverTimeRangeFilter
+    );
+    return external.length > 0 ? [...external, ...nativeFilters] : nativeFilters;
+  }, [externalFilters, nativeFilters, serverTimeRangeFilter]);
   const resolvedShowGlobalFilter = showGlobalFilter ?? autoFilter;
   assertDataTableFilterProps({
     autoFilter,
@@ -484,32 +606,21 @@ 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 || !!groupingModes || showTablePreferencesControl;
   const setDensityOverride = (next) => {
     if (!densityControlled) setLocalDensityOverride(next);
     onDensityChange == null ? void 0 : onDensityChange(next);
   };
-  const filterBarTrailing = showTablePreferencesControl ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    filterBarProps == null ? void 0 : filterBarProps.trailing,
-    /* @__PURE__ */ jsx(
-      ColumnVisibilityTrigger,
-      {
-        onOpen: (event) => setColumnMenu(menuStateFromTrigger(event))
-      }
-    )
-  ] }) : filterBarProps == null ? void 0 : filterBarProps.trailing;
-  const showHeaderFilterControls = showHeaderFilters && (headerFilterByColumn.size > 0 || !!autoTimeRange);
+  const showHeaderFilterControls = showHeaderFilters && (headerFilterByColumn.size > 0 || !!columnTimeRange);
   const filteredRows = useMemo(() => {
     if (manualFilter) return rows;
     const globalNeedle = effectiveGlobalFilter.trim().toLowerCase();
     const now = /* @__PURE__ */ new Date();
     const rangeFromDate = timeRangeColumn ? resolveDateMath(timeRangeFilter.from, now) : null;
     const rangeToDate = timeRangeColumn ? resolveDateMath(timeRangeFilter.to, now) : null;
-    const rangeColumnKey = timeRangeColumn == null ? void 0 : timeRangeColumn.key;
     return rows.filter(({ row }) => {
-      if (rangeColumnKey && (rangeFromDate || rangeToDate)) {
-        const raw = resolvePath(row, rangeColumnKey);
-        const ts = parseTimestamp(raw);
+      if (timeRangeColumn && (rangeFromDate || rangeToDate)) {
+        const ts = parseTimestamp(getFilterCandidate(row, timeRangeColumn));
         if (!ts) return false;
         if (rangeFromDate && ts.getTime() < rangeFromDate.getTime())
           return false;
@@ -589,7 +700,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] = useState(revealBatchSize);
   const revealObserver = useRef(null);
@@ -598,6 +709,10 @@ function DataTableInner({
   }, [revealEnabled, revealBatchSize, sorted]);
   const visibleSorted = revealEnabled ? sorted.slice(0, visibleCount) : sorted;
   const hasMoreRows = revealEnabled && visibleCount < sorted.length;
+  const requestMoreRows = 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 = useMemo(
     () => new Set((rowSelection == null ? void 0 : rowSelection.selectedRowIds) ?? []),
     [rowSelection == null ? void 0 : rowSelection.selectedRowIds]
@@ -605,8 +720,8 @@ function DataTableInner({
   const selectableVisibleRows = useMemo(
     () => visibleSorted.filter(
       (record) => {
-        var _a;
-        return ((_a = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+        var _a2;
+        return ((_a2 = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
       }
     ),
     [rowSelection, visibleSorted]
@@ -634,9 +749,9 @@ function DataTableInner({
   );
   const toggleRowSelection = useCallback(
     (record) => {
-      var _a;
+      var _a2;
       if (!rowSelection) return;
-      if (((_a = rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) === false) return;
+      if (((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) === false) return;
       const next = new Set(selectedRowIDs);
       if (next.has(record.id)) next.delete(record.id);
       else next.add(record.id);
@@ -674,32 +789,68 @@ function DataTableInner({
     visibleRowCount: sorted.length,
     totalRowCount: data.length,
     loading
-  }) : footer : pagination ? null : loading ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}`;
-  const [collapsedGroups, setCollapsedGroups] = useState({});
+  }) : footer : pagination ? null : loading && sorted.length === 0 ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}`;
+  const [collapseStateByMode, setCollapseStateByMode] = useState({});
+  const collapseStateKey = activeGroupingMode ? `mode:${activeGroupingMode.value}` : "fixed";
+  const collapseState = collapseStateByMode[collapseStateKey];
   const groups = useMemo(() => {
-    if (!grouping) return null;
+    if (!effectiveGrouping) return null;
     const buckets = groupRecords(
       visibleSorted,
-      (record) => grouping.getGroupKey(record.row)
+      (record) => effectiveGrouping.getGroupKey(record.row)
     );
     const resolved = buckets.map((bucket) => ({
       key: bucket.key,
       records: bucket.rows,
       rows: bucket.rows.map((record) => record.row)
     }));
-    if (grouping.compareGroups) {
-      resolved.sort((a, b) => grouping.compareGroups(a, b));
+    if (effectiveGrouping.compareGroups) {
+      resolved.sort((a, b) => effectiveGrouping.compareGroups(a, b));
     }
     return resolved.map((group) => {
-      var _a, _b;
+      var _a2, _b;
       return {
         ...group,
-        label: ((_a = grouping.getGroupLabel) == null ? void 0 : _a.call(grouping, group.key, group.rows)) ?? group.key,
-        meta: (_b = grouping.getGroupMeta) == null ? void 0 : _b.call(grouping, group.key, group.rows),
-        collapsed: collapsedGroups[group.key] ?? isGroupCollapsedByDefault(group, grouping.defaultCollapsed)
+        label: ((_a2 = effectiveGrouping.getGroupLabel) == null ? void 0 : _a2.call(effectiveGrouping, group.key, group.rows)) ?? group.key,
+        meta: (_b = effectiveGrouping.getGroupMeta) == null ? void 0 : _b.call(effectiveGrouping, group.key, group.rows),
+        collapsed: (collapseState == null ? void 0 : collapseState.groups[group.key]) ?? (collapseState == null ? void 0 : collapseState.all) ?? isGroupCollapsedByDefault(group, effectiveGrouping.defaultCollapsed)
       };
     });
-  }, [collapsedGroups, grouping, visibleSorted]);
+  }, [collapseState, effectiveGrouping, visibleSorted]);
+  const hasGroups = !!(groups == null ? void 0 : groups.length);
+  const allGroupsExpanded = hasGroups && groups.every((group) => !group.collapsed);
+  const allGroupsCollapsed = hasGroups && groups.every((group) => group.collapsed);
+  const setAllGroupsCollapsed = (collapsed) => {
+    setCollapseStateByMode((current) => ({
+      ...current,
+      [collapseStateKey]: { all: collapsed, groups: {} }
+    }));
+  };
+  const filterBarTrailing = (filterBarProps == null ? void 0 : filterBarProps.trailing) || groupingModes || showTablePreferencesControl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    filterBarProps == null ? void 0 : filterBarProps.trailing,
+    groupingModes ? /* @__PURE__ */ jsx(
+      DataTableGroupingControls,
+      {
+        modes: groupingModes,
+        value: activeGroupingModeValue,
+        hasGroups,
+        allExpanded: allGroupsExpanded,
+        allCollapsed: allGroupsCollapsed,
+        onModeChange: (value) => {
+          if (groupingMode === void 0) setLocalGroupingMode(value);
+          onGroupingModeChange == null ? void 0 : onGroupingModeChange(value);
+        },
+        onExpandAll: () => setAllGroupsCollapsed(false),
+        onCollapseAll: () => setAllGroupsCollapsed(true)
+      }
+    ) : null,
+    showTablePreferencesControl ? /* @__PURE__ */ jsx(
+      ColumnVisibilityTrigger,
+      {
+        onOpen: (event) => setColumnMenu(menuStateFromTrigger(event))
+      }
+    ) : null
+  ] }) : void 0;
   const rowStream = useMemo(() => {
     if (!groups) {
       return visibleSorted.map((record) => ({ kind: "row", record }));
@@ -714,8 +865,8 @@ function DataTableInner({
       if (!rowSelection) return;
       const selectable = records.filter(
         (record) => {
-          var _a;
-          return ((_a = rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+          var _a2;
+          return ((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
         }
       );
       const next = new Set(selectedRowIDs);
@@ -731,21 +882,30 @@ function DataTableInner({
   const revealSentinelRef = 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)
-            );
+          var _a2;
+          if (!((_a2 = entries[0]) == null ? void 0 : _a2.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();
@@ -776,14 +936,14 @@ function DataTableInner({
     document.body.style.userSelect = "none";
   };
   const autoFitColumn = (event, column) => {
-    var _a;
+    var _a2;
     event.preventDefault();
     event.stopPropagation();
     const header = event.currentTarget.closest("th");
     const table = event.currentTarget.closest("table");
     if (!header || !table) return;
     const columnIndex = Array.from(
-      ((_a = header.parentElement) == null ? void 0 : _a.children) ?? []
+      ((_a2 = header.parentElement) == null ? void 0 : _a2.children) ?? []
     ).indexOf(header);
     if (columnIndex < 0) return;
     const width = measureColumnContentWidth(table, columnIndex, column);
@@ -834,9 +994,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__ */ jsxs("div", { className: "relative flex min-h-0 max-w-full flex-1 flex-col", children: [
@@ -844,6 +1004,7 @@ function DataTableInner({
           /* @__PURE__ */ jsx(
             "div",
             {
+              ref: scrollContainerRef,
               className: cn(
                 "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border bg-background",
                 scrollContainerClassName
@@ -855,8 +1016,8 @@ function DataTableInner({
                   visibleColumns.map((column) => /* @__PURE__ */ 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
                   ))
@@ -922,14 +1083,14 @@ function DataTableInner({
                                   children: column.label
                                 }
                               ) }),
-                              showHeaderFilterControls && (headerFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsx(
+                              showHeaderFilterControls && (headerFilterByColumn.has(column.key) || (columnTimeRange == null ? void 0 : columnTimeRange.key) === column.key) && /* @__PURE__ */ jsx(
                                 HeaderFilterButton,
                                 {
                                   column,
                                   active: headerFilterByColumn.has(column.key) ? 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)
                                 }
@@ -987,26 +1148,37 @@ function DataTableInner({
                       children: emptyMessage
                     }
                   ) }) : rowStream.map((item) => {
-                    var _a;
+                    var _a2;
                     if (item.kind === "group") {
                       return /* @__PURE__ */ jsx(
                         DataTableGroupHeaderRow,
                         {
                           label: item.group.label,
                           meta: item.group.meta,
+                          metaAlign: (effectiveGrouping == null ? void 0 : effectiveGrouping.metaAlign) ?? "end",
+                          ...(effectiveGrouping == null ? void 0 : effectiveGrouping.metaClassName) ? { metaClassName: effectiveGrouping.metaClassName } : {},
                           count: item.group.records.length,
                           colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
                           collapsed: item.group.collapsed,
-                          onToggleCollapsed: () => setCollapsedGroups((current) => ({
-                            ...current,
-                            [item.group.key]: !item.group.collapsed
-                          })),
+                          onToggleCollapsed: () => setCollapseStateByMode((current) => {
+                            var _a3;
+                            return {
+                              ...current,
+                              [collapseStateKey]: {
+                                ...current[collapseStateKey],
+                                groups: {
+                                  ...(_a3 = current[collapseStateKey]) == null ? void 0 : _a3.groups,
+                                  [item.group.key]: !item.group.collapsed
+                                }
+                              }
+                            };
+                          }),
                           ...rowSelection ? {
                             selection: {
                               selectableCount: item.group.records.filter(
                                 (record2) => {
-                                  var _a2;
-                                  return ((_a2 = rowSelection.isRowSelectable) == null ? void 0 : _a2.call(
+                                  var _a3;
+                                  return ((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
                                     rowSelection,
                                     record2.row
                                   )) ?? true;
@@ -1034,7 +1206,7 @@ function DataTableInner({
                     const expandsInline = expandable && detailStyle === "row";
                     const opensDialog = expandable && detailStyle === "dialog";
                     const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
-                    const rowSelectable = ((_a = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+                    const rowSelectable = ((_a2 = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
                     const selectionClickEnabled = !!(rowSelection == null ? void 0 : rowSelection.toggleOnRowClick) && rowSelectable;
                     const clickable = !!href || rowClickEnabled || expandable || selectionClickEnabled;
                     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -1048,7 +1220,8 @@ function DataTableInner({
                             getRowClassName == null ? void 0 : getRowClassName(record.row)
                           ),
                           onClick: () => {
-                            if (selectionClickEnabled) toggleRowSelection(record);
+                            if (selectionClickEnabled)
+                              toggleRowSelection(record);
                             if (expandsInline) {
                               setExpandedRows((current) => ({
                                 ...current,
@@ -1087,7 +1260,7 @@ function DataTableInner({
                               }
                             ) : null,
                             visibleColumns.map((column, index) => {
-                              var _a2;
+                              var _a3;
                               const rawValue = resolveColumnValue(
                                 record.row,
                                 column
@@ -1111,7 +1284,7 @@ function DataTableInner({
                                   {
                                     value: serverFilterValue,
                                     ...serverFilterDisplayValue !== void 0 ? { displayValue: serverFilterDisplayValue } : {},
-                                    mode: (_a2 = cellFilters == null ? void 0 : cellFilters[filterKey]) == null ? void 0 : _a2[serverFilterValue],
+                                    mode: (_a3 = cellFilters == null ? void 0 : cellFilters[filterKey]) == null ? void 0 : _a3[serverFilterValue],
                                     onChange: (mode) => onCellFilterChange({
                                       key: filterKey,
                                       value: serverFilterValue,
@@ -1138,28 +1311,25 @@ function DataTableInner({
                                     alignmentClass(column.align),
                                     column.cellClassName
                                   ),
-                                  children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "relative z-10 inline-flex min-w-0 items-center", children: content }) : content
+                                    })
+                                  ) : content })
                                 },
                                 column.key
                               );
@@ -1177,12 +1347,12 @@ function DataTableInner({
                       ) })
                     ] }, record.id);
                   }),
-                  error == null && hasMoreRows && /* @__PURE__ */ jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                  error == null && sentinelActive && /* @__PURE__ */ jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsx(
                     "td",
                     {
                       colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
                       className: "p-density-2 text-center text-xs text-muted-foreground",
-                      children: "Loading more…"
+                      children: sentinelLabel
                     }
                   ) })
                 ] })
@@ -1204,8 +1374,7 @@ function DataTableInner({
           {
             pagination,
             visibleRowCount: sorted.length,
-            loading,
-            loadingMessage
+            infinite: infiniteEnabled
           }
         ) : null,
         detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsx(
@@ -1248,7 +1417,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)
           }
@@ -1295,8 +1464,7 @@ function useCursorTrail(cursor) {
 function DataTablePaginationFooter({
   pagination,
   visibleRowCount,
-  loading,
-  loadingMessage
+  infinite = false
 }) {
   const { page, pageSize, total, totalRelation, cursor, onPageChange, onPageSizeChange } = pagination;
   const options = Array.from(
@@ -1312,10 +1480,13 @@ 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 rangeEnd = total != null && hasVisibleRows ? Math.min(approximate ? Infinity : total, rangeStart + Math.max(visibleRowCount - 1, 0)) : visibleRowCount;
+  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));
@@ -1333,7 +1504,7 @@ function DataTablePaginationFooter({
     cursor.onCursorChange(cursor.next);
   };
   return /* @__PURE__ */ 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__ */ jsx("div", { "aria-live": "polite", children: loading ? loadingMessage : rangeLabel }),
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: rangeLabel }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap  items-center gap-2 sm:gap-3", children: [
       /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
@@ -1384,6 +1555,8 @@ function DataTablePaginationFooter({
 function DataTableGroupHeaderRow({
   label,
   meta,
+  metaAlign,
+  metaClassName,
   count,
   colSpan,
   collapsed,
@@ -1415,7 +1588,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: cn(
+          "flex min-w-0 items-center gap-1.5 text-left text-sm 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__ */ jsx(
             Icon,
@@ -1429,7 +1607,16 @@ function DataTableGroupHeaderRow({
         ]
       }
     ),
-    meta ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: meta }) : null
+    meta ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "shrink-0 text-sm text-muted-foreground",
+          metaClassName
+        ),
+        children: meta
+      }
+    ) : null
   ] }) }) });
 }
 function DataTableLoadingRows({
@@ -1471,6 +1658,7 @@ function DataTableLoadingRows({
             alignmentClass(column.align),
             column.cellClassName
           ),
+          style: cellSizingStyle(column, void 0),
           children: /* @__PURE__ */ jsx(CellContent, { column, children: /* @__PURE__ */ jsx(
             "span",
             {
@@ -1496,7 +1684,7 @@ function DataTableErrorRow({
     {
       colSpan: Math.max(1, colSpan),
       className: cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-density-3"),
-      children: /* @__PURE__ */ jsx("div", { role: "alert", children: error })
+      children: /* @__PURE__ */ jsx("div", { role: "alert", className: "w-0 min-w-full overflow-hidden", children: error })
     }
   ) });
 }
@@ -1761,6 +1949,7 @@ function MenuActionSection({
   onClose
 }) {
   const groups = groupMenuActions(actions);
+  const [openSubmenu, setOpenSubmenu] = useState(null);
   return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, index) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1768,51 +1957,109 @@ function MenuActionSection({
         (separated || index > 0) && "mt-1 border-t border-border pt-1"
       ),
       children: [
-        /* @__PURE__ */ 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__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              disabled: action.disabled,
-              className: 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__ */ jsx(
-                  Icon,
-                  {
-                    icon: action.icon,
-                    className: cn(
-                      "shrink-0 text-sm",
-                      hasDescription && "mt-0.5",
-                      action.iconClassName ?? "text-muted-foreground"
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: cn(hasDescription && "font-medium"), children: action.label }),
-                  action.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
-                ] })
-              ]
-            },
-            action.id
-          );
-        })
+        group.section && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group.section }),
+        group.actions.map((action) => /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": isSubmenu ? "menu" : void 0,
+        "aria-expanded": isSubmenu ? submenu != null : void 0,
+        disabled: action.disabled,
+        className: 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__ */ jsx(
+            Icon,
+            {
+              icon: action.icon,
+              className: cn(
+                "shrink-0 text-sm",
+                hasDescription && "mt-0.5",
+                action.iconClassName ?? "text-muted-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(hasDescription && "font-medium"), children: action.label }),
+            action.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
+          ] }),
+          isSubmenu && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: UiChevronRight,
+              className: "shrink-0 text-sm text-muted-foreground"
+            }
+          )
+        ]
+      }
+    ),
+    isSubmenu && submenu && /* @__PURE__ */ 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__ */ jsx(
+          MenuActionItem,
+          {
+            action: child,
+            submenu: null,
+            onOpenSubmenu,
+            onClose
+          },
+          child.id
+        ))
+      }
+    )
+  ] });
+}
 function DensityMenuSection({
   densityOverride,
   separated,
@@ -1916,17 +2163,12 @@ function ThemeMenuSection({
 }
 function CellContent({
   column,
-  width,
   children
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
-        cellContentClassName(column, width),
-        alignmentClass(column.align)
-      ),
-      style: cellContentStyle(width),
+      className: cn(cellContentClassName(column), alignmentClass(column.align)),
       children
     }
   );
@@ -2364,17 +2606,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 cn(base, resized ? "min-w-0" : "min-w-56 max-w-[36rem]");
-  if (column.shrink)
-    return cn(base, "min-w-0 whitespace-nowrap", !resized && "max-w-[16rem]");
-  return cn(base, "min-w-0", !resized && "max-w-[18rem]");
+function cellContentClassName(column) {
+  return cn("w-full min-w-0 truncate", column.shrink && "whitespace-nowrap");
 }
 function DataTable({
   theme: themeProp = "system",
@@ -2385,6 +2630,7 @@ function DataTable({
   fullscreenButtonLabel = "Open table full screen",
   className,
   filterBarProps,
+  scrollContainerRef,
   ...inner
 }) {
   const themeControlled = onThemeChange !== void 0;
@@ -2412,10 +2658,12 @@ function DataTable({
         )
       ] })
     } : filterBarProps;
+    const ownsScroll = inFullscreen === fullscreenOpen;
     return /* @__PURE__ */ jsx(
       DataTableInner,
       {
         ...inner,
+        ...ownsScroll && scrollContainerRef ? { scrollContainerRef } : {},
         ...mergedFilterBarProps ? { filterBarProps: mergedFilterBarProps } : {},
         themeMenuValue: themeValue,
         showThemeControl,