Ampliación de opciones

packages/rdx-ui/package.json

@@ -35,7 +35,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "^5.6.0",
-    "tailwindcss": "^4.1.5",
+    "tailwindcss": "^4.1.10",
     "tsup": "^8.4.0",
     "tw-animate-css": "^1.2.9",
     "typescript-plugin-css-modules": "^5.1.0",

packages/rdx-ui/src/components/datatable/data-table-view-options.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@repo/shadcn-ui/components";
-import type { Table } from "@tanstack/react-table";
+import type { Column, Table } from "@tanstack/react-table";
 import { Settings2 } from "lucide-react";
 
 import { useTranslation } from "../../locales/i18n.ts";
@@ -24,7 +24,7 @@ export function DataTableViewOptions<TData>({ table }: { table: Table<TData> })
           {t("components.datatable_view_options.view_button")}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[150px]">
+      <DropdownMenuContent align="end">
         <DropdownMenuLabel>
           {t("components.datatable_view_options.toggle_columns")}
         </DropdownMenuLabel>
@@ -36,11 +36,10 @@ export function DataTableViewOptions<TData>({ table }: { table: Table<TData> })
             return (
               <DropdownMenuCheckboxItem
                 checked={column.getIsVisible()}
-                className="capitalize"
                 key={column.id}
                 onCheckedChange={(value) => column.toggleVisibility(!!value)}
               >
-                {column.id}
+                {getColumnLabel(column)}
               </DropdownMenuCheckboxItem>
             );
           })}
@@ -48,3 +47,19 @@ export function DataTableViewOptions<TData>({ table }: { table: Table<TData> })
     </DropdownMenu>
   );
 }
+
+const getColumnLabel = <TData, TValue>(column: Column<TData, TValue>): string => {
+  let label = String(column.id);
+  const h = column.columnDef.header;
+
+  // header como string literal
+  if (typeof h === "string") label = h;
+
+  // header función → intentar obtener title si lo usas en tus componentes
+  if (typeof h === "function") {
+    // tu DataTableColumnHeader recibe `title` como prop → está en column.columnDef.meta
+    const meta = column.columnDef.meta as { title?: string } | undefined;
+    label = meta?.title ?? column.id;
+  }
+  return label;
+};

packages/rdx-ui/src/components/datatable/data-table.tsx

@@ -75,11 +75,12 @@ export interface DataTableProps<TData, TValue> {
   meta?: DataTableMeta<TData>;
 
   // Configuración
+  columnVisibility?: VisibilityState;
   readOnly?: boolean;
   enablePagination?: boolean;
   pageSize?: number;
   enableRowSelection?: boolean;
-  EditorComponent?: React.ComponentType<{ row: TData; index: number; onClose: () => void }>;
+  EditorComponent?: React.ComponentType<{ row?: TData; index: number; onClose: () => void }>;
 
   getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
 
@@ -99,6 +100,7 @@ export function DataTable<TData, TValue>({
   data,
   meta,
 
+  columnVisibility: inititalcolumnVisibility = {},
   readOnly = false,
   enablePagination = true,
   pageSize = 10,
@@ -119,7 +121,8 @@ export function DataTable<TData, TValue>({
 
   const [rowSelection, setRowSelection] = React.useState({});
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(inititalcolumnVisibility);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [colSizes, setColSizes] = React.useState<ColumnSizingState>({});
   const [editIndex, setEditIndex] = React.useState<number | null>(null);