@godxjp/ui 13.10.0 → 13.11.0

package/dist/components/data-display/data-table.js

@@ -201,6 +201,7 @@ DataTable.Content = function DataTableContent() {
   const { t } = useTranslation();
   const rowPadding = tableRowHeightClass;
   const cellPadding = tableCellPaddingClass;
+  const hasPinEnd = columns.some((col) => col.pin === "end");
   const onHeaderClick = (col) => {
     if (!col.sortable || !onSortChange) return;
     if (sort?.key !== col.key) {
@@ -211,93 +212,59 @@ DataTable.Content = function DataTableContent() {
       onSortChange(void 0);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "ui-data-table-scroll", "aria-busy": loading, children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { children: [
-      selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
-      columns.map((col) => {
-        const isSortable = !!col.sortable && !!onSortChange;
-        const isActiveSort = isSortable && sort?.key === col.key;
-        const sortIndicator = isSortable ? isActiveSort ? sort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
-        const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
-          col.header,
-          sortIndicator
-        ] });
-        return /* @__PURE__ */ jsx(
-          TableHead,
-          {
-            "data-empty": !col.header || void 0,
-            "aria-sort": isSortable ? isActiveSort ? sort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
-            className: cn(
-              col.width,
-              col.align === "right" && "text-end",
-              col.align === "center" && "text-center",
-              col.hiddenOnMobile && "hidden md:table-cell",
-              isSortable && "select-none"
-            ),
-            children: isSortable ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "ui-data-table-sort-button focus-visible:ring-ring rounded-sm focus-visible:ring-2",
-                onClick: () => {
-                  onHeaderClick(col);
-                },
-                children: label
-              }
-            ) : label
-          },
-          col.key
-        );
-      })
-    ] }) }),
-    /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "h-32 text-center", "aria-live": "polite", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataTable.loading") }) }) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
-      TableCell,
-      {
-        colSpan: emptyColSpan,
-        className: "ui-data-table-empty",
-        "aria-live": "polite",
-        children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") })
-      }
-    ) }) : data.map((row) => {
-      const id = getRowId(row);
-      const isSelected = selected.has(id);
-      const isInteractiveTarget = (target) => !!target.closest("button, a, input, select, textarea, [role=menuitem]");
-      return /* @__PURE__ */ jsxs(
-        TableRow,
-        {
-          "data-state": isSelected ? "selected" : void 0,
-          tabIndex: onRowClick ? 0 : void 0,
-          onClick: (e) => {
-            const target = e.target;
-            if (isInteractiveTarget(target)) return;
-            onRowClick?.(row);
-          },
-          onKeyDown: onRowClick ? (e) => {
-            if (e.key !== "Enter" && e.key !== " ") return;
-            if (e.target !== e.currentTarget) return;
-            e.preventDefault();
-            onRowClick?.(row);
-          } : void 0,
-          className: cn(
-            rowPadding,
-            onRowClick && "hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
-            isSelected && "bg-muted/30"
-          ),
-          children: [
-            selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
-              Checkbox,
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("ui-data-table-scroll", hasPinEnd && "ui-data-table-has-pin-end"),
+      "aria-busy": loading,
+      children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
+          columns.map((col) => {
+            const isSortable = !!col.sortable && !!onSortChange;
+            const isActiveSort = isSortable && sort?.key === col.key;
+            const sortIndicator = isSortable ? isActiveSort ? sort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
+            const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+              col.header,
+              sortIndicator
+            ] });
+            return /* @__PURE__ */ jsx(
+              TableHead,
               {
-                checked: isSelected,
-                onCheckedChange: () => {
-                  toggleSelect(id);
-                },
-                "aria-label": t("dataTable.selectRow", { id }),
-                onClick: (e) => {
-                  e.stopPropagation();
-                }
-              }
-            ) }),
-            columns.map((col) => /* @__PURE__ */ jsx(
+                "data-empty": !col.header || void 0,
+                "aria-sort": isSortable ? isActiveSort ? sort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+                className: cn(
+                  col.width,
+                  col.align === "right" && "text-end",
+                  col.align === "center" && "text-center",
+                  col.hiddenOnMobile && "hidden md:table-cell",
+                  isSortable && "select-none",
+                  col.pin === "end" && "ui-data-table-pin-end"
+                ),
+                children: isSortable ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ui-data-table-sort-button focus-visible:ring-ring rounded-sm focus-visible:ring-2",
+                    onClick: () => {
+                      onHeaderClick(col);
+                    },
+                    children: label
+                  }
+                ) : label
+              },
+              col.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: loading ? (
+          // Shaped skeleton rows rendered INSIDE the real table grid so they
+          // share its borders + column widths — no second framed container
+          // (which double-borders when the table sits in a Card). Count is
+          // bounded to the previous page so the height barely shifts.
+          Array.from({ length: Math.min(Math.max(data.length, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
+            selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block size-4 rounded-sm" }) }),
+            columns.map((col, j) => /* @__PURE__ */ jsx(
               TableCell,
               {
                 className: cn(
@@ -305,23 +272,99 @@ DataTable.Content = function DataTableContent() {
                   col.width,
                   col.align === "right" && "text-end",
                   col.align === "center" && "text-center",
-                  col.hiddenOnMobile && "hidden md:table-cell"
+                  col.hiddenOnMobile && "hidden md:table-cell",
+                  col.pin === "end" && "ui-data-table-pin-end"
                 ),
-                children: col.render ? col.render(row) : (() => {
-                  const v = row[col.key];
-                  if (v == null) return "\u2014";
-                  if (typeof v === "string" || typeof v === "number") return String(v);
-                  return "\u2014";
-                })()
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "ui-skeleton-block h-4",
+                      j === 0 ? "w-1/2" : "w-3/4",
+                      col.align === "right" && "ms-auto",
+                      col.align === "center" && "mx-auto"
+                    )
+                  }
+                )
               },
               col.key
             ))
-          ]
-        },
-        id
-      );
-    }) })
-  ] }) }) });
+          ] }, `skeleton-${i}`))
+        ) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            colSpan: emptyColSpan,
+            className: "ui-data-table-empty",
+            "aria-live": "polite",
+            children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") })
+          }
+        ) }) : data.map((row) => {
+          const id = getRowId(row);
+          const isSelected = selected.has(id);
+          const isInteractiveTarget = (target) => !!target.closest("button, a, input, select, textarea, [role=menuitem]");
+          return /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              "data-state": isSelected ? "selected" : void 0,
+              tabIndex: onRowClick ? 0 : void 0,
+              onClick: (e) => {
+                const target = e.target;
+                if (isInteractiveTarget(target)) return;
+                onRowClick?.(row);
+              },
+              onKeyDown: onRowClick ? (e) => {
+                if (e.key !== "Enter" && e.key !== " ") return;
+                if (e.target !== e.currentTarget) return;
+                e.preventDefault();
+                onRowClick?.(row);
+              } : void 0,
+              className: cn(
+                rowPadding,
+                onRowClick && "hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+                isSelected && "bg-muted/30"
+              ),
+              children: [
+                selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => {
+                      toggleSelect(id);
+                    },
+                    "aria-label": t("dataTable.selectRow", { id }),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    }
+                  }
+                ) }),
+                columns.map((col) => /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    className: cn(
+                      cellPadding,
+                      col.width,
+                      col.align === "right" && "text-end",
+                      col.align === "center" && "text-center",
+                      col.hiddenOnMobile && "hidden md:table-cell",
+                      col.pin === "end" && "ui-data-table-pin-end"
+                    ),
+                    children: col.render ? col.render(row) : (() => {
+                      const v = row[col.key];
+                      if (v == null) return "\u2014";
+                      if (typeof v === "string" || typeof v === "number") return String(v);
+                      return "\u2014";
+                    })()
+                  },
+                  col.key
+                ))
+              ]
+            },
+            id
+          );
+        }) })
+      ] }) })
+    }
+  );
 };
 DataTable.Content.displayName = "DataTable.Content";
 DataTable.Pagination = function DataTablePagination({

package/dist/props/vocabulary/data.prop.d.ts

@@ -18,6 +18,13 @@ export type ColumnDefProp<T> = {
     width?: string;
     align?: ColumnAlignProp;
     hiddenOnMobile?: boolean;
+    /**
+     * Pin the column to the inline-end edge so it stays visible while the rest of
+     * the table scrolls horizontally — the standard home for a row-actions column.
+     * The pinned cell keeps an opaque, hover/selection-aware background and casts a
+     * separating shadow. Pin at most one column per table.
+     */
+    pin?: "end";
 };
 /** Set of selected row IDs. */
 export type SelectedIdsProp = Set<string>;

package/dist/styles/table-layout.css

@@ -157,4 +157,42 @@
       inset-inline-end: 0;
     }
   }
+
+  /* ── Pinned (sticky) inline-end column ────────────────────────────────
+   * The standard home for a row-actions column: it stays put while the rest
+   * of the table scrolls horizontally. The cell carries an opaque, state-aware
+   * background so scrolling cells don't bleed through, plus a token shadow that
+   * separates it from the body. When present, the scroll fade is hidden (the
+   * pin's own shadow is the affordance). RTL-correct via logical properties. */
+  .ui-data-table-has-pin-end::after {
+    display: none;
+  }
+
+  .ui-data-table-pin-end {
+    position: sticky;
+    inset-inline-end: 0;
+    z-index: 2;
+    background-color: hsl(var(--background));
+    box-shadow: var(--table-pin-shadow);
+  }
+
+  th.ui-data-table-pin-end {
+    background-color: hsl(var(--secondary));
+  }
+
+  /* box-shadow has no logical offset — flip its inline direction by hand in RTL,
+   * where the pinned column sits on the visual left and the shadow points right. */
+  [dir="rtl"] .ui-data-table-pin-end {
+    box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
+  }
+
+  /* Mirror the row's hover / selected tint — a translucent muted wash layered
+   * over the opaque base, so the pinned cell matches the rest of its row. */
+  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end {
+    background-image: linear-gradient(hsl(var(--muted) / 0.5), hsl(var(--muted) / 0.5));
+  }
+
+  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end {
+    background-image: linear-gradient(hsl(var(--muted) / 0.3), hsl(var(--muted) / 0.3));
+  }
 }

package/dist/tokens/components/table.css

@@ -8,4 +8,6 @@
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
   --table-head-font-size: var(--font-size-xs);
+  /* Inline-end shadow that lifts a pinned (sticky) action column off the body it scrolls over. */
+  --table-pin-shadow: -6px 0 6px -5px hsl(var(--foreground) / 0.12);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.10.0",
+  "version": "13.11.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,