@underverse-ui/underverse 0.2.67 → 0.2.69

package/dist/index.cjs

@@ -13011,7 +13011,7 @@ var Table = import_react31.default.forwardRef(({ className, containerClassName,
   }
 ));
 Table.displayName = "Table";
-var TableHeader = import_react31.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted/50", className), ...props, children: [
+var TableHeader = import_react31.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted", className), ...props, children: [
   children,
   filterRow
 ] }));
@@ -13080,6 +13080,8 @@ function DataTable({
   columnDividers = false,
   className,
   storageKey,
+  stickyHeader = true,
+  maxHeight = 500,
   labels
 }) {
   const t = useTranslations("Common");
@@ -13167,11 +13169,11 @@ function DataTable({
   const getStickyColumnClass = (col, isHeader = false) => {
     if (!col.fixed) return "";
     return cn(
-      "sticky z-10 bg-background",
-      col.fixed === "left" && "shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]",
-      col.fixed === "right" && "shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]",
-      isHeader && "z-20"
-      // Header cần z-index cao hơn
+      "sticky",
+      col.fixed === "left" && "left-0 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.15)]",
+      col.fixed === "right" && "right-0 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.15)]",
+      // Header fixed column cần z-index cao hơn thead (z-30) để không bị che
+      isHeader ? "z-50 bg-muted!" : "z-10 bg-card!"
     );
   };
   const getStickyColumnStyle = (col) => {
@@ -13239,129 +13241,144 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    TableHead,
-    {
-      style: { width: col.width, ...getStickyColumnStyle(col) },
-      className: cn(
-        // Use column-specific align if defined, otherwise use global headerAlign
-        (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
-        (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
-        columnDividers && colIdx > 0 && "border-l border-border/60",
-        getStickyColumnClass(col, true)
-      ),
-      children: (() => {
-        const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
-        const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
-        const titleContent = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-1 min-w-0 shrink", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
-          col.sortable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            "button",
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => {
+    const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
+    const isAfterFixedLeft = prevCol?.fixed === "left";
+    const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      TableHead,
+      {
+        style: { width: col.width, ...getStickyColumnStyle(col) },
+        className: cn(
+          // Use column-specific align if defined, otherwise use global headerAlign
+          (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
+          (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
+          showBorderLeft && "border-l border-border/60",
+          getStickyColumnClass(col, true)
+        ),
+        children: (() => {
+          const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
+          const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+          const titleContent = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+            "div",
             {
               className: cn(
-                "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
-                sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
+                "flex items-center gap-1",
+                // Cột fixed không cần shrink vì đã có width cố định
+                !col.fixed && "min-w-0 shrink"
               ),
-              onClick: () => {
-                setCurPage(1);
-                setSort((s) => {
-                  if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
-                  if (s.order === "asc") return { key: col.key, order: "desc" };
-                  return null;
-                });
-              },
-              "aria-label": "Sort",
-              title: `Sort by ${String(col.title)}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  "path",
-                  {
-                    d: "M7 8l3-3 3 3",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  "path",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: cn("font-medium text-sm", !col.fixed && "truncate"), children: col.title }),
+                col.sortable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  "button",
                   {
-                    d: "M7 12l3 3 3-3",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+                    className: cn(
+                      "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
+                      sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
+                    ),
+                    onClick: () => {
+                      setCurPage(1);
+                      setSort((s) => {
+                        if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
+                        if (s.order === "asc") return { key: col.key, order: "desc" };
+                        return null;
+                      });
+                    },
+                    "aria-label": "Sort",
+                    title: `Sort by ${String(col.title)}`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        "path",
+                        {
+                          d: "M7 8l3-3 3 3",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        "path",
+                        {
+                          d: "M7 12l3 3 3-3",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+                        }
+                      )
+                    ] })
                   }
                 )
-              ] })
+              ]
             }
-          )
-        ] });
-        const filterContent = col.filter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          Popover,
-          {
-            placement: isRightAlign ? "bottom-end" : "bottom-start",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              "button",
-              {
-                className: cn(
-                  "p-1.5 rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-                  filters[col.key] && "bg-accent text-foreground"
-                ),
-                "aria-label": "Filter",
-                title: "Filter",
-                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.Filter, { className: "h-4 w-4" })
-              }
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
-                "Filter ",
-                col.title
-              ] }),
-              renderFilterControl(col),
-              filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          );
+          const filterContent = col.filter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            Popover,
+            {
+              placement: isRightAlign ? "bottom-end" : "bottom-start",
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "button",
                 {
-                  onClick: () => {
-                    setCurPage(1);
-                    setFilters((f) => {
-                      const newFilters = { ...f };
-                      delete newFilters[col.key];
-                      return newFilters;
-                    });
-                  },
-                  className: "text-xs text-destructive hover:underline",
-                  children: t("clearFilter")
+                  className: cn(
+                    "p-1.5 rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                    filters[col.key] && "bg-accent text-foreground"
+                  ),
+                  "aria-label": "Filter",
+                  title: "Filter",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.Filter, { className: "h-4 w-4" })
                 }
-              )
-            ] })
-          }
-        );
-        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "div",
-          {
-            className: cn(
-              "flex items-center gap-2 select-none min-h-10",
-              isRightAlign && "justify-end",
-              isCenterAlign && "justify-center",
-              !isRightAlign && !isCenterAlign && "justify-start"
-            ),
-            children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-              filterContent,
-              titleContent
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-              titleContent,
-              filterContent
-            ] })
-          }
-        );
-      })()
-    },
-    col.key
-  )) });
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
+                  "Filter ",
+                  col.title
+                ] }),
+                renderFilterControl(col),
+                filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  "button",
+                  {
+                    onClick: () => {
+                      setCurPage(1);
+                      setFilters((f) => {
+                        const newFilters = { ...f };
+                        delete newFilters[col.key];
+                        return newFilters;
+                      });
+                    },
+                    className: "text-xs text-destructive hover:underline",
+                    children: t("clearFilter")
+                  }
+                )
+              ] })
+            }
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2 select-none min-h-10",
+                isRightAlign && "justify-end",
+                isCenterAlign && "justify-center",
+                !isRightAlign && !isCenterAlign && "justify-start"
+              ),
+              children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+                filterContent,
+                titleContent
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+                titleContent,
+                filterContent
+              ] })
+            }
+          );
+        })()
+      },
+      col.key
+    );
+  }) });
   const isServerMode = Boolean(onQueryChange);
   const processedData = import_react32.default.useMemo(() => {
     if (isServerMode) return data;
@@ -13466,69 +13483,91 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("relative rounded-2xl md:rounded-3xl border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-      Table,
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      "div",
       {
-        containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
-        className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-5 [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableHeader, { children: renderHeader }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                "path",
-                {
-                  className: "opacity-75",
-                  fill: "currentColor",
-                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "text-sm", children: [
-              t("loading"),
-              "\u2026"
-            ] })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
-            const isLastRow = idx === displayedData.length - 1;
-            return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              TableRow,
-              {
-                className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/50"),
-                style: {
-                  // content-visibility: auto for rendering performance (skip off-screen rows)
-                  contentVisibility: "auto",
-                  containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
-                },
-                children: visibleColumns.map((col, colIdx) => {
-                  const value = col.dataIndex ? row[col.dataIndex] : void 0;
-                  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                    TableCell,
+        className: cn("relative rounded-2xl md:rounded-3xl border border-border/50", loading2 && "opacity-60 pointer-events-none"),
+        style: stickyHeader ? {
+          maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+          overflowY: "auto",
+          overflowX: "auto"
+        } : { overflowX: "auto" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+          Table,
+          {
+            containerClassName: cn("border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent", "overflow-visible"),
+            className: cn(
+              "table-fixed",
+              stickyHeader && ["[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-20", "[&_thead]:shadow-[0_1px_3px_rgba(0,0,0,0.1)]"]
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableHeader, { children: renderHeader }),
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    "path",
                     {
-                      style: getStickyColumnStyle(col),
-                      className: cn(
-                        cellPadding,
-                        col.align === "right" && "text-right",
-                        col.align === "center" && "text-center",
-                        columnDividers && colIdx > 0 && "border-l border-border/60",
-                        isLastRow && col === visibleColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
-                        isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
-                        getStickyColumnClass(col),
-                        // Giữ màu nền striped cho cột cố định
-                        col.fixed && striped && idx % 2 === 0 && "bg-muted/50!"
-                      ),
-                      children: col.render ? col.render(value, row, idx) : String(value ?? "")
+                      className: "opacity-75",
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "text-sm", children: [
+                  t("loading"),
+                  "\u2026"
+                ] })
+              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
+                const isLastRow = idx === displayedData.length - 1;
+                return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  TableRow,
+                  {
+                    className: cn(densityRowClass),
+                    style: {
+                      // content-visibility: auto for rendering performance (skip off-screen rows)
+                      contentVisibility: "auto",
+                      containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
                     },
-                    col.key
-                  );
-                })
-              },
-              getRowKey(row, idx)
-            );
-          }) })
-        ]
+                    children: visibleColumns.map((col, colIdx) => {
+                      const value = col.dataIndex ? row[col.dataIndex] : void 0;
+                      const isStripedRow = striped && idx % 2 === 0;
+                      const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
+                      const isAfterFixedLeft = prevCol?.fixed === "left";
+                      const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
+                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        TableCell,
+                        {
+                          style: getStickyColumnStyle(col),
+                          className: cn(
+                            cellPadding,
+                            col.align === "right" && "text-right",
+                            col.align === "center" && "text-center",
+                            showBorderLeft && "border-l border-border/60",
+                            isLastRow && col === visibleColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
+                            isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
+                            // Cột cố định cần solid background
+                            col.fixed ? cn(
+                              "sticky z-10",
+                              col.fixed === "left" && "left-0 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.15)]",
+                              col.fixed === "right" && "right-0 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.15)]",
+                              isStripedRow ? "bg-muted!" : "bg-card!"
+                            ) : isStripedRow && "bg-muted/50"
+                          ),
+                          children: col.render ? col.render(value, row, idx) : String(value ?? "")
+                        },
+                        col.key
+                      );
+                    })
+                  },
+                  getRowKey(row, idx)
+                );
+              }) })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     totalItems > 0 && Math.ceil(totalItems / curPageSize) > 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1 pt-3 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "tabular-nums", children: [
         (curPage - 1) * curPageSize + 1,