@godxjp/ui 13.12.0 → 13.13.0

package/dist/components/data-display/data-table.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { ColumnDefProp, TableDensityProp, SortStateProp } from "../../props/vocabulary";
-export type Density = TableDensityProp;
+import type { ColumnDefProp, DensityProp, SortStateProp } from "../../props/vocabulary";
+export type Density = DensityProp;
 export type ColumnDef<T> = ColumnDefProp<T>;
 interface DataTableProps<T> {
     data: T[];
@@ -19,10 +19,16 @@ interface DataTableProps<T> {
     loading?: boolean;
     /** Custom empty content when `data` is empty; defaults to a built-in EmptyState. */
     empty?: React.ReactNode;
+    /** Zebra-stripe the body rows (even rows get a subtle fill). */
+    striped?: boolean;
+    /** Highlight a row on hover even when it is not clickable (no `onRowClick`). */
+    hoverable?: boolean;
+    /** Pin the header to the top while the body scrolls. Default true. */
+    stickyHeader?: boolean;
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, loading, empty, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, loading, empty, striped, hoverable, stickyHeader, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

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

@@ -50,6 +50,9 @@ function DataTable({
   onSortChange,
   loading = false,
   empty,
+  striped = false,
+  hoverable = false,
+  stickyHeader = true,
   className,
   children
 }) {
@@ -95,25 +98,18 @@ function DataTable({
     onSortChange,
     loading,
     empty,
-    emptyColSpan
+    emptyColSpan,
+    striped,
+    hoverable,
+    stickyHeader
   };
   const hasContent = React.Children.toArray(children).some(
     (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Content"
   );
-  return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "ui-data-table-root",
-        densityClass[density === "compact" ? "compact" : "comfortable"],
-        className
-      ),
-      children: [
-        children,
-        !hasContent && /* @__PURE__ */ jsx(DataTable.Content, {})
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cn("ui-data-table-root", densityClass[density], className), children: [
+    children,
+    !hasContent && /* @__PURE__ */ jsx(DataTable.Content, {})
+  ] }) });
 }
 DataTable.Toolbar = function DataTableToolbar({
   children,
@@ -196,7 +192,10 @@ DataTable.Content = function DataTableContent() {
     onSortChange,
     loading,
     empty,
-    emptyColSpan
+    emptyColSpan,
+    striped,
+    hoverable,
+    stickyHeader
   } = useDataTableContext();
   const { t } = useTranslation();
   const rowPadding = tableRowHeightClass;
@@ -217,127 +216,60 @@ DataTable.Content = function DataTableContent() {
     {
       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,
-              {
-                "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(
-                  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: /* @__PURE__ */ jsx(
-                  "div",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ui-data-table-surface min-w-[640px] sm:min-w-0",
+          "data-striped": striped ? "" : void 0,
+          "data-hoverable": hoverable ? "" : void 0,
+          children: /* @__PURE__ */ jsxs(Table, { children: [
+            /* @__PURE__ */ jsx(TableHeader, { className: cn("bg-secondary", stickyHeader && "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(
-                      "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
-            ))
-          ] }, `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(
+                      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(
@@ -348,21 +280,99 @@ DataTable.Content = function DataTableContent() {
                       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,
+                    // Hover highlight when rows are clickable OR explicitly hoverable…
+                    (onRowClick || hoverable) && "hover:bg-muted/50",
+                    // …but the affordance (cursor + focus ring) only when clickable.
+                    onRowClick && "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
+              );
+            }) })
+          ] })
+        }
+      )
     }
   );
 };

package/dist/styles/table-layout.css

@@ -94,6 +94,12 @@
     border-radius: var(--radius-md);
   }
 
+  /* Zebra striping (opt-in via the `striped` prop). Selected rows keep their
+   * own emphasis, so they are excluded from the stripe. */
+  .ui-data-table-surface[data-striped] tbody tr:nth-child(even):not([data-state="selected"]) {
+    background-color: hsl(var(--muted) / 0.4);
+  }
+
   /* Empty-state cell hosts the built-in EmptyState (which brings its own padding). */
   .ui-data-table-empty {
     padding: 0;

package/package.json

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