import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { Card, DataTable, Button, Badge } from "../index";
const DataTableDocs = () => {
    const [isLoading, setIsLoading] = useState(false);
    const allProducts = [
        {
            id: 1,
            name: "Laptop Dell XPS 15",
            price: 1299.1,
            stock: 45,
            category: "Electrónica",
            createdAt: "2024-01-15",
        },
        {
            id: 2,
            name: "Mouse Logitech MX Master",
            price: 89.99,
            stock: 1200,
            category: "Accesorios",
            createdAt: "2024-02-20",
        },
        {
            id: 3,
            name: "Teclado Mecánico RGB",
            price: 149,
            stock: 0,
            category: "Accesorios",
            createdAt: "2024-03-10",
        },
        {
            id: 4,
            name: "Monitor 4K 27 pulgadas",
            price: 599,
            stock: 15,
            category: "Electrónica",
            createdAt: "2024-01-05",
        },
        {
            id: 5,
            name: "Auriculares Sony WH-1000XM5",
            price: 399.1,
            stock: 30,
            category: "Audio",
            createdAt: "2024-02-12",
        },
        {
            id: 6,
            name: "Webcam Logitech C920",
            price: 79.99,
            stock: 85,
            category: "Accesorios",
            createdAt: "2024-03-22",
        },
        {
            id: 7,
            name: "SSD Samsung 1TB",
            price: 129.99,
            stock: 200,
            category: "Almacenamiento",
            createdAt: "2024-01-28",
        },
        {
            id: 8,
            name: "Tablet iPad Pro 12.9",
            price: 1099.99,
            stock: 12,
            category: "Electrónica",
            createdAt: "2024-02-05",
        },
        {
            id: 9,
            name: "Cable USB-C Premium",
            price: 24.99,
            stock: 500,
            category: "Accesorios",
            createdAt: "2024-03-15",
        },
        {
            id: 10,
            name: "Router WiFi 6 ASUS",
            price: 199.99,
            stock: 25,
            category: "Redes",
            createdAt: "2024-01-20",
        },
        {
            id: 11,
            name: "Micrófono Blue Yeti",
            price: 129.99,
            stock: 40,
            category: "Audio",
            createdAt: "2024-02-18",
        },
        {
            id: 12,
            name: "Disco Duro Externo 2TB",
            price: 89.99,
            stock: 60,
            category: "Almacenamiento",
            createdAt: "2024-03-08",
        },
    ];
    // Solo 4 productos para los ejemplos normales
    const products = allProducts.slice(0, 4);
    const basicColumns = [
        {
            header: "ID",
            value: "id",
            align: "center",
            width: "80px",
            type: "numeric",
        },
        {
            header: "Nombre",
            value: "name",
            align: "left",
        },
        {
            header: "Categoría",
            value: "category",
            align: "left",
        },
    ];
    const fullColumns = [
        {
            header: "ID",
            value: "id",
            align: "center",
            width: "80px",
            type: "numeric",
            footer: `Total`,
        },
        {
            header: "Nombre del Producto",
            value: "name",
            align: "left",
        },
        {
            header: "Precio",
            value: "price",
            align: "right",
            type: "currency",
            footer: `${allProducts
                .reduce((sum, p) => sum + p.price, 0)
                .toLocaleString("es-AR", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
            })}`,
        },
        {
            header: "Stock",
            value: "stock",
            align: "center",
            type: "numeric",
            footer: `${allProducts
                .reduce((sum, p) => sum + p.stock, 0)
                .toLocaleString("es-AR")}`,
        },
        {
            header: "Categoría",
            value: "category",
            align: "left",
        },
        {
            header: "Fecha de Creación",
            value: "createdAt",
            align: "center",
            type: "date",
        },
    ];
    const customColumns = [
        {
            header: "ID",
            value: "id",
            align: "center",
            width: "80px",
            type: "numeric",
        },
        {
            header: "Nombre",
            value: "name",
            align: "left",
        },
        {
            header: "Precio",
            value: "price",
            align: "right",
            type: "currency",
            tooltip: (row) => `Precio original: ${row.price}€`,
        },
        {
            header: "Stock",
            value: (row) => (_jsx(Badge, { variant: row.stock > 0 ? "success" : "danger", icon: row.stock > 0 ? "fa-check-circle" : "fa-times-circle", children: row.stock > 0 ? `${row.stock} unidades` : "Sin stock" })),
            align: "center",
        },
        {
            header: "Acciones",
            value: "",
            align: "center",
            actions: (row) => [
                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-edit", onClick: () => console.log("Editar", row), children: "Editar" }, "edit"),
                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-trash", onClick: () => console.log("Eliminar", row), children: "Eliminar" }, "delete"),
            ],
        },
        {
            header: "Ver",
            value: "",
            align: "center",
            actions: (row) => [
                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-search", onClick: () => console.log("Ver detalles", row) }, "view"),
            ],
        },
    ];
    const headerCustomColumns = [
        {
            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-hashtag" }), _jsx("span", { children: "ID" })] })),
            value: "id",
            align: "center",
            width: "80px",
            type: "numeric",
        },
        {
            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-box" }), _jsx("span", { children: "Producto" })] })),
            value: "name",
            align: "left",
        },
        {
            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-euro-sign" }), _jsx("span", { children: "Precio" })] })),
            value: "price",
            align: "right",
            type: "currency",
            headerActions: () => [
                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-download", onClick: () => console.log("Exportar precios"), children: "Exportar" }, "export"),
                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-filter", onClick: () => console.log("Filtrar precios"), children: "Filtrar" }, "filter"),
            ],
        },
    ];
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estado de carga (Loading)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "isLoading" }), " y ", _jsx("code", { children: "loadingRows" }), " ", "puedes mostrar un estado de carga con skeleton loaders. Cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ", la tabla muestra las columnas pero reemplaza las filas de datos con filas skeleton que simulan el contenido. El n\u00FAmero de filas skeleton se controla con", " ", _jsx("code", { children: "loadingRows" }), " (por defecto 5)."] }), _jsx("div", { className: "mb-4", children: _jsx(Button, { variant: "primary", icon: "fa-sync-alt", onClick: () => {
                                        setIsLoading(true);
                                        setTimeout(() => setIsLoading(false), 3000);
                                    }, disabled: isLoading, children: isLoading ? "Cargando..." : "Simular carga" }) }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, isLoading: isLoading, loadingRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos condicionales (rowClassName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "rowClassName" }), " puedes aplicar clases CSS a filas espec\u00EDficas bas\u00E1ndote en sus datos. En este ejemplo, los productos sin stock se resaltan con un fondo rojo suave."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, rowClassName: (row) => row.stock === 0 ? "bg-red-50 dark:bg-red-900/20" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos de Header y Footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "headerClassName" }), " y", " ", _jsx("code", { children: "footerClassName" }), " puedes aplicar clases CSS directamente a las filas del header y footer. En este ejemplo, se aplica un fondo azul suave al header y un borde superior m\u00E1s grueso al footer."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, headerClassName: "bg-red-50/50 border-b-2 border-primary", footerClassName: "border-t-2 border-primary bg-green-500" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos de Celdas (Cell ClassNames)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Adem\u00E1s de las filas, puedes aplicar clases espec\u00EDficamente a las celdas del header, footer y body. El ", _jsx("code", { children: "cellClassName" }), " ", "del body puede ser un string o una funci\u00F3n que recibe la fila y la columna para un control total."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, headerCellClassName: "text-primary italic uppercase tracking-wider", cellClassName: (_row, column) => column.value === "name" ? "font-bold text-blue-600" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla Compacta" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "compact" }), " puedes reducir significativamente el espacio que ocupa la tabla. Este modo elimina los paddings superiores y reduce los horizontales, ideal para mostrar grandes cantidades de datos en espacios reducidos."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, compact: true }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] }), _jsxs("li", { children: [_jsx("strong", { children: "Estilos condicionales:" }), " Usa", " ", _jsx("code", { children: "rowClassName" }), " para aplicar clases CSS a filas espec\u00EDficas seg\u00FAn sus datos"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsxs("td", { className: "p-3 text-sm", children: ["Estado de carga. Cuando es ", _jsx("code", { children: "true" }), ", muestra filas skeleton en lugar de los datos. Por defecto es", " ", _jsx("code", { children: "false" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "loadingRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsxs("td", { className: "p-3 text-sm", children: ["N\u00FAmero de filas skeleton a mostrar cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "5" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rowClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n opcional para aplicar clases CSS a una fila espec\u00EDfica basada en sus datos" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para la fila del header (tr)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "footerClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para la fila del footer (tr)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerCellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para todas las celdas del header (th)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "footerCellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para todas las celdas del footer (td)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "cellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ((row: T, col: Col) => string)" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS para celdas del body. Puede ser una funci\u00F3n para l\u00F3gica condicional por celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "compact" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "Si es true, reduce el padding de todas las celdas para una visualizaci\u00F3n m\u00E1s densa. Por defecto es false." })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
};
export default DataTableDocs;
