@underverse-ui/underverse 1.0.188 → 1.0.190

package/dist/index.d.cts

@@ -2715,6 +2715,8 @@ type DataTableColumn<T> = {
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     width?: number | string;
     align?: "left" | "center" | "right";
+    /** Vị trí của icon sort/filter: "inline" (ngay sát text) hoặc "end" (cuối dòng). Mặc định là "end". */
+    iconPosition?: "inline" | "end";
     visible?: boolean;
     /** Cố định cột bên trái hoặc phải khi cuộn ngang */
     fixed?: "left" | "right";

package/dist/index.d.ts

@@ -2715,6 +2715,8 @@ type DataTableColumn<T> = {
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     width?: number | string;
     align?: "left" | "center" | "right";
+    /** Vị trí của icon sort/filter: "inline" (ngay sát text) hoặc "end" (cuối dòng). Mặc định là "end". */
+    iconPosition?: "inline" | "end";
     visible?: boolean;
     /** Cố định cột bên trái hoặc phải khi cuộn ngang */
     fixed?: "left" | "right";

package/dist/index.js

@@ -25680,7 +25680,8 @@ function DataTableHeader({
       const columnLabel = getColumnLabel(col.title) || col.key;
       const sortByText = sortByLabel ?? gi18n.sortBy ?? "Sort by";
       const sortLabel = `${sortByText} ${columnLabel}`;
-      const titleContent = /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-1", children: [
+      const useEndIcon = (col.iconPosition ?? "end") === "end";
+      const titleContent = /* @__PURE__ */ jsxs55("div", { className: cn("flex items-center gap-1", useEndIcon && "flex-1 justify-between"), children: [
         /* @__PURE__ */ jsx68("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
         col.sortable && /* @__PURE__ */ jsx68(
           Tooltip,
@@ -25693,8 +25694,8 @@ function DataTableHeader({
                 type: "button",
                 title: sortLabel,
                 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"
+                  "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"
                 ),
                 onClick: () => {
                   setCurPage(1);
@@ -25709,7 +25710,7 @@ function DataTableHeader({
                   /* @__PURE__ */ jsx68(
                     "path",
                     {
-                      d: "M7 8l3-3 3 3",
+                      d: "M5 7.5l5-5 5 5",
                       stroke: "currentColor",
                       strokeWidth: "1.5",
                       strokeLinecap: "round",
@@ -25720,7 +25721,7 @@ function DataTableHeader({
                   /* @__PURE__ */ jsx68(
                     "path",
                     {
-                      d: "M7 12l3 3 3-3",
+                      d: "M5 12.5l5 5 5-5",
                       stroke: "currentColor",
                       strokeWidth: "1.5",
                       strokeLinecap: "round",
@@ -25749,8 +25750,8 @@ function DataTableHeader({
                   type: "button",
                   title: gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
                   className: cn(
-                    "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
-                    filters[col.key] ? "bg-accent opacity-100" : "opacity-60 hover:opacity-100"
+                    "p-1.5 rounded-lg transition-all duration-200 hover:bg-foreground/10",
+                    filters[col.key] ? "bg-foreground/10 opacity-100" : "opacity-60 hover:opacity-100"
                   ),
                   "aria-label": gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
                   children: /* @__PURE__ */ jsx68(FilterIcon, { className: "w-4 h-4" })
@@ -25785,7 +25786,8 @@ function DataTableHeader({
             headerMinHeightClass,
             isRightAlign && "justify-end",
             isCenterAlign && "justify-center",
-            !isRightAlign && !isCenterAlign && "justify-start"
+            !isRightAlign && !isCenterAlign && "justify-start",
+            useEndIcon && "w-full"
           ),
           children: isRightAlign ? /* @__PURE__ */ jsxs55(Fragment25, { children: [
             filterContent,