@flanksource/clicky-ui 0.3.35 → 0.3.37

package/dist/data/DataTable.js

@@ -10,11 +10,15 @@ import { Modal } from "../overlay/Modal.js";
 import { useEscapeLayer } from "../overlay/modalStack.js";
 import { FilterBar, FilterBarFilterPanel, FilterBarRangePanel } from "../components/FilterBar.js";
 import { dateRangeFilterProps, isFilterBarFilterActive, clearFilterBarFilter } from "../components/filter-bar-utils.js";
-import { resolveColumnValue, getFilterTokens, getFilterCandidate, prettifyKey } from "./data-table-utils.js";
+import { resolveColumnValue, isColumnHideable, getFilterTokens, labelText, getFilterCandidate } from "./data-table-utils.js";
 import { assertDataTableFilterProps } from "./data-table-server-filters.js";
 import { useInfiniteRows } from "./use-infinite-rows.js";
 import { resolveVirtualizeOptions, useDataTableVirtual } from "./use-data-table-virtual.js";
 import { Icon } from "./Icon.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { DensityMenuSection, MenuActionSection, ThemeMenuSection } from "./DataTableMenuSections.js";
+import { menuStateFromTrigger, menuStateFromPointer, useMenuPanelPosition } from "./dataTableMenuPosition.js";
+import { DataTablePreferencesSheet } from "./DataTablePreferencesSheet.js";
 import { SortableHeader } from "./SortableHeader.js";
 import { Timestamp } from "./cells/Timestamp.js";
 import { parseTimestamp, chooseTimestampFormat, modeToFormat, resolveDateMath } from "./cells/timestamp-format.js";
@@ -26,6 +30,7 @@ import { normalizeStatus } from "./cells/status-mapping.js";
 import { dataTableGroupLabel, dataTableGroupKey, groupRecords, isGroupCollapsedByDefault } from "./DataTable.grouping.js";
 import { DataTableGroupingControls } from "./DataTableGroupingControls.js";
 import { SelectionActionBar } from "./SelectionActionBar.js";
+import { DataTableOverflowCue } from "./DataTableOverflowCue.js";
 import { UiEllipsis } from "../icons/components/UiEllipsis.js";
 import { UiFilterFilled, UiFilter } from "../icons/components/UiFilter.js";
 import { UiChevronRight } from "../icons/components/UiChevronRight.js";
@@ -35,14 +40,6 @@ import { UiArrowRight } from "../icons/components/UiArrowRight.js";
 import { UiEyeClosed } from "../icons/components/UiEyeClosed.js";
 import { UiClose } from "../icons/components/UiClose.js";
 import { UiFullscreen } from "../icons/components/UiFullscreen.js";
-import { UiResizeVertical } from "../icons/components/UiResizeVertical.js";
-import { UiCheck } from "../icons/components/UiCheck.js";
-import { UiRows } from "../icons/components/UiRows.js";
-import { UiListFlat } from "../icons/components/UiListFlat.js";
-import { UiListDashes } from "../icons/components/UiListDashes.js";
-import { UiDesktop } from "../icons/components/UiDesktop.js";
-import { UiSun } from "../icons/components/UiSun.js";
-import { UiMoon } from "../icons/components/UiMoon.js";
 const DEFAULT_COLUMN_MIN_WIDTH = 64;
 const DEFAULT_COLUMN_WIDTH = 160;
 const DEFAULT_GROW_COLUMN_WIDTH = 224;
@@ -52,11 +49,6 @@ 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";
-const DENSITY_OPTIONS = [
-  { value: "compact", icon: UiRows, label: "Compact" },
-  { value: "comfortable", icon: UiListFlat, label: "Comfortable" },
-  { value: "spacious", icon: UiListDashes, label: "Spacious" }
-];
 const DATA_TABLE_HEADER_DENSITY_CLASS = "px-2.5 py-1.5 density-compact:px-2 density-compact:py-1 density-comfortable:px-2.5 density-comfortable:py-1.5 density-spacious:px-4 density-spacious:py-3";
 const DATA_TABLE_CELL_DENSITY_CLASS = "px-2.5 py-1.5 density-compact:px-2 density-compact:py-0.5 density-comfortable:px-2.5 density-comfortable:py-1.5 density-spacious:px-4 density-spacious:py-3";
 const TIMESTAMP_RANGE_PRESETS = [
@@ -130,6 +122,8 @@ function DataTableInner({
   className,
   scrollContainerClassName,
   autoFilter = false,
+  boundedFilters,
+  onBoundedFiltersChange,
   showGlobalFilter,
   manualFilter = false,
   globalFilter,
@@ -163,6 +157,7 @@ function DataTableInner({
   isRowClickable,
   getRowHref,
   renderExpandedRow,
+  renderCard,
   detailStyle = "row",
   detailDialogTitle,
   detailDialogSize = "lg",
@@ -172,6 +167,7 @@ function DataTableInner({
   hideableColumns = true,
   persistColumnVisibility = true,
   columnVisibilityStorageKey,
+  defaultHiddenColumns: defaultHiddenColumnsInput,
   density,
   defaultDensity,
   onDensityChange,
@@ -208,8 +204,17 @@ function DataTableInner({
   const [columnWidths, setColumnWidths] = useState(
     () => persistColumnWidths ? readStoredColumnWidths(resolvedColumnResizeStorageKey, columns) : {}
   );
+  const defaultHiddenSignature = (defaultHiddenColumnsInput ?? []).join("|");
+  const defaultHiddenColumns = useMemo(
+    () => new Set(defaultHiddenColumnsInput ?? []),
+    [defaultHiddenSignature]
+  );
   const [hiddenColumns, setHiddenColumns] = useState(
-    () => persistColumnVisibility ? readStoredHiddenColumns(resolvedColumnVisibilityStorageKey, columns) : {}
+    () => persistColumnVisibility ? readStoredHiddenColumns(
+      resolvedColumnVisibilityStorageKey,
+      columns,
+      defaultHiddenColumns
+    ) : pruneHiddenColumns({}, columns, defaultHiddenColumns)
   );
   const densityControlled = density !== void 0;
   const [localDensityOverride, setLocalDensityOverride] = useState(() => {
@@ -220,9 +225,16 @@ function DataTableInner({
   });
   const [columnMenu, setColumnMenu] = useState(null);
   const [headerFilterMenu, setHeaderFilterMenu] = useState(null);
+  const preferencesSheet = useMediaQuery("(max-width: 639px)");
   const [textFilters, setTextFilters] = useState({});
   const [multiFilters, setMultiFilters] = useState({});
   const [numberFilters, setNumberFilters] = useState({});
+  const effectiveNumberFilters = boundedFilters ?? numberFilters;
+  const changeNumberFilter = (key, next) => {
+    const updated = updateNumberFilterValue(effectiveNumberFilters, key, next);
+    if (boundedFilters) onBoundedFiltersChange == null ? void 0 : onBoundedFiltersChange(updated);
+    else setNumberFilters(updated);
+  };
   const [expandedRows, setExpandedRows] = useState({});
   const [detailRow, setDetailRow] = useState(null);
   const [localGroupingMode, setLocalGroupingMode] = useState(defaultGroupingMode);
@@ -257,19 +269,33 @@ function DataTableInner({
   }, [columnWidths, persistColumnWidths, resolvedColumnResizeStorageKey]);
   useEffect(() => {
     setHiddenColumns((current) => {
-      const stored = persistColumnVisibility ? readStoredHiddenColumns(resolvedColumnVisibilityStorageKey, columns) : {};
-      const next = pruneHiddenColumns({ ...stored, ...current }, columns);
+      const stored = persistColumnVisibility ? readStoredHiddenColumns(
+        resolvedColumnVisibilityStorageKey,
+        columns,
+        defaultHiddenColumns
+      ) : {};
+      const next = pruneHiddenColumns(
+        { ...stored, ...current },
+        columns,
+        defaultHiddenColumns
+      );
       return sameHiddenColumns(current, next) ? current : next;
     });
   }, [
     columnKeysSignature,
+    defaultHiddenColumns,
     persistColumnVisibility,
     resolvedColumnVisibilityStorageKey
   ]);
   useEffect(() => {
     if (!persistColumnVisibility) return;
-    writeStoredHiddenColumns(resolvedColumnVisibilityStorageKey, hiddenColumns);
+    writeStoredHiddenColumns(
+      resolvedColumnVisibilityStorageKey,
+      hiddenColumns,
+      defaultHiddenColumns
+    );
   }, [
+    defaultHiddenColumns,
     hiddenColumns,
     persistColumnVisibility,
     resolvedColumnVisibilityStorageKey
@@ -298,14 +324,20 @@ function DataTableInner({
     setColumnMenu(null);
     setHeaderFilterMenu(null);
   }, []);
-  useEscapeLayer(Boolean(columnMenu || headerFilterMenu), closeFloatingMenus);
+  const columnMenuIsSheet = Boolean(columnMenu) && preferencesSheet;
+  useEscapeLayer(
+    Boolean(columnMenu || headerFilterMenu),
+    closeFloatingMenus,
+    !columnMenuIsSheet
+  );
   useEffect(() => {
     if (!columnMenu && !headerFilterMenu) return;
+    if (columnMenuIsSheet) return;
     document.addEventListener("click", closeFloatingMenus);
     return () => {
       document.removeEventListener("click", closeFloatingMenus);
     };
-  }, [closeFloatingMenus, columnMenu, headerFilterMenu]);
+  }, [closeFloatingMenus, columnMenu, columnMenuIsSheet, headerFilterMenu]);
   const rows = useMemo(
     () => data.map((row, index) => ({
       id: (getRowId == null ? void 0 : getRowId(row, index)) ?? String(index),
@@ -382,7 +414,7 @@ function DataTableInner({
     () => visibleColumns.filter(isColumnHideable).length,
     [visibleColumns]
   );
-  const showColumnVisibilityControl = hideableColumns && hideableColumnCount > 1;
+  const showColumnVisibilityControl = !renderCard && hideableColumns && hideableColumnCount > 1;
   const resolvedShowDensityControl = showDensityControl ?? showColumnVisibilityControl;
   const hasMenuActions = Boolean(menuActions && menuActions.length > 0);
   const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl || hasMenuActions;
@@ -417,16 +449,16 @@ function DataTableInner({
     [effectiveColumns]
   );
   const generatedFilters = useMemo(() => {
-    if (!autoFilter || loading) return [];
+    if (!autoFilter) return [];
     return filterableColumns.map((column) => {
       var _a2;
       const numberBounds = getNumericFilterBounds(rows, column);
-      if (numberBounds) {
+      if (column.filterKind || numberBounds) {
         return {
           column,
-          kind: "number",
+          kind: column.filterKind ?? "number",
           options: [],
-          numberBounds
+          ...numberBounds ? { numberBounds } : {}
         };
       }
       const values = /* @__PURE__ */ new Set();
@@ -458,7 +490,7 @@ function DataTableInner({
         options
       };
     });
-  }, [autoFilter, filterableColumns, loading, rows]);
+  }, [autoFilter, filterableColumns, rows]);
   const filterActionsByColumn = useMemo(() => {
     const out = {};
     for (const filter of generatedFilters) {
@@ -513,15 +545,24 @@ function DataTableInner({
           groups: filter.groups ?? []
         };
       }
-      if (filter.kind === "number") {
+      if (filter.kind === "number" || filter.kind === "duration") {
+        if (filter.kind === "duration") {
+          return {
+            key: columnKey,
+            kind: "duration",
+            label: labelText(filter.column),
+            unit: filter.column.filterUnit ?? "ms",
+            value: effectiveNumberFilters[columnKey] ?? {},
+            onChange: (next) => changeNumberFilter(columnKey, next)
+          };
+        }
         const numberFilter = {
           key: columnKey,
           kind: "number",
           label: labelText(filter.column),
-          value: numberFilters[columnKey] ?? {},
-          onChange: (next) => setNumberFilters(
-            (current) => updateNumberFilterValue(current, columnKey, next)
-          )
+          value: effectiveNumberFilters[columnKey] ?? {},
+          onChange: (next) => changeNumberFilter(columnKey, next),
+          ...filter.column.numberUnit ? { unit: filter.column.numberUnit } : {}
         };
         if (((_a2 = filter.numberBounds) == null ? void 0 : _a2.min) !== void 0) {
           numberFilter.domainMin = filter.numberBounds.min;
@@ -544,7 +585,7 @@ function DataTableInner({
         )
       };
     }),
-    [generatedFilters, multiFilters, numberFilters, textFilters]
+    [generatedFilters, multiFilters, effectiveNumberFilters, textFilters]
   );
   const serverFilterByKey = useMemo(
     () => new Map((externalFilters ?? []).map((filter) => [filter.key, filter])),
@@ -665,16 +706,16 @@ function DataTableInner({
           if (needle && !tokens.some((token) => token.toLowerCase().includes(needle))) {
             return false;
           }
-        } else if (filter.kind === "number") {
-          const range = numberFilters[filter.column.key] ?? {};
-          const min = parseNumberInput(range.min);
-          const max = parseNumberInput(range.max);
+        } else if (filter.kind === "number" || filter.kind === "duration") {
+          const range = effectiveNumberFilters[filter.column.key] ?? {};
+          const min = boundedOperand(range.min, filter.kind === "duration" ? range.minUnit : void 0, filter.column.filterUnit);
+          const max = boundedOperand(range.max, filter.kind === "duration" ? range.maxUnit : void 0, filter.column.filterUnit);
           const hasMin = String(range.min ?? "").trim() !== "";
           const hasMax = String(range.max ?? "").trim() !== "";
           if (hasMin || hasMax) {
             const values = getFilterNumbers(row, filter.column);
             const matches = values.some(
-              (value) => (min == null || value >= min) && (max == null || value <= max)
+              (value) => (min == null || (range.minOperator === ">" ? value > min : value >= min)) && (max == null || (range.maxOperator === "<" ? value < max : value <= max))
             );
             if (!matches) {
               return false;
@@ -700,7 +741,7 @@ function DataTableInner({
     generatedFilters,
     manualFilter,
     multiFilters,
-    numberFilters,
+    effectiveNumberFilters,
     rows,
     textFilters,
     timeRangeColumn,
@@ -937,6 +978,7 @@ function DataTableInner({
     showTablePreferencesControl ? /* @__PURE__ */ jsx(
       ColumnVisibilityTrigger,
       {
+        opensSheet: preferencesSheet,
         onOpen: (event) => setColumnMenu(menuStateFromTrigger(event))
       }
     ) : null
@@ -1026,10 +1068,12 @@ function DataTableInner({
   });
   const [pinnedColumnWidths, setPinnedColumnWidths] = useState({});
   const headRowRef = useRef(null);
+  const [scrollElement, setScrollElement] = useState(null);
+  const tableColumnCount = renderCard ? 1 : visibleColumns.length + (rowSelection ? 1 : 0);
   const visibleColumnKeysSignature = visibleColumns.map((c) => c.key).join(" ");
   useEffect(() => {
     var _a2;
-    if (!virtualOptions) {
+    if (!virtualOptions || renderCard) {
       setPinnedColumnWidths({});
       return;
     }
@@ -1057,10 +1101,11 @@ function DataTableInner({
       cancelAnimationFrame(frame);
       observer.disconnect();
     };
-  }, [virtualOptions, visibleColumnKeysSignature, rowSelection, density]);
+  }, [virtualOptions, visibleColumnKeysSignature, rowSelection, density, renderCard]);
   const composeScrollRef = useCallback(
     (node) => {
       virtual.setScrollEl(node);
+      setScrollElement(node);
       if (scrollContainerRef) {
         scrollContainerRef.current = node;
       }
@@ -1108,6 +1153,9 @@ function DataTableInner({
     },
     [requestMoreRows, sentinelActive]
   );
+  if (renderCard && (renderExpandedRow || rowSelection)) {
+    throw new Error("DataTable card rendering cannot be combined with row detail or row selection");
+  }
   const startColumnResize = (event, column) => {
     event.preventDefault();
     event.stopPropagation();
@@ -1159,15 +1207,23 @@ function DataTableInner({
       const hidden = current[column.key] === true;
       if (!hidden && visibleHideableColumnCount <= 1) return current;
       const next = { ...current };
-      if (hidden) {
-        delete next[column.key];
-      } else {
+      if (!hidden) {
         next[column.key] = true;
+      } else if (defaultHiddenColumns.has(column.key)) {
+        next[column.key] = false;
+      } else {
+        delete next[column.key];
       }
-      return pruneHiddenColumns(next, columns);
+      return pruneHiddenColumns(next, columns, defaultHiddenColumns);
     });
   };
-  const showAllColumns = () => setHiddenColumns({});
+  const showAllColumns = () => setHiddenColumns(
+    pruneHiddenColumns(
+      Object.fromEntries([...defaultHiddenColumns].map((key) => [key, false])),
+      columns,
+      defaultHiddenColumns
+    )
+  );
   const openHeaderColumnMenu = (event, column) => {
     if (!showColumnVisibilityControl) return;
     event.preventDefault();
@@ -1201,6 +1257,41 @@ function DataTableInner({
             filters: barFilters
           }
         ),
+        renderCard && !pageLocalSort && effectiveColumns.some((column) => column.sortable !== false) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 px-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5", children: [
+            "Sort by",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Sort cards by",
+                className: "h-7 rounded-md border border-input bg-background px-2 text-foreground",
+                value: (sort == null ? void 0 : sort.key) ?? "",
+                onChange: (event) => {
+                  const key = event.target.value;
+                  if (!key) onSortChange == null ? void 0 : onSortChange(null);
+                  else if (onSortChange) onSortChange({ key, dir: "asc" });
+                  else toggle(key);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "Default order" }),
+                  effectiveColumns.filter((column) => column.sortable !== false).map((column) => /* @__PURE__ */ jsx("option", { value: column.key, children: labelText(column) }, column.key))
+                ]
+              }
+            )
+          ] }),
+          sort && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "h-7 rounded-md border border-input px-2 text-foreground hover:bg-accent",
+              onClick: () => {
+                if (onSortChange) onSortChange({ key: sort.key, dir: sort.dir === "asc" ? "desc" : "asc" });
+                else toggle(sort.key);
+              },
+              children: sort.dir === "asc" ? "Ascending" : "Descending"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 max-w-full flex-1 flex-col", children: [
           loading && error == null ? /* @__PURE__ */ jsx(
             LoadingBar,
@@ -1213,6 +1304,7 @@ function DataTableInner({
             "div",
             {
               ref: composeScrollRef,
+              "data-testid": "data-table-scroll",
               className: cn(
                 "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border bg-background",
                 scrollContainerClassName
@@ -1222,14 +1314,14 @@ function DataTableInner({
                 "table",
                 {
                   className: cn(
-                    "w-max min-w-full text-left text-sm",
+                    renderCard ? "w-full text-left text-sm" : "w-max min-w-full text-left text-sm",
                     // Only once the widths are pinned: switching to fixed layout
                     // before there is anything to fix them to would collapse every
                     // column to an equal share.
                     Object.keys(pinnedColumnWidths).length > 0 ? "table-fixed" : "table-auto"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxs("colgroup", { children: [
+                    renderCard ? /* @__PURE__ */ jsx("colgroup", { children: /* @__PURE__ */ jsx("col", {}) }) : /* @__PURE__ */ jsxs("colgroup", { children: [
                       rowSelection && error == null ? /* @__PURE__ */ jsx("col", { className: "w-10" }) : null,
                       visibleColumns.map((column) => /* @__PURE__ */ jsx(
                         "col",
@@ -1240,7 +1332,7 @@ function DataTableInner({
                         column.key
                       ))
                     ] }),
-                    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsxs(
+                    renderCard ? /* @__PURE__ */ jsx("thead", { className: "sr-only", children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { scope: "col", children: "Results" }) }) }) : /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsxs(
                       "tr",
                       {
                         ref: headRowRef,
@@ -1354,7 +1446,7 @@ function DataTableInner({
                       error != null ? /* @__PURE__ */ jsx(
                         DataTableErrorRow,
                         {
-                          colSpan: visibleColumns.length,
+                          colSpan: tableColumnCount,
                           error
                         }
                       ) : loading && visibleSorted.length === 0 ? /* @__PURE__ */ jsx(
@@ -1368,7 +1460,7 @@ function DataTableInner({
                       ) : filteredRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                         "td",
                         {
-                          colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                          colSpan: tableColumnCount,
                           className: "px-4 py-10 text-center text-sm text-muted-foreground",
                           children: emptyMessage
                         }
@@ -1376,7 +1468,7 @@ function DataTableInner({
                         virtual.enabled && virtual.spacers.top > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, "data-virtual-spacer": "top", children: /* @__PURE__ */ jsx(
                           "td",
                           {
-                            colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                            colSpan: tableColumnCount,
                             style: {
                               height: virtual.spacers.top,
                               padding: 0,
@@ -1398,9 +1490,9 @@ function DataTableInner({
                                 children: /* @__PURE__ */ jsx(
                                   "td",
                                   {
-                                    colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                                    colSpan: tableColumnCount,
                                     className: "bg-muted/40 p-density-3",
-                                    children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: item.content })
+                                    children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full overflow-x-auto rounded-md border border-border bg-background p-density-3", children: item.content })
                                   }
                                 )
                               },
@@ -1420,7 +1512,7 @@ function DataTableInner({
                                 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),
+                                colSpan: tableColumnCount,
                                 collapsed: item.group.collapsed,
                                 onToggleCollapsed: () => setCollapseStateByMode((current) => {
                                   var _a3;
@@ -1472,6 +1564,9 @@ function DataTableInner({
                             );
                           }
                           const record = item.record;
+                          if (renderCard) {
+                            return /* @__PURE__ */ jsx("tr", { ...rowHooks, className: "align-top", children: /* @__PURE__ */ jsx("td", { className: "border-b border-border/60 p-density-2", children: renderCard(record.row) }) }, record.id);
+                          }
                           const href = getRowHref == null ? void 0 : getRowHref(record.row);
                           const expanded = expandedRows[record.id] ?? false;
                           const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
@@ -1610,7 +1705,13 @@ function DataTableInner({
                                         // reveals the include/exclude buttons.
                                         renderLink({
                                           to: href,
-                                          className: "hover:underline after:absolute after:inset-0 after:content-['']",
+                                          // A stretched anchor over the whole row would
+                                          // otherwise start a native link drag on
+                                          // pointerdown-and-move, which swallows the
+                                          // horizontal touch pan a wide table needs.
+                                          draggable: false,
+                                          onDragStart: (event) => event.preventDefault(),
+                                          className: "hover:underline after:absolute after:inset-0 after:content-[''] [-webkit-user-drag:none]",
                                           children: hasCellFilterActions ? /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex min-w-0 items-center", children: content }) : content
                                         })
                                       ) : content })
@@ -1625,7 +1726,7 @@ function DataTableInner({
                         virtual.enabled && virtual.spacers.bottom > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": true, "data-virtual-spacer": "bottom", children: /* @__PURE__ */ jsx(
                           "td",
                           {
-                            colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                            colSpan: tableColumnCount,
                             style: {
                               height: virtual.spacers.bottom,
                               padding: 0,
@@ -1637,7 +1738,7 @@ function DataTableInner({
                       error == null && sentinelActive && /* @__PURE__ */ jsx("tr", { ref: infiniteSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsx(
                         "td",
                         {
-                          colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                          colSpan: tableColumnCount,
                           className: "p-density-2 text-center text-xs text-muted-foreground",
                           children: sentinelLabel
                         }
@@ -1647,7 +1748,8 @@ function DataTableInner({
                 }
               )
             }
-          )
+          ),
+          !renderCard && /* @__PURE__ */ jsx(DataTableOverflowCue, { scroll: scrollElement })
         ] }),
         renderedFooter !== null && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-1 text-xs text-muted-foreground", children: renderedFooter }),
         error == null && pagination ? /* @__PURE__ */ jsx(
@@ -1674,7 +1776,28 @@ function DataTableInner({
             }) : null
           }
         ),
-        columnMenu && showTablePreferencesControl && /* @__PURE__ */ jsx(
+        columnMenu && showTablePreferencesControl && preferencesSheet && /* @__PURE__ */ jsx(
+          DataTablePreferencesSheet,
+          {
+            open: true,
+            columns: effectiveColumns,
+            hiddenColumns,
+            activeColumnKey: columnMenu.columnKey,
+            actions: menuActions ?? [],
+            showColumnVisibilityControl,
+            showDensityControl: resolvedShowDensityControl,
+            showThemeControl,
+            themeMenuValue,
+            densityOverride,
+            visibleHideableColumnCount,
+            onToggle: toggleColumnVisibility,
+            onShowAll: showAllColumns,
+            onDensityChange: setDensityOverride,
+            ...onThemeChange ? { onThemeChange } : {},
+            onClose: () => setColumnMenu(null)
+          }
+        ),
+        columnMenu && showTablePreferencesControl && !preferencesSheet && /* @__PURE__ */ jsx(
           ColumnVisibilityMenu,
           {
             columns: effectiveColumns,
@@ -1831,15 +1954,16 @@ function DataTablePaginationFooter({
     trail.push(cursor.next);
     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: rangeLabel }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap  items-center gap-2 sm:gap-3", children: [
+  const compact = useMediaQuery("(max-width: 639px)");
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 shrink-0 flex-wrap items-center justify-between gap-x-2 gap-y-1 border-t border-border/70 px-1 pt-2 text-xs text-muted-foreground max-sm:flex-nowrap sm:gap-3", children: [
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "min-w-0 truncate whitespace-nowrap", children: rangeLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 max-sm:flex-nowrap sm:flex-wrap sm:gap-3", children: [
       /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
+        /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: "Rows per page" }),
         /* @__PURE__ */ jsx(
           "select",
           {
-            className: "h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className: "h-9 rounded-md border border-border bg-background px-2 text-xs text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:h-7",
             value: pageSize,
             onChange: (event) => onPageSizeChange(Number(event.target.value)),
             children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
@@ -1847,16 +1971,19 @@ function DataTablePaginationFooter({
         )
       ] }),
       steppable ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("span", { className: "min-w-20 text-center", children: [
-          "Page ",
-          safePage + 1,
-          totalPages != null ? ` of ${totalPages}` : ""
-        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("text-center", !compact && "min-w-20"),
+            title: `Page ${safePage + 1}${totalPages != null ? ` of ${totalPages}` : ""}`,
+            children: compact ? `${safePage + 1}${totalPages != null ? `/${totalPages}` : ""}` : `Page ${safePage + 1}${totalPages != null ? ` of ${totalPages}` : ""}`
+          }
+        ),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+            className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 sm:h-7 sm:w-7",
             "aria-label": "Previous page",
             title: "Previous page",
             disabled: atFirst,
@@ -1868,7 +1995,7 @@ function DataTablePaginationFooter({
           "button",
           {
             type: "button",
-            className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+            className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 sm:h-7 sm:w-7",
             "aria-label": "Next page",
             title: "Next page",
             disabled: atLast,
@@ -2060,16 +2187,18 @@ function HeaderFilterMenu({
   anchor,
   onClose
 }) {
+  const position = useMenuPanelPosition(anchor);
   if (!filter && !timeRange) return null;
   const label = (filter == null ? void 0 : filter.label) ?? "Time range";
   const timeRangeActive = Boolean((timeRange == null ? void 0 : timeRange.from) || (timeRange == null ? void 0 : timeRange.to));
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: position.ref,
       role: "dialog",
       "aria-label": `${label} column filter`,
-      className: "fixed z-50 max-h-[calc(100vh-1rem)] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
-      style: { left: anchor.x, top: anchor.y },
+      className: "z-50 max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+      style: position.style,
       onClick: (event) => event.stopPropagation(),
       onContextMenu: (event) => event.preventDefault(),
       children: [
@@ -2118,6 +2247,7 @@ function HeaderFilterMenu({
   );
 }
 function ColumnVisibilityTrigger({
+  opensSheet,
   onOpen
 }) {
   return /* @__PURE__ */ jsx(
@@ -2125,8 +2255,8 @@ function ColumnVisibilityTrigger({
     {
       type: "button",
       "aria-label": "Open column menu",
-      "aria-haspopup": "menu",
-      className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "aria-haspopup": opensSheet ? "dialog" : "menu",
+      className: "inline-flex h-8 w-8 max-sm:h-9 max-sm:w-9 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       onClick: (event) => {
         event.stopPropagation();
         onOpen(event);
@@ -2155,13 +2285,15 @@ function ColumnVisibilityMenu({
   const activeColumn = anchor.columnKey ? columns.find((column) => column.key === anchor.columnKey) : void 0;
   const canHideActiveColumn = activeColumn && isColumnHideable(activeColumn) && visibleHideableColumnCount > 1;
   const hasActions = actions.length > 0;
+  const position = useMenuPanelPosition(anchor);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: position.ref,
       role: "menu",
       "aria-label": "Column menu",
-      className: "fixed z-50 max-h-[calc(100vh-1rem)] min-w-[16rem] 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: anchor.x, top: anchor.y },
+      className: "z-50 min-w-[16rem] 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: position.style,
       onClick: (event) => event.stopPropagation(),
       onContextMenu: (event) => event.preventDefault(),
       children: [
@@ -2268,237 +2400,6 @@ function ColumnVisibilityMenu({
     }
   );
 }
-function groupMenuActions(actions) {
-  const groups = [];
-  for (const action of actions) {
-    const section = action.section ?? "Download";
-    let group = groups.find((g) => g.section === section);
-    if (!group) {
-      group = { section, actions: [] };
-      groups.push(group);
-    }
-    group.actions.push(action);
-  }
-  return groups;
-}
-function MenuActionSection({
-  actions,
-  separated,
-  onClose
-}) {
-  const groups = groupMenuActions(actions);
-  const [openSubmenu, setOpenSubmenu] = useState(null);
-  return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, index) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        (separated || index > 0) && "mt-1 border-t border-border pt-1"
-      ),
-      children: [
-        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,
-  onDensityChange
-}) {
-  const current = densityOverride ?? "inherit";
-  return /* @__PURE__ */ jsxs("div", { className: cn(separated && "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: "Density" }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        role: "menuitemradio",
-        "aria-checked": current === "inherit",
-        className: densityMenuItemClassName(current === "inherit"),
-        onClick: () => onDensityChange(void 0),
-        children: [
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              icon: UiResizeVertical,
-              className: "text-sm text-muted-foreground"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: "Use page density" }),
-          current === "inherit" ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
-        ]
-      }
-    ),
-    DENSITY_OPTIONS.map((option) => {
-      const active = current === option.value;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          role: "menuitemradio",
-          "aria-checked": active,
-          className: densityMenuItemClassName(active),
-          onClick: () => onDensityChange(option.value),
-          children: [
-            /* @__PURE__ */ jsx(
-              Icon,
-              {
-                icon: option.icon,
-                className: "text-sm text-muted-foreground"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
-            active ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
-          ]
-        },
-        option.value
-      );
-    })
-  ] });
-}
-function densityMenuItemClassName(active) {
-  return cn(
-    "flex w-full items-center 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",
-    active && "text-foreground"
-  );
-}
-const THEME_MENU_OPTIONS = [
-  { value: "system", icon: UiDesktop, label: "Use system theme" },
-  { value: "light", icon: UiSun, label: "Light" },
-  { value: "dark", icon: UiMoon, label: "Dark" }
-];
-function ThemeMenuSection({
-  value,
-  separated,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(separated && "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: "Theme" }),
-    THEME_MENU_OPTIONS.map((option) => {
-      const active = value === option.value;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          role: "menuitemradio",
-          "aria-checked": active,
-          className: densityMenuItemClassName(active),
-          onClick: () => onChange(option.value),
-          children: [
-            /* @__PURE__ */ jsx(
-              Icon,
-              {
-                icon: option.icon,
-                className: "text-sm text-muted-foreground"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
-            active ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
-          ]
-        },
-        option.value
-      );
-    })
-  ] });
-}
 function CellContent({
   column,
   children
@@ -2575,13 +2476,17 @@ function pruneMultiFilterState(state, filters) {
   );
 }
 function pruneNumberFilterState(state, filters) {
-  return pruneFilterState(
-    state,
-    filters,
-    "number",
-    (value) => !String(value.min ?? "").trim() && !String(value.max ?? "").trim()
+  const allowed = new Set(filters.filter((filter) => filter.kind === "number" || filter.kind === "duration").map((filter) => filter.column.key));
+  return Object.fromEntries(
+    Object.entries(state).filter(([key, value]) => allowed.has(key) && (String(value.min ?? "").trim() || String(value.max ?? "").trim()))
   );
 }
+const durationUnitMs = { ms: 1, s: 1e3, m: 6e4, h: 36e5 };
+function boundedOperand(value, selectedUnit, storageUnit) {
+  const parsed = parseNumberInput(value);
+  if (parsed == null) return null;
+  return parsed * durationUnitMs[selectedUnit ?? storageUnit ?? "ms"] / durationUnitMs[storageUnit ?? "ms"];
+}
 function pruneFilterState(state, filters, kind, isEmpty) {
   const allowed = new Set(
     filters.filter((filter) => filter.kind === kind).map((filter) => filter.column.key)
@@ -2690,50 +2595,6 @@ function applyKindDefaults(column, timestampFormat) {
   }
   return column;
 }
-function labelText(column) {
-  if (typeof column.label === "string") return column.label;
-  return prettifyKey(column.key.split(".").at(-1) ?? column.key);
-}
-function isColumnHideable(column) {
-  return column.hideable !== false;
-}
-function menuStateFromPointer(event, columnKey) {
-  const padding = 8;
-  const width = 256;
-  const height = 320;
-  const viewportWidth = typeof window === "undefined" ? event.clientX + width : window.innerWidth;
-  const viewportHeight = typeof window === "undefined" ? event.clientY + height : window.innerHeight;
-  const position = {
-    x: Math.max(
-      padding,
-      Math.min(event.clientX, viewportWidth - width - padding)
-    ),
-    y: Math.max(
-      padding,
-      Math.min(event.clientY, viewportHeight - height - padding)
-    )
-  };
-  return columnKey ? { ...position, columnKey } : position;
-}
-function menuStateFromTrigger(event, columnKey) {
-  const rect = event.currentTarget.getBoundingClientRect();
-  const padding = 8;
-  const width = 256;
-  const height = 320;
-  const viewportWidth = typeof window === "undefined" ? rect.right + width : window.innerWidth;
-  const viewportHeight = typeof window === "undefined" ? rect.bottom + height : window.innerHeight;
-  const position = {
-    x: Math.max(
-      padding,
-      Math.min(rect.right - width, viewportWidth - width - padding)
-    ),
-    y: Math.max(
-      padding,
-      Math.min(rect.bottom + 6, viewportHeight - height - padding)
-    )
-  };
-  return columnKey ? { ...position, columnKey } : position;
-}
 function columnStyle(column, widths, pinned = {}) {
   const width = widths[column.key] ?? pinned[column.key];
   return width ? { width: `${width}px` } : void 0;
@@ -2784,26 +2645,36 @@ function writeStoredColumnWidths(storageKey, widths) {
   } catch {
   }
 }
-function readStoredHiddenColumns(storageKey, columns) {
-  if (typeof window === "undefined") return {};
+function readStoredHiddenColumns(storageKey, columns, defaultHidden) {
+  const defaults = pruneHiddenColumns({}, columns, defaultHidden);
+  if (typeof window === "undefined") return defaults;
   try {
     const raw = window.localStorage.getItem(storageKey);
-    if (!raw) return {};
+    if (!raw) return defaults;
     const parsed = JSON.parse(raw);
     if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
-      return {};
-    return pruneHiddenColumns(parsed, columns);
+      return defaults;
+    return pruneHiddenColumns(
+      parsed,
+      columns,
+      defaultHidden
+    );
   } catch {
-    return {};
+    return defaults;
   }
 }
-function writeStoredHiddenColumns(storageKey, hiddenColumns) {
+function writeStoredHiddenColumns(storageKey, hiddenColumns, defaultHidden) {
   if (typeof window === "undefined") return;
+  const overrides = Object.fromEntries(
+    Object.entries(hiddenColumns).filter(
+      ([key, hidden]) => hidden !== defaultHidden.has(key)
+    )
+  );
   try {
-    if (Object.keys(hiddenColumns).length === 0) {
+    if (Object.keys(overrides).length === 0) {
       window.localStorage.removeItem(storageKey);
     } else {
-      window.localStorage.setItem(storageKey, JSON.stringify(hiddenColumns));
+      window.localStorage.setItem(storageKey, JSON.stringify(overrides));
     }
   } catch {
   }
@@ -2842,20 +2713,25 @@ function pruneColumnWidths(widths, columns) {
   }
   return next;
 }
-function pruneHiddenColumns(hiddenColumns, columns) {
-  const byKey = new Map(columns.map((column) => [column.key, column]));
+function pruneHiddenColumns(hiddenColumns, columns, defaultHidden) {
+  const hideable = columns.filter(isColumnHideable);
+  const hideableKeys = new Set(hideable.map((column) => column.key));
   const next = {};
+  for (const key of defaultHidden) {
+    if (hideableKeys.has(key)) next[key] = true;
+  }
   for (const [key, hidden] of Object.entries(hiddenColumns)) {
-    const column = byKey.get(key);
-    if (!column || hidden !== true || !isColumnHideable(column)) continue;
-    next[key] = true;
+    if (!hideableKeys.has(key)) continue;
+    if (hidden === true) next[key] = true;
+    else if (hidden === false && defaultHidden.has(key)) next[key] = false;
   }
-  const hideable = columns.filter(isColumnHideable);
   const visibleHideableCount = hideable.filter(
     (column) => next[column.key] !== true
   ).length;
   if (hideable.length > 0 && visibleHideableCount === 0) {
-    delete next[hideable[0].key];
+    const firstKey = hideable[0].key;
+    if (defaultHidden.has(firstKey)) next[firstKey] = false;
+    else delete next[firstKey];
   }
   return next;
 }
@@ -3013,7 +2889,7 @@ function DataTable({
     "div",
     {
       "data-theme": resolvedTheme,
-      className: cn("flex min-h-0 flex-col text-foreground", className),
+      className: cn("flex min-h-0 flex-1 flex-col text-foreground", className),
       children: [
         renderTable({ inFullscreen: false }),
         showFullscreenControl && /* @__PURE__ */ jsx(