@underverse-ui/underverse 0.2.9 → 0.2.10

package/dist/index.cjs

@@ -10058,6 +10058,7 @@ function DataTable({
   toolbar,
   enableColumnVisibilityToggle = true,
   enableDensityToggle = true,
+  enableHeaderAlignToggle = false,
   striped = true,
   // Mặc định bật màu nền sẽn kẽ cho các dòng
   columnDividers = false,
@@ -10065,6 +10066,7 @@ function DataTable({
   labels
 }) {
   const t = (0, import_next_intl7.useTranslations)("Common");
+  const [headerAlign, setHeaderAlign] = import_react23.default.useState("left");
   const [visibleCols, setVisibleCols] = import_react23.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
   const [filters, setFilters] = import_react23.default.useState({});
   const [sort, setSort] = import_react23.default.useState(null);
@@ -10147,18 +10149,21 @@ function DataTable({
     {
       style: { width: col.width },
       className: cn(
-        col.align === "right" && "text-right",
-        col.align === "center" && "text-center",
+        // 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"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+      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_runtime47.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-shrink", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
           col.sortable && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "button",
             {
               className: cn(
-                "ml-1 p-1 rounded-sm transition-all duration-200 hover:bg-accent",
+                "p-1 rounded-sm transition-all duration-200 hover:bg-accent",
                 sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
               ),
               onClick: () => {
@@ -10197,11 +10202,11 @@ function DataTable({
               ] })
             }
           )
-        ] }),
-        col.filter && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ] });
+        const filterContent = col.filter && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Popover,
           {
-            placement: "bottom-start",
+            placement: isRightAlign ? "bottom-end" : "bottom-start",
             trigger: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "button",
               {
@@ -10232,14 +10237,32 @@ function DataTable({
                       return newFilters;
                     });
                   },
-                  className: "text-xs text-muted-foreground hover:text-foreground underline mt-1",
+                  className: "text-xs text-destructive hover:underline",
                   children: "Clear filter"
                 }
               )
             ] })
           }
-        )
-      ] })
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 select-none min-h-[2.5rem]",
+              isRightAlign && "justify-end",
+              isCenterAlign && "justify-center",
+              !isRightAlign && !isCenterAlign && "justify-between"
+            ),
+            children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+              filterContent,
+              titleContent
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+              titleContent,
+              filterContent
+            ] })
+          }
+        );
+      })()
     },
     col.key
   )) });
@@ -10330,6 +10353,20 @@ function DataTable({
             ))
           }
         ),
+        enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          DropdownMenu_default,
+          {
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
+              labels?.headerAlign || t("headerAlign")
+            ] }),
+            items: [
+              { label: labels?.alignLeft || t("alignLeft"), onClick: () => setHeaderAlign("left") },
+              { label: labels?.alignCenter || t("alignCenter"), onClick: () => setHeaderAlign("center") },
+              { label: labels?.alignRight || t("alignRight"), onClick: () => setHeaderAlign("right") }
+            ]
+          }
+        ),
         toolbar
       ] })
     ] }),