ywana-core8 0.1.79 → 0.1.81

package/src/html/table2.example.js

@@ -1,25 +1,67 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 import { DataTable2 } from './table2'
 import { Button } from './button'
-import { Text } from './text'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
+
+// Ejemplo de componente personalizado para el panel
+const CustomAnalyticsPanel = ({ columns = [], visibleColumns = [] }) => {
+    // Validación robusta de props para evitar errores
+    const safeColumns = Array.isArray(columns) ? columns : []
+    const safeVisibleColumns = Array.isArray(visibleColumns) ? visibleColumns : []
+
+    const totalColumns = safeColumns.length
+    const visibleCount = safeVisibleColumns.length
+    const hiddenCount = Math.max(0, totalColumns - visibleCount)
+
+    console.log('CustomAnalyticsPanel props:', {
+        columns: safeColumns.length,
+        visibleColumns: safeVisibleColumns.length
+    })
+
+    return (
+        <div className="datatable2__panel-section">
+            <h4 className="datatable2__panel-section-title">Análisis Personalizado</h4>
+            <div style={{ padding: '1rem 0' }}>
+                <p style={{ margin: '0 0 1rem 0', fontSize: '0.875rem', color: '#6b7280' }}>
+                    Este es un componente React personalizado que puede acceder a los datos de la tabla.
+                </p>
+                <div style={{ background: '#f8fafc', padding: '1rem', borderRadius: '6px', border: '1px solid #e2e8f0' }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0', fontSize: '0.875rem', fontWeight: 'bold' }}>Estadísticas:</h5>
+                    <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                        <li>Total de columnas: {totalColumns}</li>
+                        <li>Columnas visibles: {visibleCount}</li>
+                        <li>Columnas ocultas: {hiddenCount}</li>
+                    </ul>
+                    {totalColumns > 0 ? (
+                        <div style={{ marginTop: '1rem', padding: '0.5rem', background: '#e0f2fe', borderRadius: '4px' }}>
+                            <strong style={{ fontSize: '0.8rem', color: '#0277bd' }}>
+                                Visibilidad: {Math.round((visibleCount / totalColumns) * 100)}%
+                            </strong>
+                        </div>
+                    ) : (
+                        <div style={{ marginTop: '1rem', padding: '0.5rem', background: '#fef3c7', borderRadius: '4px' }}>
+                            <strong style={{ fontSize: '0.8rem', color: '#92400e' }}>
+                                No hay datos de columnas disponibles
+                            </strong>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
 
 /**
  * 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([])
+    const [allChecked, setAllChecked] = useState(false)
+    const [checkedRows, setCheckedRows] = useState({})
 
     // Datos de ejemplo
     const columns = [
-        {
-            id: 'checked',
-            label: '',
-            type: 'CHECK',
-            sortable: false,
-            width: 50
-        },
         {
             id: 'id',
             label: 'ID',
@@ -35,8 +77,7 @@ export const DataTable2Examples = () => {
             sortable: true,
             filterable: true,
             editable: true,
-            resizable: true,
-            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+            resizable: true
         },
         {
             id: 'email',
@@ -45,123 +86,235 @@ export const DataTable2Examples = () => {
             sortable: true,
             filterable: true,
             editable: true,
-            resizable: true,
-            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+            resizable: true
         },
         {
             id: 'age',
             label: 'Age',
             type: 'Number',
             sortable: true,
+            filterable: true,
             editable: true,
-            resizable: true,
-            min: 0,
-            max: 120,
-            onChange: (rowId, fieldId, value) => console.log('Edit:', rowId, fieldId, value)
+            resizable: true
         },
         {
             id: 'status',
             label: 'Status',
-            type: 'SELECTION',
+            type: 'String',
             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)
+                { id: 'active', label: 'Active' },
+                { id: 'inactive', label: 'Inactive' },
+                { id: 'pending', label: 'Pending' }
+            ]
         }
     ]
 
     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: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            age: 30,
+            status: 'active',
+            info: {
+                action: () => console.log('Expandir usuario 1'),
+                content: (
+                    <div style={{ padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                        <h5 style={{ margin: '0 0 0.5rem 0' }}>Información del Usuario</h5>
+                        <p style={{ margin: '0', fontSize: '0.875rem' }}>
+                            Usuario administrador con acceso completo al sistema. 
+                            Última conexión: hace 2 horas.
+                        </p>
+                    </div>
+                )
+            }
         },
-        { 
-            id: 4, 
-            name: 'Alice Brown', 
-            email: 'alice@example.com', 
-            age: 28, 
-            status: 'inactive', 
-            verified: true,
-            disabled: true
+        {
+            id: 2,
+            name: 'Jane Smith',
+            email: 'jane@example.com',
+            age: 25,
+            status: 'pending',
+            info: 'Usuario nuevo pendiente de verificación. Se requiere aprobación manual.'
         },
-        { 
-            id: 5, 
-            name: 'Charlie Wilson', 
-            email: 'charlie@example.com', 
-            age: 42, 
-            status: 'active', 
-            verified: true
+        {
+            id: 3,
+            name: 'Bob Johnson',
+            email: 'bob@example.com',
+            age: 35,
+            status: 'inactive',
+            info: {
+                action: () => console.log('Expandir usuario 3'),
+                content: (
+                    <div style={{ padding: '1rem', background: '#fff3cd', border: '1px solid #ffeaa7', borderRadius: '4px' }}>
+                        <h5 style={{ margin: '0 0 0.5rem 0', color: '#856404' }}>⚠️ Cuenta Inactiva</h5>
+                        <p style={{ margin: '0', fontSize: '0.875rem', color: '#856404' }}>
+                            Cuenta suspendida por inactividad. Último acceso: hace 6 meses.
+                        </p>
+                    </div>
+                )
+            }
         }
     ]
 
-    // 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) => {
+    // Funciones para manejar selección múltiple
+    const handleRowSelection = (rowId, row) => {
         console.log('Row selected:', row)
-        setSelectedRows(prev => [...prev, row.id])
+        setSelectedRows(prev => {
+            if (prev.includes(rowId)) {
+                return prev.filter(id => id !== rowId)
+            } else {
+                return [...prev, rowId]
+            }
+        })
     }
 
-    const handleSort = (dragged, dropped) => {
-        console.log('Sort:', dragged, dropped)
+    const handleCheckboxSelection = (rowId, row) => {
+        console.log('Checkbox selection:', rowId, row)
+        setCheckedRows(prev => ({
+            ...prev,
+            [rowId]: !prev[rowId]
+        }))
     }
 
-    const handleCheckAll = (ids, checked) => {
-        console.log('Check all:', ids, checked)
-        setSelectedRows(checked ? ids : [])
+    const handleSelectAll = (checked) => {
+        console.log('Select all:', checked)
+        setAllChecked(checked)
+        if (checked) {
+            const allIds = {}
+            rows.forEach(row => {
+                allIds[row.id] = true
+            })
+            setCheckedRows(allIds)
+        } else {
+            setCheckedRows({})
+        }
     }
 
-    const handleExport = (rows, columns) => {
-        console.log('Export:', rows.length, 'rows')
-        // Custom export logic here
+    const handleBulkAction = (action) => {
+        const selectedIds = Object.keys(checkedRows).filter(id => checkedRows[id])
+        console.log(`Bulk action "${action}" on rows:`, selectedIds)
+
+        switch (action) {
+            case 'delete':
+                alert(`Eliminar ${selectedIds.length} elementos seleccionados`)
+                break
+            case 'activate':
+                alert(`Activar ${selectedIds.length} elementos seleccionados`)
+                break
+            case 'export':
+                alert(`Exportar ${selectedIds.length} elementos seleccionados`)
+                break
+            default:
+                console.log('Acción no reconocida:', action)
+        }
     }
 
-    const handleSearch = (term) => {
-        console.log('Search:', term)
+    // Datos con estado de checkbox actualizado
+    const rowsWithCheckboxes = rows.map(row => ({
+        ...row,
+        checked: checkedRows[row.id] || false
+    }))
+
+    // 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: 'editable-table', title: 'Tabla Editable' }
+            ]
+        },
+        {
+            id: 'selection-examples',
+            title: 'Selección Múltiple',
+            icon: 'check_box',
+            subsections: [
+                { id: 'table-js-compatibility', title: '🔄 Compatibilidad con table.js' },
+                { id: 'checkbox-selection', title: 'Selección con Checkboxes' },
+                { id: 'row-selection', title: 'Selección por Click' },
+                { id: 'bulk-actions', title: 'Acciones en Lote' }
+            ]
+        },
+        {
+            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: 'readability-variants',
+            title: 'Variantes de Legibilidad',
+            icon: 'visibility',
+            subsections: [
+                { id: 'readable-standard', title: 'Legibilidad Estándar' },
+                { id: 'readable-large', title: 'Texto Grande' },
+                { id: 'readable-contrast', title: 'Alto Contraste' },
+                { id: 'readable-dyslexia', title: 'Optimizado para Dislexia' },
+                { id: 'readable-focus', title: 'Modo Enfoque' },
+                { id: 'readable-dark', title: 'Modo Oscuro Legible' }
+            ]
+        },
+        {
+            id: 'advanced-features',
+            title: 'Funcionalidades Avanzadas',
+            icon: 'tune',
+            subsections: [
+                { id: 'sidebar-column-visibility', title: 'Toolbar Vertical y Panel de Columnas' },
+                { id: 'row-numbers-only', title: 'Solo Números de Fila' }
+            ]
+        },
+        {
+            id: 'performance',
+            title: 'Rendimiento y Escalabilidad',
+            icon: 'speed',
+            subsections: [
+                { id: 'massive-data', title: 'Datos Masivos (5,000 filas)' },
+                { id: 'height-configurations', title: 'Configuraciones de Altura' },
+                { id: 'advanced-filters', title: 'Sistema de Filtros Avanzado' },
+                { id: 'summary-system', title: 'Sistema de Sumarios y Totales' },
+                { id: 'export-system', title: 'Sistema de Exportación Avanzado' }
+            ]
+        },
+        {
+            id: 'loading-states',
+            title: 'Estados de Carga',
+            icon: 'hourglass_empty'
+        },
+        {
+            id: 'api-reference',
+            title: 'Referencia API',
+            icon: 'code'
+        }
+    ]
+
+    const handleCellEdit = (columnId, rowId, value) => {
+        console.log('Cell edited:', columnId, rowId, value)
     }
 
     const simulateLoading = () => {
@@ -170,36 +323,26 @@ export const DataTable2Examples = () => {
     }
 
     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>
+        <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>Filas expandibles</strong> - Con campo info</li>
+                        <li>📏 <strong>Columnas redimensionables</strong> - Con persistencia</li>
+                        <li>✏️ <strong>Edición inline</strong> - Campos integrados sin bordes</li>
+                        <li>🎨 <strong>Estilos minimalistas</strong> - Diseño elegante</li>
+                        <li>🔍 <strong>Filtros por columna</strong> - Búsqueda avanzada</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', 
@@ -208,445 +351,1839 @@ export const DataTable2Examples = () => {
                     display: 'flex',
                     gap: '1rem',
                     alignItems: 'center',
-                    flexWrap: 'wrap'
+                    flexWrap: 'wrap',
+                    marginBottom: '2rem'
                 }}>
                     <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)}
+                        loading={isLoading}
                     />
                     <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>
+            </ExampleSection>
 
-            {/* 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"
+            <ExampleSection id="basic-examples" title="Ejemplos Básicos" icon="table_chart">
+                <ExampleSubsection id="simple-table" title="Tabla Simple">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="simple-table-demo"
+                            columns={columns}
+                            rows={rows}
+                            density="normal"
                             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"
+                            hover={true}
                         />
                     </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>
+                    <CodeSnippet
+                        title="Código de Tabla Simple"
+                        code={`const columns = [
+    {
+        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
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true,
+        resizable: true
+    },
+    {
+        id: 'age',
+        label: 'Age',
+        type: 'Number',
+        sortable: true,
+        filterable: true,
+        editable: true,
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true,
+        resizable: true,
+        options: [
+            { label: 'Active', value: 'active' },
+            { label: 'Inactive', value: 'inactive' },
+            { label: 'Pending', value: 'pending' }
+        ]
+    }
+]
+
+const rows = [
+    {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        age: 30,
+        status: 'active'
+    },
+    {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        age: 25,
+        status: 'pending'
+    },
+    // ... más filas
+]
+
+<DataTable2
+    id="simple-table-demo"
+    columns={columns}
+    rows={rows}
+    density="normal"
+    striped={true}
+    hover={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="sortable-table" title="Tabla Ordenable">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
                         <DataTable2
-                            columns={columns.slice(1, 5)} // Sin checkbox para mejor visualización
-                            rows={rows.slice(0, 3)}
+                            id="sortable-table-demo"
+                            columns={columns}
+                            rows={rows}
+                            onSort={(columnId, direction) => console.log('Sort:', columnId, direction)}
                             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>
+
+                    <CodeSnippet
+                        title="Código de Tabla Ordenable"
+                        code={`const columns = [
+    {
+        id: 'id',
+        label: 'ID',
+        type: 'Number',
+        sortable: true,        // ← Habilita ordenamiento
+        resizable: true,
+        width: 80
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,        // ← Habilita ordenamiento
+        filterable: true,
+        editable: true,
+        resizable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,        // ← Habilita ordenamiento
+        filterable: true,
+        editable: true,
+        resizable: true
+    },
+    {
+        id: 'age',
+        label: 'Age',
+        type: 'Number',
+        sortable: true,        // ← Habilita ordenamiento
+        filterable: true,
+        editable: true,
+        resizable: true
+    }
+]
+
+const handleSort = (columnId, direction) => {
+    console.log('Sorting column:', columnId, 'direction:', direction)
+    // DataTable2 maneja el ordenamiento automáticamente
+    // Esta función es opcional para lógica adicional
+}
+
+<DataTable2
+    id="sortable-table-demo"
+    columns={columns}
+    rows={rows}
+    onSort={handleSort}
+    density="compact"
+    bordered={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="editable-table" title="Tabla Editable">
+                    <div style={{ 
+                        background: '#fff', 
+                        padding: '1rem', 
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
                         <DataTable2
-                            columns={columns.slice(1, 5)}
-                            rows={rows.slice(0, 3)}
-                            density="normal"
-                            rowHeight="medium"
+                            id="editable-table-demo"
+                            columns={columns}
+                            rows={rows}
+                            editable={true}
+                            onCellEdit={handleCellEdit}
+                            onSelect={handleRowSelection}
+                            selectedRows={selectedRows}
                             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)}
+                            filterable={true}
                             density="comfortable"
-                            rowHeight="large"
-                            resizable={true}
-                            bordered={true}
-                            onColumnResize={(columnId, width) => console.log(`Column ${columnId} resized to ${width}px`)}
                         />
                     </div>
+
+                    <CodeSnippet
+                        title="Código de Tabla Editable"
+                        code={`const columns = [
+    {
+        id: 'id',
+        label: 'ID',
+        type: 'Number',
+        sortable: true,
+        resizable: true,
+        width: 80
+        // No editable - ID no se puede editar
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true,        // ← Habilita edición
+        resizable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true,        // ← Habilita edición
+        resizable: true
+    },
+    {
+        id: 'age',
+        label: 'Age',
+        type: 'Number',
+        sortable: true,
+        filterable: true,
+        editable: true,        // ← Habilita edición
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true,        // ← Habilita edición
+        resizable: true,
+        options: [             // ← Opciones para dropdown
+            { label: 'Active', value: 'active' },
+            { label: 'Inactive', value: 'inactive' },
+            { label: 'Pending', value: 'pending' }
+        ]
+    }
+]
+
+const handleCellEdit = (rowId, columnId, newValue) => {
+    console.log('Cell edited:', rowId, columnId, newValue)
+    // Aquí actualizarías los datos
+}
+
+<DataTable2
+    id="editable-table-demo"
+    columns={columns}
+    rows={rows}
+    editable={true}
+    onCellEdit={handleCellEdit}
+    onSelect={handleRowSelection}
+    selectedRows={selectedRows}
+    resizable={true}
+    filterable={true}
+    density="comfortable"
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="selection-examples" title="Selección Múltiple" icon="check_box">
+                <ExampleSubsection id="table-js-compatibility" title="🔄 Compatibilidad 100% con table.js">
                     <div style={{
-                        marginTop: '1rem',
-                        padding: '0.75rem',
-                        background: '#e3f2fd',
+                        background: '#e8f5e8',
+                        padding: '1rem',
                         borderRadius: '4px',
-                        border: '1px solid #bbdefb'
+                        border: '1px solid #4caf50',
+                        marginBottom: '1rem'
                     }}>
-                        <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>
+                        <h5 style={{ margin: '0 0 0.5rem 0', color: '#2e7d32' }}>✅ Migración Sin Cambios</h5>
+                        <p style={{ margin: '0', fontSize: '0.875rem', color: '#2e7d32' }}>
+                            DataTable2 es 100% compatible con table.js. Puedes reemplazar <code>&lt;DataTable&gt;</code> por
+                            <code>&lt;DataTable2&gt;</code> sin cambiar tu código existente. La columna especial <code>id="checked"</code>
+                            y todos los props funcionan exactamente igual.
+                        </p>
                     </div>
-                </div>
-            </section>
 
-            {/* Virtual Scrolling */}
-            {showAdvanced && (
-                <section style={{ marginBottom: '2rem' }}>
-                    <h3>📱 Virtual Scrolling (1000 filas)</h3>
-                    <div style={{ 
-                        background: '#fff', 
-                        padding: '1rem', 
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
                         border: '1px solid #ddd',
-                        borderRadius: '8px'
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
                     }}>
-                        <DataTable2 
-                            columns={columns.slice(1, 6)} // Sin checkbox para simplificar
-                            rows={largeDataset}
-                            virtualScrolling={true}
-                            pageSize={50}
-                            searchable={true}
-                            exportable={true}
-                            stickyHeader={true}
-                            showRowNumbers={true}
+                        <DataTable2
+                            id="table-js-compatibility-example"
+                            columns={[
+                                {
+                                    id: 'checked',
+                                    label: '',
+                                    type: 'CHECK',
+                                    sortable: false,
+                                    width: 50,
+                                    onChange: (rowId, fieldId, value) => {
+                                        console.log('table.js style onChange:', rowId, fieldId, value)
+                                        setCheckedRows(prev => ({
+                                            ...prev,
+                                            [rowId]: value
+                                        }))
+                                    }
+                                },
+                                ...columns.slice(0, 4)
+                            ]}
+                            rows={rows.map(row => ({
+                                ...row,
+                                checked: checkedRows[row.id] || false
+                            }))}
+                            onRowSelection={(row, event) => {
+                                console.log('table.js style onRowSelection:', row, event)
+                                handleRowSelection(row.id, row)
+                            }}
+                            onCheckAll={(ids, checked) => {
+                                console.log('table.js style onCheckAll:', ids, checked)
+                                if (checked) {
+                                    const allIds = {}
+                                    ids.forEach(id => {
+                                        allIds[id] = true
+                                    })
+                                    setCheckedRows(allIds)
+                                } else {
+                                    setCheckedRows({})
+                                }
+                                setAllChecked(checked)
+                            }}
+                            allChecked={allChecked}
+                            density="normal"
                             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', 
+                    <CodeSnippet
+                        language="javascript"
+                        code={`// ✅ ANTES (table.js) - Funciona exactamente igual
+import { DataTable } from './table'
+
+const columns = [
+    {
+        id: 'checked',        // ← Columna especial para checkboxes
+        label: '',
+        type: 'CHECK',
+        sortable: false,
+        width: 50,
+        onChange: (rowId, fieldId, value) => {
+            console.log('Checkbox changed:', rowId, fieldId, value)
+            // Actualizar estado del checkbox
+        }
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true
+    }
+]
+
+const rows = [
+    {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        checked: false,        // ← Estado del checkbox
+        checkDisabled: false   // ← Opcional: deshabilitar checkbox
+    },
+    // ... más filas
+]
+
+<DataTable
+    columns={columns}
+    rows={rows}
+    onRowSelection={(row, event) => {
+        console.log('Row clicked:', row)
+    }}
+    onCheckAll={(ids, checked) => {
+        console.log('Select all:', ids, checked)
+    }}
+/>
+
+// ✅ DESPUÉS (table2.js) - ¡Sin cambios!
+import { DataTable2 } from './table2'
+
+<DataTable2
+    columns={columns}           // ← Misma configuración
+    rows={rows}                 // ← Mismos datos
+    onRowSelection={(row, event) => {  // ← Misma función
+        console.log('Row clicked:', row)
+    }}
+    onCheckAll={(ids, checked) => {    // ← Misma función
+        console.log('Select all:', ids, checked)
+    }}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="checkbox-selection" title="Selección con Checkboxes">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
                         border: '1px solid #ddd',
                         borderRadius: '8px',
-                        display: 'grid',
-                        gridTemplateColumns: '1fr 1fr',
-                        gap: '1rem'
+                        marginBottom: '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>
+                        <DataTable2
+                            id="checkbox-selection-table"
+                            columns={columns}
+                            rows={rowsWithCheckboxes}
+                            onSelect={handleCheckboxSelection}
+                            showSelectAll={true}
+                            allChecked={allChecked}
+                            onCheckAll={handleSelectAll}
+                            density="normal"
+                            striped={true}
+                            resizable={true}
+                        />
                     </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',
+                        background: '#f8f9fa',
                         padding: '1rem',
                         borderRadius: '4px',
-                        border: '1px solid #ffcdd2'
+                        border: '1px solid #e9ecef',
+                        marginBottom: '1rem'
                     }}>
-                        <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>
+                        <strong>Estado actual:</strong> {Object.keys(checkedRows).filter(id => checkedRows[id]).length} elementos seleccionados
+                        <br />
+                        <strong>IDs seleccionados:</strong> {Object.keys(checkedRows).filter(id => checkedRows[id]).join(', ') || 'Ninguno'}
                     </div>
+
+                    <CodeSnippet
+                        language="javascript"
+                        code={`const columns = [
+    {
+        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
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true,
+        resizable: true
+    },
+    {
+        id: 'age',
+        label: 'Age',
+        type: 'Number',
+        sortable: true,
+        filterable: true,
+        editable: true,
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        editable: true,
+        resizable: true,
+        options: [
+            { label: 'Active', value: 'active' },
+            { label: 'Inactive', value: 'inactive' },
+            { label: 'Pending', value: 'pending' }
+        ]
+    }
+]
+
+const rows = [
+    {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        age: 30,
+        status: 'active',
+        checked: false  // Campo requerido para checkboxes
+    },
+    // ... más filas
+]
+
+const handleCheckboxSelection = (rowId, row) => {
+    setCheckedRows(prev => ({
+        ...prev,
+        [rowId]: !prev[rowId]
+    }))
+}
+
+const handleSelectAll = (checked) => {
+    setAllChecked(checked)
+    if (checked) {
+        const allIds = {}
+        rows.forEach(row => {
+            allIds[row.id] = true
+        })
+        setCheckedRows(allIds)
+    } else {
+        setCheckedRows({})
+    }
+}
+
+<DataTable2
+    columns={columns}
+    rows={rowsWithCheckboxes}
+    onSelect={handleCheckboxSelection}
+    showSelectAll={true}
+    allChecked={allChecked}
+    onCheckAll={handleSelectAll}
+    density="normal"
+    striped={true}
+    resizable={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="row-selection" title="Selección por Click">
                     <div style={{
-                        background: '#e8f5e8',
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="row-selection-table"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            onSelect={handleRowSelection}
+                            selectedRows={selectedRows}
+                            density="comfortable"
+                            hover={true}
+                            bordered={true}
+                        />
+                    </div>
+
+                    <div style={{
+                        background: '#f8f9fa',
                         padding: '1rem',
                         borderRadius: '4px',
-                        border: '1px solid #c8e6c9'
+                        border: '1px solid #e9ecef',
+                        marginBottom: '1rem'
                     }}>
-                        <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>
+                        <strong>Filas seleccionadas:</strong> {selectedRows.length}
+                        <br />
+                        <strong>IDs:</strong> {selectedRows.join(', ') || 'Ninguna'}
                     </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>
+                    <CodeSnippet
+                        language="javascript"
+                        code={`const handleRowSelection = (rowId, row) => {
+    setSelectedRows(prev => {
+        if (prev.includes(rowId)) {
+            return prev.filter(id => id !== rowId)
+        } else {
+            return [...prev, rowId]
+        }
+    })
+}
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    onSelect={handleRowSelection}
+    selectedRows={selectedRows}
+    density="comfortable"
+    hover={true}
+    bordered={true}
+/>`}
+                    />
+                </ExampleSubsection>
 
+                <ExampleSubsection id="table-js-compatibility" title="Compatibilidad con table.js">
                     <div style={{
-                        background: '#d4edda',
+                        background: '#fff3cd',
                         padding: '1rem',
                         borderRadius: '4px',
-                        marginTop: '1rem',
-                        border: '1px solid #c3e6cb'
+                        border: '1px solid #ffeaa7',
+                        marginBottom: '1rem'
                     }}>
-                        <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>
+                        <h5 style={{ margin: '0 0 0.5rem 0', color: '#856404' }}>🔄 100% Compatible con table.js</h5>
+                        <p style={{ margin: '0', fontSize: '0.875rem', color: '#856404' }}>
+                            DataTable2 es completamente compatible con la API de table.js. Puedes usar la columna especial <code>id="checked"</code>
+                            y el prop <code>onRowSelection</code> exactamente como en la versión original.
+                        </p>
                     </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 style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="table-js-compatibility-example"
+                            columns={[
+                                {
+                                    id: 'checked',
+                                    label: '',
+                                    type: 'CHECK',
+                                    sortable: false,
+                                    width: 50,
+                                    onChange: (rowId, fieldId, value) => {
+                                        console.log('table.js style onChange:', rowId, fieldId, value)
+                                        setCheckedRows(prev => ({
+                                            ...prev,
+                                            [rowId]: value
+                                        }))
+                                    }
+                                },
+                                ...columns.slice(0, 4)
+                            ]}
+                            rows={rows.map(row => ({
+                                ...row,
+                                checked: checkedRows[row.id] || false
+                            }))}
+                            onRowSelection={(row, event) => {
+                                console.log('table.js style onRowSelection:', row, event)
+                                handleRowSelection(row.id, row)
+                            }}
+                            onCheckAll={(ids, checked) => {
+                                console.log('table.js style onCheckAll:', ids, checked)
+                                if (checked) {
+                                    const allIds = {}
+                                    ids.forEach(id => {
+                                        allIds[id] = true
+                                    })
+                                    setCheckedRows(allIds)
+                                } else {
+                                    setCheckedRows({})
+                                }
+                                setAllChecked(checked)
+                            }}
+                            density="normal"
+                            striped={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        language="javascript"
+                        code={`// Configuración 100% compatible con table.js
+const columns = [
+    {
+        id: 'checked',        // Columna especial detectada automáticamente
+        label: '',
+        type: 'CHECK',
+        sortable: false,
+        width: 50,
+        onChange: (rowId, fieldId, value) => {
+            // Manejo de cambios en checkboxes individuales
+            console.log('Checkbox changed:', rowId, fieldId, value)
+        }
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        // ... resto de configuración
+    }
+]
+
+const rows = [
+    {
+        id: 1,
+        name: 'John Doe',
+        checked: false,        // Estado del checkbox
+        checkDisabled: false   // Opcional: deshabilitar checkbox
+    },
+    // ... más filas
+]
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    onRowSelection={(row, event) => {
+        // Compatible con table.js - se llama al hacer click en la fila
+        console.log('Row selected:', row)
+    }}
+    onCheckAll={(ids, checked) => {
+        // Compatible con table.js - se llama al usar "Seleccionar todo"
+        console.log('Check all:', ids, checked)
+    }}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="bulk-actions" title="Acciones en Lote">
+                    <div style={{
+                        display: 'flex',
+                        gap: '1rem',
+                        marginBottom: '1rem',
+                        padding: '1rem',
+                        background: '#f8f9fa',
+                        borderRadius: '4px',
+                        alignItems: 'center'
+                    }}>
+                        <span style={{ fontWeight: 'bold' }}>
+                            Seleccionados: {Object.keys(checkedRows).filter(id => checkedRows[id]).length}
+                        </span>
+                        <Button
+                            label="🗑️ Eliminar"
+                            variant="danger"
+                            size="small"
+                            disabled={Object.keys(checkedRows).filter(id => checkedRows[id]).length === 0}
+                            action={() => handleBulkAction('delete')}
+                        />
+                        <Button
+                            label="✅ Activar"
+                            variant="primary"
+                            size="small"
+                            disabled={Object.keys(checkedRows).filter(id => checkedRows[id]).length === 0}
+                            action={() => handleBulkAction('activate')}
+                        />
+                        <Button
+                            label="📤 Exportar"
+                            variant="secondary"
+                            size="small"
+                            disabled={Object.keys(checkedRows).filter(id => checkedRows[id]).length === 0}
+                            action={() => handleBulkAction('export')}
+                        />
+                    </div>
+
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="bulk-actions-table"
+                            columns={columns}
+                            rows={rowsWithCheckboxes}
+                            onSelect={handleCheckboxSelection}
+                            showSelectAll={true}
+                            allChecked={allChecked}
+                            onCheckAll={handleSelectAll}
+                            density="compact"
+                            striped={true}
+                            filterable={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        language="javascript"
+                        code={`const handleBulkAction = (action) => {
+    const selectedIds = Object.keys(checkedRows).filter(id => checkedRows[id])
+
+    switch (action) {
+        case 'delete':
+            alert(\`Eliminar \${selectedIds.length} elementos seleccionados\`)
+            break
+        case 'activate':
+            alert(\`Activar \${selectedIds.length} elementos seleccionados\`)
+            break
+        case 'export':
+            alert(\`Exportar \${selectedIds.length} elementos seleccionados\`)
+            break
+    }
+}
+
+// Barra de acciones
+<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+    <span>Seleccionados: {Object.keys(checkedRows).filter(id => checkedRows[id]).length}</span>
+    <Button
+        label="Eliminar"
+        variant="danger"
+        disabled={Object.keys(checkedRows).filter(id => checkedRows[id]).length === 0}
+        action={() => handleBulkAction('delete')}
+    />
+    <Button
+        label="Activar"
+        variant="primary"
+        disabled={Object.keys(checkedRows).filter(id => checkedRows[id]).length === 0}
+        action={() => handleBulkAction('activate')}
+    />
+</div>
+
+<DataTable2
+    columns={columns}
+    rows={rowsWithCheckboxes}
+    onSelect={handleCheckboxSelection}
+    showSelectAll={true}
+    allChecked={allChecked}
+    onCheckAll={handleSelectAll}
+    filterable={true}
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="expandable-rows" title="Filas Expandibles" icon="expand_more">
+                <ExampleSubsection id="info-react-component" title="Info como Componente React">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="expandable-react-demo"
+                            columns={[
+                                { id: 'id', label: 'ID', width: 60 },
+                                { id: 'name', label: 'Usuario', sortable: true },
+                                { id: 'email', label: 'Email', sortable: true },
+                                { id: 'status', label: 'Estado', filterable: true }
+                            ]}
+                            rows={rows.filter(row => typeof row.info === 'object' && row.info.content)}
+                            expanded={true}
+                            density="normal"
+                            striped={true}
+                            resizable={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Info como Componente React"
+                        code={`const columns = [
+    {
+        id: 'id',
+        label: 'ID',
+        type: 'Number',
+        sortable: true,
+        resizable: true,
+        width: 80
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    }
+]
+
+const rows = [
+    {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        status: 'active',
+        info: {
+            action: () => console.log('Expandir usuario 1'),
+            content: (
+                <div style={{ padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0' }}>Información del Usuario</h5>
+                    <p style={{ margin: '0', fontSize: '0.875rem' }}>
+                        Usuario administrador con acceso completo al sistema.
+                        Última conexión: hace 2 horas.
+                    </p>
+                </div>
+            )
+        }
+    },
+    {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        status: 'pending',
+        info: 'Información simple como string'
+    }
+    // ... más filas
+]
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    expanded={true}        // ← Filas expandidas por defecto
+    density="normal"
+    striped={true}
+    resizable={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="info-string-simple" title="Info como String Simple">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="expandable-string-demo"
+                            columns={[
+                                { id: 'id', label: 'ID', width: 60 },
+                                { id: 'name', label: 'Usuario', sortable: true },
+                                { id: 'email', label: 'Email', sortable: true },
+                                { id: 'status', label: 'Estado', filterable: true }
+                            ]}
+                            rows={rows.filter(row => typeof row.info === 'string')}
+                            expanded={true}
+                            density="comfortable"
+                            bordered={true}
+                            resizable={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Info como String Simple"
+                        code={`const rows = [
+    {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        status: 'pending',
+        info: 'Usuario nuevo pendiente de verificación. Se requiere aprobación manual.'
+    }
+]
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    expanded={true}
+    density="comfortable"
+    bordered={true}
+    resizable={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="info-custom-actions" title="Info con Acciones Personalizadas">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="expandable-actions-demo"
+                            columns={[
+                                { id: 'id', label: 'ID', width: 60 },
+                                { id: 'name', label: 'Usuario', sortable: true },
+                                { id: 'email', label: 'Email', sortable: true },
+                                { id: 'status', label: 'Estado', filterable: true }
+                            ]}
+                            rows={[rows[2]]} // Bob Johnson con cuenta inactiva
+                            expanded={true}
+                            density="normal"
+                            theme="default"
+                            resizable={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Info con Acciones Personalizadas"
+                        code={`const rows = [
+    {
+        id: 3,
+        name: 'Bob Johnson',
+        email: 'bob@example.com',
+        status: 'inactive',
+        info: {
+            action: () => console.log('Expandir usuario 3'),
+            content: (
+                <div style={{ padding: '1rem', background: '#fff3cd', border: '1px solid #ffeaa7' }}>
+                    <h5 style={{ color: '#856404' }}>⚠️ Cuenta Inactiva</h5>
+                    <p style={{ color: '#856404' }}>
+                        Cuenta suspendida por inactividad. Último acceso: hace 6 meses.
+                    </p>
                 </div>
-            </section>
+            )
+        }
+    }
+]
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    expanded={true}
+    density="normal"
+    resizable={true}
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="themes-variants" title="Temas y Variantes" icon="palette">
+                <ExampleSubsection id="density-variants" title="Variantes de Densidad">
+                    <div style={{ display: 'grid', gap: '1rem', marginBottom: '1rem' }}>
+                        <div style={{ background: '#fff', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+                            <h4>Compact</h4>
+                            <DataTable2
+                                id="density-compact-demo"
+                                columns={columns.slice(0, 4)}
+                                rows={rows.slice(0, 2)}
+                                density="compact"
+                                striped={true}
+                            />
+                        </div>
+
+                        <div style={{ background: '#fff', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+                            <h4>Normal</h4>
+                            <DataTable2
+                                id="density-normal-demo"
+                                columns={columns.slice(0, 4)}
+                                rows={rows.slice(0, 2)}
+                                density="normal"
+                                striped={true}
+                            />
+                        </div>
+
+                        <div style={{ background: '#fff', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+                            <h4>Comfortable</h4>
+                            <DataTable2
+                                id="density-comfortable-demo"
+                                columns={columns.slice(0, 4)}
+                                rows={rows.slice(0, 2)}
+                                density="comfortable"
+                                striped={true}
+                            />
+                        </div>
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Variantes de Densidad"
+                        code={`const columns = [
+    {
+        id: 'id',
+        label: 'ID',
+        type: 'Number',
+        sortable: true,
+        resizable: true,
+        width: 80
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    }
+]
+
+// Compact - Para máxima densidad de información
+<DataTable2
+    columns={columns}
+    rows={rows}
+    density="compact"
+    striped={true}
+/>
+
+// Normal - Balance perfecto
+<DataTable2
+    columns={columns}
+    rows={rows}
+    density="normal"
+    striped={true}
+/>
+
+// Comfortable - Para mejor legibilidad
+<DataTable2
+    columns={columns}
+    rows={rows}
+    density="comfortable"
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="theme-variants" title="Variantes de Tema">
+                    <div style={{ display: 'grid', gap: '1rem', marginBottom: '1rem' }}>
+                        <div style={{ background: '#fff', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
+                            <h4>Default Theme</h4>
+                            <DataTable2
+                                id="theme-default-demo"
+                                columns={columns.slice(0, 4)}
+                                rows={rows.slice(0, 2)}
+                                theme="default"
+                                striped={true}
+                            />
+                        </div>
+
+                        <div style={{ background: '#2c1810', padding: '1rem', border: '1px solid #5d4037', borderRadius: '8px' }}>
+                            <h4 style={{ color: '#f4e6d7' }}>Dark Theme</h4>
+                            <DataTable2
+                                id="theme-dark-demo"
+                                columns={columns.slice(0, 4)}
+                                rows={rows.slice(0, 2)}
+                                theme="dark"
+                                striped={true}
+                            />
+                        </div>
 
-            {/* Performance */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>⚡ Mejoras de Performance</h3>
+                        <div style={{ background: '#fff', padding: '1rem', border: '1px solid #f0f0f0', borderRadius: '8px' }}>
+                            <h4>Minimal Theme</h4>
+                            <DataTable2
+                                id="theme-minimal-demo"
+                                columns={columns.slice(0, 4)}
+                                rows={rows.slice(0, 2)}
+                                theme="minimal"
+                                hover={false}
+                            />
+                        </div>
+                    </div>
+
+                    <CodeSnippet
+                        title="Código de Variantes de Tema"
+                        code={`const columns = [
+    {
+        id: 'id',
+        label: 'ID',
+        type: 'Number',
+        sortable: true,
+        resizable: true,
+        width: 80
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    }
+]
+
+// Default - Colores claros y profesionales
+<DataTable2
+    columns={columns}
+    rows={rows}
+    theme="default"
+    striped={true}
+/>
+
+// Dark - Paleta tostada elegante
+<DataTable2
+    columns={columns}
+    rows={rows}
+    theme="dark"
+    striped={true}
+/>
+
+// Minimal - Sin sombras, bordes sutiles
+<DataTable2
+    columns={columns}
+    rows={rows}
+    theme="minimal"
+    hover={false}
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+            </ExampleSection>
+
+            <ExampleSection id="readability-variants" title="Variantes de Legibilidad" icon="visibility">
                 <div style={{
-                    background: '#fff',
+                    background: '#e8f5e8',
                     padding: '1rem',
-                    border: '1px solid #ddd',
-                    borderRadius: '8px'
+                    borderRadius: '4px',
+                    border: '1px solid #4caf50',
+                    marginBottom: '2rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0', color: '#2e7d32' }}>🎯 Optimizado para Legibilidad</h5>
+                    <p style={{ margin: '0', fontSize: '0.875rem', color: '#2e7d32' }}>
+                        Estas variantes están diseñadas con principios de tipografía, accesibilidad y usabilidad para
+                        maximizar la legibilidad en diferentes contextos y necesidades específicas.
+                    </p>
+                </div>
+
+                <ExampleSubsection id="readable-standard" title="Legibilidad Estándar">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="readable-standard-demo"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            className="datatable2--readable"
+                            density="normal"
+                            striped={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Legibilidad Estándar"
+                        code={`<DataTable2
+    columns={columns}
+    rows={rows}
+    className="datatable2--readable"  // ← Tipografía optimizada
+    density="normal"
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="readable-large" title="Texto Grande">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="readable-large-demo"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            readability="large"
+                            density="comfortable"
+                            striped={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Texto Grande para Accesibilidad"
+                        code={`<DataTable2
+    columns={columns}
+    rows={rows}
+    readability="large"     // ← Texto más grande (16px)
+    density="comfortable"   // ← Más espacio
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="readable-contrast" title="Alto Contraste">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '2px solid #000',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="readable-contrast-demo"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            readability="contrast"
+                            density="normal"
+                            striped={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Alto Contraste para Visibilidad"
+                        code={`<DataTable2
+    columns={columns}
+    rows={rows}
+    readability="contrast"  // ← Colores de alto contraste
+    density="normal"
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="readable-dyslexia" title="Optimizado para Dislexia">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="readable-dyslexia-demo"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            readability="dyslexia"
+                            density="comfortable"
+                            striped={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Optimizado para Dislexia"
+                        code={`<DataTable2
+    columns={columns}
+    rows={rows}
+    readability="dyslexia"  // ← Fuente y espaciado especial
+    density="comfortable"   // ← Más espacio entre líneas
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="readable-focus" title="Modo Enfoque">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="readable-focus-demo"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            readability="focus"
+                            density="normal"
+                            hover={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Modo Enfoque - Reduce Distracciones"
+                        code={`<DataTable2
+    columns={columns}
+    rows={rows}
+    readability="focus"     // ← Reduce elementos visuales
+    density="normal"
+    hover={true}           // ← Hover sutil
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="readable-dark" title="Modo Oscuro Legible">
+                    <div style={{
+                        background: '#1a202c',
+                        padding: '1rem',
+                        border: '1px solid #2d3748',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="readable-dark-demo"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 3)}
+                            readability="dark"
+                            density="normal"
+                            striped={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Modo Oscuro con Legibilidad Optimizada"
+                        code={`<DataTable2
+    columns={columns}
+    rows={rows}
+    readability="dark"      // ← Modo oscuro legible
+    density="normal"
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1.5rem',
+                    borderRadius: '8px',
+                    border: '1px solid #e9ecef',
+                    marginTop: '2rem'
+                }}>
+                    <h4 style={{ margin: '0 0 1rem 0', color: '#495057' }}>🎨 Características de las Variantes de Legibilidad</h4>
+
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>📖 Standard</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Tipografía optimizada (Inter, SF Pro)</li>
+                                <li>Espaciado mejorado (line-height 1.6)</li>
+                                <li>Colores de alto contraste</li>
+                                <li>Bordes redondeados suaves</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>🔍 Large</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Texto 16px (vs 15px estándar)</li>
+                                <li>Padding aumentado 20%</li>
+                                <li>Ideal para accesibilidad</li>
+                                <li>Mejor para pantallas grandes</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>⚫ Contrast</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Negro puro sobre blanco</li>
+                                <li>Bordes más gruesos</li>
+                                <li>Cumple WCAG AAA</li>
+                                <li>Ideal para baja visión</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>🧠 Dyslexia</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Fuente OpenDyslexic</li>
+                                <li>Espaciado de letras aumentado</li>
+                                <li>Line-height 1.8</li>
+                                <li>Filas alternadas marcadas</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>🎯 Focus</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Bordes mínimos</li>
+                                <li>Hover con elevación</li>
+                                <li>Reduce distracciones visuales</li>
+                                <li>Enfoque en contenido</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>🌙 Dark</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Fondo oscuro suave</li>
+                                <li>Texto claro optimizado</li>
+                                <li>Reduce fatiga ocular</li>
+                                <li>Ideal para uso nocturno</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </ExampleSection>
+
+            <ExampleSection id="advanced-features" title="Funcionalidades Avanzadas" icon="tune">
+                <ExampleSubsection id="sidebar-column-visibility" title="Toolbar Vertical y Panel de Columnas">
+                    <div style={{
+                        background: '#e3f2fd',
+                        padding: '1rem',
+                        borderRadius: '4px',
+                        border: '1px solid #2196f3',
+                        marginBottom: '1rem'
+                    }}>
+                        <h5 style={{ margin: '0 0 0.5rem 0', color: '#1565c0' }}>🎛️ Toolbar Multi-Herramientas</h5>
+                        <p style={{ margin: '0', fontSize: '0.875rem', color: '#1565c0' }}>
+                            Observa la toolbar vertical en el lado derecho con múltiples herramientas. Haz clic en cualquier botón
+                            (📋 Columnas, 📥 Exportar, 🔍 Filtros, 📊 Custom) para abrir su panel correspondiente. Solo una herramienta puede estar activa a la vez.
+                        </p>
+                    </div>
+
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="sidebar-demo"
+                            sidebarId="example-sidebar" // ID personalizable para localStorage
+                            columns={columns}
+                            rows={rows}
+                            showSidebar={true}
+                            showRowNumbers={true}
+                            sidebarTools={[
+
+                                {
+                                    id: "custom-analytics",
+                                    icon: "person",
+                                    title: "Análisis Personalizado",
+                                    component: CustomAnalyticsPanel
+                                }
+                            ]}
+                            density="normal"
+                            striped={true}
+                            resizable={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Toolbar Vertical con Panel de Columnas"
+                        code={`const columns = [
+    {
+        id: 'id',
+        label: 'ID',
+        type: 'Number',
+        sortable: true,
+        resizable: true,
+        width: 80
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'age',
+        label: 'Age',
+        type: 'Number',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true,
+        options: [
+            { label: 'Active', value: 'active' },
+            { label: 'Inactive', value: 'inactive' },
+            { label: 'Pending', value: 'pending' }
+        ]
+    }
+]
+
+<DataTable2
+    id="sidebar-demo"
+    sidebarId="example-sidebar"  // ← ID personalizable para localStorage
+    columns={columns}
+    rows={rows}
+    showSidebar={true}          // ← Habilita toolbar multi-herramientas
+    showRowNumbers={true}       // ← Muestra números de fila
+    sidebarTools={[             // ← Herramientas personalizadas (opcional)
+        {
+            id: 'custom-analytics',
+            icon: 'person',
+            title: 'Análisis personalizado',
+            component: 'analytics'
+        },
+        {
+            id: 'custom-settings',
+            icon: 'person',
+            title: 'Configuración avanzada',
+            component: 'settings'
+        }
+    ]}
+    density="normal"
+    striped={true}
+    resizable={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection id="row-numbers-only" title="Solo Números de Fila">
+                    <div style={{
+                        background: '#fff',
+                        padding: '1rem',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        marginBottom: '1rem'
+                    }}>
+                        <DataTable2
+                            id="row-numbers-demo"
+                            columns={columns.slice(0, 4)}
+                            rows={rows.slice(0, 5)}
+                            showRowNumbers={true}
+                            density="compact"
+                            striped={true}
+                        />
+                    </div>
+
+                    <CodeSnippet
+                        title="Tabla con Números de Fila"
+                        code={`<DataTable2
+    columns={columns}
+    rows={rows}
+    showRowNumbers={true}       // ← Solo números de fila
+    density="compact"
+    striped={true}
+/>`}
+                    />
+                </ExampleSubsection>
+
+                <div style={{
+                    background: '#f8f9fa',
+                    padding: '1.5rem',
+                    borderRadius: '8px',
+                    border: '1px solid #e9ecef',
+                    marginTop: '2rem'
                 }}>
-                    <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>
+                    <h4 style={{ margin: '0 0 1rem 0', color: '#495057' }}>🎛️ Características del Sistema Toolbar + Panel</h4>
+
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>🔧 Toolbar Vertical</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Integrada en el lado derecho</li>
+                                <li>Botones compactos y elegantes</li>
+                                <li>Estados activo/inactivo visuales</li>
+                                <li>Extensible para más herramientas</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>📋 Panel Deslizable</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Se desliza entre toolbar y tabla</li>
+                                <li>No overlay - ajusta el layout</li>
+                                <li>Animación suave hacia la izquierda</li>
+                                <li>Header sticky con título y cerrar</li>
+                            </ul>
                         </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>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>👁️ Control de Columnas</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Mostrar/ocultar individualmente</li>
+                                <li>Contador dinámico (visible/total)</li>
+                                <li>Etiquetas de tipo de columna</li>
+                                <li>Persistencia en localStorage</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>🔢 Números de Fila</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Columna fija en el lado izquierdo</li>
+                                <li>Numeración automática (1, 2, 3...)</li>
+                                <li>Fuente tabular para alineación</li>
+                                <li>Responsive en dispositivos móviles</li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>📱 Responsive</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Toolbar se oculta en móviles</li>
+                                <li>Panel se convierte en overlay</li>
+                                <li>Adaptación automática del layout</li>
+                                <li>Touch-friendly en dispositivos táctiles</li>
+                            </ul>
                         </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>
+                            <h5 style={{ margin: '0 0 0.5rem 0', color: '#6c757d' }}>🎨 Integración</h5>
+                            <ul style={{ margin: '0', paddingLeft: '1.2rem', fontSize: '0.875rem' }}>
+                                <li>Compatible con todos los temas</li>
+                                <li>Animaciones fluidas (cubic-bezier)</li>
+                                <li>Estados visuales consistentes</li>
+                                <li>Accesibilidad completa (ARIA)</li>
+                            </ul>
                         </div>
                     </div>
                 </div>
-            </section>
+            </ExampleSection>
 
-            {/* API Reference */}
-            <section style={{ marginBottom: '2rem' }}>
-                <h3>📚 API Reference - Nuevas Props</h3>
+            <ExampleSection id="loading-states" title="Estados de Carga" icon="hourglass_empty">
                 <div style={{
                     background: '#fff',
                     padding: '1rem',
                     border: '1px solid #ddd',
-                    borderRadius: '8px'
+                    borderRadius: '8px',
+                    marginBottom: '1rem'
                 }}>
-                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                    <DataTable2
+                        id="loading-demo"
+                        columns={columns}
+                        rows={rows}
+                        loading={isLoading}
+                        skeleton={isLoading}
+                        density="normal"
+                    />
+                </div>
+
+                <CodeSnippet
+                    title="Código de Estados de Carga"
+                    code={`const columns = [
+    {
+        id: 'id',
+        label: 'ID',
+        type: 'Number',
+        sortable: true,
+        resizable: true,
+        width: 80
+    },
+    {
+        id: 'name',
+        label: 'Name',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'email',
+        label: 'Email',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    },
+    {
+        id: 'status',
+        label: 'Status',
+        type: 'String',
+        sortable: true,
+        filterable: true,
+        resizable: true
+    }
+]
+
+const [isLoading, setIsLoading] = useState(false)
+
+const simulateLoading = () => {
+    setIsLoading(true)
+    setTimeout(() => setIsLoading(false), 3000)
+}
+
+<DataTable2
+    columns={columns}
+    rows={rows}
+    loading={isLoading}      // ← Muestra spinner de carga
+    skeleton={isLoading}     // ← Muestra skeleton loading
+    density="normal"
+    striped={true}
+/>
+
+<Button
+    label="Simular Carga"
+    action={simulateLoading}
+    variant="primary"
+/>`}
+                />
+            </ExampleSection>
+
+            <ExampleSection id="api-reference" title="Referencia API" icon="code">
+                <div style={{
+                    background: '#fff',
+                    padding: '1.5rem',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <h4>Props principales del componente DataTable2:</h4>
+                    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
                         <thead>
                             <tr style={{ background: '#f8f9fa' }}>
                                 <th style={{ padding: '0.5rem', border: '1px solid #ddd', textAlign: 'left' }}>Prop</th>
@@ -657,46 +2194,934 @@ export const DataTable2Examples = () => {
                         </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>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>columns</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>array</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>[]</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Definición de columnas</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>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>rows</code></td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>array</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>[]</td>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Datos de las filas</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' }}><code>density</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>
+                                <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>
                             <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>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Tema: 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>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>expanded</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' }}>Filas expandidas por defecto</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>resizable</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' }}>Columnas redimensionables</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>editable</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' }}>Celdas editables</td>
+                            </tr>
+                            <tr>
+                                <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}><code>filterable</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' }}>Filtros por columna</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
-            </section>
-        </div>
+            </ExampleSection>
+
+            {/* Ejemplo con datos masivos */}
+            <ExampleSection title="📊 Rendimiento con Datos Masivos" id="massive-data">
+                <div style={{
+                    background: '#fff3cd',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #ffeaa7',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0', color: '#856404' }}>🚀 Tabla con 5,000 Filas</h5>
+                    <p style={{ margin: '0', fontSize: '0.875rem', color: '#856404' }}>
+                        Esta tabla demuestra el rendimiento con grandes volúmenes de datos. Incluye scroll virtual,
+                        búsqueda eficiente y ordenamiento optimizado. La altura se adapta automáticamente al contenedor.
+                    </p>
+                </div>
+
+                {(() => {
+                    // Función para generar datos masivos
+                    const generateMassiveData = (count) => {
+                        const departments = ['IT', 'Marketing', 'Ventas', 'HR', 'Finanzas', 'Operaciones', 'Legal', 'Diseño', 'Producto', 'Soporte']
+                        const statuses = ['Activo', 'Inactivo', 'Pendiente', 'Suspendido']
+                        const firstNames = ['Juan', 'María', 'Carlos', 'Ana', 'Luis', 'Carmen', 'José', 'Laura', 'Miguel', 'Elena', 'David', 'Sara', 'Pedro', 'Lucía', 'Antonio', 'Isabel', 'Francisco', 'Patricia', 'Manuel', 'Rosa']
+                        const lastNames = ['García', 'Rodríguez', 'González', 'Fernández', 'López', 'Martínez', 'Sánchez', 'Pérez', 'Gómez', 'Martín', 'Jiménez', 'Ruiz', 'Hernández', 'Díaz', 'Moreno', 'Muñoz', 'Álvarez', 'Romero', 'Alonso', 'Gutiérrez']
+
+                        const data = []
+                        for (let i = 1; i <= count; i++) {
+                            const firstName = firstNames[Math.floor(Math.random() * firstNames.length)]
+                            const lastName = lastNames[Math.floor(Math.random() * lastNames.length)]
+                            const department = departments[Math.floor(Math.random() * departments.length)]
+                            const status = statuses[Math.floor(Math.random() * statuses.length)]
+                            const age = Math.floor(Math.random() * 40) + 22 // 22-62 años
+                            const salary = Math.floor(Math.random() * 80000) + 30000 // 30k-110k
+                            const joinYear = Math.floor(Math.random() * 5) + 2019 // 2019-2023
+                            const joinMonth = Math.floor(Math.random() * 12) + 1
+                            const joinDay = Math.floor(Math.random() * 28) + 1
+
+                            data.push({
+                                id: i,
+                                name: `${firstName} ${lastName}`,
+                                email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${i}@company.com`,
+                                age,
+                                status,
+                                department,
+                                salary,
+                                joinDate: `${joinYear}-${joinMonth.toString().padStart(2, '0')}-${joinDay.toString().padStart(2, '0')}`
+                            })
+                        }
+                        return data
+                    }
+
+                    const massiveColumns = [
+                        { id: 'id', label: 'ID', type: 'number', sortable: true, width: 80 },
+                        { id: 'name', label: 'Nombre', type: 'text', sortable: true, filterable: true },
+                        { id: 'email', label: 'Email', type: 'email', sortable: true, filterable: true },
+                        { id: 'age', label: 'Edad', type: 'number', sortable: true, filterable: true },
+                        { id: 'status', label: 'Estado', type: 'text', sortable: true, filterable: true },
+                        { id: 'department', label: 'Departamento', type: 'text', sortable: true, filterable: true },
+                        { id: 'salary', label: 'Salario', type: 'currency', sortable: true, filterable: true },
+                        { id: 'joinDate', label: 'Fecha Ingreso', type: 'date', sortable: true, filterable: true }
+                    ]
+
+                    const massiveRows = generateMassiveData(5000)
+
+                    return (
+                        <div style={{ height: '500px' }}>
+                            <DataTable2
+                                id="massive-data-table"
+                                columns={massiveColumns}
+                                rows={massiveRows}
+                                showSidebar={true}
+                                showRowNumbers={true}
+                                searchable={true}
+                                filterable={true}
+                                striped={true}
+                                resizable={true}
+                                density="compact"
+                                height="100%"
+                                sidebarTools={[
+                                    {
+                                        id: "analytics",
+                                        icon: "person",
+                                        title: "Análisis de Datos",
+                                        component: CustomAnalyticsPanel
+                                    }
+                                ]}
+                            />
+                        </div>
+                    )
+                })()}
+
+                <CodeSnippet
+                    title="Tabla con Datos Masivos y Altura Adaptable"
+                    code={`// Generar datos masivos
+const generateMassiveData = (count) => {
+    const departments = ['IT', 'Marketing', 'Ventas', 'HR', 'Finanzas']
+    const statuses = ['Activo', 'Inactivo', 'Pendiente', 'Suspendido']
+    const firstNames = ['Juan', 'María', 'Carlos', 'Ana', 'Luis']
+    const lastNames = ['García', 'Rodríguez', 'González', 'Fernández', 'López']
+
+    const data = []
+    for (let i = 1; i <= count; i++) {
+        const firstName = firstNames[Math.floor(Math.random() * firstNames.length)]
+        const lastName = lastNames[Math.floor(Math.random() * lastNames.length)]
+
+        data.push({
+            id: i,
+            name: \`\${firstName} \${lastName}\`,
+            email: \`\${firstName.toLowerCase()}.\${lastName.toLowerCase()}\${i}@company.com\`,
+            age: Math.floor(Math.random() * 40) + 22,
+            status: statuses[Math.floor(Math.random() * statuses.length)],
+            department: departments[Math.floor(Math.random() * departments.length)],
+            salary: Math.floor(Math.random() * 80000) + 30000,
+            joinDate: \`2023-\${Math.floor(Math.random() * 12) + 1}-\${Math.floor(Math.random() * 28) + 1}\`
+        })
+    }
+    return data
+}
+
+const massiveRows = generateMassiveData(5000)
+
+// Contenedor con altura fija
+<div style={{ height: '500px' }}>
+    <DataTable2
+        columns={columns}
+        rows={massiveRows}
+        height="100%"          // ← Se adapta al contenedor
+        showSidebar={true}
+        searchable={true}
+        filterable={true}
+        density="compact"      // ← Más filas visibles
+    />
+</div>
+
+// Sin contenedor - altura automática
+<DataTable2
+    columns={columns}
+    rows={massiveRows}
+    // height no especificado = altura automática
+    maxHeight="400px"      // ← Altura máxima opcional
+    showSidebar={true}
+/>`}
+                />
+            </ExampleSection>
+
+            {/* Ejemplo de configuraciones de altura */}
+            <ExampleSection title="📏 Configuraciones de Altura" id="height-configurations">
+                <div style={{
+                    background: '#e8f5e8',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #4caf50',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0', color: '#2e7d32' }}>🎯 Control de Altura Flexible</h5>
+                    <p style={{ margin: '0', fontSize: '0.875rem', color: '#2e7d32' }}>
+                        DataTable2 se adapta automáticamente: sin altura = se ajusta al contenido,
+                        con altura = scroll vertical automático. Perfecto para cualquier layout.
+                    </p>
+                </div>
+
+                <ExampleSubsection title="Altura Automática (Pocas Filas)">
+                    <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1rem' }}>
+                        Sin especificar altura, la tabla se adapta al contenido. Ideal para pocas filas.
+                    </p>
+
+                    <DataTable2
+                        id="auto-height-small"
+                        columns={columns.slice(0, 4)}
+                        rows={rows.slice(0, 3)}
+                        striped={true}
+                        showRowNumbers={true}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection title="Altura Fija con Scroll">
+                    <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1rem' }}>
+                        Con altura fija, la tabla tiene scroll vertical automático.
+                    </p>
+
+                    <DataTable2
+                        id="fixed-height"
+                        columns={columns.slice(0, 4)}
+                        rows={rows}
+                        height="300px"
+                        striped={true}
+                        showRowNumbers={true}
+                    />
+                </ExampleSubsection>
+
+                <ExampleSubsection title="Altura Máxima">
+                    <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1rem' }}>
+                        Con altura máxima, la tabla crece hasta el límite y luego hace scroll.
+                    </p>
+
+                    <DataTable2
+                        id="max-height"
+                        columns={columns.slice(0, 4)}
+                        rows={rows}
+                        maxHeight="250px"
+                        striped={true}
+                        showRowNumbers={true}
+                    />
+                </ExampleSubsection>
+
+                <CodeSnippet
+                    title="Configuraciones de Altura"
+                    code={`// Altura automática - se adapta al contenido
+<DataTable2
+    columns={columns}
+    rows={fewRows}
+    // Sin height = altura automática
+/>
+
+// Altura fija - scroll vertical automático
+<DataTable2
+    columns={columns}
+    rows={manyRows}
+    height="400px"        // ← Altura fija
+/>
+
+// Altura máxima - crece hasta el límite
+<DataTable2
+    columns={columns}
+    rows={variableRows}
+    maxHeight="300px"     // ← Altura máxima
+/>
+
+// Altura mínima - nunca más pequeña
+<DataTable2
+    columns={columns}
+    rows={fewRows}
+    minHeight="200px"     // ← Altura mínima
+/>
+
+// Combinación de restricciones
+<DataTable2
+    columns={columns}
+    rows={rows}
+    minHeight="200px"
+    maxHeight="500px"
+    // Crece entre 200px y 500px
+/>
+
+// Adaptarse al contenedor padre
+<div style={{ height: '400px' }}>
+    <DataTable2
+        columns={columns}
+        rows={rows}
+        height="100%"     // ← Se adapta al contenedor
+    />
+</div>`}
+                />
+            </ExampleSection>
+
+            {/* Ejemplo de filtros avanzados */}
+            <ExampleSection title="🔍 Sistema de Filtros Avanzado" id="advanced-filters">
+                <div style={{
+                    background: '#f0f9ff',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #0ea5e9',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0', color: '#0c4a6e' }}>🎯 Filtros Inteligentes</h5>
+                    <p style={{ margin: '0', fontSize: '0.875rem', color: '#0c4a6e' }}>
+                        Fila de filtros debajo de la cabecera con campos de texto y dropdowns.
+                        Filtrado en tiempo real con botón de limpiar. Compatible con todos los tipos de columna.
+                    </p>
+                </div>
+
+                {(() => {
+                    // Estado para filtros
+                    const [filteredData, setFilteredData] = useState(rows)
+                    const [activeFilters, setActiveFilters] = useState({})
+
+                    // Función de filtrado
+                    const handleFilter = useCallback((columnId, value) => {
+                        const newFilters = { ...activeFilters, [columnId]: value }
+
+                        // Remover filtros vacíos
+                        Object.keys(newFilters).forEach(key => {
+                            if (!newFilters[key]) {
+                                delete newFilters[key]
+                            }
+                        })
+
+                        setActiveFilters(newFilters)
+
+                        // Aplicar filtros
+                        const filtered = rows.filter(row => {
+                            return Object.keys(newFilters).every(key => {
+                                const filterValue = newFilters[key].toLowerCase()
+                                const cellValue = row[key] ? row[key].toString().toLowerCase() : ''
+                                return cellValue.includes(filterValue)
+                            })
+                        })
+
+                        setFilteredData(filtered)
+                    }, [activeFilters])
+
+                    // Limpiar filtros
+                    const handleClearFilters = useCallback(() => {
+                        setActiveFilters({})
+                        setFilteredData(rows)
+                    }, [])
+
+                    // Columnas con filtros configurados
+                    const filterableColumns = [
+                        {
+                            id: 'id',
+                            label: 'ID',
+                            type: 'number',
+                            sortable: true,
+                            filterable: true,
+                            onFilter: handleFilter
+                        },
+                        {
+                            id: 'name',
+                            label: 'Nombre',
+                            type: 'text',
+                            sortable: true,
+                            filterable: true,
+                            onFilter: handleFilter
+                        },
+                        {
+                            id: 'email',
+                            label: 'Email',
+                            type: 'email',
+                            sortable: true,
+                            filterable: true,
+                            onFilter: handleFilter
+                        },
+                        {
+                            id: 'status',
+                            label: 'Estado',
+                            type: 'text',
+                            sortable: true,
+                            filterable: true,
+                            onFilter: handleFilter,
+                            options: [
+                                { value: '', label: 'Todos los estados' },
+                                { value: 'Activo', label: 'Activo' },
+                                { value: 'Inactivo', label: 'Inactivo' },
+                                { value: 'Pendiente', label: 'Pendiente' }
+                            ]
+                        },
+                        {
+                            id: 'department',
+                            label: 'Departamento',
+                            type: 'text',
+                            sortable: true,
+                            filterable: true,
+                            onFilter: handleFilter,
+                            options: [
+                                { value: '', label: 'Todos los departamentos' },
+                                { value: 'IT', label: 'IT' },
+                                { value: 'Marketing', label: 'Marketing' },
+                                { value: 'Ventas', label: 'Ventas' },
+                                { value: 'HR', label: 'HR' }
+                            ]
+                        }
+                    ]
+
+                    return (
+                        <div>
+                            <div style={{ marginBottom: '1rem', padding: '1rem', background: '#f8fafc', borderRadius: '6px', border: '1px solid #e2e8f0' }}>
+                                <h6 style={{ margin: '0 0 0.5rem 0', fontSize: '0.875rem', fontWeight: 'bold' }}>Estado de Filtros:</h6>
+                                <p style={{ margin: '0', fontSize: '0.875rem', color: '#6b7280' }}>
+                                    Filtros activos: {Object.keys(activeFilters).length} |
+                                    Filas mostradas: {filteredData.length} de {rows.length}
+                                </p>
+                                {Object.keys(activeFilters).length > 0 && (
+                                    <div style={{ marginTop: '0.5rem' }}>
+                                        <strong style={{ fontSize: '0.8rem' }}>Filtros aplicados:</strong>
+                                        {Object.entries(activeFilters).map(([key, value]) => (
+                                            <span key={key} style={{
+                                                display: 'inline-block',
+                                                margin: '0.25rem 0.5rem 0.25rem 0',
+                                                padding: '0.25rem 0.5rem',
+                                                background: '#dbeafe',
+                                                color: '#1e40af',
+                                                borderRadius: '12px',
+                                                fontSize: '0.75rem'
+                                            }}>
+                                                {key}: "{value}"
+                                            </span>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+
+                            <DataTable2
+                                id="filters-demo"
+                                columns={filterableColumns}
+                                rows={filteredData}
+                                filterable={true}
+                                onClearFilters={handleClearFilters}
+                                showRowNumbers={true}
+                                striped={true}
+                                resizable={true}
+                                maxHeight="400px"
+                            />
+                        </div>
+                    )
+                })()}
+
+                <CodeSnippet
+                    title="Configuración de Filtros Avanzados"
+                    code={`// Estado para manejar filtros
+const [filteredData, setFilteredData] = useState(rows)
+const [activeFilters, setActiveFilters] = useState({})
+
+// Función de filtrado
+const handleFilter = useCallback((columnId, value) => {
+    const newFilters = { ...activeFilters, [columnId]: value }
+
+    // Remover filtros vacíos
+    Object.keys(newFilters).forEach(key => {
+        if (!newFilters[key]) delete newFilters[key]
+    })
+
+    setActiveFilters(newFilters)
+
+    // Aplicar filtros
+    const filtered = rows.filter(row => {
+        return Object.keys(newFilters).every(key => {
+            const filterValue = newFilters[key].toLowerCase()
+            const cellValue = row[key] ? row[key].toString().toLowerCase() : ''
+            return cellValue.includes(filterValue)
+        })
+    })
+
+    setFilteredData(filtered)
+}, [activeFilters])
+
+// Configuración de columnas con filtros
+const filterableColumns = [
+    {
+        id: 'name',
+        label: 'Nombre',
+        filterable: true,
+        onFilter: handleFilter  // ← Callback de filtro
+    },
+    {
+        id: 'status',
+        label: 'Estado',
+        filterable: true,
+        onFilter: handleFilter,
+        options: [              // ← Dropdown con opciones
+            { value: '', label: 'Todos los estados' },
+            { value: 'Activo', label: 'Activo' },
+            { value: 'Inactivo', label: 'Inactivo' }
+        ]
+    }
+]
+
+// Uso en DataTable2
+<DataTable2
+    columns={filterableColumns}
+    rows={filteredData}        // ← Datos filtrados
+    filterable={true}          // ← Habilita fila de filtros
+    onClearFilters={handleClearFilters}
+    showRowNumbers={true}
+/>`}
+                />
+            </ExampleSection>
+
+            {/* Ejemplo de sumarios/totales */}
+            <ExampleSection title="📊 Sistema de Sumarios y Totales" id="summary-system">
+                <div style={{
+                    background: '#f0f9ff',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #0ea5e9',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0', color: '#0c4a6e' }}>📊 Sumarios Inteligentes</h5>
+                    <p style={{ margin: '0', fontSize: '0.875rem', color: '#0c4a6e' }}>
+                        Fila de totales automática en el pie de tabla. Funciones de sumario específicas por tipo de datos:
+                        suma, promedio, conteo, fechas, porcentajes y más. Cálculo dinámico en tiempo real.
+                    </p>
+                </div>
+
+                {(() => {
+                    // Datos de ejemplo con diferentes tipos para sumarios
+                    const summaryData = [
+                        {
+                            id: 1,
+                            producto: 'Laptop Dell',
+                            precio: 899.99,
+                            cantidad: 5,
+                            vendido: true,
+                            fecha: '2024-01-15',
+                            categoria: 'Electrónicos'
+                        },
+                        {
+                            id: 2,
+                            producto: 'Mouse Logitech',
+                            precio: 29.99,
+                            cantidad: 12,
+                            vendido: true,
+                            fecha: '2024-01-16',
+                            categoria: 'Accesorios'
+                        },
+                        {
+                            id: 3,
+                            producto: 'Teclado Mecánico',
+                            precio: 149.99,
+                            cantidad: 8,
+                            vendido: false,
+                            fecha: '2024-01-17',
+                            categoria: 'Accesorios'
+                        },
+                        {
+                            id: 4,
+                            producto: 'Monitor 4K',
+                            precio: 399.99,
+                            cantidad: 3,
+                            vendido: true,
+                            fecha: '2024-01-18',
+                            categoria: 'Electrónicos'
+                        },
+                        {
+                            id: 5,
+                            producto: 'Webcam HD',
+                            precio: 79.99,
+                            cantidad: 15,
+                            vendido: false,
+                            fecha: '2024-01-19',
+                            categoria: 'Accesorios'
+                        }
+                    ]
+
+                    // Columnas con diferentes tipos de sumarios
+                    const summaryColumns = [
+                        {
+                            id: 'id',
+                            label: 'ID',
+                            type: 'number',
+                            summary: { function: 'count' }  // Contar elementos
+                        },
+                        {
+                            id: 'producto',
+                            label: 'Producto',
+                            type: 'text',
+                            summary: { function: 'count' }  // Contar productos
+                        },
+                        {
+                            id: 'precio',
+                            label: 'Precio',
+                            type: 'currency',
+                            summary: { function: 'sum' }    // Suma total de precios
+                        },
+                        {
+                            id: 'cantidad',
+                            label: 'Cantidad',
+                            type: 'number',
+                            summary: { function: 'sum' }    // Suma total de cantidades
+                        },
+                        {
+                            id: 'vendido',
+                            label: 'Vendido',
+                            type: 'boolean',
+                            summary: { function: 'percentage' }  // Porcentaje vendido
+                        },
+                        {
+                            id: 'fecha',
+                            label: 'Fecha',
+                            type: 'date',
+                            summary: { function: 'latest' }     // Fecha más reciente
+                        },
+                        {
+                            id: 'categoria',
+                            label: 'Categoría',
+                            type: 'text',
+                            summary: { function: 'countUnique' }  // Categorías únicas
+                        }
+                    ]
+
+                    return (
+                        <div>
+                            <div style={{ marginBottom: '1rem', padding: '1rem', background: '#f8fafc', borderRadius: '6px', border: '1px solid #e2e8f0' }}>
+                                <h6 style={{ margin: '0 0 0.5rem 0', fontSize: '0.875rem', fontWeight: 'bold' }}>Funciones de Sumario Aplicadas:</h6>
+                                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '0.5rem', fontSize: '0.8rem' }}>
+                                    <div><strong>ID:</strong> Contar elementos</div>
+                                    <div><strong>Producto:</strong> Contar productos</div>
+                                    <div><strong>Precio:</strong> Suma total (€)</div>
+                                    <div><strong>Cantidad:</strong> Suma total</div>
+                                    <div><strong>Vendido:</strong> Porcentaje vendido</div>
+                                    <div><strong>Fecha:</strong> Más reciente</div>
+                                    <div><strong>Categoría:</strong> Únicas</div>
+                                </div>
+                            </div>
+
+                            <DataTable2
+                                id="summary-demo"
+                                columns={summaryColumns}
+                                rows={summaryData}
+                                showRowNumbers={true}
+                                striped={true}
+                                bordered={true}
+                                resizable={true}
+                            />
+                        </div>
+                    )
+                })()}
+
+                <CodeSnippet
+                    title="Configuración de Sumarios por Tipo de Datos"
+                    code={`// Importar funciones de sumario
+import {
+    numericSummaryFunctions,
+    textSummaryFunctions,
+    dateSummaryFunctions,
+    booleanSummaryFunctions
+} from './table-summary-functions'
+
+// Configuración de columnas con sumarios
+const summaryColumns = [
+    {
+        id: 'precio',
+        label: 'Precio',
+        type: 'currency',
+        summary: { function: 'sum' }    // ← Suma total de precios
+    },
+    {
+        id: 'cantidad',
+        label: 'Cantidad',
+        type: 'number',
+        summary: { function: 'avg' }    // ← Promedio de cantidades
+    },
+    {
+        id: 'vendido',
+        label: 'Vendido',
+        type: 'boolean',
+        summary: { function: 'percentage' }  // ← Porcentaje vendido
+    },
+    {
+        id: 'fecha',
+        label: 'Fecha',
+        type: 'date',
+        summary: { function: 'latest' }     // ← Fecha más reciente
+    },
+    {
+        id: 'categoria',
+        label: 'Categoría',
+        type: 'text',
+        summary: { function: 'countUnique' }  // ← Categorías únicas
+    }
+]
+
+// Funciones disponibles por tipo:
+// NUMÉRICAS: sum, avg, min, max
+// TEXTO: count, countUnique, mostCommon
+// FECHAS: count, earliest, latest
+// BOOLEANAS: countTrue, countFalse, percentage
+
+// Uso en DataTable2
+<DataTable2
+    columns={summaryColumns}  // ← Columnas con sumarios
+    rows={data}
+    showRowNumbers={true}
+/>`}
+                />
+            </ExampleSection>
+
+            {/* Ejemplo de exportación funcional */}
+            <ExampleSection title="📤 Sistema de Exportación Avanzado" id="export-system">
+                <div style={{
+                    background: '#f0f9ff',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    border: '1px solid #0ea5e9',
+                    marginBottom: '1rem'
+                }}>
+                    <h5 style={{ margin: '0 0 0.5rem 0', color: '#0c4a6e' }}>📤 Exportación Profesional</h5>
+                    <p style={{ margin: '0', fontSize: '0.875rem', color: '#0c4a6e' }}>
+                        Sistema completo de exportación con múltiples formatos: CSV, Excel, JSON, XML.
+                        Exportación de todos los datos o solo filas seleccionadas. Estadísticas en tiempo real.
+                    </p>
+                    <p style={{ margin: '0.5rem 0 0 0', fontSize: '0.8rem', color: '#0369a1', fontWeight: 'bold' }}>
+                        💡 En preview.js: Los archivos se abren en nueva ventana. Usa Ctrl+S para guardar.
+                    </p>
+                </div>
+
+                {(() => {
+                    // Datos de ejemplo para exportación
+                    const exportData = [
+                        {
+                            id: 1,
+                            nombre: 'Ana García',
+                            email: 'ana@empresa.com',
+                            departamento: 'Marketing',
+                            salario: 45000,
+                            fechaIngreso: '2023-01-15',
+                            activo: true
+                        },
+                        {
+                            id: 2,
+                            nombre: 'Carlos López',
+                            email: 'carlos@empresa.com',
+                            departamento: 'IT',
+                            salario: 55000,
+                            fechaIngreso: '2022-08-20',
+                            activo: true
+                        },
+                        {
+                            id: 3,
+                            nombre: 'María Rodríguez',
+                            email: 'maria@empresa.com',
+                            departamento: 'Ventas',
+                            salario: 48000,
+                            fechaIngreso: '2023-03-10',
+                            activo: false
+                        },
+                        {
+                            id: 4,
+                            nombre: 'Juan Martínez',
+                            email: 'juan@empresa.com',
+                            departamento: 'HR',
+                            salario: 42000,
+                            fechaIngreso: '2023-06-01',
+                            activo: true
+                        },
+                        {
+                            id: 5,
+                            nombre: 'Laura Sánchez',
+                            email: 'laura@empresa.com',
+                            departamento: 'IT',
+                            salario: 52000,
+                            fechaIngreso: '2022-11-15',
+                            activo: true
+                        }
+                    ]
+
+                    // Columnas con sumarios para exportación
+                    const exportColumns = [
+                        {
+                            id: 'id',
+                            label: 'ID',
+                            type: 'number',
+                            summary: { function: 'count' }
+                        },
+                        {
+                            id: 'nombre',
+                            label: 'Nombre Completo',
+                            type: 'text',
+                            summary: { function: 'count' }
+                        },
+                        {
+                            id: 'email',
+                            label: 'Email',
+                            type: 'email'
+                        },
+                        {
+                            id: 'departamento',
+                            label: 'Departamento',
+                            type: 'text',
+                            summary: { function: 'countUnique' }
+                        },
+                        {
+                            id: 'salario',
+                            label: 'Salario',
+                            type: 'currency',
+                            summary: { function: 'avg' }
+                        },
+                        {
+                            id: 'fechaIngreso',
+                            label: 'Fecha de Ingreso',
+                            type: 'date',
+                            summary: { function: 'latest' }
+                        },
+                        {
+                            id: 'activo',
+                            label: 'Estado',
+                            type: 'boolean',
+                            summary: { function: 'percentage' }
+                        }
+                    ]
+
+                    return (
+                        <div>
+                            <div style={{ marginBottom: '1rem', padding: '1rem', background: '#f8fafc', borderRadius: '6px', border: '1px solid #e2e8f0' }}>
+                                <h6 style={{ margin: '0 0 0.5rem 0', fontSize: '0.875rem', fontWeight: 'bold' }}>Funcionalidades de Exportación:</h6>
+                                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '0.5rem', fontSize: '0.8rem' }}>
+                                    <div><strong>📄 CSV:</strong> Valores separados por comas</div>
+                                    <div><strong>📊 Excel:</strong> Hoja de cálculo compatible</div>
+                                    <div><strong>🔧 JSON:</strong> Formato de datos estructurado</div>
+                                    <div><strong>📋 XML:</strong> Markup extensible</div>
+                                    <div><strong>✅ Selección:</strong> Solo filas marcadas</div>
+                                    <div><strong>📈 Estadísticas:</strong> Información en tiempo real</div>
+                                </div>
+                            </div>
+
+                            <DataTable2
+                                id="export-demo"
+                                columns={exportColumns}
+                                rows={exportData}
+                                showSidebar={true}
+                                showSelectAll={true}
+                                showRowNumbers={true}
+                                striped={true}
+                                resizable={true}
+                                maxHeight="400px"
+                            />
+                        </div>
+                    )
+                })()}
+
+                <CodeSnippet
+                    title="Configuración de Exportación Avanzada"
+                    code={`// Importar utilidades de exportación
+import {
+    exportToCSV,
+    exportToJSON,
+    exportToExcel,
+    exportToXML,
+    exportSelected,
+    getExportStats
+} from './table-export-utils'
+
+// Configuración básica
+<DataTable2
+    columns={columns}
+    rows={data}
+    showSidebar={true}        // ← Habilita toolbar con exportación
+    showSelectAll={true}      // ← Permite seleccionar filas
+    exportable={true}         // ← Habilita exportación (opcional)
+/>
+
+// Exportación programática
+const handleCustomExport = () => {
+    // Exportar todos los datos a CSV
+    const result = exportToCSV(data, columns, 'mi-reporte.csv')
+
+    if (result.success) {
+        console.log(result.message)  // "Exportado 100 filas a CSV"
+    }
+}
+
+// Exportar solo filas seleccionadas
+const handleExportSelected = () => {
+    const selectedIds = [1, 3, 5]  // IDs de filas seleccionadas
+    const result = exportSelected(data, columns, selectedIds, 'json')
+
+    if (result.success) {
+        console.log(result.message)  // "Exportado 3 filas a JSON"
+    }
+}
+
+// Obtener estadísticas antes de exportar
+const stats = getExportStats(data, columns)
+console.log(stats)
+// {
+//   totalRows: 100,
+//   totalColumns: 7,
+//   visibleColumns: 6,
+//   estimatedSize: { csv: "25 KB", json: "45 KB" }
+// }
+
+// Formatos disponibles:
+// - CSV: Valores separados por comas
+// - Excel: Formato TSV compatible con Excel
+// - JSON: Datos estructurados en JavaScript
+// - XML: Markup extensible con estructura de filas
+
+// Funcionalidades automáticas:
+// ✅ Descarga automática de archivos
+// ✅ Validación de datos antes de exportar
+// ✅ Manejo de errores con mensajes informativos
+// ✅ Estadísticas en tiempo real
+// ✅ Exportación de filas seleccionadas
+// ✅ Formateo específico por tipo de datos`}
+                />
+            </ExampleSection>
+        </ExampleLayout>
     )
 }