@underverse-ui/underverse 2.0.40 → 2.0.42

package/dist/index.d.cts

@@ -1034,6 +1034,8 @@ interface DatePickerProps {
     id?: string;
     value?: Date;
     onChange: (date: Date | undefined) => void;
+    /** Custom date display formatter function */
+    formatDate?: (date: Date) => string;
     placeholder?: string;
     className?: string;
     disabled?: boolean;
@@ -1066,6 +1068,8 @@ interface DateRangePickerProps {
     startDate?: Date;
     endDate?: Date | null;
     onChange: (start: Date | undefined, end: Date | null | undefined) => void;
+    /** Custom date display formatter function applied to both start and end date */
+    formatDate?: (date: Date) => string;
     placeholder?: string;
     className?: string;
     label?: string;
@@ -1144,6 +1148,8 @@ interface LunarDatePickerProps {
     id?: string;
     value?: LunarPickerValue;
     onChange: (date: LunarPickerValue | undefined) => void;
+    /** Custom date display formatter function */
+    formatDate?: (date: LunarPickerValue) => string;
     placeholder?: string;
     className?: string;
     disabled?: boolean;
@@ -1171,6 +1177,8 @@ interface LunarDateRangePickerProps {
     startDate?: LunarPickerValue;
     endDate?: LunarPickerValue | null;
     onChange: (start: LunarPickerValue | undefined, end: LunarPickerValue | null | undefined) => void;
+    /** Custom date display formatter function applied to both start and end date */
+    formatDate?: (date: LunarPickerValue) => string;
     placeholder?: string;
     className?: string;
     label?: string;
@@ -3019,6 +3027,8 @@ interface DataTableProps<T> {
     /** Double-click leaf headers to auto-fit column width based on visible content. Default: true */
     enableHeaderAutoFit?: boolean;
     labels?: DataTableLabels;
+    /** Optional override for sort button label prefix across all sortable column headers */
+    sortByLabel?: string;
     borderMode?: BorderMode;
     /** Resolve the document element that should receive table dropdown portals. */
     getPortalContainer?: () => HTMLElement | null;
@@ -3026,7 +3036,7 @@ interface DataTableProps<T> {
     paginationVariant?: "default" | "classic";
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, columnColorGroups, borderMode, getPortalContainer, paginationVariant, }: DataTableProps<T>): React__default.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, sortByLabel, columnColorGroups, borderMode, getPortalContainer, paginationVariant, }: DataTableProps<T>): React__default.JSX.Element;
 
 /** Public props for the `Table` component. */
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
@@ -3686,6 +3696,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -4158,6 +4170,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -4630,6 +4644,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -5102,6 +5118,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -5577,6 +5595,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;
@@ -6048,6 +6068,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;
@@ -6519,6 +6541,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;
@@ -6990,6 +7014,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;

package/dist/index.d.ts

@@ -1034,6 +1034,8 @@ interface DatePickerProps {
     id?: string;
     value?: Date;
     onChange: (date: Date | undefined) => void;
+    /** Custom date display formatter function */
+    formatDate?: (date: Date) => string;
     placeholder?: string;
     className?: string;
     disabled?: boolean;
@@ -1066,6 +1068,8 @@ interface DateRangePickerProps {
     startDate?: Date;
     endDate?: Date | null;
     onChange: (start: Date | undefined, end: Date | null | undefined) => void;
+    /** Custom date display formatter function applied to both start and end date */
+    formatDate?: (date: Date) => string;
     placeholder?: string;
     className?: string;
     label?: string;
@@ -1144,6 +1148,8 @@ interface LunarDatePickerProps {
     id?: string;
     value?: LunarPickerValue;
     onChange: (date: LunarPickerValue | undefined) => void;
+    /** Custom date display formatter function */
+    formatDate?: (date: LunarPickerValue) => string;
     placeholder?: string;
     className?: string;
     disabled?: boolean;
@@ -1171,6 +1177,8 @@ interface LunarDateRangePickerProps {
     startDate?: LunarPickerValue;
     endDate?: LunarPickerValue | null;
     onChange: (start: LunarPickerValue | undefined, end: LunarPickerValue | null | undefined) => void;
+    /** Custom date display formatter function applied to both start and end date */
+    formatDate?: (date: LunarPickerValue) => string;
     placeholder?: string;
     className?: string;
     label?: string;
@@ -3019,6 +3027,8 @@ interface DataTableProps<T> {
     /** Double-click leaf headers to auto-fit column width based on visible content. Default: true */
     enableHeaderAutoFit?: boolean;
     labels?: DataTableLabels;
+    /** Optional override for sort button label prefix across all sortable column headers */
+    sortByLabel?: string;
     borderMode?: BorderMode;
     /** Resolve the document element that should receive table dropdown portals. */
     getPortalContainer?: () => HTMLElement | null;
@@ -3026,7 +3036,7 @@ interface DataTableProps<T> {
     paginationVariant?: "default" | "classic";
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, columnColorGroups, borderMode, getPortalContainer, paginationVariant, }: DataTableProps<T>): React__default.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, showToolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, uppercaseHeader, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, paginationAlign, paginationRange, enableHeaderAutoFit, labels, sortByLabel, columnColorGroups, borderMode, getPortalContainer, paginationVariant, }: DataTableProps<T>): React__default.JSX.Element;
 
 /** Public props for the `Table` component. */
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
@@ -3686,6 +3696,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -4158,6 +4170,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -4630,6 +4644,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -5102,6 +5118,8 @@ declare const underverseMessages: {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            sortBy: string;
+            filterBy: string;
         };
         ValidationInput: {
             required: string;
@@ -5577,6 +5595,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;
@@ -6048,6 +6068,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;
@@ -6519,6 +6541,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;
@@ -6990,6 +7014,8 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         alignLeft: string;
         alignCenter: string;
         alignRight: string;
+        sortBy: string;
+        filterBy: string;
     };
     ValidationInput: {
         required: string;

package/dist/index.js

@@ -4,35 +4,35 @@ import {
   extractImageSrcsFromHtml,
   normalizeImageUrl,
   prepareUEditorContentForSave
-} from "./chunk-ZCW2WBNT.js";
+} from "./chunk-7YU3O5JK.js";
 import {
   EmojiPicker_default
-} from "./chunk-KBCOCHKM.js";
+} from "./chunk-VYTIGF3V.js";
 import {
   getEmojiImageUrl,
   getEmojiUnifiedCode,
   setEmojiBaseUrl
-} from "./chunk-BSN2YFRJ.js";
+} from "./chunk-WZH3Y3BL.js";
 import "./chunk-4TYW5K4J.js";
 import {
   CompactDatePicker,
   DatePicker,
   DateRangePicker,
   date_exports
-} from "./chunk-2K443MQP.js";
+} from "./chunk-YNALZEN6.js";
 import {
   Modal_default
-} from "./chunk-GY6P6WZB.js";
+} from "./chunk-CJ6RPCJN.js";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenu_default,
   SelectDropdown
-} from "./chunk-LBOTY2AI.js";
+} from "./chunk-TVCZXO6G.js";
 import {
   Tooltip,
   useHydrated
-} from "./chunk-THBABGVM.js";
+} from "./chunk-IW6FSDIT.js";
 import {
   Popover,
   UnderverseConfigProvider,
@@ -43,7 +43,7 @@ import {
   shadcnAnimationStyles,
   useShadCNAnimations,
   useUnderverseUIConfig
-} from "./chunk-AKV7ZQJL.js";
+} from "./chunk-PNUDVGMI.js";
 import {
   ForceInternalTranslationsProvider,
   NextIntlAdapter,
@@ -68,7 +68,7 @@ import {
   useUnderverseLocale,
   useUnderverseTranslations,
   vi_default
-} from "./chunk-4MX7S6TM.js";
+} from "./chunk-PSWS64LA.js";
 import {
   __export,
   __require
@@ -6058,6 +6058,7 @@ var LunarDatePicker = ({
   id,
   value,
   onChange,
+  formatDate,
   placeholder,
   className,
   disabled = false,
@@ -6271,6 +6272,9 @@ var LunarDatePicker = ({
   };
   const formatDateDisplay = (date) => {
     if (!date) return "";
+    if (formatDate) {
+      return formatDate(date);
+    }
     const formatStr = date.is_leap_month ? t("lunarLeapFormat") : t("lunarFormat");
     return formatStr.replace("{day}", String(date.day)).replace("{month}", String(date.month)).replace("{year}", String(date.year));
   };
@@ -6740,6 +6744,7 @@ var LunarDateRangePicker = ({
   startDate,
   endDate,
   onChange,
+  formatDate,
   placeholder = "Select lunar date range...",
   className,
   label,
@@ -7183,6 +7188,9 @@ var LunarDateRangePicker = ({
     ] })
   ] });
   const displayFormat = (date) => {
+    if (formatDate) {
+      return formatDate(date);
+    }
     const formatStr = date.is_leap_month ? t("lunarLeapFormat") : t("lunarFormat");
     return formatStr.replace("{day}", String(date.day)).replace("{month}", String(date.month)).replace("{year}", String(date.year));
   };
@@ -20289,9 +20297,55 @@ function DataTableHeader({
       const isRightAlign = resolvedHeaderAlign === "right";
       const isCenterAlign = resolvedHeaderAlign === "center";
       const columnLabel = getColumnLabel(col.title) || col.key;
-      const sortByText = sortByLabel ?? gi18n.sortBy ?? "Sort by";
-      const sortLabel = `${sortByText} ${columnLabel}`;
+      const sortByText = sortByLabel ?? gi18n.sortBy ?? (t("sortBy") !== "sortBy" ? t("sortBy") : void 0);
+      const sortLabel = sortByText ? `${sortByText} ${columnLabel}` : columnLabel;
+      const hasSortTooltip = Boolean(sortByText);
       const useEndIcon = (col.iconPosition ?? "end") === "end";
+      const sortButton = /* @__PURE__ */ jsx57(
+        "button",
+        {
+          type: "button",
+          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,
+          title: hasSortTooltip ? sortLabel : void 0,
+          children: /* @__PURE__ */ jsxs49("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
+            /* @__PURE__ */ jsx57(
+              "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__ */ jsx57(
+              "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 titleContent = /* @__PURE__ */ jsxs49(
         "div",
         {
@@ -20313,85 +20367,46 @@ function DataTableHeader({
                 children: col.title
               }
             ),
-            col.sortable && /* @__PURE__ */ jsx57(
+            col.sortable && (hasSortTooltip ? /* @__PURE__ */ jsx57(
               Tooltip,
               {
                 placement: "top",
                 content: /* @__PURE__ */ jsx57("span", { className: "text-xs font-medium", children: sortLabel }),
-                children: /* @__PURE__ */ jsx57(
-                  "button",
-                  {
-                    type: "button",
-                    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__ */ jsxs49("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
-                      /* @__PURE__ */ jsx57(
-                        "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__ */ jsx57(
-                        "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: sortButton
               }
-            )
+            ) : sortButton)
           ]
         }
       );
+      const filterText = gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : t("filterByColumn") !== "filterByColumn" ? t("filterByColumn").replace("{column}", columnLabel) : t("filterBy") !== "filterBy" ? `${t("filterBy")} ${columnLabel}` : void 0;
+      const filterLabel = filterText ?? columnLabel;
+      const hasFilterTooltip = Boolean(filterText);
+      const filterButton = /* @__PURE__ */ jsx57(
+        "button",
+        {
+          type: "button",
+          title: hasFilterTooltip ? filterLabel : void 0,
+          className: cn(
+            "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": filterLabel,
+          children: /* @__PURE__ */ jsx57(FilterIcon, { className: "w-4 h-4" })
+        }
+      );
       const filterContent = col.filter ? /* @__PURE__ */ jsx57(
         Popover,
         {
           getPortalContainer,
           placement: "bottom-start",
-          trigger: /* @__PURE__ */ jsx57("span", { className: "inline-flex", children: /* @__PURE__ */ jsx57(
+          trigger: /* @__PURE__ */ jsx57("span", { className: "inline-flex", children: hasFilterTooltip ? /* @__PURE__ */ jsx57(
             Tooltip,
             {
               placement: "top",
-              content: /* @__PURE__ */ jsx57("span", { className: "text-xs font-medium", children: gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}` }),
-              children: /* @__PURE__ */ jsx57(
-                "button",
-                {
-                  type: "button",
-                  title: gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
-                  className: cn(
-                    "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__ */ jsx57(FilterIcon, { className: "w-4 h-4" })
-                }
-              )
+              content: /* @__PURE__ */ jsx57("span", { className: "text-xs font-medium", children: filterLabel }),
+              children: filterButton
             }
-          ) }),
+          ) : filterButton }),
           children: /* @__PURE__ */ jsxs49("div", { className: "p-3 w-64 space-y-3", children: [
             /* @__PURE__ */ jsxs49("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsx57("div", { className: "text-sm font-medium", children: col.title }),
@@ -20480,36 +20495,42 @@ function DataTableHeader({
         ),
         children: [
           renderHeaderContent(col, isLeaf),
-          isLeaf && enableHeaderAutoFit && /* @__PURE__ */ jsx57(
-            Tooltip,
-            {
-              placement: "top",
-              content: /* @__PURE__ */ jsx57("span", { className: "text-xs font-medium", children: "Double click to auto-fit" }),
-              children: /* @__PURE__ */ jsx57(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": gi18n.autoFitColumn ? gi18n.autoFitColumn(String(col.title)) : `Auto fit ${String(col.title)}`,
-                  onClick: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                  },
-                  onDoubleClick: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onAutoFitColumn?.(col.key);
-                  },
-                  className: cn(
-                    "absolute inset-y-0 right-0 z-10 w-3",
-                    !isLastCell && "-mr-1",
-                    "cursor-col-resize select-none bg-transparent",
-                    "after:absolute after:inset-y-2 after:right-0.8 after:w-px after:bg-border/0 after:transition-colors",
-                    "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
-                  )
-                }
-              )
-            }
-          )
+          isLeaf && enableHeaderAutoFit && (() => {
+            const autoFitTooltipText = t("doubleClickToAutoFit") !== "doubleClickToAutoFit" ? t("doubleClickToAutoFit") : void 0;
+            const autoFitAriaLabel = gi18n.autoFitColumn ? gi18n.autoFitColumn(String(col.title)) : t("autoFitColumn") !== "autoFitColumn" ? t("autoFitColumn").replace("{column}", String(col.title)) : autoFitTooltipText ? `${autoFitTooltipText} ${String(col.title)}` : `Auto fit ${String(col.title)}`;
+            const autoFitButton = /* @__PURE__ */ jsx57(
+              "button",
+              {
+                type: "button",
+                "aria-label": autoFitAriaLabel,
+                title: autoFitTooltipText,
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                },
+                onDoubleClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onAutoFitColumn?.(col.key);
+                },
+                className: cn(
+                  "absolute inset-y-0 right-0 z-10 w-3",
+                  !isLastCell && "-mr-1",
+                  "cursor-col-resize select-none bg-transparent",
+                  "after:absolute after:inset-y-2 after:right-0.8 after:w-px after:bg-border/0 after:transition-colors",
+                  "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                )
+              }
+            );
+            return autoFitTooltipText ? /* @__PURE__ */ jsx57(
+              Tooltip,
+              {
+                placement: "top",
+                content: /* @__PURE__ */ jsx57("span", { className: "text-xs font-medium", children: autoFitTooltipText }),
+                children: autoFitButton
+              }
+            ) : autoFitButton;
+          })()
         ]
       },
       col.key
@@ -21380,6 +21401,7 @@ function DataTable({
   paginationRange,
   enableHeaderAutoFit = true,
   labels,
+  sortByLabel,
   columnColorGroups,
   borderMode,
   getPortalContainer,
@@ -21589,7 +21611,7 @@ function DataTable({
                       enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
-                      sortByLabel: labels?.sortBy,
+                      sortByLabel: sortByLabel ?? labels?.sortBy,
                       t,
                       columnColorGroups,
                       getPortalContainer