juxscript 1.0.19 → 1.0.21

package/lib/components/table.ts

@@ -1,302 +1,1249 @@
-import { getOrCreateContainer } from './helpers.js';
+/* ═════════════════════════════════════════════════════════════════
+ * SECTION 1: DEFINITIONS
+ * Type definitions, constants, interfaces
+ * ═════════════════════════════════════════════════════════════════ */
 
-/**
- * Table column configuration
- */
-export interface TableColumn {
+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;
-  align?: 'left' | 'center' | 'right';
-  renderCell?: (value: any, row: any) => string | HTMLElement;
 }
 
-/**
- * Table component options
- */
 export interface TableOptions {
-  columns?: TableColumn[];
-  data?: any[];
+  columns?: (string | ColumnDef)[];
+  rows?: any[][];
+  headers?: boolean;
   striped?: boolean;
   hoverable?: boolean;
   bordered?: boolean;
-  allowHtml?: 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;
 }
 
-/**
- * Table component state
- */
 type TableState = {
-  columns: TableColumn[];
-  data: any[];
+  columns: ColumnDef[];
+  rows: any[][];
+  // ✨ NEW: Store computed column definitions
+  computedColumns: Map<string, ComputedColumnDef>;
+  headers: boolean;
   striped: boolean;
   hoverable: boolean;
   bordered: boolean;
-  allowHtml: 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;
 };
 
-/**
- * Table component
- *
- * Usage:
- *   // Auto-generate columns from data
- *   const table = jux.table('myTable', {
- *     data: [
- *       { name: 'Alice', age: 30 },
- *       { name: 'Bob', age: 25 }
- *     ],
- *     striped: true,
- *     allowHtml: true
- *   });
- *   table.render();
- *
- *   // Or specify columns explicitly
- *   const table = jux.table('myTable', {
- *     columns: [
- *       { key: 'name', label: 'Name' },
- *       { key: 'age', label: 'Age', align: 'center' }
- *     ],
- *     data: [
- *       { name: 'Alice', age: 30 },
- *       { name: 'Bob', age: 25 }
- *     ]
- *   });
- *   table.render();
- */
-export class Table {
-  state: TableState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
+/* ═════════════════════════════════════════════════════════════════
+ * 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 = {}) {
-    this._id = id;
-    this.id = id;
+    const normalizedColumns = (options.columns ?? []).map(col =>
+      typeof col === 'string' ? { key: col, label: col } : col
+    );
 
-    this.state = {
-      columns: options.columns ?? [],
-      data: options.data ?? [],
+    // 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 ?? true,
+      hoverable: options.hoverable ?? false,
       bordered: options.bordered ?? false,
-      allowHtml: options.allowHtml ?? true,
+      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 ?? ''
-    };
+      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;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /**
+   * 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);
+      }
+    }
 
-  columns(value: TableColumn[]): this {
-    this.state.columns = value;
     return this;
   }
 
-  data(value: any[]): this {
-    this.state.data = value;
+  /**
+   * 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;
+  }
 
-  allowHtml(value: boolean): this {
-    this.state.allowHtml = value;
+  // 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;
   }
 
-  style(value: string): this {
-    this.state.style = value;
+  // 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();
+      }
+    }
 
-  class(value: string): this {
-    this.state.class = value;
     return this;
   }
+  showBulkCheckbox(value: boolean): this {
+    this.state.showBulkCheckbox = value;
+    if (value) {
+      this.state.multiSelect = true;
+      this.state.selectable = true;
+      this.state.showCheckboxes = true;
+    }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
+    // If already rendered, update immediately
+    if (this._tableElement) {
+      const thead = this._tableElement.querySelector('thead');
+      const tbody = this._tableElement.querySelector('tbody');
 
-  /**
-   * Auto-generate columns from data
-   */
-  private _autoGenerateColumns(data: any[]): TableColumn[] {
-    if (!data || data.length === 0) {
-      return [];
+      if (thead && tbody) {
+        this._updateHeaderCheckbox(thead);
+        this._renderTableBody(tbody);
+        this._updateBulkCheckboxState();
+      }
     }
 
-    const firstRow = data[0];
-    const keys = Object.keys(firstRow);
+    return this;
+  }
+  selectionTrigger(value: SelectionTrigger): this {
+    this.state.selectionTrigger = value;
 
-    return keys.map(key => ({
-      key,
-      label: this._formatLabel(key)
-    }));
+    // 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;
   }
 
-  /**
-   * Format column label from key
-   * Examples:
-   *   'name' -> 'Name'
-   *   'firstName' -> 'First Name'
-   *   'user_id' -> 'User Id'
-   */
-  private _formatLabel(key: string): string {
-    const words = key
-      .replace(/([A-Z])/g, ' $1')
-      .replace(/_/g, ' ')
-      .trim()
-      .split(/\s+/);
+  // Selection actions
+  selectAll(): this {
+    this.state.rows.forEach((_, index) => {
+      this.state.selectedIndexes.add(index);
+    });
+    this._updateRowSelectionUI();
 
-    return words
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-      .join(' ');
+    // 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')
+      );
+    }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+    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 {
-    let container: HTMLElement;
+    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 element "${targetId}" not found`);
+        throw new Error(`Table: Target "${targetId}" not found`);
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._id);
+      // 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;
-    let { columns, data, striped, hoverable, bordered, allowHtml, style, class: className } = this.state;
+    return container;
+  }
 
-    // Auto-generate columns if not provided
-    if (columns.length === 0 && data.length > 0) {
-      columns = this._autoGenerateColumns(data);
-    }
+  // 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 (className) {
-      wrapper.className += ` ${className}`;
+    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 (style) {
-      wrapper.setAttribute('style', style);
+    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;
+  }
 
-    // Table header
+  private _buildTableHeader(): HTMLTableSectionElement {
     const thead = document.createElement('thead');
     const headerRow = document.createElement('tr');
 
-    columns.forEach(col => {
-      const th = document.createElement('th');
-      th.textContent = col.label;
-      if (col.width) th.style.width = col.width;
-      if (col.align) th.style.textAlign = col.align;
+    // 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);
-    table.appendChild(thead);
+    return thead;
+  }
 
-    // Table body
-    const tbody = document.createElement('tbody');
+  private _buildBulkCheckboxCell(): HTMLTableCellElement {
+    const bulkTh = document.createElement('th');
+    bulkTh.style.width = '40px';
+    bulkTh.style.textAlign = 'center';
 
-    data.forEach(row => {
-      const tr = document.createElement('tr');
+    const bulkCheckbox = document.createElement('input');
+    bulkCheckbox.type = 'checkbox';
+    bulkCheckbox.className = 'jux-bulk-checkbox';
+    bulkCheckbox.style.cursor = 'pointer';
+    bulkCheckbox.title = 'Select all';
 
-      columns.forEach(col => {
-        const td = document.createElement('td');
-        if (col.align) td.style.textAlign = col.align;
-
-        const cellValue = row[col.key] ?? '';
-
-        // Custom render function takes precedence
-        if (col.renderCell && typeof col.renderCell === 'function') {
-          const rendered = col.renderCell(cellValue, row);
-          if (rendered instanceof HTMLElement) {
-            td.appendChild(rendered);
-          } else if (typeof rendered === 'string') {
-            if (allowHtml) {
-              td.innerHTML = rendered;
+    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 {
-              td.textContent = rendered;
+              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 {
-          // Default rendering
-          if (allowHtml && typeof cellValue === 'string' && cellValue.includes('<')) {
-            td.innerHTML = cellValue;
+          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 {
-            td.textContent = String(cellValue);
+            // 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);
     });
+  }
 
-    table.appendChild(tbody);
-    wrapper.appendChild(table);
-    container.appendChild(wrapper);
+  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);
+    }
+  }
 
-    return this;
+  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;
+    }
   }
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Table.renderTo: Invalid component - not an object');
+  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);
+      }
+    });
+  }
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Table.renderTo: Invalid component - missing _id (not a Jux component)');
+  // 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}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function table(id: string, options: TableOptions = {}): Table {
   return new Table(id, options);
-}
+}