ywana-core8 0.1.83 → 0.1.85

package/src/html/table.example.js

@@ -0,0 +1,1012 @@
+import React, { useState, useCallback } from 'react'
+import { DataTable } from './table'
+import { Button } from './button'
+import { Icon } from './icon'
+import { ActionsCell } from './actions-cell'
+import { FORMATS } from '../domain/ContentType'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
+
+/**
+ * DataTable Examples - Original table.js component
+ * 
+ * Este archivo muestra ejemplos del componente DataTable original (table.js)
+ * para comparar con DataTable2 y demostrar compatibilidad.
+ */
+export const TableExamples = () => {
+    const [isLoading, setIsLoading] = useState(false)
+
+    // Datos de ejemplo
+    const [rows, setRows] = useState([
+        { 
+            id: 1, 
+            checked: false, 
+            name: "John Smith", 
+            email: "john.smith@example.com",
+            department: "Engineering",
+            salary: 75000,
+            status: "active",
+            description: "Senior Software Engineer", 
+            color: "#4CAF50", 
+            date: "2023-01-15",
+            num: 25.50,
+            category: "A"
+        },
+        { 
+            id: 2, 
+            checked: false, 
+            name: "Ann Martin", 
+            email: "ann.martin@example.com",
+            department: "Design",
+            salary: 68000,
+            status: "active",
+            description: "UX Designer", 
+            color: "#2196F3", 
+            date: "2023-02-20",
+            num: 1234.75,
+            category: "B"
+        },
+        { 
+            id: 3, 
+            checked: false, 
+            name: "Zack McCracken", 
+            email: "zack.mccracken@example.com",
+            department: "Marketing",
+            salary: 62000,
+            status: "inactive",
+            description: "Marketing Specialist", 
+            color: "#FF9800", 
+            date: "2023-03-10",
+            num: 567.25,
+            category: "C"
+        },
+        { 
+            id: 4, 
+            checked: false, 
+            name: "Martin Freeman", 
+            email: "martin.freeman@example.com",
+            department: "Engineering",
+            salary: 82000,
+            status: "active",
+            description: "Tech Lead", 
+            color: "#9C27B0", 
+            date: "2023-04-05",
+            num: 890.10,
+            category: "A"
+        },
+        { 
+            id: 5, 
+            checked: false, 
+            name: "Sarah Connor", 
+            email: "sarah.connor@example.com",
+            department: "Operations",
+            salary: 71000,
+            status: "active",
+            description: "Operations Manager", 
+            color: "#F44336", 
+            date: "2023-05-12",
+            num: 365.90,
+            category: "B"
+        }
+    ])
+
+    // Columnas básicas
+    const basicColumns = [
+        { id: "index", label: "#", type: "INDEX" },
+        { id: "checked", onChange: handleCheck },
+        { id: "name", label: "Name", type: "String", sortable: true, filterable: true, resizable: true },
+        { id: "email", label: "Email", type: "String", sortable: true, filterable: true },
+        { id: "department", label: "Department", type: "String", sortable: true, filterable: true },
+        { id: "status", label: "Status", type: "String", sortable: true }
+    ]
+
+    // Columnas con formatos
+    const formattedColumns = [
+        { id: "index", label: "#", type: "INDEX" },
+        { id: "name", label: "Name", type: "String", sortable: true },
+        { id: "salary", label: "Salary", type: "Number", format: FORMATS.CURRENCY, sortable: true },
+        { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
+        { id: "date", label: "Date", type: "String", format: FORMATS.DATE, sortable: true },
+        { id: "num", label: "Number", type: "Number", maxDecimals: 2, sortable: true }
+    ]
+
+    // Columnas editables
+    const editableColumns = [
+        { id: "index", label: "#", type: "INDEX" },
+        { id: "checked", onChange: handleCheck },
+        { id: "name", label: "Name", type: "String", sortable: true, onChange: handleCellEdit },
+        { id: "email", label: "Email", type: "String", sortable: true, onChange: handleCellEdit },
+        { id: "department", label: "Department", type: "String", sortable: true, onChange: handleCellEdit, options: [
+            { label: "Engineering", value: "Engineering" },
+            { label: "Design", value: "Design" },
+            { label: "Marketing", value: "Marketing" },
+            { label: "Operations", value: "Operations" }
+        ]},
+        { id: "status", label: "Status", type: "String", sortable: true, onChange: handleCellEdit, options: [
+            { label: "Active", value: "active" },
+            { label: "Inactive", value: "inactive" }
+        ]}
+    ]
+
+    // Columnas con filtros
+    const filterableColumns = [
+        { id: "index", label: "#", type: "INDEX" },
+        { id: "name", label: "Name", type: "String", sortable: true, filterable: true },
+        { id: "department", label: "Department", type: "String", sortable: true, filterable: true, options: [
+            { label: "Engineering", value: "Engineering" },
+            { label: "Design", value: "Design" },
+            { label: "Marketing", value: "Marketing" },
+            { label: "Operations", value: "Operations" }
+        ]},
+        { id: "status", label: "Status", type: "String", sortable: true, filterable: true, options: [
+            { label: "Active", value: "active" },
+            { label: "Inactive", value: "inactive" }
+        ]},
+        { id: "salary", label: "Salary", type: "Number", format: FORMATS.CURRENCY, sortable: true, filterable: true }
+    ]
+
+    // Columnas con acciones simples
+    const simpleActionsColumns = [
+        { id: "index", label: "#", type: "INDEX" },
+        { id: "name", label: "Name", type: "String", sortable: true },
+        { id: "email", label: "Email", type: "String", sortable: true },
+        { id: "department", label: "Department", type: "String", sortable: true },
+        { id: "actions", label: "Actions", type: "String" }
+    ]
+
+    // Columnas con ActionsCell
+    const actionsCellColumns = [
+        { id: "index", label: "#", type: "INDEX" },
+        { id: "name", label: "Name", type: "String", sortable: true },
+        { id: "email", label: "Email", type: "String", sortable: true },
+        { id: "department", label: "Department", type: "String", sortable: true },
+        { id: "status", label: "Status", type: "String", sortable: true },
+        { id: "actions", label: "Actions", type: "String" }
+    ]
+
+    // Event handlers
+    function handleRowSelection(row, event) {
+        console.log('Row selected:', row)
+        const next = rows.map(r => r.id === row.id ? { ...r, selected: !r.selected } : r)
+        setRows(next)
+    }
+
+    function handleCheck(rowID, columnID, value) {
+        console.log('Check changed:', rowID, columnID, value)
+        const next = rows.map(r => r.id === rowID ? { ...r, checked: value } : r)
+        setRows(next)
+    }
+
+    function handleCheckAll(ids, checked) {
+        console.log('Check all:', ids, checked)
+        const next = rows.map(row => ({ ...row, checked }))
+        setRows(next)
+    }
+
+    function handleCellEdit(rowID, columnID, value) {
+        console.log('Cell edited:', rowID, columnID, value)
+        const next = rows.map(r => r.id === rowID ? { ...r, [columnID]: value } : r)
+        setRows(next)
+    }
+
+    function handleSort(columnId, direction) {
+        console.log('Sort:', columnId, direction)
+    }
+
+    function handleClearFilters() {
+        console.log('Clear filters')
+    }
+
+    // Funciones para acciones
+    function handleView(row) {
+        alert(`Ver detalles de: ${row.name}`)
+    }
+
+    function handleEdit(row) {
+        alert(`Editar: ${row.name}`)
+    }
+
+    function handleDelete(row) {
+        if (confirm(`¿Eliminar a ${row.name}?`)) {
+            const newRows = rows.filter(r => r.id !== row.id)
+            setRows(newRows)
+            alert(`${row.name} eliminado`)
+        }
+    }
+
+    function handleEmail(row) {
+        alert(`Enviar email a: ${row.email}`)
+    }
+
+    function handlePromote(row) {
+        alert(`Promover a: ${row.name}`)
+    }
+
+    function handleArchive(row) {
+        alert(`Archivar a: ${row.name}`)
+    }
+
+    const simulateLoading = () => {
+        setIsLoading(true)
+        setTimeout(() => setIsLoading(false), 3000)
+    }
+
+    // Datos con acciones simples
+    const rowsWithSimpleActions = rows.map(row => ({
+        ...row,
+        actions: [
+            <Icon key="view" icon="visibility" size="small" clickable action={() => handleView(row)} title="Ver" />,
+            <Icon key="edit" icon="edit" size="small" clickable action={() => handleEdit(row)} title="Editar" />,
+            <Icon key="delete" icon="delete" size="small" clickable action={() => handleDelete(row)} title="Eliminar" />
+        ]
+    }))
+
+    // Datos con ActionsCell
+    const rowsWithActionsCell = rows.map(row => ({
+        ...row,
+        actions: [
+            <ActionsCell
+                key="actions-cell"
+                actions={
+                    <div style={{ display: 'flex', gap: '4px' }}>
+                        <Icon icon="visibility" size="small" clickable action={() => handleView(row)} title="Ver" />
+                        <Icon icon="edit" size="small" clickable action={() => handleEdit(row)} title="Editar" />
+                        <Icon icon="email" size="small" clickable action={() => handleEmail(row)} title="Enviar Email" />
+                        <Icon icon="trending_up" size="small" clickable action={() => handlePromote(row)} title="Promover" />
+                        <Icon icon="archive" size="small" clickable action={() => handleArchive(row)} title="Archivar" />
+                        <Icon icon="delete" size="small" clickable action={() => handleDelete(row)} title="Eliminar" />
+                    </div>
+                }
+                maxWidth={120}
+                menuAlign="right"
+            />
+        ]
+    }))
+
+    // Definir secciones para el menú lateral
+    const sections = [
+        {
+            id: 'overview',
+            title: 'Introducción',
+            icon: 'info'
+        },
+        {
+            id: 'basic-examples',
+            title: 'Ejemplos Básicos',
+            icon: 'table_chart',
+            subsections: [
+                { id: 'simple-table', title: 'Tabla Simple' },
+                { id: 'sortable-table', title: 'Tabla Ordenable' },
+                { id: 'outlined-table', title: 'Tabla con Bordes' }
+            ]
+        },
+        {
+            id: 'formatted-data',
+            title: 'Datos Formateados',
+            icon: 'format_paint',
+            subsections: [
+                { id: 'currency-format', title: 'Formato de Moneda' },
+                { id: 'date-format', title: 'Formato de Fecha' },
+                { id: 'color-format', title: 'Formato de Color' }
+            ]
+        },
+        {
+            id: 'interactive-features',
+            title: 'Funciones Interactivas',
+            icon: 'touch_app',
+            subsections: [
+                { id: 'selection-table', title: 'Selección de Filas' },
+                { id: 'editable-table', title: 'Tabla Editable' },
+                { id: 'checkbox-table', title: 'Checkboxes' }
+            ]
+        },
+        {
+            id: 'action-columns',
+            title: 'Columnas de Acciones',
+            icon: 'build',
+            subsections: [
+                { id: 'simple-actions', title: 'Acciones Simples' },
+                { id: 'actions-cell-component', title: 'Componente ActionsCell' }
+            ]
+        },
+        {
+            id: 'advanced-features',
+            title: 'Funciones Avanzadas',
+            icon: 'tune',
+            subsections: [
+                { id: 'filterable-table', title: 'Tabla con Filtros' },
+                { id: 'multisort-table', title: 'Ordenamiento Múltiple' },
+                { id: 'expandable-rows', title: 'Filas Expandibles' }
+            ]
+        },
+        {
+            id: 'api-reference',
+            title: 'Referencia API',
+            icon: 'code'
+        }
+    ]
+
+    return (
+        <ExampleLayout title="DataTable Examples (Original)" sections={sections}>
+            <ExampleSection id="overview" title="DataTable - Componente Original" icon="table_chart">
+                <div style={{ 
+                    background: '#f8f9fa', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px', 
+                    border: '1px solid #e9ecef',
+                    marginBottom: '2rem'
+                }}>
+                    <h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>
+                        📊 DataTable - Componente Original
+                    </h3>
+                    <p style={{ margin: '0 0 1rem 0', lineHeight: '1.6', color: '#6c757d' }}>
+                        Este es el componente <strong>DataTable original</strong> (table.js) que ha sido la base 
+                        para el desarrollo de DataTable2. Aquí puedes ver todas sus funcionalidades y comparar 
+                        con la versión mejorada.
+                    </p>
+                    
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem', marginTop: '1.5rem' }}>
+                        <div style={{ background: 'white', padding: '1rem', borderRadius: '6px', border: '1px solid #dee2e6' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#28a745' }}>✅ Características</h4>
+                            <ul style={{ margin: 0, paddingLeft: '1.2rem', color: '#6c757d' }}>
+                                <li>Ordenamiento simple y múltiple</li>
+                                <li>Selección de filas</li>
+                                <li>Edición inline</li>
+                                <li>Filtros por columna</li>
+                                <li>Formatos de datos</li>
+                                <li>Filas expandibles</li>
+                            </ul>
+                        </div>
+                        
+                        <div style={{ background: 'white', padding: '1rem', borderRadius: '6px', border: '1px solid #dee2e6' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#17a2b8' }}>🔧 Casos de Uso</h4>
+                            <ul style={{ margin: 0, paddingLeft: '1.2rem', color: '#6c757d' }}>
+                                <li>Listados de datos básicos</li>
+                                <li>Formularios con tablas</li>
+                                <li>Dashboards simples</li>
+                                <li>Administración de contenido</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </ExampleSection>
+
+            <ExampleSection id="basic-examples" title="Ejemplos Básicos" icon="table_chart">
+                <ExampleSubsection id="simple-table" title="Tabla Simple">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={basicColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Tabla Simple"
+                        code={`const columns = [
+    { id: "index", label: "#", type: "INDEX" },
+    { id: "checked", onChange: handleCheck },
+    { id: "name", label: "Name", type: "String", sortable: true, filterable: true },
+    { id: "email", label: "Email", type: "String", sortable: true },
+    { id: "department", label: "Department", type: "String", sortable: true },
+    { id: "status", label: "Status", type: "String", sortable: true }
+]
+
+<DataTable
+    columns={columns}
+    rows={rows}
+    onRowSelection={handleRowSelection}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="sortable-table" title="Tabla Ordenable">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={basicColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            onSort={handleSort}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Tabla Ordenable"
+                        code={`// Las columnas con sortable: true permiten ordenamiento
+const columns = [
+    { id: "name", label: "Name", type: "String", sortable: true },
+    { id: "email", label: "Email", type: "String", sortable: true },
+    { id: "department", label: "Department", type: "String", sortable: true }
+]
+
+<DataTable
+    columns={columns}
+    rows={rows}
+    onRowSelection={handleRowSelection}
+    onSort={handleSort}  // ← Callback para manejar ordenamiento
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="outlined-table" title="Tabla con Bordes">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={basicColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Tabla con Bordes"
+                        code={`<DataTable
+    columns={columns}
+    rows={rows}
+    onRowSelection={handleRowSelection}
+    outlined={true}  // ← Agrega bordes a la tabla
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="formatted-data" title="Datos Formateados" icon="format_paint">
+                <ExampleSubsection id="currency-format" title="Formato de Moneda">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={formattedColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código con Formatos"
+                        code={`import { FORMATS } from '../domain/ContentType'
+
+const columns = [
+    { id: "salary", label: "Salary", type: "Number", format: FORMATS.CURRENCY },
+    { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
+    { id: "date", label: "Date", type: "String", format: FORMATS.DATE },
+    { id: "num", label: "Number", type: "Number", maxDecimals: 2 }
+]`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="interactive-features" title="Funciones Interactivas" icon="touch_app">
+                <ExampleSubsection id="selection-table" title="Selección de Filas">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={basicColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Selección de Filas"
+                        code={`function handleRowSelection(row, event) {
+    console.log('Row selected:', row)
+    const next = rows.map(r => r.id === row.id ? { ...r, selected: !r.selected } : r)
+    setRows(next)
+}
+
+<DataTable
+    columns={columns}
+    rows={rows}
+    onRowSelection={handleRowSelection}  // ← Callback para selección
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="editable-table" title="Tabla Editable">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={editableColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            editable={true}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Tabla Editable"
+                        code={`const editableColumns = [
+    {
+        id: "name",
+        label: "Name",
+        type: "String",
+        sortable: true,
+        onChange: handleCellEdit  // ← Callback para edición
+    },
+    {
+        id: "department",
+        label: "Department",
+        type: "String",
+        onChange: handleCellEdit,
+        options: [  // ← Opciones para dropdown
+            { label: "Engineering", value: "Engineering" },
+            { label: "Design", value: "Design" }
+        ]
+    }
+]
+
+<DataTable
+    columns={editableColumns}
+    rows={rows}
+    editable={true}  // ← Habilita edición
+    onRowSelection={handleRowSelection}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="checkbox-table" title="Checkboxes">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={basicColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            onCheckAll={handleCheckAll}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código con Checkboxes"
+                        code={`const columns = [
+    { id: "checked", onChange: handleCheck },  // ← Columna de checkbox
+    { id: "name", label: "Name", type: "String" }
+]
+
+function handleCheck(rowID, columnID, value) {
+    const next = rows.map(r => r.id === rowID ? { ...r, checked: value } : r)
+    setRows(next)
+}
+
+function handleCheckAll(ids, checked) {
+    const next = rows.map(row => ({ ...row, checked }))
+    setRows(next)
+}
+
+<DataTable
+    columns={columns}
+    rows={rows}
+    onCheckAll={handleCheckAll}  // ← Callback para "seleccionar todo"
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="action-columns" title="Columnas de Acciones" icon="build">
+                <ExampleSubsection id="simple-actions" title="Acciones Simples">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={simpleActionsColumns}
+                            rows={rowsWithSimpleActions}
+                            onRowSelection={handleRowSelection}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código con Acciones Simples"
+                        code={`// Agregar columna de acciones
+const columns = [
+    { id: "name", label: "Name", type: "String" },
+    { id: "email", label: "Email", type: "String" },
+    { id: "actions", label: "Actions", type: "String" }  // ← Columna de acciones
+]
+
+// Funciones para manejar acciones
+function handleView(row) {
+    alert(\`Ver detalles de: \${row.name}\`)
+}
+
+function handleEdit(row) {
+    alert(\`Editar: \${row.name}\`)
+}
+
+function handleDelete(row) {
+    if (confirm(\`¿Eliminar a \${row.name}?\`)) {
+        // Lógica para eliminar
+    }
+}
+
+// Agregar acciones a las filas
+const rowsWithActions = rows.map(row => ({
+    ...row,
+    actions: [
+        <Icon key="view" icon="visibility" size="small" clickable
+              action={() => handleView(row)} title="Ver" />,
+        <Icon key="edit" icon="edit" size="small" clickable
+              action={() => handleEdit(row)} title="Editar" />,
+        <Icon key="delete" icon="delete" size="small" clickable
+              action={() => handleDelete(row)} title="Eliminar" />
+    ]
+}))
+
+<DataTable
+    columns={columns}
+    rows={rowsWithActions}
+    onRowSelection={handleRowSelection}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="actions-cell-component" title="Componente ActionsCell">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={actionsCellColumns}
+                            rows={rowsWithActionsCell}
+                            onRowSelection={handleRowSelection}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código con ActionsCell"
+                        code={`import { ActionsCell } from './actions-cell'
+
+// Agregar ActionsCell a las filas
+const rowsWithActionsCell = rows.map(row => ({
+    ...row,
+    actions: [
+        <ActionsCell
+            key="actions-cell"
+            actions={
+                <div style={{ display: 'flex', gap: '4px' }}>
+                    <Icon icon="visibility" size="small" clickable
+                          action={() => handleView(row)} title="Ver" />
+                    <Icon icon="edit" size="small" clickable
+                          action={() => handleEdit(row)} title="Editar" />
+                    <Icon icon="email" size="small" clickable
+                          action={() => handleEmail(row)} title="Email" />
+                    <Icon icon="trending_up" size="small" clickable
+                          action={() => handlePromote(row)} title="Promover" />
+                    <Icon icon="archive" size="small" clickable
+                          action={() => handleArchive(row)} title="Archivar" />
+                    <Icon icon="delete" size="small" clickable
+                          action={() => handleDelete(row)} title="Eliminar" />
+                </div>
+            }
+            maxWidth={120}        // ← Ancho máximo antes de convertir a menú
+            menuAlign="right"     // ← Menú se abre hacia la izquierda
+        />
+    ]
+}))
+
+<DataTable
+    columns={columns}
+    rows={rowsWithActionsCell}
+    onRowSelection={handleRowSelection}
+/>`}
+                    />
+
+                    <div style={{
+                        background: '#e3f2fd',
+                        padding: '1rem',
+                        borderRadius: '6px',
+                        border: '1px solid #bbdefb',
+                        marginTop: '1rem'
+                    }}>
+                        <h4 style={{ margin: '0 0 0.5rem 0', color: '#1976d2' }}>
+                            💡 Ventajas de ActionsCell
+                        </h4>
+                        <ul style={{ margin: 0, paddingLeft: '1.2rem', color: '#1565c0' }}>
+                            <li><strong>Overflow Automático:</strong> Se convierte en menú cuando las acciones no caben</li>
+                            <li><strong>Responsive:</strong> Se adapta automáticamente al ancho disponible</li>
+                            <li><strong>Reutilizable:</strong> Funciona en tablas, headers, listas, etc.</li>
+                            <li><strong>Configurable:</strong> Personalizable con maxWidth y menuAlign (right = hacia izquierda)</li>
+                        </ul>
+                    </div>
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="advanced-features" title="Funciones Avanzadas" icon="tune">
+                <ExampleSubsection id="filterable-table" title="Tabla con Filtros">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={filterableColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            filterable={true}
+                            onClearFilters={handleClearFilters}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código con Filtros"
+                        code={`const filterableColumns = [
+    {
+        id: "name",
+        label: "Name",
+        type: "String",
+        sortable: true,
+        filterable: true  // ← Habilita filtro
+    },
+    {
+        id: "department",
+        label: "Department",
+        type: "String",
+        filterable: true,
+        options: [  // ← Opciones para filtro dropdown
+            { label: "Engineering", value: "Engineering" },
+            { label: "Design", value: "Design" }
+        ]
+    }
+]
+
+<DataTable
+    columns={filterableColumns}
+    rows={rows}
+    filterable={true}  // ← Habilita fila de filtros
+    onClearFilters={handleClearFilters}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="multisort-table" title="Ordenamiento Múltiple">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={basicColumns}
+                            rows={rows}
+                            onRowSelection={handleRowSelection}
+                            multisort={true}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código con Ordenamiento Múltiple"
+                        code={`<DataTable
+    columns={columns}
+    rows={rows}
+    multisort={true}  // ← Permite ordenar por múltiples columnas
+    onRowSelection={handleRowSelection}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="expandable-rows" title="Filas Expandibles">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable
+                            columns={basicColumns}
+                            rows={rows.map(row => ({
+                                ...row,
+                                info: `Información adicional para ${row.name}: ${row.description}`
+                            }))}
+                            onRowSelection={handleRowSelection}
+                            expanded={false}
+                            outlined={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código con Filas Expandibles"
+                        code={`// Agregar propiedad 'info' a las filas
+const rowsWithInfo = rows.map(row => ({
+    ...row,
+    info: \`Información adicional para \${row.name}: \${row.description}\`
+}))
+
+<DataTable
+    columns={columns}
+    rows={rowsWithInfo}
+    expanded={false}  // ← false = cerradas por defecto, true = abiertas
+    onRowSelection={handleRowSelection}
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="api-reference" title="Referencia API" icon="code">
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1.5rem',
+                    borderRadius: '8px',
+                    border: '1px solid #e9ecef',
+                    marginBottom: '2rem'
+                }}>
+                    <h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>
+                        📖 Props del Componente DataTable
+                    </h3>
+
+                    <div style={{ display: 'grid', gap: '1rem' }}>
+                        <div style={{ background: 'white', padding: '1rem', borderRadius: '6px', border: '1px solid #dee2e6' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#007bff' }}>Props Principales</h4>
+                            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                                <thead>
+                                    <tr style={{ borderBottom: '1px solid #dee2e6' }}>
+                                        <th style={{ textAlign: 'left', padding: '0.5rem', color: '#495057' }}>Prop</th>
+                                        <th style={{ textAlign: 'left', padding: '0.5rem', color: '#495057' }}>Tipo</th>
+                                        <th style={{ textAlign: 'left', padding: '0.5rem', color: '#495057' }}>Descripción</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>columns</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Array</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Definición de columnas</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>rows</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Array</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Datos de las filas</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>onRowSelection</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Function</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Callback al seleccionar fila</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>onSort</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Function</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Callback para ordenamiento</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>onCheckAll</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Function</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Callback para seleccionar todo</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>editable</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Boolean</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Habilita edición inline</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>outlined</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Boolean</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Agrega bordes a la tabla</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>multisort</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Boolean</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Permite ordenamiento múltiple</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>filterable</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Boolean</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Muestra fila de filtros</td>
+                                    </tr>
+                                    <tr>
+                                        <td style={{ padding: '0.5rem', fontFamily: 'monospace', color: '#e83e8c' }}>expanded</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Boolean</td>
+                                        <td style={{ padding: '0.5rem', color: '#6c757d' }}>Estado inicial de filas expandibles</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div style={{ background: 'white', padding: '1rem', borderRadius: '6px', border: '1px solid #dee2e6' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#28a745' }}>Estructura de Columnas</h4>
+                            <CodeSnippet
+                                title="Ejemplo de Definición de Columna"
+                                code={`{
+    id: "name",              // Identificador único
+    label: "Name",           // Texto del encabezado
+    type: "String",          // Tipo de dato (String, Number, Boolean, etc.)
+    sortable: true,          // Permite ordenamiento
+    filterable: true,        // Permite filtrado
+    resizable: true,         // Permite redimensionar
+    editable: true,          // Permite edición (si la tabla es editable)
+    format: FORMATS.DATE,    // Formato especial (opcional)
+    onChange: handleEdit,    // Callback para edición (opcional)
+    options: [               // Opciones para dropdown (opcional)
+        { label: "Option 1", value: "opt1" },
+        { label: "Option 2", value: "opt2" }
+    ]
+}`}
+                            />
+                        </div>
+
+                        <div style={{ background: 'white', padding: '1rem', borderRadius: '6px', border: '1px solid #dee2e6' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#dc3545' }}>Tipos de Datos Soportados</h4>
+                            <ul style={{ margin: 0, paddingLeft: '1.2rem', color: '#6c757d' }}>
+                                <li><code>INDEX</code> - Número de fila automático</li>
+                                <li><code>String</code> - Texto simple</li>
+                                <li><code>Number</code> - Números con formato</li>
+                                <li><code>Boolean</code> - Checkbox</li>
+                                <li><code>DATETIME</code> - Fecha y hora</li>
+                                <li><code>ICON</code> - Iconos de Material Design</li>
+                                <li><code>Image</code> - Imágenes</li>
+                                <li><code>ENTITY</code> - Objetos complejos</li>
+                            </ul>
+                        </div>
+
+                        <div style={{ background: 'white', padding: '1rem', borderRadius: '6px', border: '1px solid #dee2e6' }}>
+                            <h4 style={{ margin: '0 0 0.5rem 0', color: '#6f42c1' }}>Formatos Disponibles</h4>
+                            <ul style={{ margin: 0, paddingLeft: '1.2rem', color: '#6c757d' }}>
+                                <li><code>FORMATS.CURRENCY</code> - Formato de moneda</li>
+                                <li><code>FORMATS.PERCENT</code> - Formato de porcentaje</li>
+                                <li><code>FORMATS.DATE</code> - Formato de fecha</li>
+                                <li><code>FORMATS.TIME</code> - Formato de hora</li>
+                                <li><code>FORMATS.DATETIME</code> - Formato de fecha y hora</li>
+                                <li><code>FORMATS.COLOR</code> - Selector de color</li>
+                                <li><code>FORMATS.URL</code> - Enlaces</li>
+                                <li><code>FORMATS.IMG</code> - Imágenes</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </ExampleSection>
+        </ExampleLayout>
+    )
+}
+
+export default TableExamples