juxscript 1.1.2 → 1.1.4

package/lib/components/table.ts

@@ -1,1249 +0,0 @@
-/* ═════════════════════════════════════════════════════════════════
- * SECTION 1: DEFINITIONS
- * Type definitions, constants, interfaces
- * ═════════════════════════════════════════════════════════════════ */
-
-import { BaseComponent } from './base/BaseComponent.js';
-import { State } from '../reactivity/state.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [
-  'rowClick', 'rowHover', 'cellClick',
-  'selected', 'deselected', 'selectionChange'
-] as const;
-
-const CALLBACK_EVENTS = [
-  'sortChange', 'filterChange', 'pageChange', 'dataChange'
-] as const;
-
-type TriggerEvent = typeof TRIGGER_EVENTS[number];
-type CallbackEvent = typeof CALLBACK_EVENTS[number];
-
-// Type definitions
-export type SelectionBehaviorOnDataChange = 'clear' | 'preserve';
-export type SelectionTrigger = 'row' | 'checkbox';
-
-export interface ColumnDef {
-  key: string;
-  label: string;
-  width?: string;
-  render?: (value: any, row: any) => string | HTMLElement;
-  // ✨ NEW: Mark as computed column
-  computed?: boolean;
-}
-
-// ✨ NEW: Computed column definition
-export interface ComputedColumnDef {
-  key: string;
-  label: string;
-  compute: (row: any, rowIndex: number) => any;
-  render?: (value: any, row: any, rowIndex: number) => string | HTMLElement;
-  width?: string;
-}
-
-export interface TableOptions {
-  columns?: (string | ColumnDef)[];
-  rows?: any[][];
-  headers?: boolean;
-  striped?: boolean;
-  hoverable?: boolean;
-  bordered?: boolean;
-  compact?: boolean;
-  sortable?: boolean;
-  filterable?: boolean;
-  paginated?: boolean;
-  rowsPerPage?: number;
-  selectable?: boolean;
-  multiSelect?: boolean;
-  showCheckboxes?: boolean;
-  showBulkCheckbox?: boolean;
-  selectionTrigger?: SelectionTrigger;
-  style?: string;
-  class?: string;
-  rowIdField?: string;
-  selectionBehavior?: SelectionBehaviorOnDataChange;
-}
-
-type TableState = {
-  columns: ColumnDef[];
-  rows: any[][];
-  // ✨ NEW: Store computed column definitions
-  computedColumns: Map<string, ComputedColumnDef>;
-  headers: boolean;
-  striped: boolean;
-  hoverable: boolean;
-  bordered: boolean;
-  compact: boolean;
-  sortable: boolean;
-  filterable: boolean;
-  paginated: boolean;
-  rowsPerPage: number;
-  currentPage: number;
-  sortColumn: string | null;
-  sortDirection: 'asc' | 'desc';
-  filterText: string;
-  selectable: boolean;
-  multiSelect: boolean;
-  showCheckboxes: boolean;
-  showBulkCheckbox: boolean;
-  selectionTrigger: SelectionTrigger;
-  selectedIndexes: Set<number>;
-  style: string;
-  class: string;
-  rowIdField?: string;
-  selectionBehavior: SelectionBehaviorOnDataChange;
-};
-
-/* ═════════════════════════════════════════════════════════════════
- * SECTION 2: CONSTRUCTOR & STORAGE
- * Class declaration, instance variables, initialization
- * ═════════════════════════════════════════════════════════════════ */
-
-export class Table extends BaseComponent<TableState> {
-  private _tableElement: HTMLTableElement | null = null;
-
-  constructor(id: string, options: TableOptions = {}) {
-    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<number>(),
-      style: options.style ?? '',
-      class: options.class ?? '',
-      rowIdField: options.rowIdField,
-      selectionBehavior: options.selectionBehavior ?? 'clear'
-    });
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * ABSTRACT METHOD IMPLEMENTATIONS
-   * ═════════════════════════════════════════════════════════════════ */
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * SECTION 3: FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  // ✅ Inherited from BaseComponent: style(), class(), bind(), sync(), renderTo()
-
-  // Configuration methods
-  columns(value: (string | ColumnDef)[]): this {
-    this.state.columns = value.map(col =>
-      typeof col === 'string' ? { key: col, label: col } : col
-    );
-    return this;
-  }
-
-  rows(value: any[][]): this {
-    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: string,
-    label: string,
-    compute: (row: any, rowIndex: number) => any,
-    render?: (value: any, row: any, rowIndex: number) => string | HTMLElement,
-    width?: string
-  ): this {
-    // 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 as any
-      });
-    }
-
-    // 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: string): this {
-    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: boolean): this {
-    this.state.headers = value;
-    return this;
-  }
-  striped(value: boolean): this {
-    this.state.striped = value;
-    return this;
-  }
-  hoverable(value: boolean): this {
-    this.state.hoverable = value;
-    return this;
-  }
-  bordered(value: boolean): this {
-    this.state.bordered = value;
-    return this;
-  }
-  compact(value: boolean): this {
-    this.state.compact = value;
-    return this;
-  }
-
-  // Feature toggles
-  sortable(value: boolean): this {
-    this.state.sortable = value;
-    return this;
-  }
-  filterable(value: boolean): this {
-    this.state.filterable = value;
-    return this;
-  }
-  paginated(value: boolean): this {
-    this.state.paginated = value;
-    return this;
-  }
-  rowsPerPage(value: number): this {
-    this.state.rowsPerPage = value;
-    return this;
-  }
-
-  // Selection configuration
-  selectable(value: boolean): this {
-    this.state.selectable = value;
-    return this;
-  }
-  multiSelect(value: boolean): this {
-    this.state.multiSelect = value;
-    if (value) {
-      this.state.selectable = true; // multi-select implies selectable
-    }
-    return this;
-  }
-  showCheckboxes(value: boolean): this {
-    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: boolean): this {
-    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: SelectionTrigger): this {
-    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 {
-    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 {
-    this.state.selectedIndexes.clear();
-    this._updateRowSelectionUI();
-
-    // Fire selectionChange
-    if (this._triggerHandlers.has('selectionChange')) {
-      this._triggerHandlers.get('selectionChange')!(
-        [],
-        [],
-        new CustomEvent('bulkDeselect')
-      );
-    }
-
-    return this;
-  }
-  clearSelection(): this {
-    this.state.selectedIndexes.clear();
-    this._updateRowSelectionUI();
-    return this;
-  }
-  selectRows(indexes: number[]): this {
-    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: number[]): this {
-    indexes.forEach(index => this.state.selectedIndexes.delete(index));
-    this._updateRowSelectionUI();
-    return this;
-  }
-
-  // Public utilities
-  getSelectedIndexes(): number[] {
-    return Array.from(this.state.selectedIndexes);
-  }
-  getSelectedRows(): any[] {
-    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?: string): this {
-    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
-  protected _setupContainer(targetId?: string): HTMLElement {
-    let container: HTMLElement;
-    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
-  private _buildWrapper(): HTMLElement {
-    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;
-  }
-
-  private _buildFilterInput(): HTMLInputElement {
-    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 as HTMLInputElement;
-      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') as HTMLElement;
-        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
-  private _buildTable(wrapper: HTMLElement): HTMLTableElement {
-    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;
-  }
-
-  private _buildTableHeader(): HTMLTableSectionElement {
-    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;
-  }
-
-  private _buildBulkCheckboxCell(): HTMLTableCellElement {
-    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;
-  }
-
-  private _buildColumnHeader(col: ColumnDef): HTMLTableCellElement {
-    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
-  private _wireAllEvents(wrapper: HTMLElement, tbody: HTMLTableSectionElement): void {
-    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
-   * ═════════════════════════════════════════════════════════════════ */
-
-  private _wireTriggerEvents(tbody: HTMLTableSectionElement): void {
-    // === 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 as HTMLElement).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 as HTMLElement).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 as HTMLElement;
-
-        // 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 as HTMLInputElement;
-          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"]') as HTMLInputElement;
-              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"]') as HTMLInputElement;
-              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"]') as HTMLInputElement;
-              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"]') as HTMLInputElement;
-              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';
-      }
-    }
-  }
-
-  private _wireSyncBindings(wrapper: HTMLElement, tbody: HTMLTableSectionElement): void {
-    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);
-      }
-    });
-  }
-
-  private _wireSyncRows(
-    stateObj: State<any>,
-    toComponent: Function | undefined,
-    tbody: HTMLTableSectionElement,
-    wrapper: HTMLElement
-  ): void {
-    const transform = toComponent || ((v: any) => v);
-    stateObj.subscribe((val: any) => {
-      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<number>();
-          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'));
-      }
-    });
-  }
-
-  private _wireSyncColumns(
-    stateObj: State<any>,
-    toComponent: Function | undefined,
-    wrapper: HTMLElement,
-    tbody: HTMLTableSectionElement
-  ): void {
-    const transform = toComponent || ((v: any) => v);
-    stateObj.subscribe((val: any) => {
-      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
-  private _getFilteredRows(): any[][] {
-    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);
-      });
-    });
-  }
-
-  private _getSortedRows(rows: any[][]): any[][] {
-    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: any;
-      let bVal: any;
-
-      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;
-  }
-
-  private _getPaginatedRows(rows: any[][]): any[][] {
-    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
-  private _updateTable(): void {
-    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 as HTMLElement, tbody);
-    }
-  }
-
-  private _renderTableBody(tbody: HTMLTableSectionElement): void {
-    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: any;
-        let rendered: string | HTMLElement;
-
-        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);
-    });
-  }
-
-  private _updateHeaderCheckbox(thead: HTMLTableSectionElement): void {
-    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);
-    }
-  }
-
-  private _updateBulkCheckboxState(): void {
-    if (!this.state.showBulkCheckbox || !this._tableElement) return;
-    const bulkCheckbox = this._tableElement.querySelector('.jux-bulk-checkbox') as HTMLInputElement;
-    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;
-    }
-  }
-
-  private _updateRowSelectionUI(): void {
-    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"]') as HTMLInputElement;
-      if (checkbox) {
-        checkbox.checked = isSelected;
-      }
-    });
-    // Update bulk checkbox state
-    this._updateBulkCheckboxState();
-  }
-
-  // Selection management
-  private _preserveSelections(previousRows: any[][], newRows: any[][]): void {
-    if (!this.state.rowIdField || this.state.selectionBehavior === 'clear') {
-      this.state.selectedIndexes.clear();
-      return;
-    }
-    // Build map of old selections by ID
-    const selectedIds = new Set<any>();
-    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
-  private _updatePagination(wrapper: HTMLElement, tbody: HTMLTableSectionElement): void {
-    // 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: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Table.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
-}
-
-export function table(id: string, options: TableOptions = {}): Table {
-  return new Table(id, options);
-}