@ai-matrx/design-system 0.21.1 → 0.21.2

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { g as MatrxDataTableProps, h as TableViewSnapshot } from '../types-B99KFITZ.cjs';
-export { A as AnyOfColumnSearch, i as CellEditType, j as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, c as MatrxDataTableDensity, k as MatrxDataTableDetailConfig, l as MatrxDataTableEditConfig, m as MatrxDataTableEmptyState, n as MatrxDataTableFilterUi, o as MatrxDataTableHierarchyConfig, p as MatrxDataTableHierarchyMove, q as MatrxDataTableMobileCardControls, r as MatrxDataTableQueryControl, d as MatrxDataTableQueryState, s as MatrxDataTableRecordControls, t as MatrxDataTableSelectionConfig, u as MatrxDataTableSourceProcessing, v as MatrxDataTableToolbar, w as MatrxDataTableUrlStateConfig, x as MatrxDataTableWindowConfig, y as MatrxTablePagination, z as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, B as TableViewQuery, D as TextFilterMode, E as ToolbarFacet } from '../types-B99KFITZ.cjs';
+import { g as MatrxDataTableProps, h as TableViewSnapshot } from '../types-Bt-0UhEw.cjs';
+export { A as AnyOfColumnSearch, i as CellEditType, j as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, c as MatrxDataTableDensity, k as MatrxDataTableDetailConfig, l as MatrxDataTableEditConfig, m as MatrxDataTableEmptyState, n as MatrxDataTableFilterUi, o as MatrxDataTableHierarchyConfig, p as MatrxDataTableHierarchyMove, q as MatrxDataTableMobileCardControls, r as MatrxDataTableQueryControl, d as MatrxDataTableQueryState, s as MatrxDataTableRecordControls, t as MatrxDataTableSelectionConfig, u as MatrxDataTableSourceProcessing, v as MatrxDataTableToolbar, w as MatrxDataTableUrlStateConfig, x as MatrxDataTableWindowConfig, y as MatrxTablePagination, z as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, B as TableViewQuery, D as TextFilterMode, E as ToolbarFacet } from '../types-Bt-0UhEw.cjs';
 export { MatrxDataTableHost, MatrxDataTableProvider, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost } from './host.cjs';
 export { DataRowInspector } from './data-row-inspector.cjs';
 export { DataRowWindow, DataRowWindowProps, DataRowWindowTab } from './data-row-window.cjs';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { g as MatrxDataTableProps, h as TableViewSnapshot } from '../types-CryQuMmz.js';
-export { A as AnyOfColumnSearch, i as CellEditType, j as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, c as MatrxDataTableDensity, k as MatrxDataTableDetailConfig, l as MatrxDataTableEditConfig, m as MatrxDataTableEmptyState, n as MatrxDataTableFilterUi, o as MatrxDataTableHierarchyConfig, p as MatrxDataTableHierarchyMove, q as MatrxDataTableMobileCardControls, r as MatrxDataTableQueryControl, d as MatrxDataTableQueryState, s as MatrxDataTableRecordControls, t as MatrxDataTableSelectionConfig, u as MatrxDataTableSourceProcessing, v as MatrxDataTableToolbar, w as MatrxDataTableUrlStateConfig, x as MatrxDataTableWindowConfig, y as MatrxTablePagination, z as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, B as TableViewQuery, D as TextFilterMode, E as ToolbarFacet } from '../types-CryQuMmz.js';
+import { g as MatrxDataTableProps, h as TableViewSnapshot } from '../types-DnnvjGV4.js';
+export { A as AnyOfColumnSearch, i as CellEditType, j as CellEditsMap, e as ColumnFilterKind, a as ColumnFilterValue, C as ColumnFiltersState, M as MatrxColumnDef, f as MatrxDataTableCopyConfig, c as MatrxDataTableDensity, k as MatrxDataTableDetailConfig, l as MatrxDataTableEditConfig, m as MatrxDataTableEmptyState, n as MatrxDataTableFilterUi, o as MatrxDataTableHierarchyConfig, p as MatrxDataTableHierarchyMove, q as MatrxDataTableMobileCardControls, r as MatrxDataTableQueryControl, d as MatrxDataTableQueryState, s as MatrxDataTableRecordControls, t as MatrxDataTableSelectionConfig, u as MatrxDataTableSourceProcessing, v as MatrxDataTableToolbar, w as MatrxDataTableUrlStateConfig, x as MatrxDataTableWindowConfig, y as MatrxTablePagination, z as SortDirection, S as SortState, b as TableSavedViewsProps, T as TableSearchMatchMode, B as TableViewQuery, D as TextFilterMode, E as ToolbarFacet } from '../types-DnnvjGV4.js';
 export { MatrxDataTableHost, MatrxDataTableProvider, TableDoors, TableEntityRefProps, TableLinkProps, TablePeekProps, TableSidePanelProps, TableToolbarActionProps, TableWindowPanelProps, useMatrxDataTableHost } from './host.js';
 export { DataRowInspector } from './data-row-inspector.js';
 export { DataRowWindow, DataRowWindowProps, DataRowWindowTab } from './data-row-window.js';

package/dist/data-table/index.js

@@ -8561,6 +8561,7 @@ function MatrxDataTableCore({
   localPagination,
   pageSizeOptions = [10, 25, 50, 100, 200, 500, 1e3, 2e3],
   zebra = true,
+  stickyHeader = true,
   className,
   tableClassName,
   mobileCards,
@@ -8811,7 +8812,10 @@ function MatrxDataTableCore({
   ]);
   const scrollRef = useRef11(null);
   const tableRef = useRef11(null);
+  const tableHeaderRef = useRef11(null);
   const cardsScrollRef = useRef11(null);
+  const [documentStickyHeader, setDocumentStickyHeader] = useState20(false);
+  const documentStickyHeaderRef = useRef11(false);
   const previousAppendKeyForScrollReset = useRef11(appendQueryKey);
   useLayoutEffect2(() => {
     const previous = previousAppendKeyForScrollReset.current;
@@ -8873,6 +8877,65 @@ function MatrxDataTableCore({
       observer?.disconnect();
     };
   }, [updateScrollHint, data, columns]);
+  useLayoutEffect2(() => {
+    const scroll = scrollRef.current;
+    const table = tableRef.current;
+    const header = tableHeaderRef.current;
+    if (!scroll || !table || !header || !stickyHeader) return;
+    let frame = 0;
+    const update = () => {
+      const hasInternalVerticalScroll = scroll.scrollHeight > scroll.clientHeight + 1;
+      const nextDocumentSticky = !hasInternalVerticalScroll;
+      if (documentStickyHeaderRef.current !== nextDocumentSticky) {
+        documentStickyHeaderRef.current = nextDocumentSticky;
+        setDocumentStickyHeader(nextDocumentSticky);
+      }
+      if (!nextDocumentSticky) {
+        header.style.setProperty("--matrx-document-sticky-offset", "0px");
+        return;
+      }
+      const previousOffset = Number.parseFloat(
+        header.style.getPropertyValue("--matrx-document-sticky-offset")
+      ) || 0;
+      const headerRect = header.getBoundingClientRect();
+      const naturalHeaderTop = headerRect.top - previousOffset;
+      const tableRect = table.getBoundingClientRect();
+      let scrollTargetTop = 0;
+      for (let ancestor = scroll.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        const ancestorStyle = window.getComputedStyle(ancestor);
+        const overflowY = ancestorStyle.overflowY;
+        if (/^(auto|scroll|overlay)$/.test(overflowY) && ancestor.scrollHeight > ancestor.clientHeight + 1) {
+          const scrollPaddingTop = Number.parseFloat(ancestorStyle.scrollPaddingTop) || 0;
+          scrollTargetTop = ancestor.getBoundingClientRect().top + scrollPaddingTop;
+          break;
+        }
+      }
+      const offset = Math.max(
+        0,
+        Math.min(
+          scrollTargetTop - naturalHeaderTop,
+          tableRect.bottom - headerRect.height - naturalHeaderTop
+        )
+      );
+      header.style.setProperty("--matrx-document-sticky-offset", `${offset}px`);
+    };
+    const requestUpdate = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
+    };
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(requestUpdate);
+    resizeObserver?.observe(scroll);
+    resizeObserver?.observe(table);
+    window.addEventListener("scroll", requestUpdate, true);
+    window.addEventListener("resize", requestUpdate);
+    requestUpdate();
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      window.removeEventListener("scroll", requestUpdate, true);
+      window.removeEventListener("resize", requestUpdate);
+    };
+  }, [stickyHeader, data, columns]);
   const [columnOrder, setColumnOrder] = useState20(() => columnState?.order ?? columns.map(columnId));
   const [hiddenColumnIds, setHiddenColumnIds] = useState20(
     () => new Set(columnState?.hidden ?? columns.filter((column) => column.hidden).map(columnId))
@@ -10250,7 +10313,7 @@ function MatrxDataTableCore({
                       "aria-busy": isLoading || isFetching,
                       ...appendQuery === null ? {} : { style: { containerType: "inline-size" } },
                       className: cn(
-                        "flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
+                        "relative flex h-full min-h-0 flex-col gap-2 overflow-y-auto rounded-md border border-border bg-card p-2",
                         mobileCardsClass
                       ),
                       children: [
@@ -10258,7 +10321,7 @@ function MatrxDataTableCore({
                           "div",
                           {
                             role: "status",
-                            className: "h-0.5 shrink-0 overflow-hidden rounded-full bg-primary/15",
+                            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
                             children: [
                               /* @__PURE__ */ jsx40("div", { className: "h-full w-full animate-pulse bg-primary" }),
                               /* @__PURE__ */ jsx40("span", { className: "sr-only", children: "Refreshing table data" })
@@ -10380,7 +10443,7 @@ function MatrxDataTableCore({
                           "div",
                           {
                             role: "status",
-                            className: "sticky left-0 top-0 z-20 h-0.5 w-full overflow-hidden bg-primary/15",
+                            className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-0.5 overflow-hidden bg-primary/15",
                             children: [
                               /* @__PURE__ */ jsx40("div", { className: "h-full w-full animate-pulse bg-primary" }),
                               /* @__PURE__ */ jsx40("span", { className: "sr-only", children: "Refreshing table data" })
@@ -10405,142 +10468,153 @@ function MatrxDataTableCore({
                               fixedLayoutActive && "sm:table-fixed sm:max-w-none sm:w-[var(--matrx-resized-table-width)]"
                             ),
                             children: [
-                              /* @__PURE__ */ jsx40("thead", { className: "sticky top-0 z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm", children: /* @__PURE__ */ jsxs30("tr", { children: [
-                                selection ? /* @__PURE__ */ jsx40(
-                                  "th",
-                                  {
-                                    "data-matrx-table-selection-column": true,
-                                    className: "h-9 w-9 px-2 text-left align-middle",
-                                    style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
-                                    children: /* @__PURE__ */ jsx40(
-                                      "div",
+                              /* @__PURE__ */ jsx40(
+                                "thead",
+                                {
+                                  ref: tableHeaderRef,
+                                  "data-matrx-table-sticky-header": stickyHeader ? "true" : void 0,
+                                  className: cn(
+                                    "z-10 border-b border-border bg-muted/90 shadow-[0_1px_0_0_var(--border)] backdrop-blur-sm",
+                                    stickyHeader && (documentStickyHeader ? "relative translate-y-[var(--matrx-document-sticky-offset)]" : "sticky top-0")
+                                  ),
+                                  children: /* @__PURE__ */ jsxs30("tr", { children: [
+                                    selection ? /* @__PURE__ */ jsx40(
+                                      "th",
                                       {
-                                        "data-matrx-table-selection-target": true,
-                                        onClick: (event) => {
-                                          if (event.target === event.currentTarget) {
-                                            event.currentTarget.querySelector('[role="checkbox"]')?.click();
-                                          }
-                                        },
+                                        "data-matrx-table-selection-column": true,
+                                        className: "h-9 w-9 px-2 text-left align-middle",
+                                        style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth),
                                         children: /* @__PURE__ */ jsx40(
-                                          Checkbox,
+                                          "div",
                                           {
-                                            className: CHECKBOX_TAP_AREA,
-                                            checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
-                                            disabled: selectableRows.length === 0,
-                                            onCheckedChange: toggleAllOnPage,
-                                            "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
+                                            "data-matrx-table-selection-target": true,
+                                            onClick: (event) => {
+                                              if (event.target === event.currentTarget) {
+                                                event.currentTarget.querySelector('[role="checkbox"]')?.click();
+                                              }
+                                            },
+                                            children: /* @__PURE__ */ jsx40(
+                                              Checkbox,
+                                              {
+                                                className: CHECKBOX_TAP_AREA,
+                                                checked: allOnPageSelected ? true : someOnPageSelected ? "indeterminate" : false,
+                                                disabled: selectableRows.length === 0,
+                                                onCheckedChange: toggleAllOnPage,
+                                                "aria-label": allOnPageSelected ? "Clear selection on this page" : "Select every row on this page"
+                                              }
+                                            )
                                           }
                                         )
                                       }
-                                    )
-                                  }
-                                ) : null,
-                                visibleColumns.map((col) => {
-                                  const id = columnId(col);
-                                  const meta = filterMeta.get(id);
-                                  const isSorted = sort?.id === id;
-                                  const headerLabel = col.label ?? (typeof col.header === "string" ? col.header : id);
-                                  const defaultSortDirection = col.defaultSortDirection ?? "asc";
-                                  const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
-                                  const columnResizable = resizableColumns && col.resizable !== false;
-                                  return /* @__PURE__ */ jsxs30(
-                                    "th",
-                                    {
-                                      "data-matrx-table-column-id": id,
-                                      "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
-                                      "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
-                                      className: cn(
-                                        "relative h-9 text-left align-middle max-sm:whitespace-nowrap",
-                                        // ICON COLUMN (MatrxColumnDef.compact): a 40px star
-                                        // column cannot honor `width: 40` while paying 16px of
-                                        // padding for a 14px glyph.
-                                        col.compact ? "px-1" : "px-2",
-                                        // An intentional mobile column set (see
-                                        // MatrxColumnDef.mobileHidden). CSS, not a JS
-                                        // breakpoint — no hydration mismatch, and the column
-                                        // stays sortable/filterable from the toolbar.
-                                        col.mobileHidden && "max-sm:hidden",
-                                        // Consumer widths are desktop tuning: applied from `sm`
-                                        // up via a CSS var. The minimum is load-bearing: without
-                                        // it, a crowded table crushes a declared 190px column to a
-                                        // few characters wide instead of using the canonical
-                                        // horizontal-scroll surface.
-                                        (col.width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
-                                        col.headerClassName,
-                                        isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
-                                        col.align === "center" && "text-center",
-                                        col.align === "right" && "text-right"
-                                      ),
-                                      style: columnWidthVar(col.width, effectiveColumnWidths[id], id, columnResizable),
-                                      children: [
-                                        /* @__PURE__ */ jsx40(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx40(
-                                          ColumnHeaderCell,
-                                          {
-                                            label: col.header,
-                                            labelText: headerLabel,
-                                            sortable: col.sortable !== false,
-                                            isSorted: Boolean(isSorted),
-                                            sortDirection: sort?.direction ?? defaultSortDirection,
-                                            onSortAsc: () => setSort({ id, direction: "asc" }),
-                                            onSortDesc: () => setSort({ id, direction: "desc" }),
-                                            onClearSort: () => setSort(null),
-                                            onHeaderSortClick: () => {
-                                              if (!isSorted) {
-                                                setSort({ id, direction: defaultSortDirection });
-                                                return;
+                                    ) : null,
+                                    visibleColumns.map((col) => {
+                                      const id = columnId(col);
+                                      const meta = filterMeta.get(id);
+                                      const isSorted = sort?.id === id;
+                                      const headerLabel = col.label ?? (typeof col.header === "string" ? col.header : id);
+                                      const defaultSortDirection = col.defaultSortDirection ?? "asc";
+                                      const isColumnDragShadow = columnDragPreview?.draggedId === id && columnDragPreview.targetId !== null;
+                                      const columnResizable = resizableColumns && col.resizable !== false;
+                                      return /* @__PURE__ */ jsxs30(
+                                        "th",
+                                        {
+                                          "data-matrx-table-column-id": id,
+                                          "data-matrx-column-drag-shadow": isColumnDragShadow ? "true" : void 0,
+                                          "aria-sort": isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : void 0,
+                                          className: cn(
+                                            "relative h-9 text-left align-middle max-sm:whitespace-nowrap",
+                                            // ICON COLUMN (MatrxColumnDef.compact): a 40px star
+                                            // column cannot honor `width: 40` while paying 16px of
+                                            // padding for a 14px glyph.
+                                            col.compact ? "px-1" : "px-2",
+                                            // An intentional mobile column set (see
+                                            // MatrxColumnDef.mobileHidden). CSS, not a JS
+                                            // breakpoint — no hydration mismatch, and the column
+                                            // stays sortable/filterable from the toolbar.
+                                            col.mobileHidden && "max-sm:hidden",
+                                            // Consumer widths are desktop tuning: applied from `sm`
+                                            // up via a CSS var. The minimum is load-bearing: without
+                                            // it, a crowded table crushes a declared 190px column to a
+                                            // few characters wide instead of using the canonical
+                                            // horizontal-scroll surface.
+                                            (col.width !== void 0 || columnResizable) && "sm:w-[var(--matrx-col-w)] sm:min-w-[var(--matrx-col-w)]",
+                                            col.headerClassName,
+                                            isColumnDragShadow && "bg-primary/10 shadow-[inset_2px_0_0_var(--primary),inset_-2px_0_0_var(--primary)]",
+                                            col.align === "center" && "text-center",
+                                            col.align === "right" && "text-right"
+                                          ),
+                                          style: columnWidthVar(col.width, effectiveColumnWidths[id], id, columnResizable),
+                                          children: [
+                                            /* @__PURE__ */ jsx40(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx40(
+                                              ColumnHeaderCell,
+                                              {
+                                                label: col.header,
+                                                labelText: headerLabel,
+                                                sortable: col.sortable !== false,
+                                                isSorted: Boolean(isSorted),
+                                                sortDirection: sort?.direction ?? defaultSortDirection,
+                                                onSortAsc: () => setSort({ id, direction: "asc" }),
+                                                onSortDesc: () => setSort({ id, direction: "desc" }),
+                                                onClearSort: () => setSort(null),
+                                                onHeaderSortClick: () => {
+                                                  if (!isSorted) {
+                                                    setSort({ id, direction: defaultSortDirection });
+                                                    return;
+                                                  }
+                                                  if (sort?.direction === "asc") {
+                                                    setSort({ id, direction: "desc" });
+                                                    return;
+                                                  }
+                                                  setSort({ id, direction: "asc" });
+                                                },
+                                                filterKind: meta?.kind ?? null,
+                                                filterValue: columnFilters[id],
+                                                onFilterChange: (next) => setColumnFilter(id, next),
+                                                selectOptions: meta?.options,
+                                                selectSingle: col.filterSingle,
+                                                filterApplyLabel: filterUi?.applyLabel,
+                                                filterShowCancel: filterUi?.showCancel,
+                                                filterFooterHint: filterUi?.footerHint,
+                                                allowNegation: filterUi?.allowNegation,
+                                                allowNullModes: filterUi?.allowNullModes,
+                                                align: col.align,
+                                                compact: col.compact,
+                                                reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
                                               }
-                                              if (sort?.direction === "asc") {
-                                                setSort({ id, direction: "desc" });
-                                                return;
+                                            ) }),
+                                            columnResizable ? /* @__PURE__ */ jsx40(
+                                              ColumnResizeHandle,
+                                              {
+                                                columnId: id,
+                                                label: headerLabel,
+                                                tableRef,
+                                                minWidth: col.minWidth,
+                                                maxWidth: col.maxWidth,
+                                                onResizeStart: captureResizeGestureSnapshot,
+                                                onResizeCancel: clearResizeGestureSnapshot,
+                                                onResizeCommit: (columnId2, width) => commitColumnWidths(
+                                                  { ...effectiveColumnWidths, [columnId2]: width },
+                                                  true
+                                                )
                                               }
-                                              setSort({ id, direction: "asc" });
-                                            },
-                                            filterKind: meta?.kind ?? null,
-                                            filterValue: columnFilters[id],
-                                            onFilterChange: (next) => setColumnFilter(id, next),
-                                            selectOptions: meta?.options,
-                                            selectSingle: col.filterSingle,
-                                            filterApplyLabel: filterUi?.applyLabel,
-                                            filterShowCancel: filterUi?.showCancel,
-                                            filterFooterHint: filterUi?.footerHint,
-                                            allowNegation: filterUi?.allowNegation,
-                                            allowNullModes: filterUi?.allowNullModes,
-                                            align: col.align,
-                                            compact: col.compact,
-                                            reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
-                                          }
-                                        ) }),
-                                        columnResizable ? /* @__PURE__ */ jsx40(
-                                          ColumnResizeHandle,
-                                          {
-                                            columnId: id,
-                                            label: headerLabel,
-                                            tableRef,
-                                            minWidth: col.minWidth,
-                                            maxWidth: col.maxWidth,
-                                            onResizeStart: captureResizeGestureSnapshot,
-                                            onResizeCancel: clearResizeGestureSnapshot,
-                                            onResizeCommit: (columnId2, width) => commitColumnWidths(
-                                              { ...effectiveColumnWidths, [columnId2]: width },
-                                              true
-                                            )
-                                          }
-                                        ) : null
-                                      ]
-                                    },
-                                    id
-                                  );
-                                }),
-                                showActionsCol && /* @__PURE__ */ jsx40(
-                                  "th",
-                                  {
-                                    "data-matrx-table-actions-column": true,
-                                    className: "h-9 w-px px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
-                                    style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
-                                    children: "Actions"
-                                  }
-                                )
-                              ] }) }),
+                                            ) : null
+                                          ]
+                                        },
+                                        id
+                                      );
+                                    }),
+                                    showActionsCol && /* @__PURE__ */ jsx40(
+                                      "th",
+                                      {
+                                        "data-matrx-table-actions-column": true,
+                                        className: "h-9 w-px px-2 text-right align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                                        style: fixedUtilityWidth(fixedTableGeometry?.actionsWidth),
+                                        children: "Actions"
+                                      }
+                                    )
+                                  ] })
+                                }
+                              ),
                               /* @__PURE__ */ jsxs30("tbody", { children: [
                                 isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border/60", children: [
                                   selection ? /* @__PURE__ */ jsx40("td", { className: "px-2 py-2", style: fixedUtilityWidth(fixedTableGeometry?.selectionWidth), children: /* @__PURE__ */ jsx40(Skeleton, { className: "h-3.5 w-3.5" }) }) : null,