juxscript 1.1.240 → 1.1.244

package/lib/components/table.js

@@ -1,1019 +0,0 @@
-/* ═════════════════════════════════════════════════════════════════
- * 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;
-        // ✅ DEBUG: Log what was passed vs what was stored
-        console.log(`[Table ${id}] constructor options.filterable:`, options.filterable);
-        console.log(`[Table ${id}] this.state.filterable:`, this.state.filterable);
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * 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);
-        // ✅ Rebuild header if table already rendered
-        if (this._tableElement) {
-            const oldThead = this._tableElement.querySelector('thead');
-            if (oldThead)
-                oldThead.remove();
-            if (this.state.headers) {
-                const newThead = this._buildTableHeader();
-                this._tableElement.insertBefore(newThead, this._tableElement.firstChild);
-            }
-        }
-        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
-     * ═════════════════════════════════════════════════════════════════ */
-    update(prop, value) {
-        // No reactive updates needed
-    }
-    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) {
-            if (typeof targetId === 'string') {
-                const target = document.querySelector(targetId);
-                if (!target || !(target instanceof HTMLElement)) {
-                    throw new Error(`Table: Target "${targetId}" not found`);
-                }
-                container = target;
-            }
-            else if (targetId instanceof HTMLElement) {
-                container = targetId;
-            }
-            else if (targetId instanceof BaseComponent) {
-                // Find component's container by ID
-                const target = document.getElementById(targetId._id);
-                if (!target) {
-                    throw new Error(`Table: Target component "${targetId._id}" not found`);
-                }
-                container = target;
-            }
-            else {
-                throw new Error(`Table: Invalid target type`);
-            }
-        }
-        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);
-        }
-        // ✅ Only show filter if filterable AND there are rows
-        if (this.state.filterable && this.state.rows.length > 0) {
-            wrapper.appendChild(this._buildFilterInput());
-        }
-        return wrapper;
-    }
-    _buildFilterInput() {
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.placeholder = 'Filter...';
-        input.className = 'jux-table-filter';
-        input.id = `${this._id}-filter`;
-        input.style.cssText = 'margin-bottom: 10px; padding: 5px; width: 100%; box-sizing: border-box;';
-        input.addEventListener('input', (e) => {
-            const target = e.target;
-            this.state.filterText = target.value;
-            const tbody = this._tableElement?.querySelector('tbody');
-            if (tbody) {
-                this._renderTableBody(tbody);
-                const wrapper = this._tableElement?.closest('.jux-table-wrapper');
-                if (wrapper && this.state.paginated) {
-                    this.state.currentPage = 1;
-                    this._updatePagination(wrapper, tbody);
-                }
-            }
-            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) {
-            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) {
-            const checkboxTh = document.createElement('th');
-            checkboxTh.style.width = '40px';
-            headerRow.insertBefore(checkboxTh, headerRow.firstChild);
-        }
-        // Add column headers with optional sorts
-        this.state.columns.forEach(col => {
-            const th = this._buildColumnHeader(col);
-            headerRow.appendChild(th);
-        });
-        thead.appendChild(headerRow);
-        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) => {
-                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';
-                }
-                const tbody = this._tableElement.querySelector('tbody');
-                this._renderTableBody(tbody);
-                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' ? ' ▲' : ' ▼');
-                this._triggerCallback('sortChange', col.key, this.state.sortDirection, e);
-            });
-        }
-        return th;
-    }
-    _wireAllEvents(wrapper, tbody) {
-        this._wireTriggerEvents(tbody);
-        if (this.state.paginated) {
-            this._updatePagination(wrapper, tbody);
-        }
-        this._wireStandardEvents(wrapper);
-        this._wireSyncBindings(wrapper, tbody);
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * SECTION 6: EVENT WIRING
-     * ═════════════════════════════════════════════════════════════════ */
-    _wireTriggerEvents(tbody) {
-        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';
-        }
-        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);
-                        }
-                    }
-                }
-            });
-        }
-        if (this.state.selectable) {
-            tbody.addEventListener('click', (e) => {
-                const target = e.target;
-                const isCheckboxClick = target.tagName === 'INPUT' && target.getAttribute('type') === 'checkbox';
-                if (this.state.selectionTrigger === 'checkbox' && !isCheckboxClick)
-                    return;
-                if (this.state.selectionTrigger === 'row' && isCheckboxClick) {
-                    e.preventDefault();
-                    const checkbox = target;
-                    checkbox.checked = !checkbox.checked;
-                }
-                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) {
-                        if (wasSelected) {
-                            this.state.selectedIndexes.delete(actualRowIndex);
-                            tr.classList.remove('jux-table-row-selected');
-                            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');
-                            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 {
-                        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');
-                            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);
-                                }
-                            });
-                        }
-                    }
-                    this._updateBulkCheckboxState();
-                    if (this._triggerHandlers.has('selectionChange')) {
-                        this._triggerHandlers.get('selectionChange')(this.getSelectedRows(), this.getSelectedIndexes(), e);
-                    }
-                }
-            });
-            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);
-            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;
-            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;
-                }
-            }
-            this._renderTableBody(tbody);
-            if (this.state.paginated) {
-                this._updatePagination(wrapper, tbody);
-            }
-            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;
-            const table = this._tableElement;
-            table.innerHTML = '';
-            const thead = this._buildTableHeader();
-            table.appendChild(thead);
-            const newTbody = document.createElement('tbody');
-            this._renderTableBody(newTbody);
-            table.appendChild(newTbody);
-            this._wireTriggerEvents(newTbody);
-            if (this.state.paginated) {
-                this._updatePagination(wrapper, newTbody);
-            }
-        });
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * SECTION 7: INTERNAL HELPERS
-     * ═════════════════════════════════════════════════════════════════ */
-    _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;
-        const computedDef = this.state.computedColumns.get(this.state.sortColumn);
-        const sorted = [...rows].sort((a, b) => {
-            let aVal;
-            let bVal;
-            if (computedDef) {
-                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 {
-                aVal = a[this.state.sortColumn];
-                bVal = b[this.state.sortColumn];
-            }
-            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);
-    }
-    _updateTable() {
-        if (!this._tableElement)
-            return;
-        const tbody = this._tableElement.querySelector('tbody');
-        if (!tbody)
-            return;
-        this._renderTableBody(tbody);
-        const wrapper = this._tableElement.closest('.jux-table-wrapper');
-        if (wrapper && this.state.paginated) {
-            this._updatePagination(wrapper, tbody);
-        }
-        // ✅ Show/hide filter based on whether there's data
-        if (wrapper && this.state.filterable) {
-            let filterInput = wrapper.querySelector('.jux-table-filter');
-            if (this.state.rows.length > 0) {
-                // Show filter - create if doesn't exist
-                if (!filterInput) {
-                    filterInput = this._buildFilterInput();
-                    // Insert at the beginning of wrapper, before the table
-                    wrapper.insertBefore(filterInput, wrapper.firstChild);
-                }
-            }
-            else {
-                // Hide filter - remove if exists
-                if (filterInput) {
-                    filterInput.remove();
-                }
-            }
-        }
-    }
-    _renderTableBody(tbody) {
-        tbody.innerHTML = '';
-        let rows = this._getFilteredRows();
-        rows = this._getSortedRows(rows);
-        rows = this._getPaginatedRows(rows);
-        rows.forEach((row) => {
-            const tr = document.createElement('tr');
-            const actualRowIndex = this.state.rows.indexOf(row);
-            const isSelected = this.state.selectedIndexes.has(actualRowIndex);
-            if (isSelected) {
-                tr.classList.add('jux-table-row-selected');
-            }
-            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);
-            }
-            this.state.columns.forEach(col => {
-                const td = document.createElement('td');
-                const computedDef = this.state.computedColumns.get(col.key);
-                let cellValue;
-                let rendered;
-                if (computedDef) {
-                    cellValue = computedDef.compute(row, actualRowIndex);
-                    if (computedDef.render) {
-                        rendered = computedDef.render(cellValue, row, actualRowIndex);
-                    }
-                    else {
-                        rendered = cellValue != null ? String(cellValue) : '';
-                    }
-                }
-                else {
-                    cellValue = row[col.key];
-                    if (col.render) {
-                        rendered = col.render(cellValue, row);
-                    }
-                    else {
-                        rendered = cellValue != null ? String(cellValue) : '';
-                    }
-                }
-                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;
-        const existingCheckboxThs = headerRow.querySelectorAll('th:first-child');
-        existingCheckboxThs.forEach(th => {
-            if (th.querySelector('.jux-bulk-checkbox') || th.textContent === '') {
-                th.remove();
-            }
-        });
-        if (this.state.showBulkCheckbox) {
-            const bulkTh = this._buildBulkCheckboxCell();
-            headerRow.insertBefore(bulkTh, headerRow.firstChild);
-        }
-        else if (this.state.showCheckboxes) {
-            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;
-        let rows = this._getFilteredRows();
-        rows = this._getSortedRows(rows);
-        const pageRows = this._getPaginatedRows(rows);
-        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);
-            if (isSelected) {
-                tr.classList.add('jux-table-row-selected');
-            }
-            else {
-                tr.classList.remove('jux-table-row-selected');
-            }
-            const checkbox = tr.querySelector('input[type="checkbox"]');
-            if (checkbox) {
-                checkbox.checked = isSelected;
-            }
-        });
-        this._updateBulkCheckboxState();
-    }
-    _preserveSelections(previousRows, newRows) {
-        if (!this.state.rowIdField || this.state.selectionBehavior === 'clear') {
-            this.state.selectedIndexes.clear();
-            return;
-        }
-        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]);
-            }
-        });
-        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);
-            }
-        });
-    }
-    _updatePagination(wrapper, tbody) {
-        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;';
-        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);
-        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);
-        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);
-    }
-}
-export function table(id, options = {}) {
-    return new Table(id, options);
-}