@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/data/DataTable.js

@@ -4,6 +4,8 @@ import { useSort } from "../hooks/use-sort.js";
 import { DensityValueProvider } from "../hooks/density-provider.js";
 import { useResolvedTheme } from "../hooks/use-theme.js";
 import { cn } from "../lib/utils.js";
+import { LoadingBar } from "../components/loading.js";
+import { useRouter } from "../rpc/router.js";
 import { Modal } from "../overlay/Modal.js";
 import { useEscapeLayer } from "../overlay/modalStack.js";
 import { FilterBar, FilterBarFilterPanel, FilterBarRangePanel } from "../components/FilterBar.js";
@@ -80,6 +82,7 @@ function DataTableInner({
   externalFilters,
   pagination,
   getRowId,
+  rowSelection,
   onRowClick,
   isRowClickable,
   getRowHref,
@@ -426,7 +429,7 @@ function DataTableInner({
   );
   const autoTimeRange = useMemo(() => {
     var _a, _b, _c, _d;
-    if (!autoFilter || !timeRangeColumn) return null;
+    if (!timeRangeColumn) return null;
     const next = {
       from: timeRangeFilter.from,
       to: timeRangeFilter.to,
@@ -446,8 +449,8 @@ function DataTableInner({
       next.timeZones = timeRangeColumn.timestamp.timeZones;
     }
     return next;
-  }, [autoFilter, timeRangeColumn, timeRangeFilter.from, timeRangeFilter.to]);
-  const showFilterBar = autoFilter && (showGlobalFilter || nativeFilters.length > 0 || !!autoTimeRange) || !!externalSearch || !!externalTimeRange || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
+  }, [timeRangeColumn, timeRangeFilter.from, timeRangeFilter.to]);
+  const showFilterBar = autoFilter && (showGlobalFilter || nativeFilters.length > 0) || !!autoTimeRange || !!externalSearch || !!externalTimeRange || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
   const setDensityOverride = (next) => {
     if (!densityControlled) setLocalDensityOverride(next);
     onDensityChange == null ? void 0 : onDensityChange(next);
@@ -461,7 +464,7 @@ function DataTableInner({
       }
     )
   ] }) : filterBarProps == null ? void 0 : filterBarProps.trailing;
-  const showHeaderFilterControls = autoFilter && showHeaderFilters;
+  const showHeaderFilterControls = showHeaderFilters && (autoFilter || !!autoTimeRange);
   const filteredRows = useMemo(() => {
     const globalNeedle = effectiveGlobalFilter.trim().toLowerCase();
     const now = /* @__PURE__ */ new Date();
@@ -540,6 +543,7 @@ function DataTableInner({
     ),
     [effectiveColumns]
   );
+  const { renderLink } = useRouter();
   const { sorted, sort, toggle } = useSort(filteredRows, {
     defaultDir: (defaultSort == null ? void 0 : defaultSort.dir) ?? "asc",
     manual: manualSort,
@@ -557,6 +561,68 @@ function DataTableInner({
   }, [revealEnabled, revealBatchSize, sorted]);
   const visibleSorted = revealEnabled ? sorted.slice(0, visibleCount) : sorted;
   const hasMoreRows = revealEnabled && visibleCount < sorted.length;
+  const selectedRowIDs = useMemo(
+    () => new Set((rowSelection == null ? void 0 : rowSelection.selectedRowIds) ?? []),
+    [rowSelection == null ? void 0 : rowSelection.selectedRowIds]
+  );
+  const selectableVisibleRows = useMemo(
+    () => visibleSorted.filter(
+      (record) => {
+        var _a;
+        return ((_a = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+      }
+    ),
+    [rowSelection, visibleSorted]
+  );
+  const selectedVisibleCount = selectableVisibleRows.filter(
+    (record) => selectedRowIDs.has(record.id)
+  ).length;
+  const allVisibleSelected = selectableVisibleRows.length > 0 && selectedVisibleCount === selectableVisibleRows.length;
+  const someVisibleSelected = selectedVisibleCount > 0 && !allVisibleSelected;
+  const selectAllRef = useRef(null);
+  useEffect(() => {
+    if (selectAllRef.current) {
+      selectAllRef.current.indeterminate = someVisibleSelected;
+    }
+  }, [someVisibleSelected]);
+  const notifySelection = useCallback(
+    (nextIDs) => {
+      if (!rowSelection) return;
+      rowSelection.onSelectionChange(
+        Array.from(nextIDs),
+        rows.filter((record) => nextIDs.has(record.id)).map((record) => record.row)
+      );
+    },
+    [rowSelection, rows]
+  );
+  const toggleRowSelection = useCallback(
+    (record) => {
+      var _a;
+      if (!rowSelection) return;
+      if (((_a = rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) === false) return;
+      const next = new Set(selectedRowIDs);
+      if (next.has(record.id)) next.delete(record.id);
+      else next.add(record.id);
+      notifySelection(next);
+    },
+    [notifySelection, rowSelection, selectedRowIDs]
+  );
+  const toggleVisibleSelection = useCallback(() => {
+    if (!rowSelection) return;
+    const next = new Set(selectedRowIDs);
+    if (allVisibleSelected) {
+      for (const record of selectableVisibleRows) next.delete(record.id);
+    } else {
+      for (const record of selectableVisibleRows) next.add(record.id);
+    }
+    notifySelection(next);
+  }, [
+    allVisibleSelected,
+    notifySelection,
+    rowSelection,
+    selectableVisibleRows,
+    selectedRowIDs
+  ]);
   const revealSentinelRef = useCallback(
     (node) => {
       if (revealObserver.current) revealObserver.current.disconnect();
@@ -649,7 +715,7 @@ function DataTableInner({
   return /* @__PURE__ */ jsx(DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("flex min-h-0 min-w-0 flex-col gap-3", className),
+      className: cn("flex min-h-0 min-w-0 flex-1 flex-col gap-3", className),
       "data-density": densityOverride,
       children: [
         showFilterBar && /* @__PURE__ */ jsx(
@@ -668,197 +734,267 @@ function DataTableInner({
             filters: externalFilters && externalFilters.length > 0 ? [...externalFilters, ...nativeFilters] : nativeFilters
           }
         ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "max-w-full overflow-auto overscroll-x-contain rounded-md border border-border",
-              scrollContainerClassName ?? "min-h-0 flex-1"
-            ),
-            "aria-busy": loading || void 0,
-            children: /* @__PURE__ */ jsxs("table", { className: "w-max min-w-full 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"
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 max-w-full flex-1 flex-col", children: [
+          loading ? /* @__PURE__ */ jsx(LoadingBar, { "data-testid": "data-table-loading-bar", className: "rounded-t-md" }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border",
+                scrollContainerClassName
+              ),
+              "aria-busy": loading || void 0,
+              children: /* @__PURE__ */ jsxs("table", { className: "w-max min-w-full table-auto text-left text-sm", children: [
+                /* @__PURE__ */ jsxs("colgroup", { children: [
+                  rowSelection ? /* @__PURE__ */ jsx("col", { className: "w-10" }) : null,
+                  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__ */ jsxs("tr", { className: "border-b border-border text-xs text-muted-foreground", children: [
+                  rowSelection ? /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className: cn(
+                        "w-10 text-center",
+                        DATA_TABLE_HEADER_DENSITY_CLASS
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          ref: selectAllRef,
+                          type: "checkbox",
+                          "aria-label": "Select all visible rows",
+                          checked: allVisibleSelected,
+                          disabled: selectableVisibleRows.length === 0,
+                          onChange: toggleVisibleSelection,
+                          className: "size-3.5 rounded border-border accent-primary"
+                        }
+                      )
+                    }
+                  ) : null,
+                  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)
+                                }
+                              )
+                            ]
+                          }
                         ),
-                        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 hidden 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 md:flex",
-                        onClick: (event) => {
-                          event.preventDefault();
-                          event.stopPropagation();
-                        },
-                        onDoubleClick: (event) => autoFitColumn(event, column),
-                        onMouseDown: (event) => startColumnResize(event, column),
-                        children: /* @__PURE__ */ jsx(
+                        resizableColumns && column.resizable !== false && /* @__PURE__ */ jsx(
                           "span",
                           {
-                            "aria-hidden": true,
-                            className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
+                            role: "separator",
+                            "aria-label": `Resize ${labelText(column)} column`,
+                            "aria-orientation": "vertical",
+                            className: "absolute right-0 top-0 hidden 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 md:flex",
+                            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__ */ jsxs("tbody", { children: [
-                loading ? /* @__PURE__ */ jsx(
-                  DataTableLoadingRows,
-                  {
-                    columns: visibleColumns,
-                    rowCount: loadingRowCount,
-                    message: loadingMessage
-                  }
-                ) : visibleSorted.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 = resolveColumnValue(
-                            record.row,
-                            column
-                          );
-                          let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
-                          if (column.kind === "tags" && filterActionsByColumn[column.key]) {
-                            content = /* @__PURE__ */ jsx(
-                              TagActionsProvider,
+                      ]
+                    },
+                    column.key
+                  ))
+                ] }) }),
+                /* @__PURE__ */ jsxs("tbody", { children: [
+                  loading && visibleSorted.length === 0 ? /* @__PURE__ */ jsx(
+                    DataTableLoadingRows,
+                    {
+                      columns: visibleColumns,
+                      rowCount: loadingRowCount,
+                      message: loadingMessage,
+                      selection: !!rowSelection
+                    }
+                  ) : visibleSorted.map((record) => {
+                    var _a;
+                    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 rowSelectable = ((_a = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a.call(rowSelection, record.row)) ?? true;
+                    const selectionClickEnabled = !!(rowSelection == null ? void 0 : rowSelection.toggleOnRowClick) && rowSelectable;
+                    const clickable = !!href || rowClickEnabled || expandable || selectionClickEnabled;
+                    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      /* @__PURE__ */ jsxs(
+                        "tr",
+                        {
+                          className: cn(
+                            "relative border-b border-border/60 align-top",
+                            clickable && "cursor-pointer hover:bg-accent/40",
+                            selectedRowIDs.has(record.id) && "bg-accent/50"
+                          ),
+                          onClick: () => {
+                            if (selectionClickEnabled) toggleRowSelection(record);
+                            if (expandsInline) {
+                              setExpandedRows((current) => ({
+                                ...current,
+                                [record.id]: !current[record.id]
+                              }));
+                            }
+                            if (opensDialog) {
+                              setDetailRow(record);
+                            }
+                            if (rowClickEnabled) {
+                              onRowClick == null ? void 0 : onRowClick(record.row);
+                            }
+                          },
+                          children: [
+                            rowSelection ? /* @__PURE__ */ jsx(
+                              "td",
                               {
-                                value: filterActionsByColumn[column.key],
-                                children: content
+                                className: cn(
+                                  // relative z-10 keeps the checkbox above the row's
+                                  // stretched-link overlay so it stays clickable.
+                                  "relative z-10 w-10 text-center",
+                                  DATA_TABLE_CELL_DENSITY_CLASS
+                                ),
+                                onClick: (event) => event.stopPropagation(),
+                                children: /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    type: "checkbox",
+                                    "aria-label": `Select row ${record.id}`,
+                                    checked: selectedRowIDs.has(record.id),
+                                    disabled: !rowSelectable,
+                                    onChange: () => toggleRowSelection(record),
+                                    className: "size-3.5 rounded border-border accent-primary"
+                                  }
+                                )
                               }
-                            );
-                          }
-                          return /* @__PURE__ */ jsx(
-                            "td",
-                            {
-                              className: cn(
-                                DATA_TABLE_CELL_DENSITY_CLASS,
-                                alignmentClass(column.align),
-                                column.cellClassName
-                              ),
-                              children: /* @__PURE__ */ jsx(
-                                CellContent,
+                            ) : null,
+                            visibleColumns.map((column, index) => {
+                              const rawValue = resolveColumnValue(
+                                record.row,
+                                column
+                              );
+                              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",
                                 {
-                                  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);
-                }),
-                hasMoreRows && /* @__PURE__ */ jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    colSpan: visibleColumns.length,
-                    className: "p-density-2 text-center text-xs text-muted-foreground",
-                    children: "Loading more…"
-                  }
-                ) })
+                                  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 ? (
+                                        // One real <a href> per row whose ::after
+                                        // overlay stretches across the whole (relative)
+                                        // row: right/middle-click give native "open in
+                                        // new tab", plain left-click routes client-side.
+                                        renderLink({
+                                          to: href,
+                                          className: "hover:underline after:absolute after:inset-0 after:content-['']",
+                                          children: content
+                                        })
+                                      ) : content
+                                    }
+                                  )
+                                },
+                                column.key
+                              );
+                            })
+                          ]
+                        }
+                      ),
+                      expandsInline && expanded && expandedContent && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                          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);
+                  }),
+                  hasMoreRows && /* @__PURE__ */ jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                      className: "p-density-2 text-center text-xs text-muted-foreground",
+                      children: "Loading more…"
+                    }
+                  ) })
+                ] })
               ] })
-            ] })
-          }
-        ),
+            }
+          )
+        ] }),
         pagination ? /* @__PURE__ */ jsx(
           DataTablePaginationFooter,
           {
@@ -867,7 +1003,7 @@ function DataTableInner({
             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"}` }),
+        ) : /* @__PURE__ */ jsx("div", { className: "shrink-0 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,
           {
@@ -939,9 +1075,9 @@ function DataTablePaginationFooter({
   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-col 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: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 shrink-0 flex-row items-stretch gap-3 border-t border-border/70 px-1 pt-2 text-xs text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
     /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: loading ? loadingMessage : rangeLabel }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap  items-center gap-2 sm:gap-3", children: [
       /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
         /* @__PURE__ */ jsx(
@@ -989,10 +1125,11 @@ function DataTablePaginationFooter({
 function DataTableLoadingRows({
   columns,
   rowCount,
-  message
+  message,
+  selection
 }) {
   const safeRowCount = Math.max(1, rowCount);
-  const safeColumnCount = Math.max(1, columns.length);
+  const safeColumnCount = Math.max(1, columns.length + (selection ? 1 : 0));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 bg-muted/20", children: /* @__PURE__ */ jsxs(
       "td",
@@ -1014,27 +1151,30 @@ function DataTableLoadingRows({
         ]
       }
     ) }),
-    Array.from({ length: safeRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx(
-      "td",
-      {
-        className: cn(
-          DATA_TABLE_CELL_DENSITY_CLASS,
-          alignmentClass(column.align),
-          column.cellClassName
-        ),
-        children: /* @__PURE__ */ jsx(CellContent, { column, children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "block h-3 animate-pulse rounded-full bg-muted",
-              loadingSkeletonWidth(columnIndex)
-            )
-          }
-        ) })
-      },
-      column.key
-    )) }, rowIndex))
+    Array.from({ length: safeRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60", children: [
+      selection ? /* @__PURE__ */ jsx("td", { className: cn("w-10", DATA_TABLE_CELL_DENSITY_CLASS), children: /* @__PURE__ */ jsx("span", { className: "mx-auto block size-3.5 animate-pulse rounded bg-muted" }) }) : null,
+      columns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(
+            DATA_TABLE_CELL_DENSITY_CLASS,
+            alignmentClass(column.align),
+            column.cellClassName
+          ),
+          children: /* @__PURE__ */ jsx(CellContent, { column, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "block h-3 animate-pulse rounded-full bg-muted",
+                loadingSkeletonWidth(columnIndex)
+              )
+            }
+          ) })
+        },
+        column.key
+      ))
+    ] }, rowIndex))
   ] });
 }
 function HeaderFilterButton({