ywana-core8 0.1.78 → 0.1.80

package/src/html/table2.js

@@ -1,516 +1,1136 @@
-import React, { Fragment, useState, useCallback, useRef, useEffect, useMemo } from 'react'
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { FORMATS, TYPES } from '../domain/ContentType'
-import { DropDown2 as DropDown, TextField2 as TextField } from './textfield2'
-import { CheckBox } from './checkbox'
 import { Icon } from './icon'
 import { Text } from './text'
-import { EmptyMessage } from '../widgets/empty/EmptyMessage'
-import { Uploader } from '../widgets/upload/Uploader'
+import { CheckBox } from './checkbox'
+import { TextField, DropDown } from './textfield'
+import { calculateColumnSummary } from './table-summary-functions'
+import { exportToCSV, exportToJSON, exportToExcel, exportToXML, exportSelected, getExportStats, validateExportData, exportFormats } from './table-export-utils'
 import './table2.css'
 
 const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 
+
 /**
- * Enhanced DataTable v2 - 100% Compatible with original DataTable
- * 
- * This is a completely rewritten version of DataTable that maintains 100% API compatibility
- * while adding significant performance improvements, accessibility, and new features.
+ * DataTable2 - Reimplemented from scratch with enhanced features
+ * Compatible with original DataTable while adding modern functionality
  */
 export const DataTable2 = (props) => {
     const {
-        // Original props (100% compatible)
-        columns = [], 
-        rows = [], 
-        onRowSelection, 
-        onSort, 
-        onCheckAll, 
-        editable, 
-        outlined, 
-        expanded = false, 
+        id,
+        columns = [],
+        rows = [],
+        sortDir: externalSortDir,
+        onSort,
+        onSelect,
+        onRowSelection, // Compatibilidad con table.js
+        onCheckAll,
+        allChecked = false,
+        showSelectAll = false,
+        showRowNumbers = false,
+        editable = false,
+        expanded = false,
+        selectedRows = [],
+        onRowDoubleClick,
+        onRowContextMenu,
+        onCellClick,
+        onCellDoubleClick,
+        onCellEdit,
+        onDrop,
         className, 
         emptyMessage = "No Results Found", 
         emptyIcon = "search_off", 
         multisort = false, 
         filterable = false, 
         onClearFilters,
-        // New enhanced props (all optional for compatibility)
+        // Enhanced props
         loading = false,
         skeleton = false,
         striped = false,
         hover = true,
-        compact = false,
         bordered = false,
-        responsive = true,
-        stickyHeader = true,
-        virtualScrolling = false,
-        pageSize = 50,
-        selectionMode = 'single', // 'single', 'multiple', 'none'
-        sortMode = 'single', // 'single', 'multiple', 'none'
-        resizable = false,
-        reorderable = false,
+        size = 'medium',
+        density = 'normal',
+        theme = 'default',
+        readability = null, // 'large', 'contrast', 'dyslexia', 'print', 'compact', 'focus', 'dark'
+        stickyHeader = false,
+        resizable = true,
+        showSidebar = false,
+        sidebarId = null, // ID personalizable para localStorage
+        sidebarTools = [], // Array de herramientas para la toolbar
         exportable = false,
         searchable = false,
-        searchPlaceholder = "Search...",
-        onSearch,
-        onExport,
-        onColumnResize,
-        onColumnReorder,
-        customEmptyState,
-        rowHeight = 'medium', // 'small', 'medium', 'large'
-        density = 'normal', // 'compact', 'normal', 'comfortable'
-        theme = 'default', // 'default', 'dark', 'minimal'
-        accessibility = true,
-        onRowClick,
-        onRowDoubleClick,
-        onRowContextMenu,
-        onCellClick,
-        onCellDoubleClick,
-        onCellEdit,
+        pagination = null,
+        customEmptyState = null,
         rowClassName,
         cellClassName,
         headerClassName,
-        footerContent,
-        showRowNumbers = false,
-        showSelectAll = true,
-        persistState = false,
-        stateKey,
-        onStateChange,
+        accessibility = true,
+        height = null, // Altura específica (ej: "400px", "100%")
+        maxHeight = null, // Altura máxima (ej: "500px")
+        minHeight = null, // Altura mínima (ej: "200px")
+        onColumnResize,
+        onExport,
+        onSearch,
         ...restProps
     } = props
 
-    // State management
-    const [sortDir, setSortDir] = useState({})
-    const [allChecked, setAllChecked] = useState(false)
-    const [searchTerm, setSearchTerm] = useState('')
-    const [selectedRows, setSelectedRows] = useState(new Set())
-    const [isLoading, setIsLoading] = useState(loading)
-    const [currentPage, setCurrentPage] = useState(0)
-    
-    // Refs
-    const tableRef = useRef(null)
-
-    // Validate props
-    useEffect(() => {
-        if (!Array.isArray(columns)) {
-            console.warn('DataTable2: columns prop must be an array')
+    // Column widths state with localStorage persistence
+    const [columnWidths, setColumnWidths] = useState(() => {
+        const storageKey = `datatable2-widths-${id || 'default'}`
+        const saved = localStorage.getItem(storageKey)
+        return saved ? JSON.parse(saved) : {}
+    })
+
+    // Expanded rows state
+    const [expandedRows, setExpandedRows] = useState(() => {
+        if (expanded) {
+            return new Set(rows.filter(row => row.info).map(row => row.id))
         }
-        if (!Array.isArray(rows)) {
-            console.warn('DataTable2: rows prop must be an array')
+        return new Set()
+    })
+
+    // Sorting state - usar externo si se proporciona, sino interno
+    const [internalSortDir, setInternalSortDir] = useState({})
+    const sortDir = externalSortDir || internalSortDir
+
+    // Sidebar state - ahora maneja herramientas múltiples
+    const [activeTool, setActiveTool] = useState(null) // null = cerrado, string = herramienta activa
+    const sidebarOpen = activeTool !== null
+
+    // Column visibility state with localStorage persistence
+    const storageKey = `datatable2-columns-${sidebarId || id || 'default'}`
+    const [visibleColumns, setVisibleColumns] = useState(() => {
+        if (!showSidebar) return columns.map(col => col.id)
+
+        const saved = localStorage.getItem(storageKey)
+        if (saved) {
+            try {
+                const parsed = JSON.parse(saved)
+                // Verificar que las columnas guardadas existen en las columnas actuales
+                const currentColumnIds = columns.map(col => col.id)
+                return parsed.filter(id => currentColumnIds.includes(id))
+            } catch (e) {
+                console.warn('Error parsing saved column visibility:', e)
+            }
         }
-        if (virtualScrolling && !pageSize) {
-            console.warn('DataTable2: pageSize is required when virtualScrolling is enabled')
+        // Por defecto, todas las columnas visibles
+        return columns.map(col => col.id)
+    })
+
+    // Handle sorting
+    const handleSort = useCallback((columnId) => {
+        if (!externalSortDir) {
+            // Solo manejar sorting interno si no hay sortDir externo
+            setInternalSortDir(prev => {
+                const currentDir = prev[columnId] || 0
+                const nextDir = currentDir === 0 ? 1 : currentDir === 1 ? -1 : 0
+                const newSortDir = nextDir === 0 ? {} : { [columnId]: nextDir }
+                return newSortDir
+            })
         }
-    }, [columns, rows, virtualScrolling, pageSize])
 
-    // Sync loading state
-    useEffect(() => {
-        setIsLoading(loading)
-    }, [loading])
+        // Llamar callback externo si existe
+        if (onSort) {
+            const currentDir = sortDir[columnId] || 0
+            const nextDir = currentDir === 0 ? 1 : currentDir === 1 ? -1 : 0
+            onSort(columnId, nextDir)
+        }
+    }, [externalSortDir, onSort, sortDir])
+
+    // Handle column visibility
+    const handleColumnVisibilityChange = useCallback((columnId, visible) => {
+        setVisibleColumns(prev => {
+            const newVisible = visible
+                ? [...prev, columnId]
+                : prev.filter(id => id !== columnId)
+
+            // Guardar en localStorage
+            if (showSidebar) {
+                localStorage.setItem(storageKey, JSON.stringify(newVisible))
+            }
 
-    // Enhanced sort function (maintaining original behavior)
-    const changeSort = useCallback((id) => {
-        if (sortMode === 'none') return
+            return newVisible
+        })
+    }, [showSidebar, storageKey])
+
+    // Handle tool selection
+    const handleToolSelect = useCallback((toolId) => {
+        console.log('handleToolSelect called with toolId:', toolId)
+        setActiveTool(prev => {
+            const newTool = prev === toolId ? null : toolId
+            console.log('Tool changed from', prev, 'to', newTool)
+            return newTool
+        })
+    }, [])
 
-        if (sortMode === 'multiple' || multisort) {
-            const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
-            const next = Object.assign({}, sortDir, { [id]: nextDir })
-            setSortDir(next)
-        } else {
-            const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
-            setSortDir({ [id]: nextDir })
+    // Close sidebar
+    const closeSidebar = useCallback(() => {
+        setActiveTool(null)
+    }, [])
+
+    // Default tools - herramientas por defecto
+    const defaultTools = useMemo(() => [
+        {
+            id: 'columns',
+            icon: 'person',
+            title: 'Configurar columnas',
+            component: ColumnsPanel
+        },
+        {
+            id: 'export',
+            icon: 'person',
+            title: 'Exportar datos',
+            component: ExportPanel
+        },
+    ], [])
+
+    // Merge custom tools with default ones
+    const allTools = useMemo(() => {
+        const tools = [...defaultTools]
+        if (sidebarTools && sidebarTools.length > 0) {
+            tools.push(...sidebarTools)
         }
-    }, [sortDir, sortMode, multisort])
+        return tools
+    }, [defaultTools, sidebarTools])
+
+    // Handle row expansion
+    const handleRowExpand = useCallback((rowId) => {
+        setExpandedRows(prev => {
+            const newSet = new Set(prev)
+            if (newSet.has(rowId)) {
+                newSet.delete(rowId)
+            } else {
+                newSet.add(rowId)
+            }
+            return newSet
+        })
+    }, [])
 
-    // Enhanced multiSort function (maintaining original logic)
-    const multiSort = useCallback((array, sortObject = {}) => {
-        const sortKeys = Object.keys(sortObject);
+    // Save column widths to localStorage
+    const saveColumnWidths = useCallback((widths) => {
+        const storageKey = `datatable2-widths-${id || 'default'}`
+        localStorage.setItem(storageKey, JSON.stringify(widths))
+        setColumnWidths(widths)
+    }, [id])
+
+    // Handle column resize
+    const handleColumnResize = useCallback((columnId, width) => {
+        const newWidths = { ...columnWidths, [columnId]: width }
+        saveColumnWidths(newWidths)
+        if (onColumnResize) onColumnResize(columnId, width)
+    }, [columnWidths, saveColumnWidths, onColumnResize])
+
+    // Calculate dynamic height styles
+    const containerStyles = useMemo(() => {
+        const styles = {}
+
+        // Solo aplicar altura al contenedor principal si es necesario
+        if (height) {
+            styles.height = height
+        }
 
-        if (!sortKeys.length) {
-            return array;
+        if (maxHeight) {
+            styles.maxHeight = maxHeight
         }
 
+        if (minHeight) {
+            styles.minHeight = minHeight
+        }
+
+        return styles
+    }, [height, maxHeight, minHeight])
+
+    const tableContainerStyles = useMemo(() => {
+        const styles = {}
+
+        // Si hay altura específica, aplicar scroll a la tabla
+        if (height) {
+            styles.height = height
+            styles.overflow = 'auto'
+        } else if (maxHeight) {
+            styles.maxHeight = maxHeight
+            styles.overflow = 'auto'
+        }
+
+        if (minHeight) {
+            styles.minHeight = minHeight
+        }
+
+        return styles
+    }, [height, maxHeight, minHeight])
+
+    // Generate CSS classes
+    const tableClasses = useMemo(() => [
+        'datatable2',
+        `datatable2--${size}`,
+        `datatable2--${density}`,
+        `datatable2--${theme}`,
+        readability && 'datatable2--readable',
+        readability && `datatable2--readable-${readability}`,
+        striped && 'datatable2--striped',
+        bordered && 'datatable2--bordered',
+        !hover && 'datatable2--no-hover',
+        loading && 'datatable2--loading',
+        skeleton && 'datatable2--skeleton',
+        className
+    ].filter(Boolean).join(' '), [size, density, theme, readability, striped, bordered, hover, loading, skeleton, className])
+
+    // Check if any row has actions column
+    const hasActionsColumn = useMemo(() =>
+        rows.some(row => row.info) || filterable, [rows, filterable])
+
+    // Función de ordenamiento (similar a table.js)
+    const multiSort = useCallback((array, sortObject = {}) => {
+        const sortKeys = Object.keys(sortObject)
+        if (sortKeys.length === 0) return array
+
         const keySort = (a, b, direction) => {
-            direction = direction !== null ? direction : 1;
+            direction = direction !== null ? direction : 1
 
             // check if a and b are numbers and compare as numbers
             if (!isNaN(a) && !isNaN(b)) {
-                a = Number(a);
-                b = Number(b);
+                a = Number(a)
+                b = Number(b)
             }
 
+            // If a > b, multiply by 1 to get the correct direction.
+            if (a > b) return direction
+
             // If b > a, multiply by -1 to get the reverse direction.
-            return a > b ? direction : -1 * direction;
-        };
+            return a > b ? direction : -1 * direction
+        }
 
         return array.sort((a, b) => {
-            let sorted = 0;
-            let index = 0;
+            let sorted = 0
+            let index = 0
 
             // Loop until sorted (-1 or 1) or until the sort keys have been processed.
             while (sorted === 0 && index < sortKeys.length) {
-                const key = sortKeys[index];
+                const key = sortKeys[index]
                 if (key) {
-                    const direction = sortObject[key];
-                    sorted = keySort(a[key], b[key], direction);
-                    index++;
+                    const direction = sortObject[key]
+                    sorted = keySort(a[key], b[key], direction)
+                    index++
                 }
             }
 
-            return sorted;
-        });
+            return sorted
+        })
     }, [])
 
-    // Enhanced row selection (maintaining original behavior)
-    const select = useCallback((row, event) => {
-        if (event.target.id !== "checked") {
-            // Enhanced selection logic
-            if (selectionMode === 'multiple') {
-                const newSelected = new Set(selectedRows)
-                if (newSelected.has(row.id)) {
-                    newSelected.delete(row.id)
-                } else {
-                    newSelected.add(row.id)
-                }
-                setSelectedRows(newSelected)
-            } else if (selectionMode === 'single') {
-                setSelectedRows(new Set([row.id]))
-            }
+    // Compatibilidad con table.js: detectar columna "checked"
+    const hasCheckedColumn = useMemo(() =>
+        columns.some(col => col.id === 'checked'), [columns])
+
+    // Mostrar checkboxes automáticos si showSelectAll=true O si hay datos con checked pero NO hay columna "checked"
+    const shouldShowCheckboxes = showSelectAll || (rows.some(row => row.checked !== undefined) && !hasCheckedColumn)
+
+    // Filtrar columnas visibles
+    const filteredColumns = useMemo(() => {
+        if (!showSidebar) return columns
+        return columns.filter(col => visibleColumns.includes(col.id))
+    }, [columns, visibleColumns, showSidebar])
 
-            // Call original callback
-            if (onRowSelection) onRowSelection(row, event)
-            if (onRowClick) onRowClick(row, event)
+    // Aplicar ordenamiento a las filas
+    const sortedRows = useMemo(() => {
+        return multiSort([...rows], sortDir)
+    }, [rows, sortDir, multiSort])
+
+    return (
+        <div className={tableClasses} style={containerStyles} {...restProps}>
+            {searchable && (
+                <DataTableSearch onSearch={onSearch} />
+            )}
+
+            <div className="datatable2__container">
+                <div className={`datatable2__main ${sidebarOpen ? 'datatable2__main--with-panel' : ''}`}>
+                    <div className="datatable2__table-container" style={tableContainerStyles}>
+                        <table>
+                    <DataTableHeader
+                        columns={filteredColumns}
+                        rows={sortedRows}
+                        sortDir={sortDir}
+                        onSort={handleSort}
+                        allChecked={allChecked}
+                        onCheckAll={onCheckAll}
+                        showSelectAll={showSelectAll}
+                        shouldShowCheckboxes={shouldShowCheckboxes}
+                        hasCheckedColumn={hasCheckedColumn}
+                        showRowNumbers={showRowNumbers}
+                        resizable={resizable}
+                        columnWidths={columnWidths}
+                        onColumnResize={handleColumnResize}
+                        hasActionsColumn={hasActionsColumn}
+                        stickyHeader={stickyHeader}
+                        filterable={filterable}
+                        onClearFilters={onClearFilters}
+                    />
+                    <DataTableBody
+                        columns={filteredColumns}
+                        rows={sortedRows}
+                        onSelect={onSelect}
+                        onRowSelection={onRowSelection}
+                        editable={editable}
+                        selectedRows={selectedRows}
+                        showRowNumbers={showRowNumbers}
+                        hasActionsColumn={hasActionsColumn}
+                        hasCheckedColumn={hasCheckedColumn}
+                        shouldShowCheckboxes={shouldShowCheckboxes}
+                        onRowDoubleClick={onRowDoubleClick}
+                        onRowContextMenu={onRowContextMenu}
+                        onCellClick={onCellClick}
+                        onCellDoubleClick={onCellDoubleClick}
+                        onCellEdit={onCellEdit}
+                        rowClassName={rowClassName}
+                        cellClassName={cellClassName}
+                        emptyMessage={emptyMessage}
+                        emptyIcon={emptyIcon}
+                        customEmptyState={customEmptyState}
+                        loading={loading}
+                        skeleton={skeleton}
+                        expandedRows={expandedRows}
+                        onRowExpand={handleRowExpand}
+                    />
+
+                    {/* Pie de tabla con sumarios */}
+                    <tfoot>
+                        <DataTableSummaryRow
+                            columns={filteredColumns}
+                            rows={sortedRows}
+                            showRowNumbers={showRowNumbers}
+                            hasActionsColumn={hasActionsColumn}
+                            shouldShowCheckboxes={shouldShowCheckboxes}
+                        />
+                    </tfoot>
+                        </table>
+                    </div>
+
+                    {exportable && (
+                        <DataTableFooter onExport={onExport} />
+                    )}
+                </div>
+
+                {showSidebar && sidebarOpen && (
+                    <DataTablePanel
+                        isOpen={sidebarOpen}
+                        activeTool={activeTool}
+                        onClose={closeSidebar}
+                        columns={columns}
+                        rows={sortedRows}
+                        selectedRows={selectedRows}
+                        visibleColumns={visibleColumns}
+                        onColumnVisibilityChange={handleColumnVisibilityChange}
+                        tools={allTools}
+                    />
+                )}
+
+                {showSidebar && (
+                    <DataTableToolbar
+                        tools={allTools}
+                        activeTool={activeTool}
+                        onToolSelect={handleToolSelect}
+                    />
+                )}
+            </div>
+        </div>
+    )
+}
+
+/**
+ * DataTable Search Component
+ */
+const DataTableSearch = ({ onSearch }) => {
+    const [searchTerm, setSearchTerm] = useState('')
+
+    const handleSearch = useCallback((value) => {
+        setSearchTerm(value)
+        if (onSearch) onSearch(value)
+    }, [onSearch])
+
+    return (
+        <div className="datatable2__search">
+            <TextField
+                id="datatable-search"
+                placeholder="Search..."
+                value={searchTerm}
+                onChange={(id, value) => handleSearch(value)}
+                icon="search"
+            />
+        </div>
+    )
+}
+
+/**
+ * Columns Panel Component
+ */
+const ColumnsPanel = ({ columns, visibleColumns, onColumnVisibilityChange }) => {
+    const handleColumnToggle = useCallback((columnId) => {
+        const isVisible = visibleColumns.includes(columnId)
+        onColumnVisibilityChange(columnId, !isVisible)
+    }, [visibleColumns, onColumnVisibilityChange])
+
+    const visibleCount = visibleColumns.length
+    const totalCount = columns.length
+
+    return (
+        <div className="datatable2__panel-section">
+            <h4 className="datatable2__panel-section-title">
+                Columnas Visibles ({visibleCount}/{totalCount})
+            </h4>
+
+            <ul className="datatable2__column-list">
+                {columns.map(column => {
+                    const isVisible = visibleColumns.includes(column.id)
+                    return (
+                        <li key={column.id} className="datatable2__column-item">
+                            <input
+                                type="checkbox"
+                                id={`column-${column.id}`}
+                                className="datatable2__column-checkbox"
+                                checked={isVisible}
+                                onChange={() => handleColumnToggle(column.id)}
+                            />
+                            <label
+                                htmlFor={`column-${column.id}`}
+                                className="datatable2__column-label"
+                            >
+                                {column.label || column.id}
+                            </label>
+                            {column.type && (
+                                <span className="datatable2__column-count">
+                                    {column.type}
+                                </span>
+                            )}
+                        </li>
+                    )
+                })}
+            </ul>
+        </div>
+    )
+}
+
+/**
+ * Export Panel Component
+ */
+const ExportPanel = ({ columns = [], rows = [], selectedRows = [] }) => {
+    const [exportStatus, setExportStatus] = useState(null)
+    const [isExporting, setIsExporting] = useState(false)
+
+    // Detectar entorno
+    const environment = useMemo(() => {
+        const isInIframe = window !== window.top
+        const isPreviewJs = window.location.href.includes('previewjs') ||
+                           window.location.href.includes('localhost:3140')
+        const isLocalhost = window.location.hostname === 'localhost' ||
+                           window.location.hostname === '127.0.0.1'
+
+        return {
+            isInIframe,
+            isPreviewJs,
+            isLocalhost,
+            isRestricted: isInIframe || isPreviewJs
         }
-    }, [selectedRows, selectionMode, onRowSelection, onRowClick])
-
-    // Enhanced move row function (maintaining original behavior)
-    const moveRow = useCallback((dragged, dropped) => {
-        if (onSort) onSort(dragged, dropped)
-    }, [onSort])
-
-    // Enhanced check all function (maintaining original behavior)
-    const checkAll = useCallback((_, value) => {
-        const ids = rows.map(row => row.id)
-        setAllChecked(value)
-        
-        if (selectionMode === 'multiple') {
-            if (value) {
-                setSelectedRows(new Set(ids))
-            } else {
-                setSelectedRows(new Set())
-            }
+    }, [])
+
+    // Estadísticas de exportación
+    const stats = useMemo(() => getExportStats(rows, columns), [rows, columns])
+
+    // Validar datos
+    const validation = useMemo(() => validateExportData(rows, columns), [rows, columns])
+
+    const handleExport = async (format) => {
+        if (!validation.isValid) {
+            setExportStatus({ type: 'error', message: validation.errors.join(', ') })
+            return
         }
-        
-        if (onCheckAll) onCheckAll(ids, value)
-    }, [rows, selectionMode, onCheckAll])
-
-    // Search functionality
-    const filteredRows = useMemo(() => {
-        if (!searchTerm || !searchable) return rows
-
-        return rows.filter(row => {
-            return columns.some(column => {
-                const value = row[column.id]
-                if (value == null) return false
-                return String(value).toLowerCase().includes(searchTerm.toLowerCase())
+
+        setIsExporting(true)
+        setExportStatus(null)
+
+        try {
+            let result
+            switch (format) {
+                case 'csv':
+                    result = exportToCSV(rows, columns)
+                    break
+                case 'excel':
+                    result = exportToExcel(rows, columns)
+                    break
+                case 'json':
+                    result = exportToJSON(rows, columns)
+                    break
+                case 'xml':
+                    result = exportToXML(rows, columns)
+                    break
+                default:
+                    result = { success: false, message: 'Formato no soportado' }
+            }
+
+            setExportStatus({
+                type: result.success ? 'success' : 'error',
+                message: result.message
             })
-        })
-    }, [rows, searchTerm, searchable, columns])
-
-    // Pagination for virtual scrolling
-    const paginatedRows = useMemo(() => {
-        if (!virtualScrolling) return filteredRows
-        
-        const start = currentPage * pageSize
-        const end = start + pageSize
-        return filteredRows.slice(start, end)
-    }, [filteredRows, virtualScrolling, currentPage, pageSize])
-
-    // Final processed rows
-    const processedRows = useMemo(() => {
-        const rowsToProcess = virtualScrolling ? paginatedRows : filteredRows
-        return multiSort(rowsToProcess, sortDir)
-    }, [virtualScrolling, paginatedRows, filteredRows, multiSort, sortDir])
-
-    // Handle search
-    const handleSearch = useCallback((term) => {
-        setSearchTerm(term)
-        setCurrentPage(0) // Reset to first page
-        if (onSearch) onSearch(term)
-    }, [onSearch])
+        } catch (error) {
+            setExportStatus({
+                type: 'error',
+                message: 'Error inesperado durante la exportación'
+            })
+        } finally {
+            setIsExporting(false)
+            // Limpiar mensaje después de 3 segundos
+            setTimeout(() => setExportStatus(null), 3000)
+        }
+    }
 
-    // Handle export
-    const handleExport = useCallback(() => {
-        if (onExport) {
-            onExport(processedRows, columns)
-        } else {
-            // Default CSV export
-            const csvContent = [
-                columns.map(col => col.label || col.id).join(','),
-                ...processedRows.map(row => 
-                    columns.map(col => {
-                        const value = row[col.id]
-                        return typeof value === 'string' ? `"${value}"` : value
-                    }).join(',')
-                )
-            ].join('\n')
-            
-            const blob = new Blob([csvContent], { type: 'text/csv' })
-            const url = URL.createObjectURL(blob)
-            const a = document.createElement('a')
-            a.href = url
-            a.download = 'table-export.csv'
-            a.click()
-            URL.revokeObjectURL(url)
+    const handleExportSelected = async (format) => {
+        if (selectedRows.length === 0) {
+            setExportStatus({ type: 'error', message: 'No hay filas seleccionadas' })
+            return
         }
-    }, [processedRows, columns, onExport])
 
-    // Generate CSS classes
-    const cssClasses = [
-        'datatable8', // Maintain original class for compatibility
-        'datatable2', // New class for v2 features
-        outlined && 'outlined',
-        striped && 'datatable2--striped',
-        compact && 'datatable2--compact',
-        bordered && 'datatable2--bordered',
-        !hover && 'datatable2--no-hover',
-        `datatable2--${rowHeight}`,
-        `datatable2--${density}`,
-        `datatable2--${theme}`,
-        responsive && 'datatable2--responsive',
-        isLoading && 'datatable2--loading',
-        skeleton && 'datatable2--skeleton',
-        className
-    ].filter(Boolean).join(' ')
+        setIsExporting(true)
+        setExportStatus(null)
 
-    // Accessibility attributes
-    const ariaAttributes = accessibility ? {
-        role: 'table',
-        'aria-label': 'Data table',
-        'aria-rowcount': processedRows.length,
-        'aria-colcount': columns.length,
-        'aria-multiselectable': selectionMode === 'multiple',
-        'aria-busy': isLoading
-    } : {}
-
-    // Render loading/skeleton state
-    if (isLoading && skeleton) {
-        return (
-            <div className={cssClasses} {...ariaAttributes} {...restProps}>
-                <SkeletonTable columns={columns} rows={5} />
-            </div>
-        )
+        try {
+            const result = exportSelected(rows, columns, selectedRows, format)
+            setExportStatus({
+                type: result.success ? 'success' : 'error',
+                message: result.message
+            })
+        } catch (error) {
+            setExportStatus({
+                type: 'error',
+                message: 'Error al exportar filas seleccionadas'
+            })
+        } finally {
+            setIsExporting(false)
+            setTimeout(() => setExportStatus(null), 3000)
+        }
     }
 
     return (
-        <div className={cssClasses} ref={tableRef} {...ariaAttributes} {...restProps}>
-            {/* Search bar */}
-            {searchable && (
-                <div className="datatable2__search">
-                    <TextField
-                        placeholder={searchPlaceholder}
-                        value={searchTerm}
-                        onChange={(_, value) => handleSearch(value)}
-                        icon="search"
-                    />
+        <div className="datatable2__panel-section">
+            <h4 className="datatable2__panel-section-title">Exportar Datos</h4>
+
+            {/* Notificación de entorno restringido */}
+            {environment.isRestricted && (
+                <div className="datatable2__export-environment-notice">
+                    <Icon icon="info" size="small" />
+                    <div>
+                        <strong>Entorno de desarrollo detectado</strong>
+                        <p>Los archivos se abrirán en nueva ventana. Usa Ctrl+S para guardar.</p>
+                    </div>
                 </div>
             )}
 
-            {/* Export button */}
-            {exportable && (
-                <div className="datatable2__toolbar">
-                    <button 
-                        className="datatable2__export-btn"
-                        onClick={handleExport}
-                        disabled={isLoading}
-                    >
-                        <Icon icon="download" size="small" />
-                        Export
-                    </button>
+            {/* Estadísticas */}
+            <div className="datatable2__export-stats">
+                <div className="datatable2__stat">
+                    <span className="datatable2__stat-label">Filas:</span>
+                    <span className="datatable2__stat-value">{stats.totalRows}</span>
+                </div>
+                <div className="datatable2__stat">
+                    <span className="datatable2__stat-label">Columnas:</span>
+                    <span className="datatable2__stat-value">{stats.visibleColumns}</span>
+                </div>
+                {selectedRows.length > 0 && (
+                    <div className="datatable2__stat">
+                        <span className="datatable2__stat-label">Seleccionadas:</span>
+                        <span className="datatable2__stat-value">{selectedRows.length}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Estado de exportación */}
+            {exportStatus && (
+                <div className={`datatable2__export-status datatable2__export-status--${exportStatus.type}`}>
+                    <Icon
+                        icon={exportStatus.type === 'success' ? 'check_circle' : 'error'}
+                        size="small"
+                    />
+                    {exportStatus.message}
                 </div>
             )}
 
-            {/* Table */}
-            <table>
-                <DataTable2Header 
-                    columns={columns}
-                    sortDir={sortDir}
-                    onSort={changeSort}
-                    allChecked={allChecked}
-                    onCheckAll={checkAll}
-                    showSelectAll={showSelectAll}
-                    showRowNumbers={showRowNumbers}
-                    resizable={resizable}
-                    onColumnResize={onColumnResize}
-                    accessibility={accessibility}
-                    headerClassName={headerClassName}
-                    stickyHeader={stickyHeader}
-                />
-                
-                <DataTable2Body
-                    columns={columns}
-                    rows={processedRows}
-                    onSelect={select}
-                    onDrop={moveRow}
-                    editable={editable}
-                    expanded={expanded}
-                    filterable={filterable}
-                    onClearFilters={onClearFilters}
-                    selectedRows={selectedRows}
-                    showRowNumbers={showRowNumbers}
-                    onRowDoubleClick={onRowDoubleClick}
-                    onRowContextMenu={onRowContextMenu}
-                    onCellClick={onCellClick}
-                    onCellDoubleClick={onCellDoubleClick}
-                    onCellEdit={onCellEdit}
-                    rowClassName={rowClassName}
-                    cellClassName={cellClassName}
-                    accessibility={accessibility}
-                    emptyMessage={emptyMessage}
-                    emptyIcon={emptyIcon}
-                    customEmptyState={customEmptyState}
-                    isLoading={isLoading}
-                />
-            </table>
+            {/* Botones de exportación - Todos los datos */}
+            <div className="datatable2__export-section">
+                <h5 className="datatable2__export-section-title">Exportar todos los datos</h5>
+                <div className="datatable2__export-options">
+                    {Object.values(exportFormats).map(format => (
+                        <button
+                            key={format.id}
+                            className="datatable2__export-button"
+                            onClick={() => handleExport(format.id)}
+                            disabled={isExporting || !validation.isValid}
+                        >
+                            <Icon icon={format.icon} size="small" />
+                            {format.label}
+                            <span className="datatable2__export-description">
+                                {format.description}
+                            </span>
+                        </button>
+                    ))}
+                </div>
+            </div>
 
-            {/* Footer */}
-            {footerContent && (
-                <div className="datatable2__footer">
-                    {footerContent}
+            {/* Botones de exportación - Solo seleccionadas */}
+            {selectedRows.length > 0 && (
+                <div className="datatable2__export-section">
+                    <h5 className="datatable2__export-section-title">
+                        Exportar filas seleccionadas ({selectedRows.length})
+                    </h5>
+                    <div className="datatable2__export-options">
+                        {Object.values(exportFormats).map(format => (
+                            <button
+                                key={`selected-${format.id}`}
+                                className="datatable2__export-button datatable2__export-button--selected"
+                                onClick={() => handleExportSelected(format.id)}
+                                disabled={isExporting}
+                            >
+                                <Icon icon={format.icon} size="small" />
+                                {format.label}
+                            </button>
+                        ))}
+                    </div>
                 </div>
             )}
 
-            {/* Virtual scrolling pagination */}
-            {virtualScrolling && filteredRows.length > pageSize && (
-                <div className="datatable2__pagination">
-                    <button 
-                        onClick={() => setCurrentPage(Math.max(0, currentPage - 1))}
-                        disabled={currentPage === 0}
-                    >
-                        Previous
-                    </button>
-                    <span>
-                        Page {currentPage + 1} of {Math.ceil(filteredRows.length / pageSize)}
-                    </span>
-                    <button 
-                        onClick={() => setCurrentPage(Math.min(Math.ceil(filteredRows.length / pageSize) - 1, currentPage + 1))}
-                        disabled={currentPage >= Math.ceil(filteredRows.length / pageSize) - 1}
-                    >
-                        Next
-                    </button>
-                </div>
+            {/* Información adicional */}
+            <div className="datatable2__export-info">
+                <p className="datatable2__export-note">
+                    <Icon icon="info" size="small" />
+                    Los archivos se descargarán automáticamente en tu carpeta de descargas.
+                </p>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Filters Panel Component
+ */
+const FiltersPanel = () => {
+    return (
+        <div className="datatable2__panel-section">
+            <h4 className="datatable2__panel-section-title">Filtros Avanzados</h4>
+            <div className="datatable2__filter-options">
+                <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>
+                    Funcionalidad de filtros avanzados próximamente...
+                </p>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * DataTable Summary Row Component
+ */
+const DataTableSummaryRow = ({ columns, rows, showRowNumbers, hasActionsColumn, shouldShowCheckboxes }) => {
+    // Calcular sumarios para cada columna
+    const summaries = useMemo(() => {
+        return columns.map(column => {
+            if (column.summary) {
+                return calculateColumnSummary(column, rows)
+            }
+            return null
+        })
+    }, [columns, rows])
+
+    // Verificar si hay algún sumario para mostrar
+    const hasSummaries = summaries.some(summary => summary !== null)
+
+    if (!hasSummaries) {
+        return null
+    }
+
+    return (
+        <tr className="datatable2__summary-row">
+            {/* Celda para checkboxes si están habilitados */}
+            {shouldShowCheckboxes && (
+                <td className="datatable2__summary-cell datatable2__summary-cell--checkbox">
+                    <strong>Total</strong>
+                </td>
+            )}
+
+            {/* Celda para números de fila si están habilitados */}
+            {showRowNumbers && (
+                <td className="datatable2__summary-cell datatable2__summary-cell--row-number">
+                    {!shouldShowCheckboxes && <strong>Total</strong>}
+                </td>
+            )}
+
+            {/* Celdas de sumario para cada columna */}
+            {columns.map((column, index) => {
+                const summary = summaries[index]
+                return (
+                    <td key={column.id} className="datatable2__summary-cell">
+                        {summary ? (
+                            <span
+                                className="datatable2__summary-value"
+                                title={`${summary.function.label}: ${summary.function.description}`}
+                            >
+                                {summary.formatted}
+                            </span>
+                        ) : (
+                            // Mostrar "Total" en la primera columna si no hay checkboxes ni números
+                            index === 0 && !shouldShowCheckboxes && !showRowNumbers ? (
+                                <strong>Total</strong>
+                            ) : null
+                        )}
+                    </td>
+                )
+            })}
+
+            {/* Celda para acciones */}
+            {hasActionsColumn && (
+                <td className="datatable2__summary-cell datatable2__summary-cell--actions"></td>
             )}
+        </tr>
+    )
+}
+
+/**
+ * DataTable Panel Component
+ */
+const DataTablePanel = ({ isOpen, activeTool, onClose, columns, rows, selectedRows, visibleColumns, onColumnVisibilityChange, tools }) => {
+    console.log('DataTablePanel render - isOpen:', isOpen, 'activeTool:', activeTool)
+
+    // Find the active tool configuration
+    const activeToolConfig = tools.find(tool => tool.id === activeTool)
+
+    // Render the component dynamically
+    const renderPanelContent = () => {
+        console.log('renderPanelContent called with activeTool:', activeTool)
+
+        if (!activeToolConfig) {
+            return (
+                <div className="datatable2__panel-section">
+                    <h4 className="datatable2__panel-section-title">Herramienta Desconocida</h4>
+                    <p>No se encontró contenido para la herramienta: {activeTool}</p>
+                </div>
+            )
+        }
+
+        const { component: Component } = activeToolConfig
+
+        // If component is a React component, render it
+        if (typeof Component === 'function') {
+            console.log('Rendering custom component with props:', {
+                columns: columns?.length,
+                visibleColumns: visibleColumns?.length
+            })
+            return (
+                <Component
+                    columns={columns || []}
+                    rows={rows || []}
+                    selectedRows={selectedRows || []}
+                    visibleColumns={visibleColumns || []}
+                    onColumnVisibilityChange={onColumnVisibilityChange}
+                />
+            )
+        }
+
+        // If component is a string (legacy), handle it
+        if (typeof Component === 'string') {
+            switch (Component) {
+                case 'columns':
+                    return (
+                        <ColumnsPanel
+                            columns={columns}
+                            visibleColumns={visibleColumns}
+                            onColumnVisibilityChange={onColumnVisibilityChange}
+                        />
+                    )
+                case 'export':
+                    return (
+                        <ExportPanel
+                            columns={columns}
+                            rows={rows}
+                            selectedRows={selectedRows}
+                        />
+                    )
+                case 'filters':
+                    return <FiltersPanel />
+                default:
+                    return (
+                        <div className="datatable2__panel-section">
+                            <h4 className="datatable2__panel-section-title">Componente No Encontrado</h4>
+                            <p>Componente string no reconocido: {Component}</p>
+                        </div>
+                    )
+            }
+        }
+
+        // If component is neither function nor string
+        return (
+            <div className="datatable2__panel-section">
+                <h4 className="datatable2__panel-section-title">Tipo de Componente Inválido</h4>
+                <p>El componente debe ser una función React o un string.</p>
+            </div>
+        )
+    }
+
+    // Get tool title
+    const getToolTitle = () => {
+        if (activeToolConfig) {
+            return activeToolConfig.title
+        }
+        return 'Herramientas'
+    }
+
+    return (
+        <div className={`datatable2__panel ${isOpen ? 'datatable2__panel--open' : ''}`}>
+            <div className="datatable2__panel-header">
+                <h3 className="datatable2__panel-title">{getToolTitle()}</h3>
+                <button
+                    className="datatable2__panel-close"
+                    onClick={onClose}
+                    title="Cerrar"
+                >
+                    <Icon icon="close" size="small" />
+                </button>
+            </div>
+
+            <div className="datatable2__panel-content">
+                {renderPanelContent()}
+            </div>
+        </div>
+    )
+}
+
+/**
+ * DataTable Toolbar Component
+ */
+const DataTableToolbar = ({ tools, activeTool, onToolSelect }) => {
+    console.log('DataTableToolbar render - tools:', tools, 'activeTool:', activeTool)
+
+    const handleButtonClick = (toolId) => {
+        console.log('Button clicked for tool:', toolId)
+        onToolSelect(toolId)
+    }
+
+    return (
+        <div className="datatable2__toolbar">
+            {tools.map(tool => (
+                <Icon
+                    key={tool.id}
+                    icon={tool.icon}
+                    size="small"
+                    clickable
+                    action={() => handleButtonClick(tool.id)}
+                    ariaLabel={tool.title}
+                    className={activeTool === tool.id ? 'datatable2__toolbar-icon--active' : ''}
+                />
+            ))}
         </div>
     )
 }
 
 /**
- * Enhanced DataTable Header - maintains original structure
+ * DataTable Header Component
  */
-const DataTable2Header = ({
+const DataTableHeader = ({
     columns,
+    rows,
     sortDir,
     onSort,
     allChecked,
     onCheckAll,
     showSelectAll,
+    shouldShowCheckboxes,
+    hasCheckedColumn,
     showRowNumbers,
     resizable,
+    columnWidths,
     onColumnResize,
-    accessibility,
-    headerClassName,
-    stickyHeader
+    hasActionsColumn,
+    stickyHeader,
+    filterable,
+    onClearFilters
 }) => {
     const headerClasses = [
         'datatable2__header',
-        stickyHeader && 'datatable2__header--sticky',
-        headerClassName
+        stickyHeader && 'datatable2__header--sticky'
     ].filter(Boolean).join(' ')
 
     return (
         <thead className={headerClasses}>
             <tr>
-                {showRowNumbers && (
-                    <th className="datatable2__row-number-header">
-                        <div>#</div>
+                {shouldShowCheckboxes && (
+                    <th className="datatable2__select-header">
+                        <CheckBox
+                            id="select-all"
+                            value={allChecked}
+                            onChange={() => onCheckAll && onCheckAll(!allChecked)}
+                        />
                     </th>
                 )}
-                {columns.map(({ id, label, type, item, sortable, resizable: colResizable = false }) => {
-                    const isResizable = resizable || colResizable
-                    const resizableStyle = isResizable ? "resizable-column" : ""
-                    const sort = sortDir[id] ? sortDir[id] : null
-                    const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v => v.column === true).length] : [2, 1]
-
-                    const thProps = accessibility ? {
-                        role: 'columnheader',
-                        'aria-sort': sort > 0 ? 'ascending' : sort < 0 ? 'descending' : 'none',
-                        tabIndex: sortable ? 0 : -1
-                    } : {}
+                
+                {showRowNumbers && (
+                    <th className="datatable2__row-number-header">#</th>
+                )}
+                
+                {columns.map((column) => {
+                    // Compatibilidad con table.js: manejar columna "checked"
+                    if (column.id === 'checked') {
+                        return (
+                            <th key={column.id} className="datatable2__select-header">
+                                {onCheckAll ? (
+                                    <CheckBox
+                                        id="select-all"
+                                        value={allChecked}
+                                        onChange={() => {
+                                            if (onCheckAll) {
+                                                // Compatibilidad con table.js: pasar IDs y estado
+                                                const allIds = rows.map(row => row.id)
+                                                onCheckAll(allIds, !allChecked)
+                                            }
+                                        }}
+                                    />
+                                ) : (
+                                    <Text>{column.label}</Text>
+                                )}
+                            </th>
+                        )
+                    }
 
                     return (
-                        <th
-                            key={id}
-                            className={resizableStyle}
-                            rowSpan={rowspan}
-                            colSpan={colspan}
-                            style={{
-                                minWidth: '80px'
-                            }}
-                            {...thProps}
-                        >
-                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                                    {id === "checked" && onCheckAll && showSelectAll ?
-                                        <CheckBox onChange={onCheckAll} value={allChecked} /> :
-                                        <Text key={`th_${id}`}>{label}</Text>
-                                    }
-                                    {sortable ? <SortIcon2 sortDir={sortDir[id]} onChange={() => onSort(id)} /> : null}
-                                </div>
-                            </div>
-                            {isResizable && (
-                                <div
-                                    className="column-resizer"
-                                    onMouseDown={(e) => handleColumnResize(e, id, onColumnResize)}
-                                    title="Drag to resize column"
-                                />
-                            )}
-                        </th>
+                        <DataTableHeaderCell
+                            key={column.id}
+                            column={column}
+                            sortDir={sortDir[column.id]}
+                            onSort={onSort}
+                            resizable={resizable}
+                            width={columnWidths[column.id]}
+                            onResize={onColumnResize}
+                        />
                     )
                 })}
-                <th rowSpan={2} colSpan={1}></th>
-            </tr>
-            <tr>
-                {showRowNumbers && <th></th>}
-                {
-                    columns
-                        .filter(({ type }) => type === TYPES.ENTITY)
-                        .map(column => {
-                            const { item } = column
-                            const fields = item ? Object.values(item) : []
-                            return fields
-                                .filter(field => field.column === true)
-                                .map(field => <th key={field.id}>{field.label}</th>)
-                        })
-                }
+                
+                {hasActionsColumn && (
+                    <th className="datatable2__actions-header">Actions</th>
+                )}
             </tr>
+
+            {/* Fila de filtros siempre visible en el header */}
+            {filterable && (
+                <DataTableFiltersRow
+                    columns={columns}
+                    onClear={onClearFilters}
+                    showRowNumbers={showRowNumbers}
+                    hasActionsColumn={hasActionsColumn}
+                    shouldShowCheckboxes={shouldShowCheckboxes}
+                />
+            )}
         </thead>
     )
 }
 
 /**
- * Enhanced DataTable Body - maintains original structure
+ * DataTable Header Cell with Resizing
+ */
+const DataTableHeaderCell = ({ column, sortDir, onSort, resizable, width, onResize }) => {
+    const [isResizing, setIsResizing] = useState(false)
+    const cellRef = useRef(null)
+    const resizeDataRef = useRef({ startX: 0, startWidth: 0 })
+
+    const handleSort = useCallback(() => {
+        if (column.sortable && onSort) {
+            onSort(column.id)
+        }
+    }, [column.id, column.sortable, onSort])
+
+    // Create stable references for event handlers
+    const handleMouseMove = useCallback((e) => {
+        const { startX, startWidth } = resizeDataRef.current
+        const diff = e.clientX - startX
+        const newWidth = Math.max(50, startWidth + diff)
+
+        console.log('Resizing column:', column.id, 'newWidth:', newWidth, 'diff:', diff)
+
+        if (onResize) {
+            onResize(column.id, newWidth)
+        }
+    }, [column.id, onResize])
+
+    const handleMouseUp = useCallback(() => {
+        setIsResizing(false)
+    }, [])
+
+    // Effect to manage event listeners and body class
+    useEffect(() => {
+        if (isResizing) {
+            document.body.classList.add('datatable2-resizing')
+            document.addEventListener('mousemove', handleMouseMove)
+            document.addEventListener('mouseup', handleMouseUp)
+
+            return () => {
+                document.body.classList.remove('datatable2-resizing')
+                document.removeEventListener('mousemove', handleMouseMove)
+                document.removeEventListener('mouseup', handleMouseUp)
+            }
+        }
+    }, [isResizing, handleMouseMove, handleMouseUp])
+
+    const handleMouseDown = useCallback((e) => {
+        if (!resizable) return
+
+        e.preventDefault()
+        e.stopPropagation()
+
+        const startX = e.clientX
+        const startWidth = cellRef.current?.offsetWidth || width || 150
+
+        console.log('Starting resize for column:', column.id, 'startWidth:', startWidth, 'startX:', startX)
+
+        resizeDataRef.current = { startX, startWidth }
+        setIsResizing(true)
+    }, [resizable, width, column.id])
+
+    const cellStyle = width ? { width: `${width}px`, minWidth: `${width}px` } : {}
+
+    return (
+        <th
+            ref={cellRef}
+            className={`datatable2__header-cell ${column.sortable ? 'sortable' : ''}`}
+            style={cellStyle}
+            onClick={handleSort}
+        >
+            <div className="datatable2__header-content">
+                <Text>{column.label}</Text>
+                {column.sortable && (
+                    <Icon
+                        icon={sortDir > 0 ? 'arrow_upward' : sortDir < 0 ? 'arrow_downward' : 'swap_vert'}
+                        size="small"
+                    />
+                )}
+            </div>
+            {resizable && (
+                <div
+                    className="datatable2__resize-handle"
+                    onMouseDown={handleMouseDown}
+                    style={{ cursor: 'col-resize' }}
+                />
+            )}
+        </th>
+    )
+}
+
+/**
+ * DataTable Body Component
  */
-const DataTable2Body = ({
+const DataTableBody = ({
     columns,
     rows,
     onSelect,
-    onDrop,
+    onRowSelection,
     editable,
-    expanded,
-    filterable,
-    onClearFilters,
     selectedRows,
     showRowNumbers,
+    hasActionsColumn,
+    hasCheckedColumn,
+    shouldShowCheckboxes,
     onRowDoubleClick,
     onRowContextMenu,
     onCellClick,
@@ -518,29 +1138,38 @@ const DataTable2Body = ({
     onCellEdit,
     rowClassName,
     cellClassName,
-    accessibility,
     emptyMessage,
     emptyIcon,
     customEmptyState,
-    isLoading
+    loading,
+    skeleton,
+    expandedRows,
+    onRowExpand
 }) => {
+    if (loading || skeleton) {
+        return <DataTableSkeleton columns={columns} showRowNumbers={showRowNumbers} hasActionsColumn={hasActionsColumn} />
+    }
+
+    if (rows.length === 0) {
+        return <DataTableEmpty message={emptyMessage} icon={emptyIcon} customState={customEmptyState} />
+    }
+
     return (
         <tbody>
-            {filterable ? <DataTableFiltersRow2 columns={columns} onClear={onClearFilters} showRowNumbers={showRowNumbers} /> : null}
-
-            {rows.length > 0 ? (
-                rows.map((row, index) => (
-                    <DataTableRow2
-                        key={row.id}
-                        index={index}
+            {rows.map((row, index) => (
+                <React.Fragment key={row.id || index}>
+                    <DataTableRow
                         row={row}
+                        index={index}
                         columns={columns}
                         onSelect={onSelect}
-                        onDrop={onDrop}
+                        onRowSelection={onRowSelection}
                         editable={editable}
-                        expanded={expanded}
-                        selected={selectedRows.has(row.id)}
+                        isSelected={selectedRows.includes(row.id)}
                         showRowNumbers={showRowNumbers}
+                        hasActionsColumn={hasActionsColumn}
+                        hasCheckedColumn={hasCheckedColumn}
+                        shouldShowCheckboxes={shouldShowCheckboxes}
                         onRowDoubleClick={onRowDoubleClick}
                         onRowContextMenu={onRowContextMenu}
                         onCellClick={onCellClick}
@@ -548,705 +1177,502 @@ const DataTable2Body = ({
                         onCellEdit={onCellEdit}
                         rowClassName={rowClassName}
                         cellClassName={cellClassName}
-                        accessibility={accessibility}
+                        isExpanded={expandedRows.has(row.id)}
+                        onRowExpand={onRowExpand}
                     />
-                ))
-            ) : (
-                <tr>
-                    <td colSpan={columns.length + (showRowNumbers ? 1 : 0) + 1}>
-                        {customEmptyState || (
-                            <EmptyMessage
-                                icon={emptyIcon ? emptyIcon : "search_off"}
-                                text={emptyMessage}
-                                className="empty-message"
-                            />
-                        )}
-                    </td>
-                </tr>
-            )}
+                    {row.info && expandedRows.has(row.id) && (
+                        <tr className="datatable2__expanded-row">
+                            <td
+                                colSpan={
+                                    columns.length +
+                                    (showRowNumbers ? 1 : 0) +
+                                    (hasActionsColumn ? 1 : 0) +
+                                    (row.checked !== undefined ? 1 : 0)
+                                }
+                                className="datatable2__expanded-cell"
+                            >
+                                <div className="datatable2__expanded-content">
+                                    {typeof row.info === 'string' ? (
+                                        <Text>{row.info}</Text>
+                                    ) : row.info.content ? (
+                                        row.info.content
+                                    ) : (
+                                        <Text>{row.info}</Text>
+                                    )}
+                                </div>
+                            </td>
+                        </tr>
+                    )}
+                </React.Fragment>
+            ))}
         </tbody>
     )
 }
 
 /**
- * Enhanced DataTableFiltersRow - maintains original structure
+ * DataTable Row Component
  */
-const DataTableFiltersRow2 = ({ columns, onClear, showRowNumbers }) => {
-    const [form, setForm] = useState({})
-
-    function changeFilter(id, value, onFilter) {
-        setForm({ ...form, [id]: value })
-        if (onFilter) onFilter(id, value)
-    }
-
-    function clear() {
-        setForm({})
-        if (onClear) onClear()
-    }
-
-    const dirty = Object.keys(form).length > 0
-
-    return (
-        <tr className="filters-row">
-            {showRowNumbers && <td className="filter-cell"></td>}
-            {columns.map(({ id, filterable, onFilter, predictive = false, options }) => {
-                const value = form[id] ? form[id] : ''
-                const field = options ?
-                    <DropDown id={id} value={value} options={options} predictive={predictive} onChange={(id, value) => changeFilter(id, value, onFilter)} outlined />
-                    :
-                    <TextField id={id} value={value} onChange={(id, value) => changeFilter(id, value, onFilter)} outlined />
-                return (
-                    <td key={id} className='filter-cell'>
-                        {filterable ? field : null}
-                    </td>
-                )
-            })}
-            <td>
-                <Icon icon="close" size="small" clickable action={clear} disabled={!dirty} />
-            </td>
-        </tr>
-    )
-}
+const DataTableRow = ({
+    row,
+    index,
+    columns,
+    onSelect,
+    onRowSelection,
+    editable,
+    isSelected,
+    showRowNumbers,
+    hasActionsColumn,
+    hasCheckedColumn,
+    shouldShowCheckboxes,
+    onRowDoubleClick,
+    onRowContextMenu,
+    onCellClick,
+    onCellDoubleClick,
+    onCellEdit,
+    rowClassName,
+    cellClassName,
+    isExpanded,
+    onRowExpand
+}) => {
+    const handleRowClick = useCallback((event) => {
+        // Compatibilidad con table.js: evitar selección si se hace click en checkbox
+        if (event && event.target && event.target.id === "checked") {
+            return
+        }
 
-/**
- * Enhanced DataTable Row - maintains original structure
- */
-const DataTableRow2 = (props) => {
-    const {
-        index,
-        row,
-        columns = [],
-        onSelect,
-        editable,
-        expanded = false,
-        selected = false,
-        showRowNumbers,
-        onRowDoubleClick,
-        onRowContextMenu,
-        onCellClick,
-        onCellDoubleClick,
-        onCellEdit,
-        rowClassName,
-        cellClassName,
-        accessibility
-    } = props
+        // Usar onRowSelection si está disponible (compatibilidad con table.js)
+        if (onRowSelection) {
+            onRowSelection(row, event)
+        } else if (onSelect) {
+            onSelect(row.id, row)
+        }
+    }, [onSelect, onRowSelection, row])
 
-    const { className: rowClass } = row
-    const [isInfoOpen, toggleInfo] = useState(expanded)
-    const infoIcon = isInfoOpen ? 'expand_less' : 'expand_more'
+    const handleRowDoubleClick = useCallback(() => {
+        if (onRowDoubleClick) onRowDoubleClick(row.id, row)
+    }, [onRowDoubleClick, row])
 
-    let style = isInfoOpen ? "expanded" : ""
-    if (selected) style += " selected"
+    const handleRowContextMenu = useCallback((e) => {
+        if (onRowContextMenu) onRowContextMenu(e, row.id, row)
+    }, [onRowContextMenu, row])
 
-    const finalRowClassName = [
-        style,
-        rowClass,
-        typeof rowClassName === 'function' ? rowClassName(row, index) : rowClassName
+    const rowClasses = [
+        'datatable2__row',
+        isSelected && 'datatable2__row--selected',
+        rowClassName && isFunction(rowClassName) ? rowClassName(row, index) : rowClassName
     ].filter(Boolean).join(' ')
 
-    const rowProps = accessibility ? {
-        role: 'row',
-        'aria-selected': selected,
-        'aria-rowindex': index + 1,
-        tabIndex: 0
-    } : {}
-
-    const handleRowClick = useCallback((ev) => {
-        onSelect(row, ev)
-    }, [onSelect, row])
+    return (
+        <tr
+            className={rowClasses}
+            onClick={handleRowClick}
+            onDoubleClick={handleRowDoubleClick}
+            onContextMenu={handleRowContextMenu}
+        >
+            {shouldShowCheckboxes && row.checked !== undefined && (
+                <td className="datatable2__select-cell">
+                    <CheckBox
+                        id={`select-${row.id}`}
+                        value={row.checked}
+                        onChange={() => onSelect && onSelect(row.id, row)}
+                    />
+                </td>
+            )}
 
-    const handleRowDoubleClick = useCallback((ev) => {
-        if (onRowDoubleClick) onRowDoubleClick(row, ev)
-    }, [onRowDoubleClick, row])
+            {showRowNumbers && (
+                <td className="datatable2__row-number">{index + 1}</td>
+            )}
 
-    const handleRowContextMenu = useCallback((ev) => {
-        if (onRowContextMenu) onRowContextMenu(row, ev)
-    }, [onRowContextMenu, row])
+            {columns.map((column) => {
+                // Compatibilidad con table.js: manejar columna "checked"
+                if (column.id === 'checked') {
+                    return (
+                        <td key={column.id} className="datatable2__select-cell">
+                            {!row.checkDisabled && (
+                                <CheckBox
+                                    id="checked"
+                                    value={row[column.id]}
+                                    onChange={(id, value) => column.onChange && column.onChange(row.id, id, value)}
+                                />
+                            )}
+                        </td>
+                    )
+                }
 
-    return (
-        <Fragment>
-            <tr
-                className={finalRowClassName}
-                onClick={handleRowClick}
-                onDoubleClick={handleRowDoubleClick}
-                onContextMenu={handleRowContextMenu}
-                {...rowProps}
-            >
-                {showRowNumbers && (
-                    <td className="datatable2__row-number">
-                        {index + 1}
-                    </td>
-                )}
-                {columns.map((column, cindex) => (
-                    <DataTableCell2
-                        key={`${column.id}_${cindex}`}
-                        index={index}
-                        row={row}
+                return (
+                    <DataTableCell
+                        key={column.id}
                         column={column}
-                        cell={row[column.id]}
-                        editable={editable || column.editable}
+                        row={row}
+                        value={row[column.id]}
+                        editable={editable && column.editable}
                         onCellClick={onCellClick}
                         onCellDoubleClick={onCellDoubleClick}
                         onCellEdit={onCellEdit}
                         cellClassName={cellClassName}
-                        accessibility={accessibility}
                     />
-                ))}
-                {row.info ? (
-                    <td>
-                        <Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} />
-                    </td>
-                ) : (
-                    <td></td>
-                )}
-            </tr>
-            {row.info && isInfoOpen ? (
-                <tr className="table-row-info">
-                    <td colSpan={columns.length + (showRowNumbers ? 1 : 0) + 1}>
-                        {isFunction(row.info) ? row.info() : row.info}
-                    </td>
-                </tr>
-            ) : null}
-        </Fragment>
-    )
-}
-
-/**
- * Enhanced Sort Icon - maintains original behavior
- */
-const SortIcon2 = (props) => {
-    const { sortDir, onChange } = props
-    const icon = sortDir ? sortDir > 0 ? "arrow_upward" : "arrow_downward" : "swap_vert"
-    return <Icon icon={icon} size="small" clickable action={onChange} />
-}
-
-/**
- * Enhanced column resize handler
- */
-const handleColumnResize = (e, columnId, onColumnResize) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    const startX = e.clientX
-    const th = e.target.parentElement
-    const startWidth = th.offsetWidth
-
-    const handleMouseMove = (e) => {
-        const newWidth = Math.max(80, startWidth + (e.clientX - startX))
-
-        // Apply width directly to the element for immediate feedback
-        th.style.width = `${newWidth}px`
-
-        // Call external callback if provided
-        if (onColumnResize) {
-            onColumnResize(columnId, newWidth)
-        }
-    }
-
-    const handleMouseUp = () => {
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
-        document.body.style.cursor = 'default'
-        document.body.style.userSelect = 'auto'
-    }
-
-    // Prevent text selection during resize
-    document.body.style.cursor = 'col-resize'
-    document.body.style.userSelect = 'none'
+                )
+            })}
 
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
+            {hasActionsColumn && (
+                <td className="datatable2__actions-cell">
+                    {row.info && (
+                        <Icon
+                            icon={isExpanded ? "expand_less" : "expand_more"}
+                            size="small"
+                            clickable
+                            action={() => {
+                                if (row.info && typeof row.info === 'object' && row.info.action) {
+                                    row.info.action(row)
+                                }
+                                if (onRowExpand) {
+                                    onRowExpand(row.id)
+                                }
+                            }}
+                        />
+                    )}
+                </td>
+            )}
+        </tr>
+    )
 }
 
 /**
- * Enhanced DataTable Cell - maintains original structure and logic
+ * DataTable Cell Component
  */
-const DataTableCell2 = ({
-    index,
-    row,
+const DataTableCell = ({
     column,
-    cell,
+    row,
+    value,
     editable,
     onCellClick,
     onCellDoubleClick,
     onCellEdit,
-    cellClassName,
-    accessibility
+    cellClassName
 }) => {
+    const [isEditing, setIsEditing] = useState(false)
+    const [editValue, setEditValue] = useState(value)
+
     const handleCellClick = useCallback((e) => {
-        if (onCellClick) onCellClick(row, column, cell, e)
-    }, [onCellClick, row, column, cell])
+        if (onCellClick) onCellClick(e, column.id, row.id, value)
+        if (editable) setIsEditing(true)
+    }, [onCellClick, column.id, row.id, value, editable])
 
     const handleCellDoubleClick = useCallback((e) => {
-        if (onCellDoubleClick) onCellDoubleClick(row, column, cell, e)
-    }, [onCellDoubleClick, row, column, cell])
-
-    const render = (type) => {
-        const { id, disabled = false, min, max, onChange, format, options, item, action, maxDecimals } = column
-
-        if (id === "checked") {
-            return row.checkDisabled ? null : <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
-        } else if (editable && onChange) {
-            switch (type) {
-                case "ICON": return <Icon icon={cell} />
-                case "BOOLEAN": return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} disabled={disabled} />
-                case "Boolean": return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} disabled={disabled} />
-                case "SELECTION": return <DropDown id={id} value={cell} placeholder="--Select--" options={options} onChange={(id, value) => onChange(row.id, id, value)} />
-                case "CHECK": return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} disabled={row.disabled} />
-                case "CHECKABLE": return cell && cell.value ? <CheckBox id={id} value={cell.checked || false} label={cell.value} onChange={(id, checked) => onChange(row.id, id, cell.value, checked, cell)} /> : ''
-                case "TEXTFIELD": return <TextField id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
-                case "String": return <StringCellEditor2 id={id} value={cell} options={options} onChange={(id, value) => onChange(row.id, id, value)} />
-                case "Number": return <TextField id={id} type="number" value={cell} min={min} max={max} maxDecimals={column.maxDecimals} onChange={(id, value) => onChange(row.id, id, value)} />
-                case "Image": return <ImageCellViewer2 id={row.id} value={cell} uploadURL={column.uploadURL} onChange={column.onChange} />
-                default: return cell
-            }
-        } else {
-            switch (type) {
-                case "INDEX": return <span>{index}</span>
-                case "ICON": return <Icon icon={cell} />
-                case "Boolean": return <BooleanCellViewer2 id={id} value={cell} />
-                case "String": return <StringCellViewer2 id={id} value={cell} format={format} options={options} action={action} />
-                case "Number": return <NumberCellViewer2 id={id} value={cell} format={format} maxDecimals={maxDecimals} />
-                case "Image": return <img src={cell} alt="" />
-                case "DATETIME":
-                    const locale = window.navigator.userLanguage || window.navigator.language;
-                    let date = new Date(cell)
-                    date.setMinutes(date.getMinutes() + date.getTimezoneOffset() + 1)
-                    return <span>{date.toLocaleString(locale, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' })}</span>
-                default: return cell
-            }
+        if (onCellDoubleClick) onCellDoubleClick(e, column.id, row.id, value)
+    }, [onCellDoubleClick, column.id, row.id, value])
+
+    const handleEditComplete = useCallback(() => {
+        setIsEditing(false)
+        if (onCellEdit && editValue !== value) {
+            onCellEdit(column.id, row.id, editValue)
         }
-    }
+    }, [onCellEdit, column.id, row.id, editValue, value])
+
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            handleEditComplete()
+        } else if (e.key === 'Escape') {
+            setEditValue(value)
+            setIsEditing(false)
+        }
+    }, [handleEditComplete, value])
 
-    const finalCellClassName = [
-        column.id,
-        typeof cellClassName === 'function' ? cellClassName(row, column, cell) : cellClassName
+    const cellClasses = [
+        'datatable2__cell',
+        editable && 'datatable2__cell--editable',
+        isEditing && 'datatable2__cell--editing',
+        cellClassName && isFunction(cellClassName) ? cellClassName(column, row, value) : cellClassName
     ].filter(Boolean).join(' ')
 
-    const cellProps = accessibility ? {
-        role: 'cell',
-        'aria-describedby': column.label ? `${column.id}-header` : undefined,
-        tabIndex: editable ? 0 : -1
-    } : {}
+    const renderCellContent = () => {
+        if (isEditing && editable) {
+            if (column.options) {
+                return (
+                    <DropDown
+                        id={`edit-${column.id}-${row.id}`}
+                        value={editValue}
+                        options={column.options}
+                        onChange={(_, newValue) => setEditValue(newValue)}
+                        onBlur={handleEditComplete}
+                        autoFocus
+                        className="datatable2__edit-field"
+                    />
+                )
+            } else {
+                return (
+                    <TextField
+                        id={`edit-${column.id}-${row.id}`}
+                        value={editValue}
+                        onChange={(_, newValue) => setEditValue(newValue)}
+                        onBlur={handleEditComplete}
+                        onKeyDown={handleKeyDown}
+                        autoFocus
+                        className="datatable2__edit-field"
+                    />
+                )
+            }
+        }
+
+        if (column.render && isFunction(column.render)) {
+            return column.render(value, row, column)
+        }
+
+        return <Text>{value}</Text>
+    }
 
-    return column.type === TYPES.ENTITY ? (
-        <EntityCellViewer2 id={column.id} item={column.item} value={cell} />
-    ) : (
+    return (
         <td
-            key={column.id}
-            className={finalCellClassName}
+            className={cellClasses}
             onClick={handleCellClick}
             onDoubleClick={handleCellDoubleClick}
-            {...cellProps}
         >
-            {render(column.type)}
+            {renderCellContent()}
         </td>
     )
 }
 
-// Import and re-export original cell viewers with enhanced versions
-// These maintain 100% compatibility while adding new features
-
 /**
- * Enhanced Image Cell Viewer
+ * DataTable Filters Row Component
  */
-const ImageCellViewer2 = ({ id, value, uploadURL, onChange }) => {
-    function success(file, message) {
-        if (onChange) onChange(id, file, message)
-    }
+const DataTableFiltersRow = ({ columns, onClear, showRowNumbers, hasActionsColumn, shouldShowCheckboxes }) => {
+    const [filters, setFilters] = useState({})
 
-    function error(file, message) {
-        if (onChange) onChange(id, file, message)
-        console.error(message)
-    }
-
-    return uploadURL ? (
-        <div className="image-cell">
-            {value ? <img src={value} alt="" /> : <Icon icon="person" />}
-            <Uploader view="icon" icon="cloud_upload" target={uploadURL} onSuccess={success} onError={error} />
-        </div>
-    ) : (
-        <div className="image-cell">
-            {value ? <img src={value} alt="" /> : <Icon icon="person" />}
-        </div>
-    )
-}
+    const handleFilterChange = useCallback((columnId, value) => {
+        const newFilters = { ...filters, [columnId]: value }
+        setFilters(newFilters)
 
-/**
- * Enhanced Entity Cell Viewer
- */
-const EntityCellViewer2 = ({ id, item, value }) => {
-    const fields = Object.values(item).filter(field => field.column === true)
-    const locale = window.navigator.userLanguage || window.navigator.language;
-
-    return fields.map(field => {
-        let text = value[field.id]
-
-        if (field.format) {
-            switch (field.format) {
-                case FORMATS.COLOR:
-                    text = <input type="color" value={text} disabled />
-                    break;
-                case FORMATS.URL:
-                    text = <a href={text} target="download" download>{text}</a>
-                    break;
-                case FORMATS.IMG:
-                    text = <img src={text} alt="" />
-                    break;
-                case FORMATS.DATE:
-                    let fecha = new Date(text)
-                    fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1)
-                    text = fecha.toLocaleString(locale, { day: 'numeric', month: 'numeric', year: 'numeric' });
-                    break;
-                case FORMATS.TIME:
-                    text = new Date(text).toLocaleString(locale, { hour: 'numeric', minute: 'numeric', second: 'numeric' });
-                    break;
-                case FORMATS.DATETIME:
-                    text = new Date(text).toLocaleString(locale, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
-                    break;
-                default:
-                    break;
+        // Llamar al callback de filtro de la columna específica
+        const column = columns.find(col => col.id === columnId)
+        if (column && column.onFilter) {
+            column.onFilter(columnId, value)
+        }
+    }, [filters, columns])
+
+    const handleClearFilters = useCallback(() => {
+        setFilters({})
+        // Limpiar todos los filtros de columnas
+        columns.forEach(column => {
+            if (column.onFilter) {
+                column.onFilter(column.id, '')
             }
+        })
+        if (onClear) onClear()
+    }, [onClear, columns])
+
+    const hasFilters = Object.keys(filters).some(key => filters[key])
+
+    const renderFilterField = (column) => {
+        const value = filters[column.id] || ''
+
+        if (column.options) {
+            // Dropdown para columnas con opciones
+            return (
+                <DropDown
+                    id={`filter-${column.id}`}
+                    value={value}
+                    options={column.options}
+                    onChange={(_, value) => handleFilterChange(column.id, value)}
+                    placeholder={`Filtrar ${column.label || column.id}...`}
+                    className="datatable2__filter-field"
+                    outlined
+                    predictive={column.predictive}
+                />
+            )
+        } else {
+            // TextField para filtros de texto
+            return (
+                <TextField
+                    id={`filter-${column.id}`}
+                    value={value}
+                    onChange={(_, value) => handleFilterChange(column.id, value)}
+                    placeholder={`Filtrar ${column.label || column.id}...`}
+                    className="datatable2__filter-field"
+                    outlined
+                />
+            )
         }
-
-        return (<td key={field.id} className={`entity-cell ${field.id}`}>{text}</td>)
-    })
-}
-
-/**
- * Enhanced Boolean Cell Viewer
- */
-const BooleanCellViewer2 = ({ id, value = false }) => {
-    const icon = value === true ? "check_box" : "check_box_outline_blank"
-    return <Icon icon={icon} />
-}
-
-/**
- * Enhanced Number Cell Viewer
- */
-const NumberCellViewer2 = ({ id, value, format, maxDecimals }) => {
-    function formatNumber(number, maxDecimals = 0) {
-        if (number === null) return "null"
-        let result = number.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-        var parts = result.toString().split(",");
-        const numberPart = parts[0];
-        const decimalPart = parts[1];
-        const thousands = /\B(?=(\d{3})+(?!\d))/g;
-
-        const decimal = decimalPart ? decimalPart.substring(0, maxDecimals) : null;
-        return numberPart.replace(thousands, ".") + (decimal ? "," + decimal : "");
     }
 
-    if (format) {
-        switch (format) {
-            case FORMATS.CURRENCY:
-                return <span>{value.toLocaleString('es-ES', { style: 'currency', currency: 'EUR' })}</span>
-            case FORMATS.PERCENT:
-                return <span>{value.toLocaleString('es-ES', { style: 'percent', minimumFractionDigits: 2 })}</span>
-            case "ES_es":
-                let number = Number(value)
-                if (isNaN(number)) return value
-                return <span>{formatNumber(number, maxDecimals)}</span>
-            default:
-                return <span>{value}</span>
-        }
-    } else {
-        const decimals = maxDecimals ? maxDecimals : 2
-        if (typeof value === "string") {
-            value = parseFloat(value)
-        }
-        return (value && !isNaN(value)) ? <span>{value.toFixed(decimals)}</span> : ""
-    }
-}
+    return (
+        <tr className="datatable2__filters-row">
+            {/* Celda para checkboxes si están habilitados */}
+            {shouldShowCheckboxes && (
+                <td className="datatable2__filter-cell datatable2__filter-cell--checkbox"></td>
+            )}
 
-/**
- * Enhanced String Cell Viewer
- */
-const StringCellViewer2 = ({ id, value, format, options, action }) => {
-    function buildOptions() {
-        const opts = typeof options === 'function' ? options() : options
-        return opts
-    }
+            {/* Celda para números de fila si están habilitados */}
+            {showRowNumbers && (
+                <td className="datatable2__filter-cell datatable2__filter-cell--row-number"></td>
+            )}
 
-    function onClick() {
-        if (action) action(id, value, format, options)
-    }
+            {/* Celdas de filtro para cada columna */}
+            {columns.map((column) => (
+                <td key={column.id} className="datatable2__filter-cell">
+                    {column.filterable ? renderFilterField(column) : null}
+                </td>
+            ))}
 
-    const option = options ? buildOptions().find(o => o.value === value) : null
-    let text = option ? option.label : value
-    const className = option ? option.className : ''
-    const locale = window.navigator.userLanguage || window.navigator.language;
-
-    switch (format) {
-        case FORMATS.TOKENS:
-            text = value && Array.isArray(value) ? value.join(", ") : value
-            break;
-        case FORMATS.COLOR:
-            text = <input type="color" value={text} disabled />
-            break;
-        case FORMATS.URL:
-            text = <a href={text} target="download" download>{text}</a>
-            break;
-        case FORMATS.IMG:
-            text = <img src={text} onClick={onClick} alt="" />
-            break;
-        case FORMATS.DATE:
-            let fecha = new Date(text)
-            fecha.setMinutes(fecha.getMinutes() + fecha.getTimezoneOffset() + 1)
-            text = fecha.toLocaleString(locale, { day: 'numeric', month: 'numeric', year: 'numeric' });
-            break;
-        case FORMATS.TIME:
-            text = new Date(text).toLocaleString(locale, { hour: 'numeric', minute: 'numeric', second: 'numeric' });
-            break;
-        case FORMATS.DATETIME:
-            text = new Date(text).toLocaleString(locale, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
-            break;
-        default:
-            break;
-    }
-    return (<div className={`field-editor string-viewer ${className}`} title={text}>{text}</div>)
+            {/* Celda para acciones con botón de limpiar */}
+            {hasActionsColumn && (
+                <td className="datatable2__filter-cell datatable2__filter-cell--actions">
+                    <Icon
+                        icon="close"
+                        size="small"
+                        clickable
+                        action={handleClearFilters}
+                        disabled={!hasFilters}
+                        ariaLabel="Limpiar filtros"
+                        className={`datatable2__clear-filters ${hasFilters ? 'datatable2__clear-filters--active' : ''}`}
+                    />
+                </td>
+            )}
+        </tr>
+    )
 }
 
 /**
- * Enhanced String Cell Editor
+ * DataTable Empty State Component
  */
-const StringCellEditor2 = ({ id, value = '', options, onChange }) => {
-    function change(id, value) {
-        if (onChange) onChange(id, value)
+const DataTableEmpty = ({ message, icon, customState }) => {
+    if (customState) {
+        return (
+            <tbody>
+                <tr>
+                    <td colSpan="100%" className="datatable2__empty-cell">
+                        {customState}
+                    </td>
+                </tr>
+            </tbody>
+        )
     }
 
     return (
-        <div className='field-editor string-editor'>
-            {options ?
-                <DropDown outlined id={id} value={value} onChange={change} options={options} />
-                : <TextField outlined id={id} value={value} onChange={change} />
-            }
-        </div>
+        <tbody>
+            <tr>
+                <td colSpan="100%" className="datatable2__empty-cell">
+                    <div className="datatable2__empty-state">
+                        <Icon icon={icon} size="large" />
+                        <Text>{message}</Text>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
     )
 }
 
 /**
- * Skeleton loading table
+ * DataTable Skeleton Component
  */
-const SkeletonTable = ({ columns, rows }) => (
-    <table>
-        <thead>
-            <tr>
-                {columns.map(col => (
-                    <th key={col.id}>
-                        <div className="skeleton-text skeleton-text--header"></div>
-                    </th>
-                ))}
-            </tr>
-        </thead>
+const DataTableSkeleton = ({ columns, showRowNumbers, hasActionsColumn }) => {
+    const skeletonRows = Array.from({ length: 5 }, (_, i) => i)
+
+    return (
         <tbody>
-            {Array.from({ length: rows }, (_, i) => (
-                <tr key={i}>
-                    {columns.map(col => (
-                        <td key={col.id}>
-                            <div className="skeleton-text"></div>
+            {skeletonRows.map((_, index) => (
+                <tr key={index} className="datatable2__skeleton-row">
+                    {showRowNumbers && (
+                        <td className="datatable2__skeleton-cell">
+                            <div className="datatable2__skeleton-text datatable2__skeleton-text--short" />
+                        </td>
+                    )}
+
+                    {columns.map((column) => (
+                        <td key={column.id} className="datatable2__skeleton-cell">
+                            <div className="datatable2__skeleton-text" />
                         </td>
                     ))}
+
+                    {hasActionsColumn && (
+                        <td className="datatable2__skeleton-cell">
+                            <div className="datatable2__skeleton-text datatable2__skeleton-text--short" />
+                        </td>
+                    )}
                 </tr>
             ))}
         </tbody>
-    </table>
-)
+    )
+}
+
+/**
+ * DataTable Footer Component
+ */
+const DataTableFooter = ({ onExport }) => {
+    return (
+        <div className="datatable2__footer">
+            <button
+                className="datatable2__export-btn"
+                onClick={onExport}
+            >
+                <Icon icon="download" size="small" />
+                Export
+            </button>
+        </div>
+    )
+}
 
-// PropTypes for DataTable2
+// PropTypes
 DataTable2.propTypes = {
-    // Original props (100% compatible)
-    /** Array of column definitions */
-    columns: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        label: PropTypes.string,
-        type: PropTypes.string,
-        sortable: PropTypes.bool,
-        filterable: PropTypes.bool,
-        resizable: PropTypes.bool,
-        editable: PropTypes.bool,
-        format: PropTypes.string,
-        options: PropTypes.array,
-        onChange: PropTypes.func,
-        onFilter: PropTypes.func,
-        action: PropTypes.func,
-        disabled: PropTypes.bool,
-        min: PropTypes.number,
-        max: PropTypes.number,
-        maxDecimals: PropTypes.number,
-        predictive: PropTypes.bool,
-        item: PropTypes.object,
-        uploadURL: PropTypes.string
-    })),
-    /** Array of row data */
-    rows: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        selected: PropTypes.bool,
-        className: PropTypes.string,
-        checkDisabled: PropTypes.bool,
-        disabled: PropTypes.bool,
-        info: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-    })),
-    /** Row selection callback */
-    onRowSelection: PropTypes.func,
-    /** Sort callback */
+    id: PropTypes.string,
+    columns: PropTypes.array.isRequired,
+    rows: PropTypes.array.isRequired,
+    sortDir: PropTypes.object,
     onSort: PropTypes.func,
-    /** Check all callback */
+    onSelect: PropTypes.func,
+    onRowSelection: PropTypes.func, // Compatibilidad con table.js
     onCheckAll: PropTypes.func,
-    /** Enable editing */
+    allChecked: PropTypes.bool,
+    showSelectAll: PropTypes.bool,
+    showRowNumbers: PropTypes.bool,
     editable: PropTypes.bool,
-    /** Outlined style */
-    outlined: PropTypes.bool,
-    /** Expand rows by default */
     expanded: PropTypes.bool,
-    /** Additional CSS classes */
+    selectedRows: PropTypes.array,
+    onRowDoubleClick: PropTypes.func,
+    onRowContextMenu: PropTypes.func,
+    onCellClick: PropTypes.func,
+    onCellDoubleClick: PropTypes.func,
+    onCellEdit: PropTypes.func,
+    onDrop: PropTypes.func,
     className: PropTypes.string,
-    /** Empty state message */
     emptyMessage: PropTypes.string,
-    /** Empty state icon */
     emptyIcon: PropTypes.string,
-    /** Enable multi-sort */
     multisort: PropTypes.bool,
-    /** Enable filtering */
     filterable: PropTypes.bool,
-    /** Clear filters callback */
     onClearFilters: PropTypes.func,
-
-    // New enhanced props (all optional for compatibility)
-    /** Loading state */
     loading: PropTypes.bool,
-    /** Skeleton placeholder */
     skeleton: PropTypes.bool,
-    /** Striped rows */
     striped: PropTypes.bool,
-    /** Hover effects */
     hover: PropTypes.bool,
-    /** Compact layout */
-    compact: PropTypes.bool,
-    /** Bordered table */
     bordered: PropTypes.bool,
-    /** Responsive design */
-    responsive: PropTypes.bool,
-    /** Sticky header */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    density: PropTypes.oneOf(['compact', 'normal', 'comfortable']),
+    theme: PropTypes.oneOf(['default', 'dark', 'minimal']),
+    readability: PropTypes.oneOf([null, 'large', 'contrast', 'dyslexia', 'print', 'compact', 'focus', 'dark']),
     stickyHeader: PropTypes.bool,
-    /** Virtual scrolling */
-    virtualScrolling: PropTypes.bool,
-    /** Page size for virtual scrolling */
-    pageSize: PropTypes.number,
-    /** Selection mode */
-    selectionMode: PropTypes.oneOf(['single', 'multiple', 'none']),
-    /** Sort mode */
-    sortMode: PropTypes.oneOf(['single', 'multiple', 'none']),
-    /** Resizable columns */
     resizable: PropTypes.bool,
-    /** Reorderable columns */
-    reorderable: PropTypes.bool,
-    /** Export functionality */
+    showSidebar: PropTypes.bool,
+    sidebarId: PropTypes.string,
+    sidebarTools: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        icon: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        component: PropTypes.oneOfType([
+            PropTypes.func,        // React component
+            PropTypes.string       // Legacy string identifier
+        ]).isRequired
+    })),
     exportable: PropTypes.bool,
-    /** Search functionality */
     searchable: PropTypes.bool,
-    /** Search placeholder */
-    searchPlaceholder: PropTypes.string,
-    /** Search callback */
-    onSearch: PropTypes.func,
-    /** Export callback */
-    onExport: PropTypes.func,
-    /** Column resize callback */
-    onColumnResize: PropTypes.func,
-    /** Column reorder callback */
-    onColumnReorder: PropTypes.func,
-    /** Custom empty state */
+    pagination: PropTypes.object,
     customEmptyState: PropTypes.node,
-    /** Row height */
-    rowHeight: PropTypes.oneOf(['small', 'medium', 'large']),
-    /** Table density */
-    density: PropTypes.oneOf(['compact', 'normal', 'comfortable']),
-    /** Theme */
-    theme: PropTypes.oneOf(['default', 'dark', 'minimal']),
-    /** Accessibility features */
-    accessibility: PropTypes.bool,
-    /** Row click callback */
-    onRowClick: PropTypes.func,
-    /** Row double click callback */
-    onRowDoubleClick: PropTypes.func,
-    /** Row context menu callback */
-    onRowContextMenu: PropTypes.func,
-    /** Cell click callback */
-    onCellClick: PropTypes.func,
-    /** Cell double click callback */
-    onCellDoubleClick: PropTypes.func,
-    /** Cell edit callback */
-    onCellEdit: PropTypes.func,
-    /** Row class name function */
     rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    /** Cell class name function */
     cellClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    /** Header class name */
     headerClassName: PropTypes.string,
-    /** Footer content */
-    footerContent: PropTypes.node,
-    /** Show row numbers */
-    showRowNumbers: PropTypes.bool,
-    /** Show select all checkbox */
-    showSelectAll: PropTypes.bool,
-    /** Persist table state */
-    persistState: PropTypes.bool,
-    /** State key for persistence */
-    stateKey: PropTypes.string,
-    /** State change callback */
-    onStateChange: PropTypes.func
-}
-
-DataTable2.defaultProps = {
-    columns: [],
-    rows: [],
-    expanded: false,
-    emptyMessage: "No Results Found",
-    emptyIcon: "search_off",
-    multisort: false,
-    filterable: false,
-    loading: false,
-    skeleton: false,
-    striped: false,
-    hover: true,
-    compact: false,
-    bordered: false,
-    responsive: true,
-    stickyHeader: true,
-    virtualScrolling: false,
-    pageSize: 50,
-    selectionMode: 'single',
-    sortMode: 'single',
-    resizable: false,
-    reorderable: false,
-    exportable: false,
-    searchable: false,
-    searchPlaceholder: "Search...",
-    rowHeight: 'medium',
-    density: 'normal',
-    theme: 'default',
-    accessibility: true,
-    showRowNumbers: false,
-    showSelectAll: true,
-    persistState: false
-}
-
-// Export original components for compatibility
-export { StringCellEditor2 as StringCellEditor }
-
-// Export new enhanced components
-export {
-    DataTable2Header,
-    DataTable2Body,
-    DataTableRow2,
-    DataTableCell2,
-    StringCellEditor2,
-    ImageCellViewer2,
-    EntityCellViewer2,
-    BooleanCellViewer2,
-    NumberCellViewer2,
-    StringCellViewer2
+    accessibility: PropTypes.bool,
+    height: PropTypes.string,
+    maxHeight: PropTypes.string,
+    minHeight: PropTypes.string,
+    onColumnResize: PropTypes.func,
+    onExport: PropTypes.func,
+    onSearch: PropTypes.func
 }
-
-// Default export for easy migration
-export default DataTable2