ywana-core8 0.1.75 → 0.1.76

package/src/html/table2.example.js

@@ -0,0 +1,703 @@
+import React, { useState } from 'react'
+import { DataTable2 } from './table2'
+import { Button } from './button'
+import { Text } from './text'
+
+/**
+ * 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)
+    }
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '1400px', maxHeight: '100vh', overflow: 'auto' }}>
+            <h1>DataTable2 - Versión Mejorada (100% Compatible)</h1>
+            
+            <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>
+
+            {/* Controles de demostración */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Controles de Demostración</h3>
+                <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>
+            </section>
+
+            {/* DataTable original (Compatible) */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>📋 DataTable Original (100% Compatible)</h3>
+                <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>
+            </section>
+
+            {/* DataTable con nuevas características */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🚀 DataTable2 con Nuevas Características</h3>
+                <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>
+            </section>
+
+            {/* Temas y variantes */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>🎨 Temas y Variantes</h3>
+                <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>
+            </section>
+
+            {/* Densidades */}
+            <section style={{ marginBottom: '2rem' }}>
+                <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="info">
+                            💡 <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>
+            </section>
+
+            {/* Virtual Scrolling */}
+            {showAdvanced && (
+                <section 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>
+        </div>
+    )
+}
+
+export default DataTable2Examples