@underverse-ui/underverse 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to `@underverse-ui/underverse` are documented in this file.
 
 ## Unreleased
 
+### Fixed
+
+- `DataTable` sortable headers now keep their titles visually centered while the sort control remains aligned to the trailing edge.
+
+## [2.0.2] - 2026-07-28
+
 ### Added
 
 - `CategoryTreeSelect` now supports `showTreeLines` to show or hide dashed hierarchy guide lines in recursive and virtualized trees.

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "sourceEntry": "src/index.ts",
   "totalExports": 256,
   "exports": [

package/dist/index.cjs

@@ -31163,60 +31163,82 @@ function DataTableHeader({
       const sortByText = sortByLabel ?? gi18n.sortBy ?? "Sort by";
       const sortLabel = `${sortByText} ${columnLabel}`;
       const useEndIcon = (col.iconPosition ?? "end") === "end";
-      const titleContent = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex items-center gap-1", useEndIcon && "flex-1 justify-between"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
-        col.sortable && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-          Tooltip,
-          {
-            placement: "top",
-            content: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-              "button",
+      const titleContent = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        "div",
+        {
+          "data-underverse-datatable-header-content": col.key,
+          className: cn(
+            "items-center gap-1",
+            useEndIcon && isCenterAlign ? "grid flex-1 grid-cols-[1fr_auto_1fr]" : "flex",
+            useEndIcon && !isCenterAlign && "flex-1 justify-between"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              "span",
               {
-                type: "button",
-                title: sortLabel,
                 className: cn(
-                  "p-1 rounded-lg transition-all duration-200 hover:bg-foreground/10",
-                  sort?.key === col.key ? "opacity-100 bg-foreground/10" : "opacity-60 hover:opacity-100"
+                  "font-medium whitespace-nowrap select-text",
+                  useEndIcon && isCenterAlign && "col-start-2",
+                  headerTitleClass
                 ),
-                onClick: () => {
-                  setCurPage(1);
-                  setSort((current) => {
-                    if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
-                    if (current.order === "asc") return { key: col.key, order: "desc" };
-                    return null;
-                  });
-                },
-                "aria-label": sortLabel,
-                children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                    "path",
-                    {
-                      d: "M5 7.5l5-5 5 5",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                    "path",
-                    {
-                      d: "M5 12.5l5 5 5-5",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
-                    }
-                  )
-                ] })
+                children: col.title
+              }
+            ),
+            col.sortable && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              Tooltip,
+              {
+                placement: "top",
+                content: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium", children: sortLabel }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    title: sortLabel,
+                    className: cn(
+                      "p-1 rounded-lg transition-all duration-200 hover:bg-foreground/10",
+                      useEndIcon && isCenterAlign && "col-start-3 justify-self-end",
+                      sort?.key === col.key ? "opacity-100 bg-foreground/10" : "opacity-60 hover:opacity-100"
+                    ),
+                    onClick: () => {
+                      setCurPage(1);
+                      setSort((current) => {
+                        if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
+                        if (current.order === "asc") return { key: col.key, order: "desc" };
+                        return null;
+                      });
+                    },
+                    "aria-label": sortLabel,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        "path",
+                        {
+                          d: "M5 7.5l5-5 5 5",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        "path",
+                        {
+                          d: "M5 12.5l5 5 5-5",
+                          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_runtime69.jsx)(
         Popover,
         {