@rovula/ui 0.1.29 → 0.1.30

package/dist/esm/types/components/DataTable/DataTable.d.ts

@@ -130,11 +130,11 @@ export interface DataTableProps<TData, TValue> extends DataTableEditingProps<TDa
     /** Add vertical column dividers */
     divided?: boolean;
     /** Return a className string to apply to a specific body row. */
-    rowClassName?: (row: Row<TData>, index: number) => string | undefined;
+    rowClassName?: string | ((row: Row<TData>, index: number) => string | undefined);
     /** Return a className string to apply to a specific body cell. */
-    cellClassName?: (cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined;
+    cellClassName?: string | ((cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined);
     /** Return a className string to apply to a specific column header cell (`<th>`). */
-    headerCellClassName?: (header: Header<TData, unknown>) => string | undefined;
+    headerCellClassName?: string | ((header: Header<TData, unknown>) => string | undefined);
     /** Additional className for the header section (`<thead>`). */
     headerClassName?: string;
     /** Additional className for the header row (`<tr>` inside `<thead>`). */

package/dist/esm/types/components/DataTable/DataTable.stories.d.ts

@@ -69,9 +69,9 @@ declare const meta: {
         surface?: "default" | "panel" | undefined;
         striped?: boolean | undefined;
         divided?: boolean | undefined;
-        rowClassName?: ((row: Row<unknown>, index: number) => string | undefined) | undefined;
-        cellClassName?: ((cell: import("@tanstack/react-table").Cell<unknown, unknown>, row: Row<unknown>) => string | undefined) | undefined;
-        headerCellClassName?: ((header: import("@tanstack/react-table").Header<unknown, unknown>) => string | undefined) | undefined;
+        rowClassName?: string | ((row: Row<unknown>, index: number) => string | undefined) | undefined;
+        cellClassName?: string | ((cell: import("@tanstack/react-table").Cell<unknown, unknown>, row: Row<unknown>) => string | undefined) | undefined;
+        headerCellClassName?: string | ((header: import("@tanstack/react-table").Header<unknown, unknown>) => string | undefined) | undefined;
         headerClassName?: string | undefined;
         headerRowClassName?: string | undefined;
         sortIndicatorVisibility?: "always" | "hover" | undefined;
@@ -94,6 +94,14 @@ declare const meta: {
 export default meta;
 /** Default — striped rows + column dividers, all columns sortable. */
 export declare const Default: StoryObj;
+/**
+ * Matches the Figma "Projects" page design — striped alternating rows,
+ * column dividers, row actions (more + navigate), client pagination,
+ * and a rounded bordered frame.
+ *
+ * Design ref: Xspector-New / node 11786-14865
+ */
+export declare const FigmaProjectsPage: StoryObj;
 /** Empty state — displayed when `data` is an empty array. */
 export declare const Empty: StoryObj;
 /** Non-striped with column dividers only. */
@@ -252,6 +260,24 @@ export declare const TableLayoutComparison: StoryObj;
  * - The **"Type"** cells for ROV are highlighted with an info tint.
  */
 export declare const WithCustomRowAndCellClassName: StoryObj;
+/**
+ * Showcase overriding header and body row heights via className props.
+ *
+ * The base `TableHead` uses `h-[44px] typography-body2` and `TableCell`
+ * uses `h-[42px] typography-body3`.
+ *
+ * `cn()` is configured with a custom `typography` class-group so
+ * `tailwind-merge` correctly deduplicates conflicting `typography-*`
+ * utilities (e.g. `typography-small2` replaces `typography-body2`).
+ *
+ * **Note:** `<th>` / `<td>` elements treat `height` as a minimum —
+ * to go smaller than the default, internal content (sort icon, badges)
+ * must also fit. Compact swaps to `typography-small2` (12px) text and
+ * reduces padding to reclaim space.
+ *
+ * Three sizes: **Compact**, **Default**, **Comfortable**.
+ */
+export declare const CustomRowAndHeaderSize: StoryObj;
 /**
  * Data management table — Figma **Xspector-New**:
  * [full frame](https://www.figma.com/design/99rq6FbfPx6hgPS0VCvHJh/Xspector-New?node-id=11965-17125),

package/dist/index.d.ts

@@ -1036,11 +1036,11 @@ interface DataTableProps<TData, TValue> extends DataTableEditingProps<TData> {
     /** Add vertical column dividers */
     divided?: boolean;
     /** Return a className string to apply to a specific body row. */
-    rowClassName?: (row: Row<TData>, index: number) => string | undefined;
+    rowClassName?: string | ((row: Row<TData>, index: number) => string | undefined);
     /** Return a className string to apply to a specific body cell. */
-    cellClassName?: (cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined;
+    cellClassName?: string | ((cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined);
     /** Return a className string to apply to a specific column header cell (`<th>`). */
-    headerCellClassName?: (header: Header<TData, unknown>) => string | undefined;
+    headerCellClassName?: string | ((header: Header<TData, unknown>) => string | undefined);
     /** Additional className for the header section (`<thead>`). */
     headerClassName?: string;
     /** Additional className for the header row (`<tr>` inside `<thead>`). */

package/dist/src/theme/global.css

@@ -4354,6 +4354,10 @@ input[type=number] {
   height: 280px;
 }
 
+.h-\[28px\] {
+  height: 28px;
+}
+
 .h-\[2px\] {
   height: 2px;
 }
@@ -4386,10 +4390,18 @@ input[type=number] {
   height: 48px;
 }
 
+.h-\[50px\] {
+  height: 50px;
+}
+
 .h-\[54px\] {
   height: 54px;
 }
 
+.h-\[56px\] {
+  height: 56px;
+}
+
 .h-\[64px\] {
   height: 64px;
 }
@@ -5134,6 +5146,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.whitespace-pre {
+  white-space: pre;
+}
+
 .whitespace-pre-line {
   white-space: pre-line;
 }
@@ -8267,6 +8283,14 @@ input[type=number] {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.leading-\[18px\] {
+  line-height: 18px;
+}
+
+.leading-\[20px\] {
+  line-height: 20px;
+}
+
 .leading-\[3rem\] {
   line-height: 3rem;
 }
@@ -12361,6 +12385,10 @@ input[type=number] {
   border-bottom-width: 0px;
 }
 
+.\[\&_tr\>th\]\:box-border tr>th {
+  box-sizing: border-box;
+}
+
 .\[\&_tr\>th\]\:border-b tr>th {
   border-bottom-width: 1px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/DataTable/DataTable.stories.tsx

@@ -320,6 +320,45 @@ export const Default: StoryObj = {
   ),
 };
 
+/**
+ * Matches the Figma "Projects" page design — striped alternating rows,
+ * column dividers, row actions (more + navigate), client pagination,
+ * and a rounded bordered frame.
+ *
+ * Design ref: Xspector-New / node 11786-14865
+ */
+export const FigmaProjectsPage: StoryObj = {
+  render: () => {
+    const figmaProjectColumns: ColumnDef<Project>[] = [
+      { accessorKey: "name", header: "Project name" },
+      { accessorKey: "type", header: "Type", size: 120 },
+      { accessorKey: "subtype", header: "Subtype" },
+      { accessorKey: "createdDate", header: "Created date", size: 180 },
+      {
+        accessorKey: "status",
+        header: "Status",
+        size: 200,
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+      },
+    ];
+
+    return (
+      <DataTable
+        columns={figmaProjectColumns}
+        data={projectData}
+        bordered
+        striped
+        divided
+        tableLayout="fixed"
+        paginationMode="client"
+        pageSizeOptions={[5, 10, 20]}
+        rowActions={(row) => <ProjectRowActions row={row} />}
+        onSorting={(s) => console.log("sort", s)}
+      />
+    );
+  },
+};
+
 /** Empty state — displayed when `data` is an empty array. */
 export const Empty: StoryObj = {
   render: () => (
@@ -1435,6 +1474,108 @@ export const WithCustomRowAndCellClassName: StoryObj = {
   ),
 };
 
+// ---------------------------------------------------------------------------
+// 13b. Custom body row size and header size
+// ---------------------------------------------------------------------------
+
+/**
+ * Showcase overriding header and body row heights via className props.
+ *
+ * The base `TableHead` uses `h-[44px] typography-body2` and `TableCell`
+ * uses `h-[42px] typography-body3`.
+ *
+ * `cn()` is configured with a custom `typography` class-group so
+ * `tailwind-merge` correctly deduplicates conflicting `typography-*`
+ * utilities (e.g. `typography-small2` replaces `typography-body2`).
+ *
+ * **Note:** `<th>` / `<td>` elements treat `height` as a minimum —
+ * to go smaller than the default, internal content (sort icon, badges)
+ * must also fit. Compact swaps to `typography-small2` (12px) text and
+ * reduces padding to reclaim space.
+ *
+ * Three sizes: **Compact**, **Default**, **Comfortable**.
+ */
+export const CustomRowAndHeaderSize: StoryObj = {
+  render: () => {
+    const compactColumns: ColumnDef<Project>[] = [
+      { accessorKey: "name", header: "Project name" },
+      { accessorKey: "type", header: "Type" },
+      { accessorKey: "subtype", header: "Subtype" },
+      { accessorKey: "createdDate", header: "Created date" },
+      {
+        accessorKey: "status",
+        header: "Status",
+        cell: ({ row }) => (
+          <span
+            className={`inline-flex items-center px-2 py-0.5 rounded typography-small2 ${
+              statusCls[row.original.status]
+            }`}
+          >
+            {row.original.status}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="flex flex-col gap-8 h-full">
+        <div className="flex flex-col gap-2 flex-1 min-h-0">
+          <p className="typography-subtitle1 text-text-contrast-max px-1">
+            Compact{" "}
+            <span className="typography-small2 text-text-g-contrast-medium">
+              — Header 32px · Row 28px · typography-small2 (12px)
+            </span>
+          </p>
+          <DataTable
+            columns={compactColumns}
+            data={projectData}
+            striped
+            divided
+            headerCellClassName="h-[32px] typography-small2"
+            cellClassName="h-[28px] typography-small2"
+            onSorting={(s) => console.log("sort", s)}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 flex-1 min-h-0">
+          <p className="typography-subtitle1 text-text-contrast-max px-1">
+            Default{" "}
+            <span className="typography-small2 text-text-g-contrast-medium">
+              — Header 44px · Row 42px · typography-body2 / body3
+            </span>
+          </p>
+          <DataTable
+            columns={projectColumns}
+            data={projectData}
+            striped
+            divided
+            onSorting={(s) => console.log("sort", s)}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 flex-1 min-h-0">
+          <p className="typography-subtitle1 text-text-contrast-max px-1">
+            Comfortable{" "}
+            <span className="typography-small2 text-text-g-contrast-medium">
+              — Header 56px · Row 50px · typography-subtitle2 / subtitle4 (16px
+              / 14px)
+            </span>
+          </p>
+          <DataTable
+            columns={projectColumns}
+            data={projectData}
+            striped
+            divided
+            headerCellClassName="h-[56px] typography-subtitle2"
+            cellClassName="h-[50px] typography-subtitle4"
+            onSorting={(s) => console.log("sort", s)}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
 // ---------------------------------------------------------------------------
 // 14. Real-world example — Data Management (Figma: Xspector-New → Data management)
 // ---------------------------------------------------------------------------

package/src/components/DataTable/DataTable.tsx

@@ -136,10 +136,9 @@ function renderDataTableBodyCells<TData extends RowData>(opts: {
   resizable: boolean;
   tableLayout: "auto" | "fixed" | "equal";
   resizableSlackGrowColId: string | null;
-  cellClassName?: (
-    cell: Cell<TData, unknown>,
-    row: Row<TData>,
-  ) => string | undefined;
+  cellClassName?:
+    | string
+    | ((cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined);
   onCellClick?: (
     cell: Cell<TData, unknown>,
     row: Row<TData>,
@@ -186,7 +185,9 @@ function renderDataTableBodyCells<TData extends RowData>(opts: {
           className={cn(
             columnMetaAlignClass(cell.column.columnDef.meta),
             cell.column.columnDef.meta?.cellClassName,
-            cellClassName?.(cell, row),
+            typeof cellClassName === "function"
+              ? cellClassName(cell, row)
+              : cellClassName,
           )}
           onClick={
             onCellClick
@@ -442,14 +443,17 @@ export interface DataTableProps<TData, TValue>
   /** Add vertical column dividers */
   divided?: boolean;
   /** Return a className string to apply to a specific body row. */
-  rowClassName?: (row: Row<TData>, index: number) => string | undefined;
+  rowClassName?:
+    | string
+    | ((row: Row<TData>, index: number) => string | undefined);
   /** Return a className string to apply to a specific body cell. */
-  cellClassName?: (
-    cell: Cell<TData, unknown>,
-    row: Row<TData>,
-  ) => string | undefined;
+  cellClassName?:
+    | string
+    | ((cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined);
   /** Return a className string to apply to a specific column header cell (`<th>`). */
-  headerCellClassName?: (header: Header<TData, unknown>) => string | undefined;
+  headerCellClassName?:
+    | string
+    | ((header: Header<TData, unknown>) => string | undefined);
   /** Additional className for the header section (`<thead>`). */
   headerClassName?: string;
   /** Additional className for the header row (`<tr>` inside `<thead>`). */
@@ -1822,15 +1826,17 @@ export function DataTable<TData, TValue>({
                         colSpan={header.colSpan}
                         style={headerStyle}
                         className={cn(
-                          "relative overflow-visible group/col",
+                          "relative overflow-visible group/col whitespace-pre",
                           isResizing && "select-none",
                           header.column.columnDef.meta?.headerCellClassName,
-                          headerCellClassName?.(header),
+                          typeof headerCellClassName === "function"
+                            ? headerCellClassName(header)
+                            : headerCellClassName,
                         )}
                       >
                         <div className="flex flex-row items-center gap-1 group/header">
                           {/* Column label — flex-1 pushes sort + ⋮ to the right */}
-                          <div
+                          <span
                             className={cn(
                               "flex flex-1 flex-row items-center overflow-hidden",
                               canSort && "cursor-pointer select-none",
@@ -1846,13 +1852,13 @@ export function DataTable<TData, TValue>({
                                   header.column.columnDef.header,
                                   header.getContext(),
                                 )}
-                          </div>
+                          </span>
 
                           {/* Sort button — visible when sorted; shown on hover when unsorted */}
                           {canSort && (
                             <ActionButton
                               variant="icon"
-                              size="sm"
+                              size="xs"
                               className={cn(
                                 "shrink-0 transition-opacity",
                                 isSorted
@@ -2018,7 +2024,10 @@ export function DataTable<TData, TValue>({
              *   - TableBody nth-child alternation applies across all rows (parents + children)
              *   - Row borders suppressed
              */}
-            <TableBody striped={striped} data-testid={testId ? `${testId}-tbody` : undefined}>
+            <TableBody
+              striped={striped}
+              data-testid={testId ? `${testId}-tbody` : undefined}
+            >
               {!isEmpty ? (
                 virtualized ? (
                   (() => {
@@ -2066,7 +2075,9 @@ export function DataTable<TData, TValue>({
                             className: cn(
                               rowBg,
                               onRowClick && "cursor-pointer",
-                              rowClassName?.(row, item.index),
+                              typeof rowClassName === "function"
+                                ? rowClassName(row, item.index)
+                                : rowClassName,
                             ),
                             onClick: onRowClick
                               ? (e: React.MouseEvent<HTMLTableRowElement>) =>
@@ -2142,7 +2153,9 @@ export function DataTable<TData, TValue>({
                           className: cn(
                             rowBg,
                             onRowClick && "cursor-pointer",
-                            rowClassName?.(row, rowIndex),
+                            typeof rowClassName === "function"
+                              ? rowClassName(row, rowIndex)
+                              : rowClassName,
                           ),
                           onClick: onRowClick
                             ? (e: React.MouseEvent<HTMLTableRowElement>) =>
@@ -2207,7 +2220,9 @@ export function DataTable<TData, TValue>({
                         className={cn(
                           rowBg,
                           onRowClick && "cursor-pointer",
-                          rowClassName?.(row, rowIndex),
+                          typeof rowClassName === "function"
+                            ? rowClassName(row, rowIndex)
+                            : rowClassName,
                         )}
                         data-highlighted={isHighlighted ? "true" : undefined}
                         onClick={

package/src/components/Table/Table.tsx

@@ -37,51 +37,61 @@ const Table = React.forwardRef<
      */
     scrollableWrapper?: boolean;
   } & React.HTMLAttributes<HTMLTableElement>
->(({ rootClassName, className, rootRef, bordered = false, scrollableWrapper = true, ...props }, ref) => {
-  const scrollClassName = cn(
-    "relative h-full w-full min-h-0 overflow-auto",
-    "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s",
-  );
+>(
+  (
+    {
+      rootClassName,
+      className,
+      rootRef,
+      bordered = false,
+      scrollableWrapper = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const scrollClassName = cn(
+      "relative h-full w-full min-h-0 overflow-auto",
+      "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s",
+    );
 
-  const tableClassName = cn(
-    "min-w-full caption-bottom border-separate border-spacing-0",
-    className,
-  );
+    const tableClassName = cn(
+      "min-w-full caption-bottom border-separate border-spacing-0",
+      className,
+    );
 
-  const tableEl = (
-    <table ref={ref} className={tableClassName} {...props} />
-  );
+    const tableEl = <table ref={ref} className={tableClassName} {...props} />;
 
-  if (!bordered && scrollableWrapper === false) {
-    return (
-      <table
-        ref={ref}
-        className={cn(tableClassName, rootClassName)}
-        {...props}
-      />
-    );
-  }
+    if (!bordered && scrollableWrapper === false) {
+      return (
+        <table
+          ref={ref}
+          className={cn(tableClassName, rootClassName)}
+          {...props}
+        />
+      );
+    }
+
+    if (bordered) {
+      return (
+        <div
+          className={cn(
+            "relative flex h-full w-full min-h-0 flex-col overflow-hidden rounded-md border border-table-c-border",
+            rootClassName,
+          )}
+          ref={rootRef}
+        >
+          <div className={scrollClassName}>{tableEl}</div>
+        </div>
+      );
+    }
 
-  if (bordered) {
     return (
-      <div
-        className={cn(
-          "relative flex h-full w-full min-h-0 flex-col overflow-hidden rounded-md border border-table-c-border",
-          rootClassName,
-        )}
-        ref={rootRef}
-      >
-        <div className={scrollClassName}>{tableEl}</div>
+      <div className={cn(scrollClassName, rootClassName)} ref={rootRef}>
+        {tableEl}
       </div>
     );
-  }
-
-  return (
-    <div className={cn(scrollClassName, rootClassName)} ref={rootRef}>
-      {tableEl}
-    </div>
-  );
-});
+  },
+);
 Table.displayName = "Table";
 
 // ---------------------------------------------------------------------------
@@ -99,7 +109,7 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "[&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line",
+      "[&_tr>th]:box-border [&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line",
       className,
     )}
     {...props}
@@ -179,7 +189,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "transition-colors",
+      "transition-colors  box-border",
       // Row separator — applied on cells because border-separate ignores tr borders
       divided && [
         "[&>td]:border-b [&>td]:border-b-table-c-row-line",
@@ -207,9 +217,10 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-[44px] box-border py-3 px-3 text-left align-middle",
+      "box-border py-3 px-3 text-left align-middle",
       "typography-body2 text-text-contrast-max",
       "bg-table-c-header-bg",
+      "leading-[20px]",
       // Prefer min-width only so callers (e.g. DataTable exactWidth) can set
       // a different width via inline style without fighting a fixed `w-10`.
       "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10",
@@ -230,8 +241,9 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "h-[42px] box-border py-3 px-3 text-left align-middle",
+      "box-border py-3 px-3 text-left align-middle",
       "typography-body3 text-text-contrast-max",
+      "leading-[18px]", // content สูง 18
       // Inherit row background from <tr> so every cell paints the same fill
       // (some table layouts / browsers leave the last column visually “empty”).
       "bg-inherit",