luxtable 0.3.3 → 0.3.5

package/dist/index.js

@@ -90,17 +90,17 @@ __export(index_exports, {
   createColumnsFromData: () => createColumnsFromData,
   createCopyableCell: () => createCopyableCell,
   defaultStatusColors: () => defaultStatusColors,
-  flexRender: () => import_react_table3.flexRender,
-  getCoreRowModel: () => import_react_table3.getCoreRowModel,
-  getFilteredRowModel: () => import_react_table3.getFilteredRowModel,
-  getPaginationRowModel: () => import_react_table3.getPaginationRowModel,
-  getSortedRowModel: () => import_react_table3.getSortedRowModel
+  flexRender: () => import_react_table4.flexRender,
+  getCoreRowModel: () => import_react_table4.getCoreRowModel,
+  getFilteredRowModel: () => import_react_table4.getFilteredRowModel,
+  getPaginationRowModel: () => import_react_table4.getPaginationRowModel,
+  getSortedRowModel: () => import_react_table4.getSortedRowModel
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/lux-table/lux-table.tsx
 var React7 = __toESM(require("react"));
-var import_react_table = require("@tanstack/react-table");
+var import_react_table2 = require("@tanstack/react-table");
 var import_lucide_react7 = require("lucide-react");
 
 // src/lib/utils.ts
@@ -918,15 +918,51 @@ function TableToolbar({
   );
 }
 
+// src/components/lux-table/sortable-header.tsx
+var import_react_table = require("@tanstack/react-table");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SortableHeader({
+  header,
+  showSortIndex = false
+}) {
+  const column = header.column;
+  const canSort = column.getCanSort();
+  const isSorted = column.getIsSorted();
+  const sortIndex = column.getSortIndex();
+  const headerContent = header.isPlaceholder ? null : (0, import_react_table.flexRender)(column.columnDef.header, header.getContext());
+  if (!canSort) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: headerContent });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex items-center gap-1.5 w-full text-left font-medium group",
+        "hover:text-slate-900 dark:hover:text-slate-100",
+        "transition-colors duration-150",
+        "-ml-2 px-2 py-1 rounded-md",
+        "hover:bg-slate-100 dark:hover:bg-slate-800",
+        isSorted && "text-blue-600 dark:text-blue-400"
+      ),
+      onClick: header.column.getToggleSortingHandler(),
+      children: [
+        headerContent,
+        showSortIndex && isSorted && sortIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ml-0.5 text-[10px] font-bold text-blue-500 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/50 rounded-full w-4 h-4 flex items-center justify-center", children: sortIndex + 1 })
+      ]
+    }
+  );
+}
+
 // src/components/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -935,12 +971,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "grid place-content-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.CheckIcon, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react6.CheckIcon, { className: "size-3.5" })
         }
       )
     }
@@ -948,11 +984,11 @@ function Checkbox({
 }
 
 // src/components/lux-table/lux-table.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function createSelectionColumn() {
   return {
     id: "__selection__",
-    header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Checkbox,
       {
         checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
@@ -960,7 +996,7 @@ function createSelectionColumn() {
         "aria-label": "Select all rows"
       }
     ),
-    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Checkbox,
       {
         checked: row.getIsSelected(),
@@ -1016,9 +1052,17 @@ function LuxTable({
     },
     [isControlledRowSelection, onRowSelectionChange, rowSelection]
   );
-  const table = (0, import_react_table.useReactTable)({
+  const enableSorting = options?.sorting !== false;
+  const enableMultiSort = options?.multiSort !== false;
+  const table = (0, import_react_table2.useReactTable)({
     data,
     columns: tableColumns,
+    enableSorting,
+    enableMultiSort,
+    // Shift+Click for multi-sort (default behavior)
+    isMultiSortEvent: (e) => e.shiftKey,
+    // Max columns for multi-sort (undefined = unlimited)
+    maxMultiSortColCount: options?.maxMultiSortColCount,
     state: {
       sorting,
       columnFilters,
@@ -1044,11 +1088,11 @@ function LuxTable({
       }
       return String(index);
     }),
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
-    getPaginationRowModel: options?.pagination ? (0, import_react_table.getPaginationRowModel)() : void 0,
-    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
-    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
-    getFacetedUniqueValues: (0, import_react_table.getFacetedUniqueValues)(),
+    getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
+    getPaginationRowModel: options?.pagination ? (0, import_react_table2.getPaginationRowModel)() : void 0,
+    getSortedRowModel: (0, import_react_table2.getSortedRowModel)(),
+    getFilteredRowModel: (0, import_react_table2.getFilteredRowModel)(),
+    getFacetedUniqueValues: (0, import_react_table2.getFacetedUniqueValues)(),
     initialState: {
       pagination: {
         pageSize: options?.pageSize ?? 10
@@ -1065,8 +1109,8 @@ function LuxTable({
   const showToolbar = options?.showToolbar ?? false;
   const showGlobalSearch = options?.showGlobalSearch ?? true;
   const showColumnVisibility = options?.showColumnVisibility ?? true;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("w-full space-y-4", className), children: [
-    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("w-full space-y-4", className), children: [
+    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       TableToolbar,
       {
         table,
@@ -1077,18 +1121,18 @@ function LuxTable({
         showColumnVisibility
       }
     ),
-    enableRowSelection && Object.keys(rowSelection).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 px-4 py-2 text-sm bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 rounded-lg border border-blue-200 dark:border-blue-800", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.CheckCircle2, { className: "w-4 h-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: Object.keys(rowSelection).length }),
+    enableRowSelection && Object.keys(rowSelection).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 px-4 py-2 text-sm bg-blue-50 dark:bg-blue-950/50 text-blue-700 dark:text-blue-300 rounded-lg border border-blue-200 dark:border-blue-800", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.CheckCircle2, { className: "w-4 h-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("strong", { children: Object.keys(rowSelection).length }),
         " rows selected",
-        table.getFilteredRowModel().rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-blue-500 dark:text-blue-400", children: [
+        table.getFilteredRowModel().rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-blue-500 dark:text-blue-400", children: [
           " / ",
           table.getFilteredRowModel().rows.length,
           " total"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -1098,28 +1142,34 @@ function LuxTable({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TableHeader, { children: [
-        table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TableHeader, { children: [
+        table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
           const isSelectionColumn = header.id === "__selection__";
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             TableHead,
             {
               style: isSelectionColumn ? { width: 40, padding: "0 12px" } : void 0,
-              children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+              children: header.isPlaceholder ? null : isSelectionColumn ? (0, import_react_table2.flexRender)(
                 header.column.columnDef.header,
                 header.getContext()
+              ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                SortableHeader,
+                {
+                  header,
+                  showSortIndex: enableMultiSort && sorting.length > 1
+                }
               )
             },
             header.id
           );
         }) }, headerGroup.id)),
-        filteringVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableRow, { className: "bg-slate-50/50 dark:bg-slate-900/50", children: table.getHeaderGroups()[0]?.headers.map((header) => {
+        filteringVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, { className: "bg-slate-50/50 dark:bg-slate-900/50", children: table.getHeaderGroups()[0]?.headers.map((header) => {
           const isSelectionColumn = header.id === "__selection__";
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableHead, { className: "py-2", children: !isSelectionColumn && header.column.getCanFilter() ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnFilter, { column: header.column }) : null }, `filter-${header.id}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHead, { className: "py-2", children: !isSelectionColumn && header.column.getCanFilter() ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ColumnFilter, { column: header.column }) : null }, `filter-${header.id}`);
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         TableRow,
         {
           "data-state": row.getIsSelected() && "selected",
@@ -1136,82 +1186,96 @@ function LuxTable({
           } : void 0,
           children: row.getVisibleCells().map((cell) => {
             const isSelectionColumn = cell.column.id === "__selection__";
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               TableCell,
               {
                 style: isSelectionColumn ? { width: 40, padding: "0 12px" } : void 0,
                 onClick: isSelectionColumn ? (e) => e.stopPropagation() : void 0,
-                children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
               },
               cell.id
             );
           })
         },
         row.id
-      )) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableCell, { colSpan: visibleColumnCount, className: "h-24 text-center", children: "No results." }) }) })
+      )) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableCell, { colSpan: visibleColumnCount, className: "h-24 text-center", children: "No results." }) }) })
     ] }) }),
-    options?.pagination && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TablePagination, { table })
+    options?.pagination && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TablePagination, { table })
   ] });
 }
 
 // src/components/lux-table/column-header.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function LuxDataTableColumnHeader({
   column,
   title,
   className
 }) {
   const isSorted = column.getIsSorted();
-  if (!column.getCanSort()) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("flex items-center justify-between", className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-medium text-muted-foreground", children: title }) });
+  const canSort = column.getCanSort();
+  const SortIndicator = () => {
+    if (isSorted === "desc") {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ArrowDown, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" });
+    }
+    if (isSorted === "asc") {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ArrowUp, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" });
+    }
+    if (canSort) {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ArrowUpDown, { className: "h-4 w-4 text-slate-400 dark:text-slate-500" });
+    }
+    return null;
+  };
+  if (!canSort) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("text-sm font-medium", className), children: title });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex items-center justify-between gap-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      Button,
-      {
-        variant: "ghost",
-        size: "sm",
-        className: "-ml-3 h-8 hover:bg-accent",
-        onClick: () => column.toggleSorting(isSorted === "asc"),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title }),
-          isSorted === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ArrowDown, { className: "ml-1.5 h-4 w-4 text-primary" }) : isSorted === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ArrowUp, { className: "ml-1.5 h-4 w-4 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ChevronsUpDown, { className: "ml-1.5 h-4 w-4 text-muted-foreground/50" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SortIndicator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm font-medium", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         Button,
         {
           variant: "ghost",
           size: "icon",
-          className: "h-6 w-6 opacity-0 group-hover:opacity-100 hover:opacity-100 focus:opacity-100 data-[state=open]:opacity-100 transition-opacity",
+          className: "h-6 w-6 ml-auto opacity-0 group-hover:opacity-100 hover:opacity-100 focus:opacity-100 data-[state=open]:opacity-100 transition-opacity",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.MoreVertical, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Column actions" })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.MoreVertical, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: "Column actions" })
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuContent, { align: "end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ArrowUp, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleSorting(false);
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ArrowUp, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
           "Sort Ascending"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ArrowDown, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleSorting(true);
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ArrowDown, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
           "Sort Descending"
         ] }),
-        isSorted && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuItem, { onClick: () => column.clearSorting(), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.X, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+        isSorted && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuItem, { onClick: (e) => {
+            e.stopPropagation();
+            column.clearSorting();
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.X, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
             "Clear sorting"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.EyeOff, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DropdownMenuItem, { onClick: (e) => {
+          e.stopPropagation();
+          column.toggleVisibility(false);
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.EyeOff, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }),
           "Hide column"
         ] })
       ] })
@@ -1220,7 +1284,7 @@ function LuxDataTableColumnHeader({
 }
 
 // src/components/cell-renderers/status-cell.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var defaultStatusColors = {
   Active: {
     bg: "bg-green-100",
@@ -1257,14 +1321,14 @@ function StatusCell({ value, colors, className }) {
   const mergedColors = { ...defaultStatusColors, ...colors };
   const colorConfig = mergedColors[value];
   if (!colorConfig) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 ${className || ""}`, children: value });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 ${className || ""}`, children: value });
   }
   const { bg, text, darkBg, darkText } = colorConfig;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${bg} ${text} ${darkBg || ""} ${darkText || ""} ${className || ""}`, children: value });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${bg} ${text} ${darkBg || ""} ${darkText || ""} ${className || ""}`, children: value });
 }
 
 // src/components/cell-renderers/progress-cell.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ProgressCell({
   value,
   barColor = "bg-blue-600",
@@ -1273,15 +1337,15 @@ function ProgressCell({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `flex items-center gap-2 ${className || ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `w-full rounded-full h-2.5 ${bgColor}`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `flex items-center gap-2 ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `w-full rounded-full h-2.5 ${bgColor}`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         className: `${barColor} h-2.5 rounded-full transition-all`,
         style: { width: `${clampedValue}%` }
       }
     ) }),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-gray-500 dark:text-gray-400 w-8", children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-xs text-gray-500 dark:text-gray-400 w-8", children: [
       value,
       "%"
     ] })
@@ -1289,7 +1353,7 @@ function ProgressCell({
 }
 
 // src/components/cell-renderers/boolean-cell.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function BooleanCell({
   value,
   trueLabel = "Yes",
@@ -1297,15 +1361,15 @@ function BooleanCell({
   trueColor = "text-green-600 dark:text-green-400",
   falseColor = "text-red-600 dark:text-red-400"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `font-medium ${value ? trueColor : falseColor}`, children: value ? trueLabel : falseLabel });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `font-medium ${value ? trueColor : falseColor}`, children: value ? trueLabel : falseLabel });
 }
 
 // src/components/cell-renderers/date-cell.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DateCell({ value, format = "short", locale = "en-US" }) {
   const date = typeof value === "string" ? new Date(value) : value;
   if (isNaN(date.getTime())) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-gray-400", children: "-" });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-gray-400", children: "-" });
   }
   let formatted;
   switch (format) {
@@ -1329,23 +1393,23 @@ function DateCell({ value, format = "short", locale = "en-US" }) {
     default:
       formatted = date.toLocaleDateString(locale);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: formatted });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: formatted });
 }
 
 // src/components/cell-renderers/currency-cell.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CurrencyCell({ value, currency = "TRY", locale = "tr-TR" }) {
   const formatted = new Intl.NumberFormat(locale, {
     style: "currency",
     currency
   }).format(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-medium", children: formatted });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-medium", children: formatted });
 }
 
 // src/components/cell-renderers/copyable-cell.tsx
 var React8 = __toESM(require("react"));
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CopyableCell({
   value,
   feedbackDuration = 2e3,
@@ -1370,7 +1434,7 @@ function CopyableCell({
       console.error("Copy error:", err);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       type: "button",
@@ -1389,8 +1453,8 @@ function CopyableCell({
                 ${className || ""}
             `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "select-none", children: value }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "select-none", children: value }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "span",
           {
             className: `
@@ -1398,7 +1462,7 @@ function CopyableCell({
                     transition-all duration-200
                     ${alwaysShowIcon || isHovered || copied ? "opacity-100" : "opacity-0"}
                 `,
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.Copy, { className: "h-3.5 w-3.5 text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300" })
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Copy, { className: "h-3.5 w-3.5 text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300" })
           }
         )
       ]
@@ -1406,18 +1470,18 @@ function CopyableCell({
   );
 }
 function createCopyableCell(value, options) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CopyableCell, { value, ...options });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CopyableCell, { value, ...options });
 }
 
 // src/components/ui/label.tsx
 var React9 = __toESM(require("react"));
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority2.cva)(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label3 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var Label3 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -1430,11 +1494,11 @@ Label3.displayName = LabelPrimitive.Root.displayName;
 // src/components/ui/popover.tsx
 var React10 = __toESM(require("react"));
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1452,9 +1516,9 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 // src/components/ui/separator.tsx
 var React11 = __toESM(require("react"));
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Separator3 = React11.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -1472,13 +1536,13 @@ var Separator3 = React11.forwardRef(
 Separator3.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/lib/column-helper.tsx
-var import_react_table2 = require("@tanstack/react-table");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react_table3 = require("@tanstack/react-table");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var toTitleCase = (str) => {
   return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 };
 function createColumnHelper() {
-  const helper = (0, import_react_table2.createColumnHelper)();
+  const helper = (0, import_react_table3.createColumnHelper)();
   return {
     /**
      * Simple accessor - if cell is not provided, value is rendered automatically
@@ -1492,7 +1556,7 @@ function createColumnHelper() {
         // Pass meta information (filterVariant etc.)
         meta: column?.meta,
         // Use LuxDataTableColumnHeader if header is string or undefined
-        header: typeof headerContent === "function" ? headerContent : ({ column: colParam }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        header: typeof headerContent === "function" ? headerContent : ({ column: colParam }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           LuxDataTableColumnHeader,
           {
             column: colParam,
@@ -1536,7 +1600,7 @@ function createColumnHelper() {
     auto: (columns) => {
       return columns.map((col) => {
         return helper.accessor(col.accessor, {
-          header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuxDataTableColumnHeader, { column, title: col.header }),
+          header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LuxDataTableColumnHeader, { column, title: col.header }),
           cell: col.cell || ((info) => {
             const value = info.getValue();
             if (value === null || value === void 0) return "-";
@@ -1549,7 +1613,7 @@ function createColumnHelper() {
 }
 function createColumnsFromData(data, options) {
   if (!data || data.length === 0) return [];
-  const helper = (0, import_react_table2.createColumnHelper)();
+  const helper = (0, import_react_table3.createColumnHelper)();
   const firstRow = data[0];
   let keys = Object.keys(firstRow);
   if (options?.include) {
@@ -1562,7 +1626,7 @@ function createColumnsFromData(data, options) {
     const headerText = options?.headers?.[key] || toTitleCase(key);
     const cellRenderer = options?.cells?.[key];
     return helper.accessor(key, {
-      header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuxDataTableColumnHeader, { column, title: headerText }),
+      header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LuxDataTableColumnHeader, { column, title: headerText }),
       cell: cellRenderer || ((info) => {
         const value = info.getValue();
         if (value === null || value === void 0) return "-";
@@ -1573,7 +1637,7 @@ function createColumnsFromData(data, options) {
 }
 
 // src/index.ts
-var import_react_table3 = require("@tanstack/react-table");
+var import_react_table4 = require("@tanstack/react-table");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BooleanCell,