@flanksource/clicky-ui 0.2.9 → 0.2.11

package/dist/data/DataTable.js

@@ -14,6 +14,8 @@ import { StatusDot } from "./cells/StatusDot.js";
 import { normalizeStatus } from "./cells/status-mapping.js";
 import { UiEllipsis } from "../icons/components/UiEllipsis.js";
 import { UiFilterFilled, UiFilter } from "../icons/components/UiFilter.js";
+import { UiArrowLeft } from "../icons/components/UiArrowLeft.js";
+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";
@@ -90,7 +92,8 @@ function DataTableInner({
   themeMenuValue,
   onThemeChange,
   showThemeControl = false,
-  showHeaderFilters = true
+  showHeaderFilters = true,
+  menuActions
 }) {
   const columns = useMemo(
     () => columnsInput.map(
@@ -145,7 +148,11 @@ function DataTableInner({
       const next = pruneColumnWidths({ ...stored, ...current }, columns);
       return sameColumnWidths(current, next) ? current : next;
     });
-  }, [columnKeysSignature, persistColumnWidths, resolvedColumnResizeStorageKey]);
+  }, [
+    columnKeysSignature,
+    persistColumnWidths,
+    resolvedColumnResizeStorageKey
+  ]);
   useEffect(() => {
     if (!persistColumnWidths) return;
     writeStoredColumnWidths(resolvedColumnResizeStorageKey, columnWidths);
@@ -156,21 +163,39 @@ function DataTableInner({
       const next = pruneHiddenColumns({ ...stored, ...current }, columns);
       return sameHiddenColumns(current, next) ? current : next;
     });
-  }, [columnKeysSignature, persistColumnVisibility, resolvedColumnVisibilityStorageKey]);
+  }, [
+    columnKeysSignature,
+    persistColumnVisibility,
+    resolvedColumnVisibilityStorageKey
+  ]);
   useEffect(() => {
     if (!persistColumnVisibility) return;
     writeStoredHiddenColumns(resolvedColumnVisibilityStorageKey, hiddenColumns);
-  }, [hiddenColumns, persistColumnVisibility, resolvedColumnVisibilityStorageKey]);
+  }, [
+    hiddenColumns,
+    persistColumnVisibility,
+    resolvedColumnVisibilityStorageKey
+  ]);
   useEffect(() => {
     if (densityControlled) return;
     setLocalDensityOverride(
       persistDensity ? readStoredDensityOverride(resolvedDensityStorageKey) ?? defaultDensity : defaultDensity
     );
-  }, [defaultDensity, densityControlled, persistDensity, resolvedDensityStorageKey]);
+  }, [
+    defaultDensity,
+    densityControlled,
+    persistDensity,
+    resolvedDensityStorageKey
+  ]);
   useEffect(() => {
     if (densityControlled || !persistDensity) return;
     writeStoredDensityOverride(resolvedDensityStorageKey, localDensityOverride);
-  }, [densityControlled, localDensityOverride, persistDensity, resolvedDensityStorageKey]);
+  }, [
+    densityControlled,
+    localDensityOverride,
+    persistDensity,
+    resolvedDensityStorageKey
+  ]);
   useEffect(() => {
     if (!columnMenu && !headerFilterMenu) return;
     const close = () => {
@@ -206,17 +231,24 @@ function DataTableInner({
         if (parsed) dates.push(parsed);
       }
       const dataFormat = chooseTimestampFormat(dates);
-      out[column.key] = modeToFormat(((_a = column.timestamp) == null ? void 0 : _a.mode) ?? "auto", dataFormat);
+      out[column.key] = modeToFormat(
+        ((_a = column.timestamp) == null ? void 0 : _a.mode) ?? "auto",
+        dataFormat
+      );
     }
     return out;
   }, [columns, data]);
   const effectiveColumns = useMemo(
-    () => columns.map((column) => applyKindDefaults(column, timestampFormats[column.key])),
+    () => columns.map(
+      (column) => applyKindDefaults(column, timestampFormats[column.key])
+    ),
     [columns, timestampFormats]
   );
   const visibleColumns = useMemo(() => {
     if (!hideableColumns) return effectiveColumns;
-    const next = effectiveColumns.filter((column) => !hiddenColumns[column.key]);
+    const next = effectiveColumns.filter(
+      (column) => !hiddenColumns[column.key]
+    );
     return next.length > 0 ? next : effectiveColumns;
   }, [effectiveColumns, hiddenColumns, hideableColumns]);
   const hideableColumnCount = useMemo(
@@ -229,7 +261,8 @@ function DataTableInner({
   );
   const showColumnVisibilityControl = hideableColumns && hideableColumnCount > 1;
   const resolvedShowDensityControl = showDensityControl ?? showColumnVisibilityControl;
-  const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl;
+  const hasMenuActions = Boolean(menuActions && menuActions.length > 0);
+  const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl || hasMenuActions;
   const densityOverride = densityControlled ? density : localDensityOverride;
   const timeRangeColumn = useMemo(() => {
     if (filterBarProps == null ? void 0 : filterBarProps.timeRange) return null;
@@ -267,7 +300,9 @@ function DataTableInner({
           if (token) values.add(token);
         }
       }
-      const options = Array.from(values).sort((left, right) => left.localeCompare(right, void 0, { numeric: true })).map((value) => ({ value, label: value }));
+      const options = Array.from(values).sort(
+        (left, right) => left.localeCompare(right, void 0, { numeric: true })
+      ).map((value) => ({ value, label: value }));
       const multiCap = column.kind === "tags" ? 50 : 20;
       const fitsMulti = options.length >= 2 && options.length <= multiCap;
       if (column.kind === "tags" && fitsMulti) {
@@ -301,9 +336,15 @@ function DataTableInner({
     return out;
   }, [generatedFilters, multiFilters]);
   useEffect(() => {
-    setTextFilters((current) => pruneTextFilterState(current, generatedFilters));
-    setMultiFilters((current) => pruneMultiFilterState(current, generatedFilters));
-    setNumberFilters((current) => pruneNumberFilterState(current, generatedFilters));
+    setTextFilters(
+      (current) => pruneTextFilterState(current, generatedFilters)
+    );
+    setMultiFilters(
+      (current) => pruneMultiFilterState(current, generatedFilters)
+    );
+    setNumberFilters(
+      (current) => pruneNumberFilterState(current, generatedFilters)
+    );
   }, [generatedFilters]);
   const globalFilterControlled = globalFilter !== void 0;
   const effectiveGlobalFilter = globalFilterControlled ? globalFilter : localGlobalFilter;
@@ -319,7 +360,9 @@ function DataTableInner({
           kind: "multi",
           label: labelText(filter.column),
           value: multiFilters[columnKey] ?? {},
-          onChange: (next) => setMultiFilters((current) => updateFilterRecord(current, columnKey, next)),
+          onChange: (next) => setMultiFilters(
+            (current) => updateFilterRecord(current, columnKey, next)
+          ),
           options: filter.options
         };
       }
@@ -329,7 +372,9 @@ function DataTableInner({
           kind: "nested-multi",
           label: labelText(filter.column),
           value: multiFilters[columnKey] ?? {},
-          onChange: (next) => setMultiFilters((current) => updateFilterRecord(current, columnKey, next)),
+          onChange: (next) => setMultiFilters(
+            (current) => updateFilterRecord(current, columnKey, next)
+          ),
           groups: filter.groups ?? []
         };
       }
@@ -339,7 +384,9 @@ function DataTableInner({
           kind: "number",
           label: labelText(filter.column),
           value: numberFilters[columnKey] ?? {},
-          onChange: (next) => setNumberFilters((current) => updateNumberFilterValue(current, columnKey, next))
+          onChange: (next) => setNumberFilters(
+            (current) => updateNumberFilterValue(current, columnKey, next)
+          )
         };
         if (((_a = filter.numberBounds) == null ? void 0 : _a.min) !== void 0) {
           numberFilter.domainMin = filter.numberBounds.min;
@@ -357,7 +404,9 @@ function DataTableInner({
         kind: "text",
         label: labelText(filter.column),
         value: textFilters[columnKey] ?? "",
-        onChange: (next) => setTextFilters((current) => updateFilterValue(current, columnKey, next))
+        onChange: (next) => setTextFilters(
+          (current) => updateFilterValue(current, columnKey, next)
+        )
       };
     }),
     [generatedFilters, multiFilters, numberFilters, textFilters]
@@ -399,7 +448,12 @@ function DataTableInner({
   };
   const filterBarTrailing = showTablePreferencesControl ? /* @__PURE__ */ jsxs(Fragment, { children: [
     filterBarProps == null ? void 0 : filterBarProps.trailing,
-    /* @__PURE__ */ jsx(ColumnVisibilityTrigger, { onOpen: (event) => setColumnMenu(menuStateFromTrigger(event)) })
+    /* @__PURE__ */ jsx(
+      ColumnVisibilityTrigger,
+      {
+        onOpen: (event) => setColumnMenu(menuStateFromTrigger(event))
+      }
+    )
   ] }) : filterBarProps == null ? void 0 : filterBarProps.trailing;
   const showHeaderFilterControls = autoFilter && showHeaderFilters;
   const filteredRows = useMemo(() => {
@@ -413,7 +467,8 @@ function DataTableInner({
         const raw = resolvePath(row, rangeColumnKey);
         const ts = parseTimestamp(raw);
         if (!ts) return false;
-        if (rangeFromDate && ts.getTime() < rangeFromDate.getTime()) return false;
+        if (rangeFromDate && ts.getTime() < rangeFromDate.getTime())
+          return false;
         if (rangeToDate && ts.getTime() > rangeToDate.getTime()) return false;
       }
       if (globalNeedle) {
@@ -492,7 +547,10 @@ function DataTableInner({
     const measuredWidth = (header == null ? void 0 : header.getBoundingClientRect().width) ?? 0;
     const startWidth = measuredWidth || columnWidths[column.key] || defaultColumnWidth(column);
     const onMove = (moveEvent) => {
-      const nextWidth = clampColumnWidth(column, startWidth + moveEvent.clientX - startX);
+      const nextWidth = clampColumnWidth(
+        column,
+        startWidth + moveEvent.clientX - startX
+      );
       setColumnWidths((current) => ({
         ...current,
         [column.key]: nextWidth
@@ -516,7 +574,9 @@ function DataTableInner({
     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) ?? []).indexOf(header);
+    const columnIndex = Array.from(
+      ((_a = header.parentElement) == null ? void 0 : _a.children) ?? []
+    ).indexOf(header);
     if (columnIndex < 0) return;
     const width = measureColumnContentWidth(table, columnIndex, column);
     setColumnWidths((current) => ({
@@ -549,274 +609,325 @@ function DataTableInner({
     event.stopPropagation();
     setHeaderFilterMenu(menuStateFromTrigger(event, columnKey));
   };
-  return /* @__PURE__ */ jsx(DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-3", className), "data-density": densityOverride, children: [
-    showFilterBar && /* @__PURE__ */ jsx(
-      FilterBar,
-      {
-        ...filterBarProps,
-        ...externalSearch ? { search: externalSearch } : autoFilter && showGlobalFilter ? {
-          search: {
-            value: effectiveGlobalFilter,
-            onChange: setEffectiveGlobalFilter,
-            placeholder: globalFilterPlaceholder
+  return /* @__PURE__ */ jsx(DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex min-h-0 flex-col gap-3", className),
+      "data-density": densityOverride,
+      children: [
+        showFilterBar && /* @__PURE__ */ jsx(
+          FilterBar,
+          {
+            ...filterBarProps,
+            ...externalSearch ? { search: externalSearch } : autoFilter && showGlobalFilter ? {
+              search: {
+                value: effectiveGlobalFilter,
+                onChange: setEffectiveGlobalFilter,
+                placeholder: globalFilterPlaceholder
+              }
+            } : {},
+            ...externalTimeRange ? { timeRange: externalTimeRange } : autoTimeRange ? { timeRange: autoTimeRange } : {},
+            trailing: filterBarTrailing,
+            filters: externalFilters && externalFilters.length > 0 ? [...externalFilters, ...nativeFilters] : nativeFilters
           }
-        } : {},
-        ...externalTimeRange ? { timeRange: externalTimeRange } : autoTimeRange ? { timeRange: autoTimeRange } : {},
-        trailing: filterBarTrailing,
-        filters: externalFilters && externalFilters.length > 0 ? [...externalFilters, ...nativeFilters] : nativeFilters
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "min-h-0 flex-1 overflow-auto rounded-md border border-border",
-        "aria-busy": loading || void 0,
-        children: /* @__PURE__ */ jsxs("table", { className: "w-max table-auto text-left text-sm", children: [
-          /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((column) => /* @__PURE__ */ jsx(
-            "col",
-            {
-              style: columnStyle(column, columnWidths),
-              className: column.shrink && !column.grow ? "w-px" : void 0
-            },
-            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__ */ jsx("tr", { className: "border-b border-border text-xs text-muted-foreground", children: visibleColumns.map((column) => /* @__PURE__ */ jsxs(
-            "th",
-            {
-              className: cn(
-                "group/header relative whitespace-nowrap font-medium",
-                DATA_TABLE_HEADER_DENSITY_CLASS,
-                alignmentClass(column.align),
-                resizableColumns && column.resizable !== false && "select-none",
-                column.headerClassName
-              ),
-              onContextMenu: (event) => openHeaderColumnMenu(event, column),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "flex min-w-0 items-center gap-1",
-                      headerAlignmentClass(column.align),
-                      resizableColumns && column.resizable !== false && "pr-2"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "min-w-0", children: column.sortable === false ? /* @__PURE__ */ jsx("span", { children: column.label }) : /* @__PURE__ */ jsx(
-                        SortableHeader,
-                        {
-                          active: (sort == null ? void 0 : sort.key) === column.key,
-                          ...(sort == null ? void 0 : sort.key) === column.key ? { dir: sort.dir } : {},
-                          ...column.align ? { align: column.align } : {},
-                          onClick: () => toggle(column.key),
-                          children: column.label
-                        }
-                      ) }),
-                      showHeaderFilterControls && (nativeFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsx(
-                        HeaderFilterButton,
-                        {
-                          column,
-                          active: nativeFilterByColumn.has(column.key) ? isFilterBarFilterActive(nativeFilterByColumn.get(column.key)) : Boolean(timeRangeFilter.from || timeRangeFilter.to),
-                          onOpen: (event) => openHeaderFilterMenu(event, column.key)
-                        }
-                      )
-                    ]
-                  }
-                ),
-                resizableColumns && column.resizable !== false && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    role: "separator",
-                    "aria-label": `Resize ${labelText(column)} column`,
-                    "aria-orientation": "vertical",
-                    className: "absolute right-0 top-0 flex h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20",
-                    onClick: (event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                    },
-                    onDoubleClick: (event) => autoFitColumn(event, column),
-                    onMouseDown: (event) => startColumnResize(event, column),
-                    children: /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "aria-hidden": true,
-                        className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
-                      }
-                    )
-                  }
-                )
-              ]
-            },
-            column.key
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
-            DataTableLoadingRows,
-            {
-              columns: visibleColumns,
-              rowCount: loadingRowCount,
-              message: loadingMessage
-            }
-          ) : sorted.map((record) => {
-            const href = getRowHref == null ? void 0 : getRowHref(record.row);
-            const expanded = expandedRows[record.id] ?? false;
-            const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
-              columns: effectiveColumns,
-              visibleColumns,
-              filterActionsByColumn
-            })) ?? null;
-            const expandable = expandedContent !== null;
-            const expandsInline = expandable && detailStyle === "row";
-            const opensDialog = expandable && detailStyle === "dialog";
-            const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
-            const clickable = !!href || rowClickEnabled || expandable;
-            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsx(
-                "tr",
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "min-h-0 flex-1 overflow-auto rounded-md border border-border",
+            "aria-busy": loading || void 0,
+            children: /* @__PURE__ */ jsxs("table", { className: "w-max table-auto text-left text-sm", children: [
+              /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((column) => /* @__PURE__ */ jsx(
+                "col",
+                {
+                  style: columnStyle(column, columnWidths),
+                  className: column.shrink && !column.grow ? "w-px" : void 0
+                },
+                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__ */ jsx("tr", { className: "border-b border-border text-xs text-muted-foreground", children: visibleColumns.map((column) => /* @__PURE__ */ jsxs(
+                "th",
                 {
                   className: cn(
-                    "border-b border-border/60 align-top",
-                    clickable && "cursor-pointer hover:bg-accent/40"
+                    "group/header relative whitespace-nowrap font-medium",
+                    DATA_TABLE_HEADER_DENSITY_CLASS,
+                    alignmentClass(column.align),
+                    resizableColumns && column.resizable !== false && "select-none",
+                    column.headerClassName
                   ),
-                  onClick: () => {
-                    if (expandsInline) {
-                      setExpandedRows((current) => ({
-                        ...current,
-                        [record.id]: !current[record.id]
-                      }));
-                    }
-                    if (opensDialog) {
-                      setDetailRow(record);
-                    }
-                    if (rowClickEnabled) {
-                      onRowClick == null ? void 0 : onRowClick(record.row);
-                    }
-                  },
-                  children: visibleColumns.map((column, index) => {
-                    const rawValue = resolvePath(record.row, column.key);
-                    let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
-                    if (column.kind === "tags" && filterActionsByColumn[column.key]) {
-                      content = /* @__PURE__ */ jsx(TagActionsProvider, { value: filterActionsByColumn[column.key], children: content });
-                    }
-                    return /* @__PURE__ */ jsx(
-                      "td",
+                  onContextMenu: (event) => openHeaderColumnMenu(event, column),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
                       {
                         className: cn(
-                          DATA_TABLE_CELL_DENSITY_CLASS,
-                          alignmentClass(column.align),
-                          column.cellClassName
+                          "flex min-w-0 items-center gap-1",
+                          headerAlignmentClass(column.align),
+                          resizableColumns && column.resizable !== false && "pr-2"
                         ),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "min-w-0", children: column.sortable === false ? /* @__PURE__ */ jsx("span", { children: column.label }) : /* @__PURE__ */ jsx(
+                            SortableHeader,
+                            {
+                              active: (sort == null ? void 0 : sort.key) === column.key,
+                              ...(sort == null ? void 0 : sort.key) === column.key ? { dir: sort.dir } : {},
+                              ...column.align ? { align: column.align } : {},
+                              onClick: () => toggle(column.key),
+                              children: column.label
+                            }
+                          ) }),
+                          showHeaderFilterControls && (nativeFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsx(
+                            HeaderFilterButton,
+                            {
+                              column,
+                              active: nativeFilterByColumn.has(column.key) ? isFilterBarFilterActive(
+                                nativeFilterByColumn.get(column.key)
+                              ) : Boolean(
+                                timeRangeFilter.from || timeRangeFilter.to
+                              ),
+                              onOpen: (event) => openHeaderFilterMenu(event, column.key)
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    resizableColumns && column.resizable !== false && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        role: "separator",
+                        "aria-label": `Resize ${labelText(column)} column`,
+                        "aria-orientation": "vertical",
+                        className: "absolute right-0 top-0 flex h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20",
+                        onClick: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                        },
+                        onDoubleClick: (event) => autoFitColumn(event, column),
+                        onMouseDown: (event) => startColumnResize(event, column),
                         children: /* @__PURE__ */ jsx(
-                          CellContent,
+                          "span",
                           {
-                            column,
-                            ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
-                            children: href && index === 0 ? /* @__PURE__ */ jsx("a", { href, className: "hover:underline", children: content }) : content
+                            "aria-hidden": true,
+                            className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
                           }
                         )
-                      },
-                      column.key
-                    );
-                  })
+                      }
+                    )
+                  ]
+                },
+                column.key
+              )) }) }),
+              /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
+                DataTableLoadingRows,
+                {
+                  columns: visibleColumns,
+                  rowCount: loadingRowCount,
+                  message: loadingMessage
                 }
-              ),
-              expandsInline && expanded && expandedContent && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: visibleColumns.length, className: "bg-muted/40 p-density-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent }) }) })
-            ] }, record.id);
-          }) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "px-1 text-xs text-muted-foreground", children: loading ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}` }),
-    pagination && /* @__PURE__ */ jsx(DataTablePaginationFooter, { pagination }),
-    detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsx(
-      Modal,
-      {
-        open: detailRow !== null,
-        onClose: () => setDetailRow(null),
-        size: detailDialogSize,
-        ...detailRow ? {
-          title: typeof detailDialogTitle === "function" ? detailDialogTitle(detailRow.row) : detailDialogTitle
-        } : {},
-        children: detailRow ? renderExpandedRow(detailRow.row, {
-          columns: effectiveColumns,
-          visibleColumns,
-          filterActionsByColumn
-        }) : null
-      }
-    ),
-    columnMenu && showTablePreferencesControl && /* @__PURE__ */ jsx(
-      ColumnVisibilityMenu,
-      {
-        columns: effectiveColumns,
-        hiddenColumns,
-        anchor: columnMenu,
-        showColumnVisibilityControl,
-        showDensityControl: resolvedShowDensityControl,
-        showThemeControl,
-        themeMenuValue,
-        densityOverride,
-        visibleHideableColumnCount,
-        onToggle: toggleColumnVisibility,
-        onShowAll: showAllColumns,
-        onDensityChange: setDensityOverride,
-        ...onThemeChange ? { onThemeChange } : {},
-        onClose: () => setColumnMenu(null)
-      }
-    ),
-    headerFilterMenu && /* @__PURE__ */ jsx(
-      HeaderFilterMenu,
-      {
-        filter: nativeFilterByColumn.get(headerFilterMenu.columnKey ?? ""),
-        ...autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === headerFilterMenu.columnKey ? { timeRange: autoTimeRange } : {},
-        anchor: headerFilterMenu,
-        onClose: () => setHeaderFilterMenu(null)
-      }
-    )
-  ] }) });
+              ) : sorted.map((record) => {
+                const href = getRowHref == null ? void 0 : getRowHref(record.row);
+                const expanded = expandedRows[record.id] ?? false;
+                const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
+                  columns: effectiveColumns,
+                  visibleColumns,
+                  filterActionsByColumn
+                })) ?? null;
+                const expandable = expandedContent !== null;
+                const expandsInline = expandable && detailStyle === "row";
+                const opensDialog = expandable && detailStyle === "dialog";
+                const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
+                const clickable = !!href || rowClickEnabled || expandable;
+                return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsx(
+                    "tr",
+                    {
+                      className: cn(
+                        "border-b border-border/60 align-top",
+                        clickable && "cursor-pointer hover:bg-accent/40"
+                      ),
+                      onClick: () => {
+                        if (expandsInline) {
+                          setExpandedRows((current) => ({
+                            ...current,
+                            [record.id]: !current[record.id]
+                          }));
+                        }
+                        if (opensDialog) {
+                          setDetailRow(record);
+                        }
+                        if (rowClickEnabled) {
+                          onRowClick == null ? void 0 : onRowClick(record.row);
+                        }
+                      },
+                      children: visibleColumns.map((column, index) => {
+                        const rawValue = resolvePath(record.row, column.key);
+                        let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
+                        if (column.kind === "tags" && filterActionsByColumn[column.key]) {
+                          content = /* @__PURE__ */ jsx(
+                            TagActionsProvider,
+                            {
+                              value: filterActionsByColumn[column.key],
+                              children: content
+                            }
+                          );
+                        }
+                        return /* @__PURE__ */ jsx(
+                          "td",
+                          {
+                            className: cn(
+                              DATA_TABLE_CELL_DENSITY_CLASS,
+                              alignmentClass(column.align),
+                              column.cellClassName
+                            ),
+                            children: /* @__PURE__ */ jsx(
+                              CellContent,
+                              {
+                                column,
+                                ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
+                                children: href && index === 0 ? /* @__PURE__ */ jsx("a", { href, className: "hover:underline", children: content }) : content
+                              }
+                            )
+                          },
+                          column.key
+                        );
+                      })
+                    }
+                  ),
+                  expandsInline && expanded && expandedContent && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      colSpan: visibleColumns.length,
+                      className: "bg-muted/40 p-density-3",
+                      children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent })
+                    }
+                  ) })
+                ] }, record.id);
+              }) })
+            ] })
+          }
+        ),
+        pagination ? /* @__PURE__ */ jsx(
+          DataTablePaginationFooter,
+          {
+            pagination,
+            visibleRowCount: sorted.length,
+            loading,
+            loadingMessage
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "px-1 text-xs text-muted-foreground", children: loading ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}` }),
+        detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsx(
+          Modal,
+          {
+            open: detailRow !== null,
+            onClose: () => setDetailRow(null),
+            size: detailDialogSize,
+            ...detailRow ? {
+              title: typeof detailDialogTitle === "function" ? detailDialogTitle(detailRow.row) : detailDialogTitle
+            } : {},
+            children: detailRow ? renderExpandedRow(detailRow.row, {
+              columns: effectiveColumns,
+              visibleColumns,
+              filterActionsByColumn
+            }) : null
+          }
+        ),
+        columnMenu && showTablePreferencesControl && /* @__PURE__ */ jsx(
+          ColumnVisibilityMenu,
+          {
+            columns: effectiveColumns,
+            hiddenColumns,
+            anchor: columnMenu,
+            actions: menuActions ?? [],
+            showColumnVisibilityControl,
+            showDensityControl: resolvedShowDensityControl,
+            showThemeControl,
+            themeMenuValue,
+            densityOverride,
+            visibleHideableColumnCount,
+            onToggle: toggleColumnVisibility,
+            onShowAll: showAllColumns,
+            onDensityChange: setDensityOverride,
+            ...onThemeChange ? { onThemeChange } : {},
+            onClose: () => setColumnMenu(null)
+          }
+        ),
+        headerFilterMenu && /* @__PURE__ */ jsx(
+          HeaderFilterMenu,
+          {
+            filter: nativeFilterByColumn.get(headerFilterMenu.columnKey ?? ""),
+            ...autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === headerFilterMenu.columnKey ? { timeRange: autoTimeRange } : {},
+            anchor: headerFilterMenu,
+            onClose: () => setHeaderFilterMenu(null)
+          }
+        )
+      ]
+    }
+  ) });
 }
-const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
-function DataTablePaginationFooter({ pagination }) {
+const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 25, 50, 100, 200];
+function DataTablePaginationFooter({
+  pagination,
+  visibleRowCount,
+  loading,
+  loadingMessage
+}) {
   const { page, pageSize, total, onPageChange, onPageSizeChange } = pagination;
-  const options = pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
+  const options = Array.from(
+    /* @__PURE__ */ new Set([
+      ...pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS,
+      pageSize
+    ])
+  ).sort((a, b) => a - b);
   const safePage = Math.max(0, page);
   const totalPages = total != null && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : void 0;
   const atFirst = safePage === 0;
-  const atLast = totalPages != null ? safePage >= totalPages - 1 : false;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1 text-xs text-muted-foreground", children: [
-    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
-      /* @__PURE__ */ jsx(
-        "select",
-        {
-          className: "rounded border border-border bg-background px-1 py-0.5 text-foreground",
-          value: pageSize,
-          onChange: (event) => onPageSizeChange(Number(event.target.value)),
-          children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  const atLast = 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(total, rangeStart + Math.max(visibleRowCount - 1, 0)) : visibleRowCount;
+  const rangeLabel = total != null ? `${rangeStart}-${rangeEnd} of ${total}` : `${visibleRowCount} row${visibleRowCount === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 flex-wrap items-center justify-between gap-3 border-t border-border/70 px-1 pt-2 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: loading ? loadingMessage : rangeLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { 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",
+            value: pageSize,
+            onChange: (event) => onPageSizeChange(Number(event.target.value)),
+            children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "min-w-20 text-center", children: [
+        "Page ",
+        safePage + 1,
+        totalPages != null ? ` of ${totalPages}` : ""
+      ] }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: "rounded border border-border px-2 py-0.5 disabled:opacity-50",
+          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",
+          "aria-label": "Previous page",
+          title: "Previous page",
           disabled: atFirst,
           onClick: () => onPageChange(Math.max(0, safePage - 1)),
-          children: "Prev"
+          children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowLeft })
         }
       ),
-      /* @__PURE__ */ jsxs("span", { children: [
-        "Page ",
-        safePage + 1,
-        totalPages != null ? ` of ${totalPages}` : ""
-      ] }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: "rounded border border-border px-2 py-0.5 disabled:opacity-50",
+          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",
+          "aria-label": "Next page",
+          title: "Next page",
           disabled: atLast,
           onClick: () => onPageChange(safePage + 1),
-          children: "Next"
+          children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowRight })
         }
       )
     ] })
@@ -830,19 +941,26 @@ function DataTableLoadingRows({
   const safeRowCount = Math.max(1, rowCount);
   const safeColumnCount = Math.max(1, columns.length);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 bg-muted/20", children: /* @__PURE__ */ jsxs("td", { colSpan: safeColumnCount, className: cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-0"), children: [
-      /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full overflow-hidden bg-muted", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/2 animate-pulse rounded-full bg-primary/70" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "h-3 w-3 animate-spin rounded-full border-2 border-primary/30 border-t-primary"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: message })
-      ] })
-    ] }) }),
+    /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 bg-muted/20", children: /* @__PURE__ */ jsxs(
+      "td",
+      {
+        colSpan: safeColumnCount,
+        className: cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-0"),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full overflow-hidden bg-muted", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/2 animate-pulse rounded-full bg-primary/70" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "h-3 w-3 animate-spin rounded-full border-2 border-primary/30 border-t-primary"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: message })
+          ] })
+        ]
+      }
+    ) }),
     Array.from({ length: safeRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx(
       "td",
       {
@@ -883,7 +1001,14 @@ function HeaderFilterButton({
         active && "bg-accent text-foreground"
       ),
       onClick: onOpen,
-      children: /* @__PURE__ */ jsx("span", { "data-filter-icon-state": active ? "filled" : "outline", className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { icon: active ? UiFilterFilled : UiFilter, className: "text-xs" }) })
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-filter-icon-state": active ? "filled" : "outline",
+          className: "inline-flex",
+          children: /* @__PURE__ */ jsx(Icon, { icon: active ? UiFilterFilled : UiFilter, className: "text-xs" })
+        }
+      )
     }
   );
 }
@@ -972,6 +1097,7 @@ function ColumnVisibilityMenu({
   columns,
   hiddenColumns,
   anchor,
+  actions,
   showColumnVisibilityControl,
   showDensityControl,
   showThemeControl,
@@ -986,6 +1112,7 @@ 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;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1026,7 +1153,13 @@ function ColumnVisibilityMenu({
                   onClose();
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Icon, { icon: UiEyeClosed, className: "text-sm text-muted-foreground" }),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: UiEyeClosed,
+                      className: "text-sm text-muted-foreground"
+                    }
+                  ),
                   /* @__PURE__ */ jsxs("span", { children: [
                     "Hide ",
                     labelText(activeColumn)
@@ -1073,11 +1206,19 @@ function ColumnVisibilityMenu({
             onDensityChange
           }
         ),
+        hasActions && /* @__PURE__ */ jsx(
+          MenuActionSection,
+          {
+            actions,
+            separated: showColumnVisibilityControl || showDensityControl,
+            onClose
+          }
+        ),
         showThemeControl && onThemeChange && /* @__PURE__ */ jsx(
           ThemeMenuSection,
           {
             value: themeMenuValue ?? "system",
-            separated: showColumnVisibilityControl || showDensityControl,
+            separated: showColumnVisibilityControl || showDensityControl || hasActions,
             onChange: onThemeChange
           }
         )
@@ -1085,6 +1226,54 @@ function ColumnVisibilityMenu({
     }
   );
 }
+function MenuActionSection({
+  actions,
+  separated,
+  onClose
+}) {
+  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: "Download" }),
+    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
+      );
+    })
+  ] });
+}
 function DensityMenuSection({
   densityOverride,
   separated,
@@ -1102,7 +1291,13 @@ function DensityMenuSection({
         className: densityMenuItemClassName(current === "inherit"),
         onClick: () => onDensityChange(void 0),
         children: [
-          /* @__PURE__ */ jsx(Icon, { icon: UiResizeVertical, className: "text-sm text-muted-foreground" }),
+          /* @__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 })
         ]
@@ -1119,7 +1314,13 @@ function DensityMenuSection({
           className: densityMenuItemClassName(active),
           onClick: () => onDensityChange(option.value),
           children: [
-            /* @__PURE__ */ jsx(Icon, { icon: option.icon, className: "text-sm text-muted-foreground" }),
+            /* @__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 })
           ]
@@ -1158,7 +1359,13 @@ function ThemeMenuSection({
           className: densityMenuItemClassName(active),
           onClick: () => onChange(option.value),
           children: [
-            /* @__PURE__ */ jsx(Icon, { icon: option.icon, className: "text-sm text-muted-foreground" }),
+            /* @__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 })
           ]
@@ -1176,7 +1383,10 @@ function CellContent({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(cellContentClassName(column, width), alignmentClass(column.align)),
+      className: cn(
+        cellContentClassName(column, width),
+        alignmentClass(column.align)
+      ),
       style: cellContentStyle(width),
       children
     }
@@ -1242,11 +1452,18 @@ function updateNumberFilterValue(state, key, nextValue) {
   return next;
 }
 function pruneTextFilterState(state, filters) {
-  return pruneFilterState(state, filters, "text", (value) => !String(value ?? "").trim());
+  return pruneFilterState(
+    state,
+    filters,
+    "text",
+    (value) => !String(value ?? "").trim()
+  );
 }
 function pruneMultiFilterState(state, filters) {
   const allowed = new Set(
-    filters.filter((filter) => filter.kind === "multi" || filter.kind === "nested-multi").map((filter) => filter.column.key)
+    filters.filter(
+      (filter) => filter.kind === "multi" || filter.kind === "nested-multi"
+    ).map((filter) => filter.column.key)
   );
   return Object.fromEntries(
     Object.entries(state).filter(
@@ -1267,7 +1484,9 @@ function pruneFilterState(state, filters, kind, isEmpty) {
     filters.filter((filter) => filter.kind === kind).map((filter) => filter.column.key)
   );
   return Object.fromEntries(
-    Object.entries(state).filter(([key, value]) => allowed.has(key) && !isEmpty(value))
+    Object.entries(state).filter(
+      ([key, value]) => allowed.has(key) && !isEmpty(value)
+    )
   );
 }
 function resolvePath(obj, path) {
@@ -1393,8 +1612,14 @@ function menuStateFromPointer(event, columnKey) {
   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))
+    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;
 }
@@ -1406,8 +1631,14 @@ function menuStateFromTrigger(event, columnKey) {
   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))
+    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;
 }
@@ -1443,7 +1674,8 @@ function readStoredColumnWidths(storageKey, columns) {
     const raw = window.localStorage.getItem(storageKey);
     if (!raw) return {};
     const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
+      return {};
     return pruneColumnWidths(parsed, columns);
   } catch {
     return {};
@@ -1466,7 +1698,8 @@ function readStoredHiddenColumns(storageKey, columns) {
     const raw = window.localStorage.getItem(storageKey);
     if (!raw) return {};
     const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
+      return {};
     return pruneHiddenColumns(parsed, columns);
   } catch {
     return {};
@@ -1511,7 +1744,8 @@ function pruneColumnWidths(widths, columns) {
   const next = {};
   for (const [key, width] of Object.entries(widths)) {
     const column = byKey.get(key);
-    if (!column || typeof width !== "number" || !Number.isFinite(width)) continue;
+    if (!column || typeof width !== "number" || !Number.isFinite(width))
+      continue;
     next[key] = clampColumnWidth(column, width);
   }
   return next;
@@ -1525,7 +1759,9 @@ function pruneHiddenColumns(hiddenColumns, columns) {
     next[key] = true;
   }
   const hideable = columns.filter(isColumnHideable);
-  const visibleHideableCount = hideable.filter((column) => next[column.key] !== true).length;
+  const visibleHideableCount = hideable.filter(
+    (column) => next[column.key] !== true
+  ).length;
   if (hideable.length > 0 && visibleHideableCount === 0) {
     delete next[hideable[0].key];
   }
@@ -1622,8 +1858,10 @@ function cellContentStyle(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]");
+  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 inferColumns(data) {
@@ -1715,7 +1953,10 @@ function DataTable({
     }
   );
 }
-function FullscreenButton({ label, onClick }) {
+function FullscreenButton({
+  label,
+  onClick
+}) {
   return /* @__PURE__ */ jsx(
     "button",
     {