@ai-matrx/design-system 0.48.16 → 0.49.2

package/CHANGELOG.md

@@ -1,8 +1,35 @@
 # Changelog
 
+## 0.49.2
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.48.16..npm/design-system/v0.49.2 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## 0.49.1
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.48.16..npm/design-system/v0.49.1 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
+## 0.49.0
+<<<<<<< origin/main
+
+- Added optional canonical table KPIs and aligned column totals through `summary`. Aggregates use filtered rows before pagination; source-provided totals carry their own declared scope. Loading, unavailable and retained stale results remain explicit. Existing `footerRows` behavior is preserved.
+- Consumer action: pass metric callbacks and column-ID totals to `summary` where aggregates are useful. Desktop column resizing remains enabled by default.
+
+## 0.48.16
+### Unreleased
+=======
+>>>>>>> HEAD
+
+- Added optional canonical table KPIs and aligned column totals through `summary`. Aggregates use filtered rows before pagination; source-provided totals carry their own declared scope. Loading, unavailable and retained stale results remain explicit. Existing `footerRows` behavior is preserved.
+- Consumer action: pass metric callbacks and column-ID totals to `summary` where aggregates are useful. Desktop column resizing remains enabled by default.
+
 ## 0.48.16
 ### Unreleased
 
+- **The pager never says "0 rows" over a failed read** (2026-09-27, seen live on `/administration/automation/scheduling/runs` with the runs read failing: body "Couldn't load runs", footer "0 rows"). When `read.status` is `"error"` and no rows are on screen, the footer shows "—" labelled "Row count unavailable"; while `read.status` is `"loading"` with no rows it shows no count. A failed refresh over kept rows still shows the real count (stale-while-error). A caller's `paginationLabelFormat` is not drawn in those states either. New optional pager prop `countUnavailable` (`GenericTablePagination`). Consumer action: none. Proof: `MatrxDataTable.read-outcome-pager.test.tsx`, 3 of 6 red on 0.48.15.
 - **The layout menu's promises, kept** (merged-grid review 2, fix lane E, 2026-09-27). (1) **Freeze holds with tick boxes:** the band waited forever for the selection column to be measured, which only happened after every column was resized; the selection column is now declared at `SELECTION_COLUMN_PX` (36) while a column is frozen, so the offset is known. On a phone the FIRST frozen column now stays too, capped at 40vw (`FROZEN_PHONE_*`); the rest of the band scrolls. (2) **Compact is compact:** a `rowHeight` below the density's own draws cells unpadded and row buttons at 24 px. (3) **`fitToWidth`** (new prop): every data column gets its proportional share of the measured container (`fit-columns.ts`), `table-layout: fixed`, never a sideways scroll (from `sm` up). (4) **`rowActionsHeader`** (new prop): controls drawn in the Actions header. Proof: `MatrxDataTable.layout-look.test.tsx`, 5 of 7 red on the previous table.
 - **A submenu opens beside its parent, not on top of it**: `DropdownMenuSubContent` and `ContextMenuSubContent` are portalled through the container seam — the parent's animation transform made it the containing block of the submenu's `position: fixed`. Proof: `menus.test.tsx`, red on the in-place submenu.
 - **The number filter box reads like its neighbours**: 12 px, not monospace 16 px (16 px only below `sm`, for iOS). Proof: `header-number-filter-and-clear-sort.test.tsx`.

package/README.md

@@ -162,6 +162,22 @@ The gate validates declarations and exports against the packed tarball, installs
 
 ## Data tables
 
+Desktop columns are adjustable by default. Optional `summary` supplies KPI
+metrics above the toolbar and totals aligned to column IDs below the rows.
+Callbacks receive the filtered rows before pagination, plus `isFiltered` and
+`coverage` (`all`, `loaded`, or `page`). The table labels that scope and never
+calls aggregates for an empty loading or failed read. Retained stale rows are
+labelled; unavailable aggregates remain visible. Use `summary.source` only for
+caller-provided complete source totals; missing source values are never replaced
+with an aggregate of the loaded page.
+
+```tsx
+summary={{
+  metrics: [{ id: "amount", label: "Amount", value: ({ rows }) => rows.reduce((n, row) => n + row.amount, 0) }],
+  totals: { amount: ({ rows }) => rows.reduce((n, row) => n + row.amount, 0) },
+}}
+```
+
 ```tsx
 import { MatrxDataTable } from "@ai-matrx/design-system/data-table";
 import { usePaginatedData } from "@ai-matrx/data/react";

package/dist/data-table/copy-helpers.d.cts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.cjs';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-bIcXnlYS.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-ClxgLUFi.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/copy-helpers.d.ts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.js';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-DVTNnzU5.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../types-DlgTSJsC.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.cts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-bIcXnlYS.cjs';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-ClxgLUFi.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/filter-engine.d.ts

@@ -1,4 +1,4 @@
-import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-DVTNnzU5.js';
+import { M as MatrxColumnDef, C as ColumnFiltersState, S as SortState, L as LayeredFilterRule, T as TableSearchMatchMode, a as ColumnFilterValue } from '../types-DlgTSJsC.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';

package/dist/data-table/host.d.cts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.cjs';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.cjs';
-import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-bIcXnlYS.cjs';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-ClxgLUFi.cjs';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.cjs';
 export { MatrxTableMenuItem, MatrxTableMenuSection } from './menu-targets.cjs';
 import '../content-transfer.cjs';

package/dist/data-table/host.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 import { CopyControlProps } from './copy-types.js';
 export { AgentPayloadInput, AiCustomSource, AiVariant, CopyExportConfig } from './copy-types.js';
-import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-DVTNnzU5.js';
+import { b as TableSavedViewsProps, c as MatrxDataTableDensity, d as MatrxDataTableRecordControls } from '../types-DlgTSJsC.js';
 import { MatrxTableMenuTarget, MatrxTableMenuPayload, MatrxTableMenuSectionsResolver, MatrxTableMenuIconName } from './menu-targets.js';
 export { MatrxTableMenuItem, MatrxTableMenuSection } from './menu-targets.js';
 import '../content-transfer.js';

package/dist/data-table/index.cjs

@@ -36503,7 +36503,8 @@ function GenericTablePagination({
   labelFormat,
   compact = false,
   hideEntriesInfo = false,
-  progressive
+  progressive,
+  countUnavailable
 }) {
   const host = useMatrxDataTableHost();
   const positivePageSizes = pageSizeOptions.filter((size) => size > 0);
@@ -36578,7 +36579,16 @@ function GenericTablePagination({
       "div",
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
-        children: showPageInfo && !hideEntriesInfo && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+        children: showPageInfo && !hideEntriesInfo && countUnavailable === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "span",
+          {
+            role: "img",
+            "aria-label": "Row count unavailable",
+            title: "Row count unavailable",
+            className: "truncate text-sm tabular-nums text-muted-foreground",
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": "true", children: "\u2014" })
+          }
+        ) : showPageInfo && !hideEntriesInfo && !countUnavailable && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-xs tabular-nums text-muted-foreground sm:hidden", children: labelFormat ? formatLabel(startItem, endItem, totalItems) : unknownTotal ? defaultLabelFormat(startItem, endItem, totalItems) : totalItems === 0 ? "0 rows" : progressive ? `${endItem}/${totalItems} ${progressive.loadedCount !== void 0 && progressive.loadedCount !== totalItems ? "matching" : "loaded"}` : `${startItem}\u2013${endItem} of ${totalItems}` }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "span",
@@ -48155,6 +48165,7 @@ function MatrxDataTableCore(coreProps) {
     selection: selectionConfig,
     rowActions,
     footerRows = [],
+    summary,
     rowClassName,
     rowVersion,
     cellClassName,
@@ -49524,6 +49535,48 @@ function MatrxDataTableCore(coreProps) {
     return def !== void 0 && f.value !== def;
   });
   const hasActiveFilters = activeFilterCount > 0 || Boolean(searchValue.trim()) || intelligentSearchEnabled && searchScope !== "all" || Boolean(anyOfValue.trim()) || completeLayeredFilterRules(layeredFilters).length > 0 || facetActive;
+  const summaryIsFiltered = activeFilterCount > 0 || Boolean(searchValue.trim()) || Boolean(anyOfValue.trim()) || completeLayeredFilterRules(layeredFilters).length > 0 || facetActive;
+  const summaryCoverage = remoteQuery?.mode === "controlled" ? "page" : appendQuery !== null || !allRowsAreLoaded ? "loaded" : "all";
+  const summaryContext = {
+    rows: processed,
+    isFiltered: summaryIsFiltered,
+    coverage: summaryCoverage
+  };
+  const summaryCanReadRows = !readView.failure && (!isLoading || data.length > 0);
+  const summaryUsesSource = summary?.source !== void 0;
+  const summaryCaption = (() => {
+    if (summaryUsesSource) {
+      const sourceCaption = summary?.source?.isFiltered ? "Filtered source totals" : "Source totals";
+      return readView.stale ? `${sourceCaption} (stale)` : sourceCaption;
+    }
+    const base = summaryCoverage === "all" ? "rows" : summaryCoverage === "loaded" ? "loaded rows" : "current page";
+    const caption = summaryIsFiltered ? `Filtered ${base}` : base === "rows" ? "All rows" : base[0].toUpperCase() + base.slice(1);
+    return readView.stale ? `${caption} (stale)` : caption;
+  })();
+  const resolveSummaryValue = (sourceValue, callback) => {
+    if (!summaryCanReadRows) {
+      return readView.failure ? { value: "Unavailable", unavailable: true } : { value: "Loading", unavailable: false };
+    }
+    if (summaryUsesSource) {
+      return sourceValue === void 0 ? { value: "Unavailable", unavailable: true } : { value: sourceValue, unavailable: false };
+    }
+    if (!callback) return { value: "Unavailable", unavailable: true };
+    try {
+      return { value: callback(summaryContext), unavailable: false };
+    } catch {
+      return { value: "Unavailable", unavailable: true };
+    }
+  };
+  const summaryMetrics = summary?.metrics.map((metric) => ({
+    id: metric.id,
+    label: metric.label,
+    ...resolveSummaryValue(summary.source?.metrics?.[metric.id], metric.value)
+  })) ?? [];
+  const summaryTotals = Object.entries(summary?.totals ?? {}).map(([id, value]) => ({
+    id,
+    ...resolveSummaryValue(summary?.source?.totals?.[id], value)
+  }));
+  const hasSummaryTotals = summaryTotals.length > 0;
   const changeCount = (0, import_react22.useMemo)(() => {
     let n2 = 0;
     for (const fields of Object.values(edits)) {
@@ -50425,7 +50478,16 @@ function MatrxDataTableCore(coreProps) {
     controlledQuery,
     emitControlledQueryChange
   ]);
-  const footerEpoch = useRenderEpoch([...chromeGeometry, footerRows]);
+  const footerEpoch = useRenderEpoch([
+    ...chromeGeometry,
+    footerRows,
+    summaryContext.rows,
+    summaryContext.isFiltered,
+    summaryContext.coverage,
+    summaryCaption,
+    summaryUsesSource,
+    ...summaryTotals.flatMap((total) => [total.id, total.value, total.unavailable])
+  ]);
   const paginationEpoch = useRenderEpoch([
     totalItems,
     sourceTotal,
@@ -50962,6 +51024,25 @@ function MatrxDataTableCore(coreProps) {
                   notice,
                   savedViewError ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorBox, { className: "shrink-0 text-xs text-destructive", message: savedViewError, operation: "Save or apply a saved view", origin: "design-system/MatrxDataTable" }) : null,
                   toolbarActionError ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorBox, { className: "shrink-0 text-xs text-destructive", message: toolbarActionError, operation: "Run a table toolbar action", origin: "design-system/MatrxDataTable" }) : null,
+                  summaryMetrics.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                    "section",
+                    {
+                      "data-matrx-table-summary": true,
+                      "data-matrx-table-summary-scope": summaryUsesSource ? "source" : summaryCoverage,
+                      "aria-label": `Table summary: ${summaryCaption}`,
+                      className: "flex shrink-0 flex-wrap items-stretch gap-2",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex items-center px-1 text-xs font-medium text-muted-foreground", children: summaryCaption }),
+                        summaryMetrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "min-w-24 rounded-md border border-border bg-card px-3 py-2 shadow-xs", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "text-xs text-muted-foreground", children: metric.label }),
+                          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mt-0.5 text-sm font-semibold tabular-nums text-foreground", children: [
+                            metric.value,
+                            metric.unavailable ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorBox, { as: "span", className: "sr-only", message: `${metric.label} is unavailable`, operation: "Summarize this table", origin: "design-system/MatrxDataTable" }) : null
+                          ] })
+                        ] }, metric.id))
+                      ]
+                    }
+                  ) : null,
                   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MatrxTableChrome, { part: "toolbar", epoch: toolbarEpoch, render: () => placeToolbar(!hideToolbar && (viewTabs || toolbar?.title || toolbar?.titleCount || showSearch || toolbar?.customSearch || toolbar?.anyOf || toolbar?.layeredFilters || toolbar?.facets && toolbar.facets.length > 0 || toolbar?.leading || toolbar?.actions || toolbar?.refresh || toolbar?.add || tableId && SavedViews || hasActiveFilters || showToolbarCopy || columns.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                     TableTitleRow,
                     {
@@ -51802,50 +51883,111 @@ function MatrxDataTableCore(coreProps) {
                                       }
                                     ) }) : null
                                   ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MatrxTableChrome, { part: "footer", epoch: footerEpoch, render: () => footerRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("tfoot", { className: "border-t-2 border-border bg-muted/50 font-semibold", children: footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("tr", { children: [
-                                    selection ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", { className: "px-2 py-2" }) : null,
-                                    columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                                      "td",
-                                      {
-                                        "aria-hidden": "true",
-                                        "data-matrx-table-column-spacer": "start",
-                                        className: "border-0 p-0",
-                                        style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
-                                      },
-                                      "matrx-column-spacer-start"
-                                    ) : null,
-                                    renderedColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                                      "td",
-                                      {
-                                        className: cn(
-                                          "px-2 py-2 align-middle",
-                                          (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
-                                          column.className,
-                                          column.align === "center" && "text-center",
-                                          column.align === "right" && "text-right"
-                                        ),
-                                        style: columnWidthVar(
-                                          resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
-                                          windowedWidthFor(columnId(column), column.width),
-                                          columnId(column),
-                                          resizableColumns && column.resizable !== false
-                                        ),
-                                        children: renderCell(row, column, index)
-                                      },
-                                      columnId(column)
-                                    )),
-                                    columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                                      "td",
-                                      {
-                                        "aria-hidden": "true",
-                                        "data-matrx-table-column-spacer": "end",
-                                        className: "border-0 p-0",
-                                        style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
-                                      },
-                                      "matrx-column-spacer-end"
-                                    ) : null,
-                                    showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", {}) : null
-                                  ] }, `footer-${index}`)) }) : null })
+                                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MatrxTableChrome, { part: "footer", epoch: footerEpoch, render: () => footerRows.length > 0 || hasSummaryTotals ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("tfoot", { className: cn(
+                                    "border-t-2 border-border bg-muted/50 font-semibold",
+                                    hasSummaryTotals && "sticky bottom-0 z-10 bg-muted/95 backdrop-blur-sm"
+                                  ), children: [
+                                    hasSummaryTotals ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("tr", { "data-matrx-table-summary-total-caption": true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("td", { colSpan: renderedColSpan, className: "px-2 pt-2 text-xs font-medium text-muted-foreground", children: [
+                                        summaryCaption,
+                                        readView.stale ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ml-1 text-amber-700 dark:text-amber-300", children: "Retained rows may be out of date." }) : null
+                                      ] }) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("tr", { "data-matrx-table-summary-totals": true, children: [
+                                        selection ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", { className: "px-2 py-2" }) : null,
+                                        columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                                          "td",
+                                          {
+                                            "aria-hidden": "true",
+                                            "data-matrx-table-column-spacer": "start",
+                                            className: "border-0 p-0",
+                                            style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
+                                          },
+                                          "matrx-summary-column-spacer-start"
+                                        ) : null,
+                                        renderedColumns.map((column) => {
+                                          const total = summaryTotals.find((candidate) => candidate.id === columnId(column));
+                                          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                                            "td",
+                                            {
+                                              className: cn(
+                                                "px-2 py-2 align-middle",
+                                                (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
+                                                column.className,
+                                                column.align === "center" && "text-center",
+                                                column.align === "right" && "text-right"
+                                              ),
+                                              style: columnWidthVar(
+                                                resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
+                                                windowedWidthFor(columnId(column), column.width),
+                                                columnId(column),
+                                                resizableColumns && column.resizable !== false
+                                              ),
+                                              children: [
+                                                total?.value,
+                                                total?.unavailable ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorBox, { as: "span", className: "sr-only", message: `${columnId(column)} total is unavailable`, operation: "Total this column", origin: "design-system/MatrxDataTable" }) : null
+                                              ]
+                                            },
+                                            columnId(column)
+                                          );
+                                        }),
+                                        columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                                          "td",
+                                          {
+                                            "aria-hidden": "true",
+                                            "data-matrx-table-column-spacer": "end",
+                                            className: "border-0 p-0",
+                                            style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
+                                          },
+                                          "matrx-summary-column-spacer-end"
+                                        ) : null,
+                                        showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", {}) : null
+                                      ] })
+                                    ] }) : null,
+                                    footerRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("tr", { children: [
+                                      selection ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", { className: "px-2 py-2" }) : null,
+                                      columnSpacers && columnSpacers.start > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                                        "td",
+                                        {
+                                          "aria-hidden": "true",
+                                          "data-matrx-table-column-spacer": "start",
+                                          className: "border-0 p-0",
+                                          style: { width: `${columnSpacers.start}px`, minWidth: `${columnSpacers.start}px` }
+                                        },
+                                        "matrx-column-spacer-start"
+                                      ) : null,
+                                      renderedColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                                        "td",
+                                        {
+                                          className: cn(
+                                            "px-2 py-2 align-middle",
+                                            (column.compact || resolveColumnMarker(column) !== void 0) && "px-1",
+                                            column.className,
+                                            column.align === "center" && "text-center",
+                                            column.align === "right" && "text-right"
+                                          ),
+                                          style: columnWidthVar(
+                                            resolveColumnMarker(column) && column.width === void 0 ? 40 : column.width,
+                                            windowedWidthFor(columnId(column), column.width),
+                                            columnId(column),
+                                            resizableColumns && column.resizable !== false
+                                          ),
+                                          children: renderCell(row, column, index)
+                                        },
+                                        columnId(column)
+                                      )),
+                                      columnSpacers && columnSpacers.end > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                                        "td",
+                                        {
+                                          "aria-hidden": "true",
+                                          "data-matrx-table-column-spacer": "end",
+                                          className: "border-0 p-0",
+                                          style: { width: `${columnSpacers.end}px`, minWidth: `${columnSpacers.end}px` }
+                                        },
+                                        "matrx-column-spacer-end"
+                                      ) : null,
+                                      showActionsCol ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", {}) : null
+                                    ] }, `footer-${index}`))
+                                  ] }) : null })
                                 ]
                               }
                             )
@@ -52011,6 +52153,7 @@ function MatrxDataTableCore(coreProps) {
                         GenericTablePagination,
                         {
                           totalItems,
+                          ...readView.failure ? { countUnavailable: "failed" } : read?.status === "loading" && data.length === 0 ? { countUnavailable: "loading" } : {},
                           ...paginationLabelFormat ? { labelFormat: paginationLabelFormat } : sourceTotal === void 0 ? {} : { labelFormat: (start, end, total) => `${(0, import_format3.formatCount)(start)}\u2013${(0, import_format3.formatCount)(end)} of ${(0, import_format3.formatCount)(total)} matching \xB7 ${(0, import_format3.formatCount)(data.length)} / ${(0, import_format3.formatCount)(sourceTotal)} loaded` },
                           ...localProgressiveEnabled ? { progressive: {
                             shownCount: progressiveRows.shownCount,
@@ -52692,7 +52835,7 @@ var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
-var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var DropdownMenuSubTrigger = React22.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
   DropdownMenuPrimitive.SubTrigger,