@flanksource/clicky-ui 0.3.16 → 0.3.17

package/dist/data/DataTable.cjs

@@ -64,6 +64,7 @@ const TIMESTAMP_RANGE_PRESETS = [
 ];
 function DataTableInner({
   data,
+  error,
   columns: columnsInput,
   loading: loading$1 = false,
   loadingMessage = "Loading results…",
@@ -642,7 +643,7 @@ function DataTableInner({
       clearSelection: () => notifySelection(/* @__PURE__ */ new Set())
     });
   }, [notifySelection, rowSelection, rows, selectedRowIDs, selectionActions]);
-  const renderedFooter = footer !== void 0 ? typeof footer === "function" ? footer({
+  const renderedFooter = error != null ? null : footer !== void 0 ? typeof footer === "function" ? footer({
     visibleRowCount: sorted.length,
     totalRowCount: data.length,
     loading: loading$1
@@ -792,7 +793,7 @@ function DataTableInner({
   return /* @__PURE__ */ jsxRuntime.jsx(densityProvider.DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: utils.cn("flex min-h-0 min-w-0 flex-1 flex-col gap-3", className),
+      className: utils.cn("flex min-h-0 min-w-0 flex-1 flex-col gap-1", className),
       "data-density": densityOverride,
       children: [
         showFilterBar && /* @__PURE__ */ jsxRuntime.jsx(
@@ -812,7 +813,7 @@ function DataTableInner({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 max-w-full flex-1 flex-col", children: [
-          loading$1 ? /* @__PURE__ */ jsxRuntime.jsx(loading.LoadingBar, { "data-testid": "data-table-loading-bar", className: "rounded-t-md" }) : null,
+          loading$1 && error == null ? /* @__PURE__ */ jsxRuntime.jsx(loading.LoadingBar, { "data-testid": "data-table-loading-bar", className: "rounded-t-md" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -820,10 +821,10 @@ function DataTableInner({
                 "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border",
                 scrollContainerClassName
               ),
-              "aria-busy": loading$1 || void 0,
+              "aria-busy": loading$1 && error == null || void 0,
               children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-max min-w-full table-auto text-left text-sm", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
-                  rowSelection ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-10" }) : null,
+                  rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-10" }) : null,
                   visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
                     "col",
                     {
@@ -834,7 +835,7 @@ function DataTableInner({
                   ))
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border text-xs text-muted-foreground", children: [
-                  rowSelection ? /* @__PURE__ */ jsxRuntime.jsx(
+                  rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx(
                     "th",
                     {
                       className: utils.cn(
@@ -929,7 +930,13 @@ function DataTableInner({
                   ))
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                  loading$1 && visibleSorted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  error != null ? /* @__PURE__ */ jsxRuntime.jsx(
+                    DataTableErrorRow,
+                    {
+                      colSpan: visibleColumns.length,
+                      error
+                    }
+                  ) : loading$1 && visibleSorted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                     DataTableLoadingRows,
                     {
                       columns: visibleColumns,
@@ -1095,7 +1102,7 @@ function DataTableInner({
                       ) })
                     ] }, record.id);
                   }),
-                  hasMoreRows && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  error == null && hasMoreRows && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
                     "td",
                     {
                       colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
@@ -1108,7 +1115,7 @@ function DataTableInner({
             }
           )
         ] }),
-        selectionBar ? /* @__PURE__ */ jsxRuntime.jsx(
+        error == null && selectionBar ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-testid": "data-table-selection-actions",
@@ -1117,7 +1124,7 @@ function DataTableInner({
           }
         ) : null,
         renderedFooter !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-1 text-xs text-muted-foreground", children: renderedFooter }),
-        pagination ? /* @__PURE__ */ jsxRuntime.jsx(
+        error == null && pagination ? /* @__PURE__ */ jsxRuntime.jsx(
           DataTablePaginationFooter,
           {
             pagination,
@@ -1350,6 +1357,19 @@ function DataTableLoadingRows({
     ] }, rowIndex))
   ] });
 }
+function DataTableErrorRow({
+  colSpan,
+  error
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border/60", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      colSpan: Math.max(1, colSpan),
+      className: utils.cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-density-3"),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", children: error })
+    }
+  ) });
+}
 function HeaderFilterButton({
   column,
   active,