From 5bacdcc2fcd681a5770cb72cf7db88c181ec4769 Mon Sep 17 00:00:00 2001 From: david Date: Thu, 13 Nov 2025 19:57:45 +0100 Subject: [PATCH] . --- .../datatable/data-table-view-options.tsx | 49 +++--- .../src/components/datatable/data-table.tsx | 144 +++++++++--------- .../src/components/layout/app-content.tsx | 8 +- .../src/components/layout/app-layout.tsx | 5 +- packages/rdx-ui/src/locales/en.json | 4 + packages/rdx-ui/src/locales/es.json | 4 + 6 files changed, 109 insertions(+), 105 deletions(-) diff --git a/packages/rdx-ui/src/components/datatable/data-table-view-options.tsx b/packages/rdx-ui/src/components/datatable/data-table-view-options.tsx index 4a4beb2f..ad1d135a 100644 --- a/packages/rdx-ui/src/components/datatable/data-table-view-options.tsx +++ b/packages/rdx-ui/src/components/datatable/data-table-view-options.tsx @@ -1,57 +1,50 @@ -"use client" - -import { Table } from "@tanstack/react-table" -import { Settings2 } from "lucide-react" +"use client"; import { - Button, DropdownMenu, + Button, + DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, - DropdownMenuTrigger -} from '@repo/shadcn-ui/components' + DropdownMenuTrigger, +} from "@repo/shadcn-ui/components"; +import type { Table } from "@tanstack/react-table"; +import { Settings2 } from "lucide-react"; -export function DataTableViewOptions({ - table, -}: { - table: Table -}) { +import { useTranslation } from "../../locales/i18n.ts"; + +export function DataTableViewOptions({ table }: { table: Table }) { + const { t } = useTranslation(); return ( - - Toggle columns + + {t("components.datatable_view_options.toggle_columns")} + {table .getAllColumns() - .filter( - (column) => - typeof column.accessorFn !== "undefined" && column.getCanHide() - ) + .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()) .map((column) => { return ( column.toggleVisibility(!!value)} > {column.id} - ) + ); })} - ) + ); } diff --git a/packages/rdx-ui/src/components/datatable/data-table.tsx b/packages/rdx-ui/src/components/datatable/data-table.tsx index 9e40b4e8..fdd84353 100644 --- a/packages/rdx-ui/src/components/datatable/data-table.tsx +++ b/packages/rdx-ui/src/components/datatable/data-table.tsx @@ -1,24 +1,4 @@ -"use client" - -import { - ColumnDef, - ColumnFiltersState, - ColumnSizingState, - Row, - SortingState, - Table, - TableMeta, - VisibilityState, - flexRender, - getCoreRowModel, - getFacetedRowModel, - getFacetedUniqueValues, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable -} from "@tanstack/react-table" -import * as React from "react" +"use client"; import { Button, @@ -34,16 +14,36 @@ import { TableFooter, TableHead, TableHeader, - TableRow -} from '@repo/shadcn-ui/components' -import { DataTablePagination } from './data-table-pagination.tsx' -import { DataTableToolbar } from "./data-table-toolbar.tsx" + TableRow, +} from "@repo/shadcn-ui/components"; +import { + type ColumnDef, + type ColumnFiltersState, + type ColumnSizingState, + type Row, + type SortingState, + type Table, + type TableMeta, + type VisibilityState, + flexRender, + getCoreRowModel, + getFacetedRowModel, + getFacetedUniqueValues, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import * as React from "react"; -import { useTranslation } from "../../locales/i18n.ts" +import { useTranslation } from "../../locales/i18n.ts"; + +import { DataTablePagination } from "./data-table-pagination.tsx"; +import { DataTableToolbar } from "./data-table-toolbar.tsx"; export type DataTableOps = { onAdd?: (table: Table) => void; -} +}; export type DataTableRowOps = { duplicate?(index: number, table: Table): void; @@ -61,25 +61,25 @@ export type DataTableBulkRowOps = { }; export type DataTableMeta = TableMeta & { - totalItems?: number; // para paginación server-side + totalItems?: number; // para paginación server-side readOnly?: boolean; - tableOps?: DataTableOps - rowOps?: DataTableRowOps - bulkOps?: DataTableBulkRowOps -} + tableOps?: DataTableOps; + rowOps?: DataTableRowOps; + bulkOps?: DataTableBulkRowOps; +}; export interface DataTableProps { - columns: ColumnDef[] - data: TData[] - meta?: DataTableMeta + columns: ColumnDef[]; + data: TData[]; + meta?: DataTableMeta; // Configuración - readOnly?: boolean - enablePagination?: boolean - pageSize?: number - enableRowSelection?: boolean - EditorComponent?: React.ComponentType<{ row: TData; index: number; onClose: () => void }> + readOnly?: boolean; + enablePagination?: boolean; + pageSize?: number; + enableRowSelection?: boolean; + EditorComponent?: React.ComponentType<{ row: TData; index: number; onClose: () => void }>; getRowId?: (originalRow: TData, index: number, parent?: Row) => string; @@ -155,9 +155,7 @@ export function DataTable({ // Propagar cambios al padre onPaginationChange: (updater) => { - const next = typeof updater === "function" - ? updater({ pageIndex, pageSize }) - : updater; + const next = typeof updater === "function" ? updater({ pageIndex, pageSize }) : updater; if (typeof next.pageIndex === "number") onPageChange?.(next.pageIndex); if (typeof next.pageSize === "number") onPageSizeChange?.(next.pageSize); @@ -175,17 +173,15 @@ export function DataTable({ getSortedRowModel: getSortedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), - }) + }); - const handleCloseEditor = React.useCallback(() => setEditIndex(null), []) + const handleCloseEditor = React.useCallback(() => setEditIndex(null), []); // Render principal return ( -
+
- +
@@ -199,8 +195,8 @@ export function DataTable({ const maxW = h.column.columnDef.maxSize; return ( ({ {table.getRowModel().rows.length ? ( table.getRowModel().rows.map((row, rowIndex) => ( { - if (e.key === "Enter" || e.key === " ") onRowClick?.(row.original, rowIndex, e as any); - }} + data-state={row.getIsSelected() && "selected"} + key={row.id} onClick={(e) => onRowClick?.(row.original, rowIndex, e)} onDoubleClick={ - !readOnly && !onRowClick ? () => setEditIndex(rowIndex) : undefined - } > + readOnly || onRowClick ? undefined : () => setEditIndex(rowIndex) + } + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") + onRowClick?.(row.original, rowIndex, e as any); + }} + role="button" + tabIndex={0} + > {row.getVisibleCells().map((cell) => { const w = cell.column.getSize(); const minW = cell.column.columnDef.minSize; const maxW = cell.column.columnDef.maxSize; return ( ({ )) ) : ( - + {t("components.datatable.empty")} @@ -270,18 +271,21 @@ export function DataTable({ - + - ) - } - + + )}
{/* Editor modal */} {EditorComponent && editIndex !== null && ( - + {t("components.datatable.editor.title")} @@ -290,14 +294,14 @@ export function DataTable({
- @@ -306,5 +310,5 @@ export function DataTable({ )}
- ) -} \ No newline at end of file + ); +} diff --git a/packages/rdx-ui/src/components/layout/app-content.tsx b/packages/rdx-ui/src/components/layout/app-content.tsx index ff0f5098..3b43adf6 100644 --- a/packages/rdx-ui/src/components/layout/app-content.tsx +++ b/packages/rdx-ui/src/components/layout/app-content.tsx @@ -1,5 +1,5 @@ import { cn } from "@repo/shadcn-ui/lib/utils"; -import { PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react"; export const AppContent = ({ className, @@ -8,10 +8,8 @@ export const AppContent = ({ }: PropsWithChildren<{ className?: string }>) => { return (
{children} diff --git a/packages/rdx-ui/src/components/layout/app-layout.tsx b/packages/rdx-ui/src/components/layout/app-layout.tsx index 5f36be74..52996a42 100644 --- a/packages/rdx-ui/src/components/layout/app-layout.tsx +++ b/packages/rdx-ui/src/components/layout/app-layout.tsx @@ -1,5 +1,6 @@ import { SidebarInset, SidebarProvider } from "@repo/shadcn-ui/components"; import { Outlet } from "react-router"; + import { AppSidebar } from "./app-sidebar.tsx"; export const AppLayout = () => { @@ -12,9 +13,9 @@ export const AppLayout = () => { } as React.CSSProperties } > - + {/* Aquí está el MAIN */} - + diff --git a/packages/rdx-ui/src/locales/en.json b/packages/rdx-ui/src/locales/en.json index 00f9458a..80151ee5 100644 --- a/packages/rdx-ui/src/locales/en.json +++ b/packages/rdx-ui/src/locales/en.json @@ -35,6 +35,10 @@ "rows_selected": "{{count}} of {{total}} selected rows" } }, + "datatable_view_options": { + "view_button": "View", + "toggle_columns": "Toggle columns" + }, "loading_indicator": { "title": "Loading...", "subtitle": "This may take a few seconds. Please do not close this page." diff --git a/packages/rdx-ui/src/locales/es.json b/packages/rdx-ui/src/locales/es.json index f47043a9..46a6f013 100644 --- a/packages/rdx-ui/src/locales/es.json +++ b/packages/rdx-ui/src/locales/es.json @@ -38,6 +38,10 @@ "rows_selected": "{{count}} de {{total}} filas seleccionadas" } }, + "datatable_view_options": { + "view_button": "Ver", + "toggle_columns": "Alternar columnas" + }, "loading_indicator": { "title": "Cargando...", "subtitle": "Esto puede tardar unos segundos. Por favor, no cierre esta página."