ywana-core8 0.1.79 → 0.1.80

package/src/html/table2.example.js.broken

@@ -0,0 +1,1226 @@
+import React, { useState } from 'react'
+import { DataTable2 } from './table2'
+import { Button } from './button'
+import { Text } from './text'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
+
+/**
+ * Ejemplos del componente DataTable2 mejorado manteniendo 100% compatibilidad
+ */
+export const DataTable2Examples = () => {
+    const [isLoading, setIsLoading] = useState(false)
+    const [showAdvanced, setShowAdvanced] = useState(false)
+    const [selectedRows, setSelectedRows] = useState([])
+
+    // Datos de ejemplo
+    const columns = [
+        {
+            id: 'checked',
+            label: '',
+            type: 'CHECK',
+            sortable: false,
+            width: 50
+        },
+        {
+            id: 'id',
+            label: 'ID',
+            type: 'Number',
+            sortable: true,
+            resizable: true,
+            width: 80
+        },
+        {
+            id: 'name',
+            label: 'Name',
+            type: 'String',
+            sortable: true,
+            filterable: true,
+            editable: true,
+            resizable: true,
+            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+        },
+        {
+            id: 'email',
+            label: 'Email',
+            type: 'String',
+            sortable: true,
+            filterable: true,
+            editable: true,
+            resizable: true,
+            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+        },
+        {
+            id: 'age',
+            label: 'Age',
+            type: 'Number',
+            sortable: true,
+            editable: true,
+            resizable: true,
+            min: 0,
+            max: 120,
+            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+        },
+        {
+            id: 'status',
+            label: 'Status',
+            type: 'SELECTION',
+            sortable: true,
+            filterable: true,
+            editable: true,
+            resizable: true,
+            options: [
+                { label: 'Active', value: 'active' },
+                { label: 'Inactive', value: 'inactive' },
+                { label: 'Pending', value: 'pending' }
+            ],
+            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+        },
+        {
+            id: 'verified',
+            label: 'Verified',
+            type: 'Boolean',
+            sortable: true,
+            editable: true,
+            resizable: true,
+            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+        }
+    ]
+
+    const rows = [
+        { 
+            id: 1, 
+            name: 'John Doe', 
+            email: 'john@example.com', 
+            age: 30, 
+            status: 'active', 
+            verified: true,
+            info: () => <div>Additional info for John Doe</div>
+        },
+        { 
+            id: 2, 
+            name: 'Jane Smith', 
+            email: 'jane@example.com', 
+            age: 25, 
+            status: 'pending', 
+            verified: false,
+            info: 'Jane is a new user pending verification'
+        },
+        { 
+            id: 3, 
+            name: 'Bob Johnson', 
+            email: 'bob@example.com', 
+            age: 35, 
+            status: 'active', 
+            verified: true
+        },
+        { 
+            id: 4, 
+            name: 'Alice Brown', 
+            email: 'alice@example.com', 
+            age: 28, 
+            status: 'inactive', 
+            verified: true,
+            disabled: true
+        },
+        { 
+            id: 5, 
+            name: 'Charlie Wilson', 
+            email: 'charlie@example.com', 
+            age: 42, 
+            status: 'active', 
+            verified: true
+        }
+    ]
+
+    // Generar datos grandes para virtual scrolling
+    const largeDataset = Array.from({ length: 1000 }, (_, i) => ({
+        id: i + 1,
+        name: `User ${i + 1}`,
+        email: `user${i + 1}@example.com`,
+        age: 20 + (i % 50),
+        status: ['active', 'inactive', 'pending'][i % 3],
+        verified: i % 2 === 0
+    }))
+
+    const handleRowSelection = (row, event) => {
+        console.log('Row selected:', row)
+        setSelectedRows(prev => [...prev, row.id])
+    }
+
+    const handleSort = (dragged, dropped) => {
+        console.log('Sort:', dragged, dropped)
+    }
+
+    const handleCheckAll = (ids, checked) => {
+        console.log('Check all:', ids, checked)
+        setSelectedRows(checked ? ids : [])
+    }
+
+    const handleExport = (rows, columns) => {
+        console.log('Export:', rows.length, 'rows')
+        // Custom export logic here
+    }
+
+    const handleSearch = (term) => {
+        console.log('Search:', term)
+    }
+
+    const simulateLoading = () => {
+        setIsLoading(true)
+        setTimeout(() => setIsLoading(false), 3000)
+    }
+
+    // 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: 'filterable-table', title: 'Tabla con Filtros' }
+            ]
+        },
+        {
+            id: 'advanced-features',
+            title: 'Características Avanzadas',
+            icon: 'settings',
+            subsections: [
+                { id: 'editable-cells', title: 'Celdas Editables' },
+                { id: 'row-selection', title: 'Selección de Filas' },
+                { id: 'column-resize', title: 'Redimensionar Columnas' }
+            ]
+        },
+        {
+            id: 'expandable-rows',
+            title: 'Filas Expandibles',
+            icon: 'expand_more',
+            subsections: [
+                { id: 'info-react-component', title: 'Info como Componente React' },
+                { id: 'info-string-simple', title: 'Info como String Simple' },
+                { id: 'info-custom-actions', title: 'Info con Acciones Personalizadas' }
+            ]
+        },
+        {
+            id: 'themes-variants',
+            title: 'Temas y Variantes',
+            icon: 'palette',
+            subsections: [
+                { id: 'density-variants', title: 'Variantes de Densidad' },
+                { id: 'theme-variants', title: 'Variantes de Tema' },
+                { id: 'style-variants', title: 'Variantes de Estilo' }
+            ]
+        },
+        {
+            id: 'loading-states',
+            title: 'Estados de Carga',
+            icon: 'hourglass_empty'
+        },
+        {
+            id: 'empty-states',
+            title: 'Estados Vacíos',
+            icon: 'inbox'
+        },
+        {
+            id: 'api-reference',
+            title: 'Referencia API',
+            icon: 'code'
+        }
+    ]
+
+    return (
+        <ExampleLayout title="DataTable2 Examples" sections={sections}>
+            <ExampleSection id="overview" title="DataTable2 - Versión Mejorada (100% Compatible)" icon="table_chart">
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1rem',
+                    borderRadius: '8px',
+                    marginBottom: '2rem',
+                    border: '1px solid #e9ecef'
+                }}>
+                    <h3>✅ Mejoras Implementadas (100% Compatibilidad):</h3>
+                <ul style={{ columns: 2, columnGap: '2rem' }}>
+                    <li>🛡️ <strong>PropTypes completos</strong> - Validación exhaustiva</li>
+                    <li>🔍 <strong>Búsqueda integrada</strong> - Search en tiempo real</li>
+                    <li>📊 <strong>Exportación CSV</strong> - Export automático o personalizado</li>
+                    <li>📱 <strong>Virtual Scrolling</strong> - Rendimiento para miles de filas</li>
+                    <li>🎨 <strong>Múltiples temas</strong> - default, dark, minimal</li>
+                    <li>📐 <strong>Densidad variable</strong> - compact, normal, comfortable</li>
+                    <li>🎯 <strong>Selección mejorada</strong> - single, multiple, none</li>
+                    <li>🔄 <strong>Ordenamiento avanzado</strong> - single, multiple, none</li>
+                    <li>📏 <strong>Columnas redimensionables</strong> - Resize interactivo</li>
+                    <li>🎭 <strong>Estados avanzados</strong> - loading, skeleton, striped</li>
+                    <li>♿ <strong>Accesibilidad total</strong> - WCAG 2.1 AA compliant</li>
+                    <li>📱 <strong>Responsive completo</strong> - Mobile-first design</li>
+                </ul>
+                </div>
+            </ExampleSection>
+
+            <ExampleSection id="basic-examples" title="Ejemplos Básicos" icon="table_chart">
+                <ExampleSubsection id="simple-table" title="Controles de Demostración">
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                    display: 'flex',
+                    gap: '1rem',
+                    alignItems: 'center',
+                    flexWrap: 'wrap'
+                }}>
+                    <Button 
+                        label="Simulate Loading" 
+                        icon="refresh" 
+                        action={simulateLoading}
+                        disabled={isLoading}
+                    />
+                    <Button 
+                        label={showAdvanced ? "Hide Advanced" : "Show Advanced"} 
+                        icon={showAdvanced ? "visibility_off" : "visibility"}
+                        action={() => setShowAdvanced(!showAdvanced)}
+                    />
+                    <span style={{ marginLeft: 'auto', color: '#666' }}>
+                        Selected: {selectedRows.length} rows
+                    </span>
+                </div>
+                </ExampleSubsection>
+
+                <ExampleSubsection id="sortable-table" title="DataTable Original (100% Compatible)">
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1rem', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px'
+                }}>
+                    <DataTable2 
+                        columns={columns}
+                        rows={rows}
+                        onRowSelection={handleRowSelection}
+                        onSort={handleSort}
+                        onCheckAll={handleCheckAll}
+                        editable={true}
+                        outlined={true}
+                        expanded={false}
+                        multisort={true}
+                        filterable={true}
+                        emptyMessage="No users found"
+                        emptyIcon="people_outline"
+                    />
+                    <Text size="sm" color="muted" style={{ marginTop: '0.5rem' }}>
+                        API original sin cambios - todas las props funcionan idéntico
+                    </Text>
+                </div>
+                </ExampleSubsection>
+
+                <ExampleSubsection id="filterable-table" title="DataTable2 con Nuevas Características">
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1rem', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px'
+                }}>
+                    <DataTable2 
+                        columns={columns}
+                        rows={rows}
+                        onRowSelection={handleRowSelection}
+                        onSort={handleSort}
+                        onCheckAll={handleCheckAll}
+                        editable={true}
+                        outlined={true}
+                        // Nuevas características
+                        loading={isLoading}
+                        skeleton={isLoading}
+                        striped={true}
+                        hover={true}
+                        bordered={true}
+                        responsive={true}
+                        stickyHeader={true}
+                        selectionMode="multiple"
+                        sortMode="multiple"
+                        searchable={true}
+                        searchPlaceholder="Search users..."
+                        onSearch={handleSearch}
+                        exportable={true}
+                        onExport={handleExport}
+                        showRowNumbers={true}
+                        rowHeight="medium"
+                        density="normal"
+                        theme="default"
+                        accessibility={true}
+                        onRowClick={(row) => console.log('Row clicked:', row)}
+                        onRowDoubleClick={(row) => console.log('Row double-clicked:', row)}
+                        onCellClick={(row, column, cell) => console.log('Cell clicked:', row, column, cell)}
+                        footerContent={
+                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                <span>Total: {rows.length} users</span>
+                                <span>Selected: {selectedRows.length}</span>
+                            </div>
+                        }
+                    />
+                </div>
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="themes-variants" title="Temas y Variantes" icon="palette">
+                <ExampleSubsection id="density-variants" title="Variantes de Densidad">
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1rem', 
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: '1rem'
+                }}>
+                    <div>
+                        <h4>Tema Dark</h4>
+                        <DataTable2 
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            theme="dark"
+                            striped={true}
+                            bordered={true}
+                            compact={true}
+                        />
+                    </div>
+                    <div>
+                        <h4>Tema Minimal</h4>
+                        <DataTable2 
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            theme="minimal"
+                            hover={false}
+                            density="comfortable"
+                        />
+                    </div>
+                </div>
+                </ExampleSubsection>
+
+                <ExampleSubsection id="row-selection" title="Densidades y Tamaños (Redimensionables)">
+                <h3>📐 Densidades y Tamaños (Redimensionables)</h3>
+                <div style={{
+                    background: '#fff',
+                    padding: '1rem',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px'
+                }}>
+                    <div style={{ marginBottom: '2rem' }}>
+                        <h4>🔧 Compact (Altura: 28px) - Arrastra los bordes de las columnas para redimensionar</h4>
+                        <DataTable2
+                            columns={columns.slice(1, 5)} // Sin checkbox para mejor visualización
+                            rows={rows.slice(0, 3)}
+                            density="compact"
+                            rowHeight="small"
+                            compact={true}
+                            resizable={true}
+                            bordered={true}
+                            onColumnResize={(columnId, width) => console.log(`Column ${columnId} resized to ${width}px`)}
+                        />
+                    </div>
+                    <div style={{ marginBottom: '2rem' }}>
+                        <h4>📏 Normal (Altura: 40px) - Redimensionamiento habilitado</h4>
+                        <DataTable2
+                            columns={columns.slice(1, 5)}
+                            rows={rows.slice(0, 3)}
+                            density="normal"
+                            rowHeight="medium"
+                            resizable={true}
+                            bordered={true}
+                            onColumnResize={(columnId, width) => console.log(`Column ${columnId} resized to ${width}px`)}
+                        />
+                    </div>
+                    <div>
+                        <h4>🛋️ Comfortable (Altura: 52px) - Máximo espacio</h4>
+                        <DataTable2
+                            columns={columns.slice(1, 5)}
+                            rows={rows.slice(0, 3)}
+                            density="comfortable"
+                            rowHeight="large"
+                            resizable={true}
+                            bordered={true}
+                            onColumnResize={(columnId, width) => console.log(`Column ${columnId} resized to ${width}px`)}
+                        />
+                    </div>
+                    <div style={{
+                        marginTop: '1rem',
+                        padding: '0.75rem',
+                        background: '#e3f2fd',
+                        borderRadius: '4px',
+                        border: '1px solid #bbdefb'
+                    }}>
+                        <Text size="sm" color="prima">
+                            💡 <strong>Tip:</strong> Pasa el mouse sobre el borde derecho de cualquier columna para ver el cursor de redimensionamiento.
+                            Arrastra para cambiar el ancho. Los cambios se registran en la consola.
+                        </Text>
+                    </div>
+                </div>
+                </ExampleSubsection>
+
+                <ExampleSubsection id="column-resize" title="Virtual Scrolling (1000 filas)">
+                {showAdvanced && (
+                    <div style={{ marginBottom: '2rem' }}>
+                    <h3>📱 Virtual Scrolling (1000 filas)</h3>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px'
+                    }}>
+                        <DataTable2 
+                            columns={columns.slice(1, 6)} // Sin checkbox para simplificar
+                            rows={largeDataset}
+                            virtualScrolling={true}
+                            pageSize={50}
+                            searchable={true}
+                            exportable={true}
+                            stickyHeader={true}
+                            showRowNumbers={true}
+                            striped={true}
+                            onSearch={handleSearch}
+                            onExport={handleExport}
+                        />
+                        <Text size="sm" color="muted" style={{ marginTop: '0.5rem' }}>
+                            Rendimiento optimizado para grandes datasets con paginación virtual
+                        </Text>
+                    </div>
+                </section>
+            )}
+
+            {/* Estados especiales */}
+            {showAdvanced && (
+                <section style={{ marginBottom: '2rem' }}>
+                    <h3>⚠️ Estados Especiales</h3>
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '1rem'
+                    }}>
+                        <div>
+                            <h4>Loading State</h4>
+                            <DataTable2 
+                                columns={columns.slice(0, 4)}
+                                rows={rows.slice(0, 3)}
+                                loading={true}
+                                skeleton={false}
+                            />
+                        </div>
+                        <div>
+                            <h4>Skeleton State</h4>
+                            <DataTable2 
+                                columns={columns.slice(0, 4)}
+                                rows={[]}
+                                loading={false}
+                                skeleton={true}
+                            />
+                        </div>
+                    </div>
+                </section>
+            )}
+
+            {/* Comparación antes/después */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Comparación: DataTable Original vs DataTable2</h3>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+                    <div style={{
+                        background: '#ffebee',
+                        padding: '1rem',
+                        borderRadius: '4px',
+                        border: '1px solid #ffcdd2'
+                    }}>
+                        <h4>❌ DataTable Original</h4>
+                        <ul>
+                            <li>Funcionalidad básica de tabla</li>
+                            <li>Sorting y filtering básico</li>
+                            <li>Edición inline limitada</li>
+                            <li>Selección de filas básica</li>
+                            <li>Sin PropTypes ni validación</li>
+                            <li>Sin búsqueda integrada</li>
+                            <li>Sin exportación</li>
+                            <li>Sin virtual scrolling</li>
+                            <li>Sin temas ni variantes</li>
+                            <li>Sin accesibilidad</li>
+                            <li>CSS básico sin responsive</li>
+                            <li>Rendimiento limitado</li>
+                        </ul>
+                    </div>
+                    <div style={{
+                        background: '#e8f5e8',
+                        padding: '1rem',
+                        borderRadius: '4px',
+                        border: '1px solid #c8e6c9'
+                    }}>
+                        <h4>✅ DataTable2 Mejorado</h4>
+                        <ul>
+                            <li>Mantiene funcionalidad original</li>
+                            <li>PropTypes completos y validación</li>
+                            <li>Búsqueda integrada en tiempo real</li>
+                            <li>Exportación CSV automática/custom</li>
+                            <li>Virtual scrolling para performance</li>
+                            <li>Múltiples temas y variantes</li>
+                            <li>Estados loading y skeleton</li>
+                            <li>Accesibilidad total (WCAG 2.1 AA)</li>
+                            <li>Selección avanzada (single/multiple)</li>
+                            <li>Columnas redimensionables</li>
+                            <li>CSS responsive con dark mode</li>
+                            <li>Optimizado para miles de filas</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            {/* Garantía de compatibilidad */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🔒 Garantía de Compatibilidad 100%</h3>
+                <div style={{
+                    background: '#fff3cd',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #ffeaa7'
+                }}>
+                    <p><strong>Migración Sin Riesgo:</strong></p>
+                    <ul>
+                        <li>✅ <strong>Props originales</strong> - columns, rows, onRowSelection, onSort, onCheckAll, editable, outlined, expanded, multisort, filterable funcionan idéntico</li>
+                        <li>✅ <strong>Callbacks sin cambios</strong> - Misma firma y comportamiento</li>
+                        <li>✅ <strong>Estructura de datos</strong> - Columns y rows mantienen formato exacto</li>
+                        <li>✅ <strong>CSS compatible</strong> - Clases originales preservadas (.datatable8)</li>
+                        <li>✅ <strong>Nuevas características opcionales</strong> - Todas las mejoras son opt-in</li>
+                        <li>✅ <strong>Cero breaking changes</strong> - No se rompe código existente</li>
+                        <li>✅ <strong>Migración gradual</strong> - Puedes adoptar nuevas características cuando quieras</li>
+                    </ul>
+
+                    <div style={{
+                        background: '#d4edda',
+                        padding: '1rem',
+                        borderRadius: '4px',
+                        marginTop: '1rem',
+                        border: '1px solid #c3e6cb'
+                    }}>
+                        <h4>📋 Pasos de Migración:</h4>
+                        <ol>
+                            <li><strong>Reemplaza el import:</strong> <code>import {`{DataTable2}`} from './table2'</code></li>
+                            <li><strong>Cambia el componente:</strong> <code>&lt;DataTable2 .../&gt;</code></li>
+                            <li><strong>¡Listo!</strong> Todo funciona igual + nuevas características disponibles</li>
+                            <li><strong>Opcional:</strong> Agrega nuevas props cuando las necesites</li>
+                        </ol>
+                    </div>
+                </div>
+            </section>
+
+            {/* Casos de uso */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🎯 Casos de Uso Recomendados</h3>
+                <div style={{
+                    background: '#fff',
+                    padding: '1rem',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: '1rem'
+                }}>
+                    <div>
+                        <h4>📊 Dashboards Administrativos</h4>
+                        <ul>
+                            <li>Búsqueda en tiempo real</li>
+                            <li>Exportación de reportes</li>
+                            <li>Edición inline</li>
+                            <li>Selección múltiple</li>
+                            <li>Filtros avanzados</li>
+                        </ul>
+
+                        <h4>📱 Aplicaciones Móviles</h4>
+                        <ul>
+                            <li>Responsive design</li>
+                            <li>Touch-friendly</li>
+                            <li>Virtual scrolling</li>
+                            <li>Densidad compacta</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4>🏢 Sistemas Empresariales</h4>
+                        <ul>
+                            <li>Miles de registros</li>
+                            <li>Accesibilidad completa</li>
+                            <li>Temas corporativos</li>
+                            <li>Estados de carga</li>
+                            <li>Validación robusta</li>
+                        </ul>
+
+                        <h4>🎨 Aplicaciones Modernas</h4>
+                        <ul>
+                            <li>Dark mode</li>
+                            <li>Animaciones suaves</li>
+                            <li>UX optimizada</li>
+                            <li>Performance superior</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            {/* Performance */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>⚡ Mejoras de Performance</h3>
+                <div style={{
+                    background: '#fff',
+                    padding: '1rem',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px'
+                }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem', textAlign: 'center' }}>
+                        <div style={{ padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <h4>🚀 Virtual Scrolling</h4>
+                            <p><strong>10,000+ filas</strong></p>
+                            <p>Renderizado solo de elementos visibles</p>
+                        </div>
+                        <div style={{ padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <h4>🔍 Búsqueda Optimizada</h4>
+                            <p><strong>Tiempo real</strong></p>
+                            <p>Filtrado eficiente con debounce</p>
+                        </div>
+                        <div style={{ padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                            <h4>💾 Gestión de Estado</h4>
+                            <p><strong>React Hooks</strong></p>
+                            <p>useCallback y useMemo optimizados</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* API Reference */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>📚 API Reference - Nuevas Props</h3>
+                <div style={{
+                    background: '#fff',
+                    padding: '1rem',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px'
+                }}>
+                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                        <thead>
+                            <tr style={{ background: '#f8f9fa' }}>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Prop</th>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Tipo</th>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Default</th>
+                                <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Descripción</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>searchable</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>boolean</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>false</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Habilita búsqueda en tiempo real</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>exportable</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>boolean</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>false</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Habilita exportación CSV</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>virtualScrolling</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>boolean</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>false</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Habilita virtual scrolling para performance</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>selectionMode</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>string</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>single</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Modo de selección: single, multiple, none</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>theme</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>string</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>default</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Tema visual: default, dark, minimal</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>density</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>string</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>normal</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Densidad: compact, normal, comfortable</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            {/* Filas Expandibles */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🔽 Filas Expandibles con Info</h3>
+                <p>Ejemplos de filas que se pueden expandir para mostrar información adicional usando el campo <code>info</code>.</p>
+
+                <div style={{
+                    background: '#fff',
+                    padding: '1.5rem',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                    marginBottom: '1rem'
+                }}>
+                    <h4>Ejemplo 1: Info como Componente React</h4>
+                    <DataTable2
+                        id="expandable-table-1"
+                        columns={[
+                            { id: 'id', label: 'ID', sortable: true, width: 80 },
+                            { id: 'product', label: 'Producto', sortable: true, filterable: true },
+                            { id: 'price', label: 'Precio', sortable: true },
+                            { id: 'stock', label: 'Stock', sortable: true },
+                            { id: 'category', label: 'Categoría', filterable: true }
+                        ]}
+                        rows={[
+                            {
+                                id: 1,
+                                product: 'MacBook Pro 16"',
+                                price: '$2,499',
+                                stock: 15,
+                                category: 'Laptops',
+                                info: {
+                                    action: () => console.log('Expandir producto 1'),
+                                    content: (
+                                        <div style={{ padding: '1rem', background: '#f8f9fa', border: '1px solid #e9ecef', borderRadius: '4px' }}>
+                                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#495057' }}>Detalles del Producto</h5>
+                                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', fontSize: '0.875rem' }}>
+                                                <div>
+                                                    <strong>Especificaciones:</strong>
+                                                    <ul style={{ margin: '0.25rem 0', paddingLeft: '1rem' }}>
+                                                        <li>Chip M2 Pro</li>
+                                                        <li>16GB RAM</li>
+                                                        <li>512GB SSD</li>
+                                                        <li>16" Liquid Retina XDR</li>
+                                                    </ul>
+                                                </div>
+                                                <div>
+                                                    <strong>Disponibilidad:</strong>
+                                                    <ul style={{ margin: '0.25rem 0', paddingLeft: '1rem' }}>
+                                                        <li>En stock: 15 unidades</li>
+                                                        <li>Próximo envío: 24h</li>
+                                                        <li>Garantía: 1 año</li>
+                                                        <li>Devoluciones: 30 días</li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            },
+                            {
+                                id: 2,
+                                product: 'iPhone 15 Pro',
+                                price: '$999',
+                                stock: 42,
+                                category: 'Smartphones',
+                                info: {
+                                    action: () => console.log('Expandir producto 2'),
+                                    content: (
+                                        <div style={{ padding: '1rem', background: '#f8f9fa', border: '1px solid #e9ecef', borderRadius: '4px' }}>
+                                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#495057' }}>Información del iPhone</h5>
+                                            <div style={{ display: 'flex', gap: '2rem', fontSize: '0.875rem' }}>
+                                                <div>
+                                                    <strong>Colores disponibles:</strong>
+                                                    <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.25rem' }}>
+                                                        <span style={{ width: '20px', height: '20px', background: '#1d1d1f', borderRadius: '50%', border: '1px solid #ccc' }}></span>
+                                                        <span style={{ width: '20px', height: '20px', background: '#f5f5dc', borderRadius: '50%', border: '1px solid #ccc' }}></span>
+                                                        <span style={{ width: '20px', height: '20px', background: '#4169e1', borderRadius: '50%', border: '1px solid #ccc' }}></span>
+                                                        <span style={{ width: '20px', height: '20px', background: '#c0c0c0', borderRadius: '50%', border: '1px solid #ccc' }}></span>
+                                                    </div>
+                                                </div>
+                                                <div>
+                                                    <strong>Capacidades:</strong> 128GB, 256GB, 512GB, 1TB<br/>
+                                                    <strong>Cámara:</strong> Sistema Pro de 48MP<br/>
+                                                    <strong>Pantalla:</strong> 6.1" Super Retina XDR
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            },
+                            {
+                                id: 3,
+                                product: 'iPad Air',
+                                price: '$599',
+                                stock: 8,
+                                category: 'Tablets',
+                                info: {
+                                    action: () => console.log('Expandir producto 3'),
+                                    content: (
+                                        <div style={{ padding: '1rem', background: '#fff3cd', border: '1px solid #ffeaa7', borderRadius: '4px' }}>
+                                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#856404' }}>⚠️ Stock Bajo</h5>
+                                            <p style={{ margin: '0', fontSize: '0.875rem', color: '#856404' }}>
+                                                Quedan solo 8 unidades en stock. Se recomienda realizar pedido pronto.
+                                                El próximo lote llegará en 2 semanas.
+                                            </p>
+                                            <div style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>
+                                                <strong>Accesorios incluidos:</strong> Cable USB-C, Adaptador de corriente 20W
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            }
+                        ]}
+                        expanded={true}
+                        density="normal"
+                        striped={true}
+                        hover={true}
+                        resizable={true}
+                        filterable={true}
+                    />
+                </div>
+
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #e9ecef',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0' }}>📋 Código del Ejemplo 1:</h5>
+                    <pre style={{
+                        background: '#ffffff',
+                        padding: '1rem',
+                        borderRadius: '4px',
+                        border: '1px solid #dee2e6',
+                        fontSize: '0.75rem',
+                        overflow: 'auto',
+                        margin: '0'
+                    }}>
+{`<DataTable2
+    id="expandable-table-1"
+    columns={[
+        { id: 'product', label: 'Producto', sortable: true, filterable: true },
+        { id: 'price', label: 'Precio', sortable: true },
+        { id: 'stock', label: 'Stock', sortable: true }
+    ]}
+    rows={[
+        {
+            id: 1,
+            product: 'MacBook Pro 16"',
+            price: '$2,499',
+            stock: 15,
+            info: {
+                action: () => console.log('Expandir producto 1'),
+                content: (
+                    <div style={{ padding: '1rem', background: '#f8f9fa' }}>
+                        <h5>Detalles del Producto</h5>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+                            <div>
+                                <strong>Especificaciones:</strong>
+                                <ul>
+                                    <li>Chip M2 Pro</li>
+                                    <li>16GB RAM</li>
+                                    <li>512GB SSD</li>
+                                </ul>
+                            </div>
+                            <div>
+                                <strong>Disponibilidad:</strong>
+                                <ul>
+                                    <li>En stock: 15 unidades</li>
+                                    <li>Próximo envío: 24h</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                )
+            }
+        }
+    ]}
+    expanded={true}
+    density="normal"
+    striped={true}
+    resizable={true}
+    filterable={true}
+/>`}
+                    </pre>
+                </div>
+
+                <div style={{
+                    background: '#fff',
+                    padding: '1.5rem',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                    marginBottom: '1rem'
+                }}>
+                    <h4>Ejemplo 2: Info como String Simple</h4>
+                    <DataTable2
+                        id="expandable-table-2"
+                        columns={[
+                            { id: 'id', label: 'ID', width: 60 },
+                            { id: 'user', label: 'Usuario', sortable: true },
+                            { id: 'email', label: 'Email', sortable: true },
+                            { id: 'role', label: 'Rol', filterable: true },
+                            { id: 'status', label: 'Estado', filterable: true }
+                        ]}
+                        rows={[
+                            {
+                                id: 1,
+                                user: 'Ana García',
+                                email: 'ana.garcia@empresa.com',
+                                role: 'Admin',
+                                status: 'Activo',
+                                info: 'Administradora principal del sistema. Acceso completo a todas las funcionalidades. Última conexión: hace 2 horas.'
+                            },
+                            {
+                                id: 2,
+                                user: 'Carlos López',
+                                email: 'carlos.lopez@empresa.com',
+                                role: 'Editor',
+                                status: 'Activo',
+                                info: 'Editor de contenido con permisos de publicación. Especializado en marketing digital. Miembro del equipo desde 2022.'
+                            },
+                            {
+                                id: 3,
+                                user: 'María Rodríguez',
+                                email: 'maria.rodriguez@empresa.com',
+                                role: 'Viewer',
+                                status: 'Inactivo',
+                                info: 'Usuario con permisos de solo lectura. Cuenta suspendida temporalmente por inactividad. Último acceso: hace 3 meses.'
+                            }
+                        ]}
+                        expanded={true}
+                        density="comfortable"
+                        bordered={true}
+                        resizable={true}
+                    />
+                </div>
+
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #e9ecef',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0' }}>📋 Código del Ejemplo 2:</h5>
+                    <pre style={{
+                        background: '#ffffff',
+                        padding: '1rem',
+                        borderRadius: '4px',
+                        border: '1px solid #dee2e6',
+                        fontSize: '0.75rem',
+                        overflow: 'auto',
+                        margin: '0'
+                    }}>
+{`<DataTable2
+    id="expandable-table-2"
+    columns={[
+        { id: 'user', label: 'Usuario', sortable: true },
+        { id: 'email', label: 'Email', sortable: true },
+        { id: 'role', label: 'Rol', filterable: true },
+        { id: 'status', label: 'Estado', filterable: true }
+    ]}
+    rows={[
+        {
+            id: 1,
+            user: 'Ana García',
+            email: 'ana.garcia@empresa.com',
+            role: 'Admin',
+            status: 'Activo',
+            info: 'Administradora principal del sistema. Acceso completo a todas las funcionalidades. Última conexión: hace 2 horas.'
+        },
+        {
+            id: 2,
+            user: 'Carlos López',
+            email: 'carlos.lopez@empresa.com',
+            role: 'Editor',
+            status: 'Activo',
+            info: 'Editor de contenido con permisos de publicación. Especializado en marketing digital.'
+        }
+    ]}
+    expanded={true}
+    density="comfortable"
+    bordered={true}
+    resizable={true}
+/>`}
+                    </pre>
+                </div>
+
+                <div style={{
+                    background: '#fff',
+                    padding: '1.5rem',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                    marginBottom: '1rem'
+                }}>
+                    <h4>Ejemplo 3: Info con Acciones Personalizadas</h4>
+                    <DataTable2
+                        id="expandable-table-3"
+                        columns={[
+                            { id: 'ticket', label: 'Ticket #', width: 100 },
+                            { id: 'title', label: 'Título', sortable: true },
+                            { id: 'priority', label: 'Prioridad', filterable: true },
+                            { id: 'assignee', label: 'Asignado a', filterable: true },
+                            { id: 'created', label: 'Creado', sortable: true }
+                        ]}
+                        rows={[
+                            {
+                                id: 1,
+                                ticket: 'TK-001',
+                                title: 'Error en login de usuarios',
+                                priority: 'Alta',
+                                assignee: 'Juan Pérez',
+                                created: '2024-01-15',
+                                info: {
+                                    action: () => alert('Abriendo ticket TK-001 en nueva ventana'),
+                                    content: (
+                                        <div style={{ padding: '1rem', background: '#f8f9fa', border: '1px solid #e9ecef', borderRadius: '4px' }}>
+                                            <div style={{ marginBottom: '1rem' }}>
+                                                <strong>Descripción:</strong>
+                                                <p style={{ margin: '0.25rem 0', fontSize: '0.875rem' }}>
+                                                    Los usuarios reportan problemas al intentar iniciar sesión.
+                                                    El error aparece intermitentemente y afecta aproximadamente al 15% de los intentos.
+                                                </p>
+                                            </div>
+                                            <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+                                                <div style={{ fontSize: '0.875rem' }}>
+                                                    <strong>Pasos para reproducir:</strong>
+                                                    <ol style={{ margin: '0.25rem 0', paddingLeft: '1rem' }}>
+                                                        <li>Ir a la página de login</li>
+                                                        <li>Introducir credenciales válidas</li>
+                                                        <li>Hacer clic en "Iniciar sesión"</li>
+                                                        <li>Error aparece aleatoriamente</li>
+                                                    </ol>
+                                                </div>
+                                                <div style={{ fontSize: '0.875rem' }}>
+                                                    <strong>Información técnica:</strong><br/>
+                                                    <code style={{ background: '#f1f3f4', padding: '0.25rem', borderRadius: '2px' }}>
+                                                        Error 500 - Internal Server Error
+                                                    </code><br/>
+                                                    <strong>Navegadores afectados:</strong> Chrome, Firefox<br/>
+                                                    <strong>Dispositivos:</strong> Desktop y móvil
+                                                </div>
+                                            </div>
+                                            <div style={{ display: 'flex', gap: '0.5rem' }}>
+                                                <button style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', border: '1px solid #007bff', background: '#007bff', color: 'white', borderRadius: '3px', cursor: 'pointer' }}>
+                                                    Ver detalles completos
+                                                </button>
+                                                <button style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', border: '1px solid #28a745', background: '#28a745', color: 'white', borderRadius: '3px', cursor: 'pointer' }}>
+                                                    Asignar a mí
+                                                </button>
+                                                <button style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', border: '1px solid #ffc107', background: '#ffc107', color: '#212529', borderRadius: '3px', cursor: 'pointer' }}>
+                                                    Cambiar prioridad
+                                                </button>
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            },
+                            {
+                                id: 2,
+                                ticket: 'TK-002',
+                                title: 'Mejora en el dashboard',
+                                priority: 'Media',
+                                assignee: 'Ana Martín',
+                                created: '2024-01-14',
+                                info: {
+                                    action: () => alert('Abriendo ticket TK-002'),
+                                    content: (
+                                        <div style={{ padding: '1rem', background: '#e7f3ff', border: '1px solid #b3d9ff', borderRadius: '4px' }}>
+                                            <strong>Solicitud de mejora:</strong>
+                                            <p style={{ margin: '0.5rem 0', fontSize: '0.875rem' }}>
+                                                Agregar gráficos interactivos al dashboard principal para mejorar la visualización de datos.
+                                            </p>
+                                            <div style={{ fontSize: '0.875rem' }}>
+                                                <strong>Estado:</strong> En progreso (60% completado)<br/>
+                                                <strong>Tiempo estimado:</strong> 3 días adicionales<br/>
+                                                <strong>Última actualización:</strong> Hace 4 horas
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            }
+                        ]}
+                        expanded={true}
+                        density="normal"
+                        theme="default"
+                        resizable={true}
+                        searchable={true}
+                    />
+                </div>
+
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #e9ecef',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0' }}>📋 Código del Ejemplo 3:</h5>
+                    <pre style={{
+                        background: '#ffffff',
+                        padding: '1rem',
+                        borderRadius: '4px',
+                        border: '1px solid #dee2e6',
+                        fontSize: '0.75rem',
+                        overflow: 'auto',
+                        margin: '0'
+                    }}>
+{`<DataTable2
+    id="expandable-table-3"
+    columns={[
+        { id: 'ticket', label: 'Ticket #', width: 100 },
+        { id: 'title', label: 'Título', sortable: true },
+        { id: 'priority', label: 'Prioridad', filterable: true }
+    ]}
+    rows={[
+        {
+            id: 1,
+            ticket: 'TK-001',
+            title: 'Error en login de usuarios',
+            priority: 'Alta',
+            info: {
+                action: () => alert('Abriendo ticket TK-001'),
+                content: (
+                    <div style={{ padding: '1rem', background: '#f8f9fa' }}>
+                        <div style={{ marginBottom: '1rem' }}>
+                            <strong>Descripción:</strong>
+                            <p>Los usuarios reportan problemas al iniciar sesión.</p>
+                        </div>
+                        <div style={{ display: 'flex', gap: '0.5rem' }}>
+                            <button>Ver detalles completos</button>
+                            <button>Asignar a mí</button>
+                            <button>Cambiar prioridad</button>
+                        </div>
+                    </div>
+                )
+            }
+        }
+    ]}
+    expanded={true}
+    density="normal"
+    resizable={true}
+    searchable={true}
+/>`}
+                    </pre>
+                </div>
+
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #e9ecef'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0' }}>💡 Cómo usar filas expandibles:</h5>
+                    <ul style={{ margin: '0', paddingLeft: '1.5rem', fontSize: '0.875rem' }}>
+                        <li><strong>Campo info como string:</strong> Se muestra directamente como texto expandible</li>
+                        <li><strong>Campo info como objeto:</strong> Debe tener <code>content</code> (JSX) y opcionalmente <code>action</code> (función)</li>
+                        <li><strong>Prop expanded:</strong> Controla si las filas inician expandidas o colapsadas</li>
+                        <li><strong>Icono de expansión:</strong> Aparece automáticamente en la columna de acciones cuando hay info</li>
+                        <li><strong>Click en el icono:</strong> Ejecuta la función <code>action</code> si está definida, o expande/colapsa la fila</li>
+                    </ul>
+                </div>
+            </ExampleSection>
+        </ExampleLayout>
+    )
+}
+
+export default DataTable2Examples