juxscript 1.1.4 → 1.1.6

package/lib/components/table.js

@@ -0,0 +1,1045 @@
+/* ═════════════════════════════════════════════════════════════════
+ * SECTION 1: DEFINITIONS
+ * Type definitions, constants, interfaces
+ * ═════════════════════════════════════════════════════════════════ */
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [
+    'rowClick', 'rowHover', 'cellClick',
+    'selected', 'deselected', 'selectionChange'
+];
+const CALLBACK_EVENTS = [
+    'sortChange', 'filterChange', 'pageChange', 'dataChange'
+];
+/* ═════════════════════════════════════════════════════════════════
+ * SECTION 2: CONSTRUCTOR & STORAGE
+ * Class declaration, instance variables, initialization
+ * ═════════════════════════════════════════════════════════════════ */
+export class Table extends BaseComponent {
+    constructor(id, options = {}) {
+        const normalizedColumns = (options.columns ?? []).map(col => typeof col === 'string' ? { key: col, label: col } : col);
+        // Initialize base with state
+        super(id, {
+            columns: normalizedColumns,
+            rows: options.rows ?? [],
+            computedColumns: new Map(), // ✨ NEW: Initialize empty Map
+            headers: options.headers ?? true,
+            striped: options.striped ?? false,
+            hoverable: options.hoverable ?? false,
+            bordered: options.bordered ?? false,
+            compact: options.compact ?? false,
+            sortable: options.sortable ?? false,
+            filterable: options.filterable ?? false,
+            paginated: options.paginated ?? false,
+            rowsPerPage: options.rowsPerPage ?? 10,
+            currentPage: 1,
+            sortColumn: null,
+            sortDirection: 'asc',
+            filterText: '',
+            selectable: options.selectable ?? false,
+            multiSelect: options.multiSelect ?? false,
+            showCheckboxes: options.showCheckboxes ?? false,
+            showBulkCheckbox: options.showBulkCheckbox ?? false,
+            selectionTrigger: options.selectionTrigger ?? 'row',
+            selectedIndexes: new Set(),
+            style: options.style ?? '',
+            class: options.class ?? '',
+            rowIdField: options.rowIdField,
+            selectionBehavior: options.selectionBehavior ?? 'clear'
+        });
+        this._tableElement = null;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * ABSTRACT METHOD IMPLEMENTATIONS
+     * ═════════════════════════════════════════════════════════════════ */
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * SECTION 3: FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent: style(), class(), bind(), sync(), renderTo()
+    // Configuration methods
+    columns(value) {
+        this.state.columns = value.map(col => typeof col === 'string' ? { key: col, label: col } : col);
+        return this;
+    }
+    rows(value) {
+        const previousRows = this.state.rows;
+        const hadSelections = this.state.selectedIndexes.size > 0;
+        // Handle selections based on behavior
+        if (this.state.selectionBehavior === 'preserve' && this.state.rowIdField) {
+            this._preserveSelections(previousRows, value);
+        }
+        else {
+            this.state.selectedIndexes.clear();
+        }
+        this.state.rows = value;
+        // Auto-reset pagination if current page is now invalid
+        if (this.state.paginated) {
+            const totalPages = Math.ceil(value.length / this.state.rowsPerPage);
+            if (this.state.currentPage > totalPages && totalPages > 0) {
+                this.state.currentPage = totalPages;
+            }
+            if (totalPages === 0) {
+                this.state.currentPage = 1;
+            }
+        }
+        this._updateTable();
+        // Fire callbacks
+        this._triggerCallback('dataChange', value, previousRows);
+        if (hadSelections && this._triggerHandlers.has('selectionChange')) {
+            this._triggerHandlers.get('selectionChange')(this.getSelectedRows(), this.getSelectedIndexes(), new CustomEvent('dataChange'));
+        }
+        return this;
+    }
+    /**
+     * Add a computed column that evaluates dynamically at render time
+     *
+     * @param key - Unique key for the column
+     * @param label - Display label in header
+     * @param compute - Function to compute value from row data
+     * @param render - Optional custom renderer for the computed value
+     * @param width - Optional column width
+     */
+    computedColumn(key, label, compute, render, width) {
+        // Store computed column definition
+        this.state.computedColumns.set(key, {
+            key,
+            label,
+            compute,
+            render,
+            width
+        });
+        // Add to columns list if not already present
+        const existingColumn = this.state.columns.find(col => col.key === key);
+        if (!existingColumn) {
+            this.state.columns.push({
+                key,
+                label,
+                width,
+                computed: true,
+                render: render
+            });
+        }
+        // If already rendered, update table
+        if (this._tableElement) {
+            const tbody = this._tableElement.querySelector('tbody');
+            const thead = this._tableElement.querySelector('thead');
+            if (tbody && thead) {
+                // Rebuild header with new column
+                const table = this._tableElement;
+                table.innerHTML = '';
+                const newThead = this._buildTableHeader();
+                table.appendChild(newThead);
+                const newTbody = document.createElement('tbody');
+                this._renderTableBody(newTbody);
+                table.appendChild(newTbody);
+                // Re-wire events
+                this._wireTriggerEvents(newTbody);
+            }
+        }
+        return this;
+    }
+    /**
+     * Remove a computed column
+     */
+    removeComputedColumn(key) {
+        this.state.computedColumns.delete(key);
+        this.state.columns = this.state.columns.filter(col => col.key !== key);
+        if (this._tableElement) {
+            const tbody = this._tableElement.querySelector('tbody');
+            const thead = this._tableElement.querySelector('thead');
+            if (tbody && thead) {
+                const table = this._tableElement;
+                table.innerHTML = '';
+                const newThead = this._buildTableHeader();
+                table.appendChild(newThead);
+                const newTbody = document.createElement('tbody');
+                this._renderTableBody(newTbody);
+                table.appendChild(newTbody);
+                this._wireTriggerEvents(newTbody);
+            }
+        }
+        return this;
+    }
+    // Visual options
+    headers(value) {
+        this.state.headers = value;
+        return this;
+    }
+    striped(value) {
+        this.state.striped = value;
+        return this;
+    }
+    hoverable(value) {
+        this.state.hoverable = value;
+        return this;
+    }
+    bordered(value) {
+        this.state.bordered = value;
+        return this;
+    }
+    compact(value) {
+        this.state.compact = value;
+        return this;
+    }
+    // Feature toggles
+    sortable(value) {
+        this.state.sortable = value;
+        return this;
+    }
+    filterable(value) {
+        this.state.filterable = value;
+        return this;
+    }
+    paginated(value) {
+        this.state.paginated = value;
+        return this;
+    }
+    rowsPerPage(value) {
+        this.state.rowsPerPage = value;
+        return this;
+    }
+    // Selection configuration
+    selectable(value) {
+        this.state.selectable = value;
+        return this;
+    }
+    multiSelect(value) {
+        this.state.multiSelect = value;
+        if (value) {
+            this.state.selectable = true; // multi-select implies selectable
+        }
+        return this;
+    }
+    showCheckboxes(value) {
+        this.state.showCheckboxes = value;
+        // If already rendered, update immediately
+        if (this._tableElement) {
+            const tbody = this._tableElement.querySelector('tbody');
+            const thead = this._tableElement.querySelector('thead');
+            if (tbody && thead) {
+                // Update header
+                this._updateHeaderCheckbox(thead);
+                // Re-render body with/without checkboxes
+                this._renderTableBody(tbody);
+                // Update bulk checkbox state
+                this._updateBulkCheckboxState();
+            }
+        }
+        return this;
+    }
+    showBulkCheckbox(value) {
+        this.state.showBulkCheckbox = value;
+        if (value) {
+            this.state.multiSelect = true;
+            this.state.selectable = true;
+            this.state.showCheckboxes = true;
+        }
+        // If already rendered, update immediately
+        if (this._tableElement) {
+            const thead = this._tableElement.querySelector('thead');
+            const tbody = this._tableElement.querySelector('tbody');
+            if (thead && tbody) {
+                this._updateHeaderCheckbox(thead);
+                this._renderTableBody(tbody);
+                this._updateBulkCheckboxState();
+            }
+        }
+        return this;
+    }
+    selectionTrigger(value) {
+        this.state.selectionTrigger = value;
+        // If already rendered, update cursor style
+        if (this._tableElement) {
+            const tbody = this._tableElement.querySelector('tbody');
+            if (tbody) {
+                if (this.state.selectionTrigger === 'row' && this.state.selectable) {
+                    tbody.style.cursor = 'pointer';
+                }
+                else {
+                    tbody.style.cursor = '';
+                }
+            }
+        }
+        return this;
+    }
+    // Selection actions
+    selectAll() {
+        this.state.rows.forEach((_, index) => {
+            this.state.selectedIndexes.add(index);
+        });
+        this._updateRowSelectionUI();
+        // Fire selectionChange
+        if (this._triggerHandlers.has('selectionChange')) {
+            this._triggerHandlers.get('selectionChange')(this.getSelectedRows(), this.getSelectedIndexes(), new CustomEvent('bulkSelect'));
+        }
+        return this;
+    }
+    deselectAll() {
+        this.state.selectedIndexes.clear();
+        this._updateRowSelectionUI();
+        // Fire selectionChange
+        if (this._triggerHandlers.has('selectionChange')) {
+            this._triggerHandlers.get('selectionChange')([], [], new CustomEvent('bulkDeselect'));
+        }
+        return this;
+    }
+    clearSelection() {
+        this.state.selectedIndexes.clear();
+        this._updateRowSelectionUI();
+        return this;
+    }
+    selectRows(indexes) {
+        if (!this.state.multiSelect) {
+            this.state.selectedIndexes.clear();
+        }
+        indexes.forEach(index => {
+            if (index >= 0 && index < this.state.rows.length) {
+                this.state.selectedIndexes.add(index);
+            }
+        });
+        this._updateRowSelectionUI();
+        return this;
+    }
+    deselectRows(indexes) {
+        indexes.forEach(index => this.state.selectedIndexes.delete(index));
+        this._updateRowSelectionUI();
+        return this;
+    }
+    // Public utilities
+    getSelectedIndexes() {
+        return Array.from(this.state.selectedIndexes);
+    }
+    getSelectedRows() {
+        return Array.from(this.state.selectedIndexes).map(index => this.state.rows[index]);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * SECTION 5: RENDER LIFECYCLE
+     * Main render method and BUILD phase helpers
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const wrapper = this._buildWrapper();
+        const table = this._buildTable(wrapper);
+        const tbody = table.querySelector('tbody');
+        this._wireAllEvents(wrapper, tbody);
+        container.appendChild(wrapper);
+        this._tableElement = table;
+        return this;
+    }
+    // Step 1: SETUP
+    _setupContainer(targetId) {
+        let container;
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Table: Target "${targetId}" not found`);
+            }
+            container = target;
+        }
+        else {
+            // Inline getOrCreateContainer functionality
+            let element = document.getElementById(this._id);
+            if (!element) {
+                element = document.createElement('div');
+                element.id = this._id;
+                document.body.appendChild(element);
+            }
+            container = element;
+        }
+        this.container = container;
+        return container;
+    }
+    // Step 2: BUILD wrapper
+    _buildWrapper() {
+        const { style, class: className } = this.state;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-table-wrapper';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        if (this.state.selectable) {
+            const selectionStyles = document.createElement('style');
+            selectionStyles.textContent = `
+        .jux-table-row-selected { background-color: #e3f2fd !important; }
+        .jux-table-row-selected:hover { background-color: #bbdefb !important; }
+      `;
+            wrapper.appendChild(selectionStyles);
+        }
+        if (this.state.filterable) {
+            wrapper.appendChild(this._buildFilterInput());
+        }
+        return wrapper;
+    }
+    _buildFilterInput() {
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = 'Filter...';
+        input.className = 'jux-table-filter';
+        input.style.cssText = 'margin-bottom: 10px; padding: 5px; width: 100%;';
+        // Add event listener to handle filtering
+        input.addEventListener('input', (e) => {
+            const target = e.target;
+            this.state.filterText = target.value;
+            // Re-render table body
+            const tbody = this._tableElement?.querySelector('tbody');
+            if (tbody) {
+                this._renderTableBody(tbody);
+                // Update pagination if enabled
+                const wrapper = this._tableElement?.closest('.jux-table-wrapper');
+                if (wrapper && this.state.paginated) {
+                    // Reset to page 1 when filtering
+                    this.state.currentPage = 1;
+                    this._updatePagination(wrapper, tbody);
+                }
+            }
+            // Fire callback
+            this._triggerCallback('filterChange', target.value, e);
+        });
+        return input;
+    }
+    // Step 3: BUILD table
+    _buildTable(wrapper) {
+        const { striped, hoverable, bordered } = this.state;
+        const table = document.createElement('table');
+        table.className = 'jux-table';
+        if (striped)
+            table.classList.add('jux-table-striped');
+        if (hoverable)
+            table.classList.add('jux-table-hoverable');
+        if (bordered)
+            table.classList.add('jux-table-bordered');
+        // Build and append header
+        if (this.state.headers) {
+            const thead = this._buildTableHeader();
+            table.appendChild(thead);
+        }
+        // Build and append body
+        const tbody = document.createElement('tbody');
+        this._renderTableBody(tbody);
+        table.appendChild(tbody);
+        wrapper.appendChild(table);
+        return table;
+    }
+    _buildTableHeader() {
+        const thead = document.createElement('thead');
+        const headerRow = document.createElement('tr');
+        // Add bulk checkbox or empty checkbox column
+        if (this.state.showBulkCheckbox) {
+            headerRow.appendChild(this._buildBulkCheckboxCell());
+        }
+        else if (this.state.showCheckboxes) {
+            const emptyTh = document.createElement('th');
+            emptyTh.style.width = '40px';
+            headerRow.appendChild(emptyTh);
+        }
+        // Add column headers with optional sort
+        this.state.columns.forEach(col => {
+            const th = this._buildColumnHeader(col);
+            headerRow.appendChild(th);
+        });
+        thead.appendChild(headerRow);
+        return thead;
+    }
+    _buildBulkCheckboxCell() {
+        const bulkTh = document.createElement('th');
+        bulkTh.style.width = '40px';
+        bulkTh.style.textAlign = 'center';
+        const bulkCheckbox = document.createElement('input');
+        bulkCheckbox.type = 'checkbox';
+        bulkCheckbox.className = 'jux-bulk-checkbox';
+        bulkCheckbox.style.cursor = 'pointer';
+        bulkCheckbox.title = 'Select all';
+        bulkCheckbox.addEventListener('change', (e) => {
+            if (bulkCheckbox.checked) {
+                this.selectAll();
+            }
+            else {
+                this.deselectAll();
+            }
+        });
+        bulkTh.appendChild(bulkCheckbox);
+        return bulkTh;
+    }
+    _buildColumnHeader(col) {
+        const th = document.createElement('th');
+        th.textContent = col.label;
+        th.setAttribute('data-column-key', col.key);
+        if (col.width)
+            th.style.width = col.width;
+        if (this.state.sortable) {
+            th.style.cursor = 'pointer';
+            th.style.userSelect = 'none';
+            th.addEventListener('click', (e) => {
+                // Update state
+                if (this.state.sortColumn === col.key) {
+                    this.state.sortDirection = this.state.sortDirection === 'asc' ? 'desc' : 'asc';
+                }
+                else {
+                    this.state.sortColumn = col.key;
+                    this.state.sortDirection = 'asc';
+                }
+                // Re-render
+                const tbody = this._tableElement.querySelector('tbody');
+                this._renderTableBody(tbody);
+                // Update UI indicators
+                const headerRow = th.parentElement;
+                headerRow.querySelectorAll('th[data-column-key]').forEach(h => {
+                    h.textContent = h.textContent?.replace(' ▲', '').replace(' ▼', '') || '';
+                });
+                th.textContent = col.label + (this.state.sortDirection === 'asc' ? ' ▲' : ' ▼');
+                // Fire callback
+                this._triggerCallback('sortChange', col.key, this.state.sortDirection, e);
+            });
+        }
+        return th;
+    }
+    // Step 4: WIRE orchestrator
+    _wireAllEvents(wrapper, tbody) {
+        this._wireTriggerEvents(tbody);
+        if (this.state.paginated) {
+            this._updatePagination(wrapper, tbody);
+        }
+        this._wireStandardEvents(wrapper); // ✅ Use inherited method
+        this._wireSyncBindings(wrapper, tbody);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * SECTION 6: EVENT WIRING
+     * WIRE phase - connects storage to actual DOM listeners/subscriptions
+     * ═════════════════════════════════════════════════════════════════ */
+    _wireTriggerEvents(tbody) {
+        // === rowClick: Fire immediately when row is clicked ===
+        if (this._triggerHandlers.has('rowClick')) {
+            const handler = this._triggerHandlers.get('rowClick');
+            tbody.addEventListener('click', (e) => {
+                const tr = e.target.closest('tr');
+                if (tr && tbody.contains(tr)) {
+                    const rowIndex = Array.from(tbody.children).indexOf(tr);
+                    let rows = this._getFilteredRows();
+                    rows = this._getSortedRows(rows);
+                    rows = this._getPaginatedRows(rows);
+                    const rowData = rows[rowIndex];
+                    if (rowData) {
+                        handler(rowData, rowIndex, e);
+                    }
+                }
+            });
+            tbody.style.cursor = 'pointer';
+        }
+        // === cellClick: Fire immediately when cell is clicked ===
+        if (this._triggerHandlers.has('cellClick')) {
+            const handler = this._triggerHandlers.get('cellClick');
+            tbody.addEventListener('click', (e) => {
+                const td = e.target.closest('td');
+                if (td) {
+                    const tr = td.closest('tr');
+                    if (tr && tbody.contains(tr)) {
+                        const rowIndex = Array.from(tbody.children).indexOf(tr);
+                        const cellIndex = Array.from(tr.children).indexOf(td);
+                        let rows = this._getFilteredRows();
+                        rows = this._getSortedRows(rows);
+                        rows = this._getPaginatedRows(rows);
+                        const rowData = rows[rowIndex];
+                        const columnKey = this.state.columns[cellIndex]?.key;
+                        const cellValue = rowData?.[columnKey];
+                        if (rowData && columnKey) {
+                            handler(cellValue, rowData, columnKey, rowIndex, cellIndex, e);
+                        }
+                    }
+                }
+            });
+        }
+        // === Selection events: Fire with internal logic ===
+        if (this.state.selectable) {
+            tbody.addEventListener('click', (e) => {
+                const target = e.target;
+                // Check if click was on checkbox
+                const isCheckboxClick = target.tagName === 'INPUT' && target.getAttribute('type') === 'checkbox';
+                // If trigger is 'checkbox' and click wasn't on checkbox, ignore
+                if (this.state.selectionTrigger === 'checkbox' && !isCheckboxClick) {
+                    return;
+                }
+                // ✨ FIX: If trigger is 'row' and click WAS on checkbox, toggle it manually
+                if (this.state.selectionTrigger === 'row' && isCheckboxClick) {
+                    e.preventDefault(); // Prevent default checkbox behavior
+                    const checkbox = target;
+                    checkbox.checked = !checkbox.checked; // ✨ Toggle the checkbox
+                }
+                const tr = target.closest('tr');
+                if (tr && tbody.contains(tr)) {
+                    const visualRowIndex = Array.from(tbody.children).indexOf(tr);
+                    let rows = this._getFilteredRows();
+                    rows = this._getSortedRows(rows);
+                    const actualRowIndex = this.state.rows.indexOf(rows[(this.state.currentPage - 1) * this.state.rowsPerPage + visualRowIndex]);
+                    if (actualRowIndex === -1)
+                        return;
+                    const wasSelected = this.state.selectedIndexes.has(actualRowIndex);
+                    if (this.state.multiSelect) {
+                        // Toggle selection
+                        if (wasSelected) {
+                            this.state.selectedIndexes.delete(actualRowIndex);
+                            tr.classList.remove('jux-table-row-selected');
+                            // Update checkbox if present
+                            const checkbox = tr.querySelector('input[type="checkbox"]');
+                            if (checkbox)
+                                checkbox.checked = false;
+                            if (this._triggerHandlers.has('deselected')) {
+                                this._triggerHandlers.get('deselected')(this.state.rows[actualRowIndex], actualRowIndex, e);
+                            }
+                        }
+                        else {
+                            this.state.selectedIndexes.add(actualRowIndex);
+                            tr.classList.add('jux-table-row-selected');
+                            // Update checkbox if present
+                            const checkbox = tr.querySelector('input[type="checkbox"]');
+                            if (checkbox)
+                                checkbox.checked = true;
+                            if (this._triggerHandlers.has('selected')) {
+                                this._triggerHandlers.get('selected')(this.state.rows[actualRowIndex], actualRowIndex, e);
+                            }
+                        }
+                    }
+                    else {
+                        // Single select
+                        const previousSelection = Array.from(this.state.selectedIndexes);
+                        this.state.selectedIndexes.clear();
+                        tbody.querySelectorAll('tr').forEach(row => {
+                            row.classList.remove('jux-table-row-selected');
+                            const checkbox = row.querySelector('input[type="checkbox"]');
+                            if (checkbox)
+                                checkbox.checked = false;
+                        });
+                        if (!wasSelected) {
+                            this.state.selectedIndexes.add(actualRowIndex);
+                            tr.classList.add('jux-table-row-selected');
+                            // Update checkbox if present
+                            const checkbox = tr.querySelector('input[type="checkbox"]');
+                            if (checkbox)
+                                checkbox.checked = true;
+                            if (this._triggerHandlers.has('selected')) {
+                                this._triggerHandlers.get('selected')(this.state.rows[actualRowIndex], actualRowIndex, e);
+                            }
+                        }
+                        if (this._triggerHandlers.has('deselected') && previousSelection.length > 0) {
+                            previousSelection.forEach(idx => {
+                                if (idx !== actualRowIndex) {
+                                    this._triggerHandlers.get('deselected')(this.state.rows[idx], idx, e);
+                                }
+                            });
+                        }
+                    }
+                    // Update bulk checkbox state if present
+                    this._updateBulkCheckboxState();
+                    // Fire selectionChange
+                    if (this._triggerHandlers.has('selectionChange')) {
+                        this._triggerHandlers.get('selectionChange')(this.getSelectedRows(), this.getSelectedIndexes(), e);
+                    }
+                }
+            });
+            // Only set pointer cursor if row is trigger
+            if (this.state.selectionTrigger === 'row') {
+                tbody.style.cursor = 'pointer';
+            }
+        }
+    }
+    _wireSyncBindings(wrapper, tbody) {
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'rows' || property === 'data') {
+                this._wireSyncRows(stateObj, toComponent, tbody, wrapper);
+            }
+            else if (property === 'columns') {
+                this._wireSyncColumns(stateObj, toComponent, wrapper, tbody);
+            }
+        });
+    }
+    _wireSyncRows(stateObj, toComponent, tbody, wrapper) {
+        const transform = toComponent || ((v) => v);
+        stateObj.subscribe((val) => {
+            const previousRows = this.state.rows;
+            const transformed = transform(val);
+            // Handle selections
+            const hadSelections = this.state.selectedIndexes.size > 0;
+            if (this.state.selectionBehavior === 'preserve' && this.state.rowIdField) {
+                this._preserveSelections(previousRows, transformed);
+            }
+            else {
+                const isAppend = transformed.length > previousRows.length;
+                if (isAppend) {
+                    const maxValidIndex = Math.min(previousRows.length, transformed.length) - 1;
+                    const validSelections = new Set();
+                    this.state.selectedIndexes.forEach(idx => {
+                        if (idx <= maxValidIndex)
+                            validSelections.add(idx);
+                    });
+                    this.state.selectedIndexes = validSelections;
+                }
+                else {
+                    this.state.selectedIndexes.clear();
+                }
+            }
+            this.state.rows = transformed;
+            // Auto-reset pagination
+            if (this.state.paginated) {
+                const totalPages = Math.ceil(transformed.length / this.state.rowsPerPage);
+                if (this.state.currentPage > totalPages && totalPages > 0) {
+                    this.state.currentPage = totalPages;
+                }
+                if (totalPages === 0) {
+                    this.state.currentPage = 1;
+                }
+            }
+            // Re-render
+            this._renderTableBody(tbody);
+            if (this.state.paginated) {
+                this._updatePagination(wrapper, tbody);
+            }
+            // Fire callbacks
+            this._triggerCallback('dataChange', transformed, previousRows);
+            if (hadSelections || this.state.selectedIndexes.size > 0) {
+                this._triggerHandlers.get('selectionChange')?.(this.getSelectedRows(), this.getSelectedIndexes(), new CustomEvent('dataChange'));
+            }
+        });
+    }
+    _wireSyncColumns(stateObj, toComponent, wrapper, tbody) {
+        const transform = toComponent || ((v) => v);
+        stateObj.subscribe((val) => {
+            const transformed = transform(val);
+            this.state.columns = transformed;
+            // Full re-render needed for columns
+            const table = this._tableElement;
+            table.innerHTML = '';
+            const thead = this._buildTableHeader();
+            table.appendChild(thead);
+            const newTbody = document.createElement('tbody');
+            this._renderTableBody(newTbody);
+            table.appendChild(newTbody);
+            // Re-wire events
+            this._wireTriggerEvents(newTbody);
+            if (this.state.paginated) {
+                this._updatePagination(wrapper, newTbody);
+            }
+        });
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * SECTION 7: INTERNAL HELPERS
+     * Data processing, DOM updates, selection management
+     * ═════════════════════════════════════════════════════════════════ */
+    // Data processing
+    _getFilteredRows() {
+        if (!this.state.filterText)
+            return this.state.rows;
+        const searchText = this.state.filterText.toLowerCase();
+        return this.state.rows.filter(row => {
+            return this.state.columns.some(col => {
+                const value = row[col.key];
+                return String(value).toLowerCase().includes(searchText);
+            });
+        });
+    }
+    _getSortedRows(rows) {
+        if (!this.state.sortColumn)
+            return rows;
+        // ✨ Check if sorting by computed column
+        const computedDef = this.state.computedColumns.get(this.state.sortColumn);
+        const sorted = [...rows].sort((a, b) => {
+            let aVal;
+            let bVal;
+            if (computedDef) {
+                // ✨ Compute values on the fly for computed columns
+                const aIndex = this.state.rows.indexOf(a);
+                const bIndex = this.state.rows.indexOf(b);
+                aVal = computedDef.compute(a, aIndex);
+                bVal = computedDef.compute(b, bIndex);
+            }
+            else {
+                // Normal column: get value from row data
+                aVal = a[this.state.sortColumn];
+                bVal = b[this.state.sortColumn];
+            }
+            // Standard comparison logic
+            if (aVal === bVal)
+                return 0;
+            if (aVal == null)
+                return 1;
+            if (bVal == null)
+                return -1;
+            const comparison = aVal < bVal ? -1 : 1;
+            return this.state.sortDirection === 'asc' ? comparison : -comparison;
+        });
+        return sorted;
+    }
+    _getPaginatedRows(rows) {
+        if (!this.state.paginated)
+            return rows;
+        const start = (this.state.currentPage - 1) * this.state.rowsPerPage;
+        const end = start + this.state.rowsPerPage;
+        return rows.slice(start, end);
+    }
+    // DOM updates
+    _updateTable() {
+        if (!this._tableElement)
+            return;
+        const tbody = this._tableElement.querySelector('tbody');
+        if (!tbody)
+            return;
+        // Re-render using the same logic as initial render
+        this._renderTableBody(tbody);
+        // Update pagination if enabled
+        const wrapper = this._tableElement.closest('.jux-table-wrapper');
+        if (wrapper && this.state.paginated) {
+            this._updatePagination(wrapper, tbody);
+        }
+    }
+    _renderTableBody(tbody) {
+        tbody.innerHTML = '';
+        let rows = this._getFilteredRows();
+        rows = this._getSortedRows(rows);
+        const totalPages = Math.ceil(rows.length / this.state.rowsPerPage);
+        rows = this._getPaginatedRows(rows);
+        rows.forEach((row, visualIndex) => {
+            const tr = document.createElement('tr');
+            // Check if this row is selected
+            const actualRowIndex = this.state.rows.indexOf(row);
+            const isSelected = this.state.selectedIndexes.has(actualRowIndex);
+            if (isSelected) {
+                tr.classList.add('jux-table-row-selected');
+            }
+            // Add checkbox column if enabled
+            if (this.state.showCheckboxes) {
+                const checkboxTd = document.createElement('td');
+                checkboxTd.style.width = '40px';
+                checkboxTd.style.textAlign = 'center';
+                const checkbox = document.createElement('input');
+                checkbox.type = 'checkbox';
+                checkbox.checked = isSelected;
+                checkbox.style.cursor = 'pointer';
+                checkboxTd.appendChild(checkbox);
+                tr.appendChild(checkboxTd);
+            }
+            // Add data columns (including computed columns)
+            this.state.columns.forEach(col => {
+                const td = document.createElement('td');
+                // ✨ NEW: Check if this is a computed column
+                const computedDef = this.state.computedColumns.get(col.key);
+                let cellValue;
+                let rendered;
+                if (computedDef) {
+                    // ✨ Computed column: Evaluate compute function
+                    cellValue = computedDef.compute(row, actualRowIndex);
+                    // Use computed column's custom renderer if provided
+                    if (computedDef.render) {
+                        rendered = computedDef.render(cellValue, row, actualRowIndex);
+                    }
+                    else {
+                        // Default: stringify the computed value
+                        rendered = cellValue != null ? String(cellValue) : '';
+                    }
+                }
+                else {
+                    // Normal column: Get value from row data
+                    cellValue = row[col.key];
+                    // Use column's render function if provided
+                    if (col.render) {
+                        rendered = col.render(cellValue, row);
+                    }
+                    else {
+                        rendered = cellValue != null ? String(cellValue) : '';
+                    }
+                }
+                // Insert rendered content
+                if (typeof rendered === 'string') {
+                    td.innerHTML = rendered;
+                }
+                else {
+                    td.appendChild(rendered);
+                }
+                tr.appendChild(td);
+            });
+            tbody.appendChild(tr);
+        });
+    }
+    _updateHeaderCheckbox(thead) {
+        const headerRow = thead.querySelector('tr');
+        if (!headerRow)
+            return;
+        // Remove existing checkbox column(s)
+        const existingCheckboxThs = headerRow.querySelectorAll('th:first-child');
+        existingCheckboxThs.forEach(th => {
+            if (th.querySelector('.jux-bulk-checkbox') || th.textContent === '') {
+                th.remove();
+            }
+        });
+        // Add bulk checkbox or empty checkbox column
+        if (this.state.showBulkCheckbox) {
+            const bulkTh = document.createElement('th');
+            bulkTh.style.width = '40px';
+            bulkTh.style.textAlign = 'center';
+            const bulkCheckbox = document.createElement('input');
+            bulkCheckbox.type = 'checkbox';
+            bulkCheckbox.className = 'jux-bulk-checkbox';
+            bulkCheckbox.style.cursor = 'pointer';
+            bulkCheckbox.title = 'Select all';
+            bulkCheckbox.addEventListener('change', (e) => {
+                if (bulkCheckbox.checked) {
+                    this.selectAll();
+                }
+                else {
+                    this.deselectAll();
+                }
+            });
+            bulkTh.appendChild(bulkCheckbox);
+            headerRow.insertBefore(bulkTh, headerRow.firstChild);
+        }
+        else if (this.state.showCheckboxes) {
+            // Add empty header cell for checkbox column (no bulk select)
+            const checkboxTh = document.createElement('th');
+            checkboxTh.style.width = '40px';
+            headerRow.insertBefore(checkboxTh, headerRow.firstChild);
+        }
+    }
+    _updateBulkCheckboxState() {
+        if (!this.state.showBulkCheckbox || !this._tableElement)
+            return;
+        const bulkCheckbox = this._tableElement.querySelector('.jux-bulk-checkbox');
+        if (!bulkCheckbox)
+            return;
+        const totalRows = this.state.rows.length;
+        const selectedRows = this.state.selectedIndexes.size;
+        if (selectedRows === 0) {
+            bulkCheckbox.checked = false;
+            bulkCheckbox.indeterminate = false;
+        }
+        else if (selectedRows === totalRows) {
+            bulkCheckbox.checked = true;
+            bulkCheckbox.indeterminate = false;
+        }
+        else {
+            bulkCheckbox.checked = false;
+            bulkCheckbox.indeterminate = true;
+        }
+    }
+    _updateRowSelectionUI() {
+        if (!this._tableElement)
+            return;
+        const tbody = this._tableElement.querySelector('tbody');
+        if (!tbody)
+            return;
+        // Get current page rows
+        let rows = this._getFilteredRows();
+        rows = this._getSortedRows(rows);
+        const pageRows = this._getPaginatedRows(rows);
+        // Update each visible row's selection state
+        Array.from(tbody.children).forEach((tr, visualIndex) => {
+            const pageRowData = pageRows[visualIndex];
+            const actualRowIndex = this.state.rows.indexOf(pageRowData);
+            const isSelected = this.state.selectedIndexes.has(actualRowIndex);
+            // Update row highlight
+            if (isSelected) {
+                tr.classList.add('jux-table-row-selected');
+            }
+            else {
+                tr.classList.remove('jux-table-row-selected');
+            }
+            // Update checkbox if present
+            const checkbox = tr.querySelector('input[type="checkbox"]');
+            if (checkbox) {
+                checkbox.checked = isSelected;
+            }
+        });
+        // Update bulk checkbox state
+        this._updateBulkCheckboxState();
+    }
+    // Selection management
+    _preserveSelections(previousRows, newRows) {
+        if (!this.state.rowIdField || this.state.selectionBehavior === 'clear') {
+            this.state.selectedIndexes.clear();
+            return;
+        }
+        // Build map of old selections by ID
+        const selectedIds = new Set();
+        Array.from(this.state.selectedIndexes).forEach(index => {
+            const row = previousRows[index];
+            if (row && row[this.state.rowIdField] != null) {
+                selectedIds.add(row[this.state.rowIdField]);
+            }
+        });
+        // Find new indexes for selected IDs
+        this.state.selectedIndexes.clear();
+        newRows.forEach((row, index) => {
+            const rowId = row[this.state.rowIdField];
+            if (rowId != null && selectedIds.has(rowId)) {
+                this.state.selectedIndexes.add(index);
+            }
+        });
+    }
+    // Pagination
+    _updatePagination(wrapper, tbody) {
+        // Remove existing pagination
+        const existingPagination = wrapper.querySelector('.jux-table-pagination');
+        if (existingPagination) {
+            existingPagination.remove();
+        }
+        let rows = this._getFilteredRows();
+        rows = this._getSortedRows(rows);
+        const totalPages = Math.ceil(rows.length / this.state.rowsPerPage);
+        if (totalPages <= 1)
+            return;
+        const pagination = document.createElement('div');
+        pagination.className = 'jux-table-pagination';
+        pagination.style.cssText = 'margin-top: 10px; display: flex; gap: 5px; justify-content: center;';
+        // Previous button
+        const prevBtn = document.createElement('button');
+        prevBtn.textContent = 'Previous';
+        prevBtn.disabled = this.state.currentPage === 1;
+        prevBtn.addEventListener('click', (e) => {
+            if (this.state.currentPage > 1) {
+                const previousPage = this.state.currentPage;
+                this.state.currentPage--;
+                this._renderTableBody(tbody);
+                this._updatePagination(wrapper, tbody);
+                this._triggerCallback('pageChange', this.state.currentPage, previousPage, e);
+            }
+        });
+        pagination.appendChild(prevBtn);
+        // Page info
+        const pageInfo = document.createElement('span');
+        pageInfo.textContent = `Page ${this.state.currentPage} of ${totalPages}`;
+        pageInfo.style.cssText = 'display: flex; align-items: center; padding: 0 10px;';
+        pagination.appendChild(pageInfo);
+        // Next button
+        const nextBtn = document.createElement('button');
+        nextBtn.textContent = 'Next';
+        nextBtn.disabled = this.state.currentPage === totalPages;
+        nextBtn.addEventListener('click', (e) => {
+            if (this.state.currentPage < totalPages) {
+                const previousPage = this.state.currentPage;
+                this.state.currentPage++;
+                this._renderTableBody(tbody);
+                this._updatePagination(wrapper, tbody);
+                this._triggerCallback('pageChange', this.state.currentPage, previousPage, e);
+            }
+        });
+        pagination.appendChild(nextBtn);
+        wrapper.appendChild(pagination);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * SECTION 8: EXPORTS
+     * Convenience wrappers and factory function
+     * ═════════════════════════════════════════════════════════════════ */
+    renderTo(juxComponent) {
+        if (!juxComponent?._id) {
+            throw new Error('Table.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+export function table(id, options = {}) {
+    return new Table(id, options);
+}