juxscript 1.0.18 → 1.0.20

package/lib/components/table.ts

@@ -1,71 +1,63 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
- * Table column configuration
+ * Column definition
  */
-export interface TableColumn {
+export interface ColumnDef {
   key: string;
   label: string;
   width?: string;
-  align?: 'left' | 'center' | 'right';
-  renderCell?: (value: any, row: any) => string | HTMLElement;
+  render?: (value: any, row: any) => string | HTMLElement;
 }
 
 /**
- * Table component options
+ * Table 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;
   style?: string;
   class?: string;
 }
 
 /**
- * Table component state
+ * Table state
  */
 type TableState = {
-  columns: TableColumn[];
-  data: any[];
+  columns: ColumnDef[];
+  rows: any[][];
+  headers: boolean;
   striped: boolean;
   hoverable: boolean;
   bordered: boolean;
-  allowHtml: boolean;
+  compact: boolean;
   style: string;
   class: string;
 };
 
 /**
  * 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();
+ *   jux.table('users', {
+ *     columns: ['Name', 'Email', 'Role'],
+ *     rows: [['John', 'john@example.com', 'Admin']]
+ *   }).render('#app');
+ *   
+ *   // With state binding
+ *   const todos = state([]);
+ *   jux.table('todos-table')
+ *       .columns(['ID', 'Text', 'Done'])
+ *       .sync('rows', todos, (items) => 
+ *           items.map(item => [item.id, item.text, item.done])
+ *       )
+ *       .render('#app');
  */
 export class Table {
   state: TableState;
@@ -73,17 +65,35 @@ export class Table {
   _id: string;
   id: string;
 
+  // CRITICAL: Store bind/sync instructions for deferred wiring
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+  private _syncBindings: Array<{
+    property: string,
+    stateObj: State<any>,
+    toState?: Function,
+    toComponent?: Function
+  }> = [];
+
+  // Store table element reference
+  private _tableElement: HTMLTableElement | null = null;
+
   constructor(id: string, options: TableOptions = {}) {
     this._id = id;
     this.id = id;
 
+    // Normalize columns to ColumnDef format
+    const normalizedColumns = (options.columns ?? []).map(col =>
+      typeof col === 'string' ? { key: col, label: col } : col
+    );
+
     this.state = {
-      columns: options.columns ?? [],
-      data: options.data ?? [],
+      columns: normalizedColumns,
+      rows: options.rows ?? [],
+      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,
       style: options.style ?? '',
       class: options.class ?? ''
     };
@@ -93,13 +103,21 @@ export class Table {
    * Fluent API
    * ------------------------- */
 
-  columns(value: TableColumn[]): this {
-    this.state.columns = value;
+  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 {
+    this.state.rows = value;
+    this._updateTable();
     return this;
   }
 
-  data(value: any[]): this {
-    this.state.data = value;
+  headers(value: boolean): this {
+    this.state.headers = value;
     return this;
   }
 
@@ -118,8 +136,8 @@ export class Table {
     return this;
   }
 
-  allowHtml(value: boolean): this {
-    this.state.allowHtml = value;
+  compact(value: boolean): this {
+    this.state.compact = value;
     return this;
   }
 
@@ -133,44 +151,53 @@ export class Table {
     return this;
   }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
+  /**
+   * Bind event handler (stores for wiring in render)
+   * DOM events only: click, mouseenter, etc.
+   */
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
 
   /**
-   * Auto-generate columns from data
+   * Sync with state (one-way: State → Component)
+   * 
+   * @param property - Component property to sync ('rows', 'columns')
+   * @param stateObj - State object to sync with
+   * @param transform - Optional transform function from state to component
    */
-  private _autoGenerateColumns(data: any[]): TableColumn[] {
-    if (!data || data.length === 0) {
-      return [];
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Table.sync: Expected a State object for property "${property}"`);
     }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
+    return this;
+  }
+
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
 
-    const firstRow = data[0];
-    const keys = Object.keys(firstRow);
+  private _updateTable(): void {
+    if (!this._tableElement) return;
 
-    return keys.map(key => ({
-      key,
-      label: this._formatLabel(key)
-    }));
-  }
+    const tbody = this._tableElement.querySelector('tbody');
+    if (!tbody) return;
 
-  /**
-   * 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+/);
-
-    return words
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-      .join(' ');
+    // Clear existing rows
+    tbody.innerHTML = '';
+
+    // Add new rows
+    this.state.rows.forEach(rowData => {
+      const tr = document.createElement('tr');
+      rowData.forEach(cellData => {
+        const td = document.createElement('td');
+        td.textContent = String(cellData);
+        tr.appendChild(td);
+      });
+      tbody.appendChild(tr);
+    });
   }
 
   /* -------------------------
@@ -178,125 +205,175 @@ export class Table {
    * ------------------------- */
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get or create container ===
     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);
     }
-
     this.container = container;
-    let { columns, data, striped, hoverable, bordered, allowHtml, style, class: className } = this.state;
 
-    // Auto-generate columns if not provided
-    if (columns.length === 0 && data.length > 0) {
-      columns = this._autoGenerateColumns(data);
-    }
+    // === 2. PREPARE: Destructure state and check sync flags ===
+    const { columns, rows, striped, hoverable, bordered, style, class: className } = this.state;
 
+    // === 3. BUILD: Create DOM elements ===
     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 (style) wrapper.setAttribute('style', style);
 
     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');
 
-    // Table header
+    // Header
     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;
       headerRow.appendChild(th);
     });
-
     thead.appendChild(headerRow);
     table.appendChild(thead);
 
-    // Table body
+    // Body
     const tbody = document.createElement('tbody');
-
-    data.forEach(row => {
+    rows.forEach(row => {
       const tr = document.createElement('tr');
-
       columns.forEach(col => {
         const td = document.createElement('td');
-        if (col.align) td.style.textAlign = col.align;
-
-        const cellValue = row[col.key] ?? '';
+        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) {
+        if (col.render) {
+          const rendered = col.render(cellValue, row);
+          if (typeof rendered === 'string') {
+            td.innerHTML = rendered;
+          } else {
             td.appendChild(rendered);
-          } else if (typeof rendered === 'string') {
-            if (allowHtml) {
-              td.innerHTML = rendered;
-            } else {
-              td.textContent = rendered;
-            }
           }
         } else {
-          // Default rendering
-          if (allowHtml && typeof cellValue === 'string' && cellValue.includes('<')) {
-            td.innerHTML = cellValue;
-          } else {
-            td.textContent = String(cellValue);
-          }
+          td.textContent = cellValue != null ? String(cellValue) : '';
         }
 
         tr.appendChild(td);
       });
-
       tbody.appendChild(tr);
     });
-
     table.appendChild(tbody);
     wrapper.appendChild(table);
-    container.appendChild(wrapper);
 
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      wrapper.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'rows' || property === 'data') {
+        const transformToComponent = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          this.state.rows = transformed;
+
+          // Re-render tbody
+          tbody.innerHTML = '';
+          transformed.forEach((row: any) => {
+            const tr = document.createElement('tr');
+            this.state.columns.forEach(col => {
+              const td = document.createElement('td');
+              const cellValue = row[col.key];
+
+              if (col.render) {
+                const rendered = col.render(cellValue, row);
+                if (typeof rendered === 'string') {
+                  td.innerHTML = rendered;
+                } else {
+                  td.appendChild(rendered);
+                }
+              } else {
+                td.textContent = cellValue != null ? String(cellValue) : '';
+              }
+
+              tr.appendChild(td);
+            });
+            tbody.appendChild(tr);
+          });
+        });
+      }
+      else if (property === 'columns') {
+        const transformToComponent = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          this.state.columns = transformed;
+
+          // Re-render entire table
+          table.innerHTML = '';
+
+          const thead = document.createElement('thead');
+          const headerRow = document.createElement('tr');
+          transformed.forEach((col: any) => {
+            const th = document.createElement('th');
+            th.textContent = col.label;
+            if (col.width) th.style.width = col.width;
+            headerRow.appendChild(th);
+          });
+          thead.appendChild(headerRow);
+          table.appendChild(thead);
+
+          const tbody = document.createElement('tbody');
+          this.state.rows.forEach(row => {
+            const tr = document.createElement('tr');
+            transformed.forEach((col: any) => {
+              const td = document.createElement('td');
+              const cellValue = row[col.key];
+
+              if (col.render) {
+                const rendered = col.render(cellValue, row);
+                if (typeof rendered === 'string') {
+                  td.innerHTML = rendered;
+                } else {
+                  td.appendChild(rendered);
+                }
+              } else {
+                td.textContent = cellValue != null ? String(cellValue) : '';
+              }
+
+              tr.appendChild(td);
+            });
+            tbody.appendChild(tr);
+          });
+          table.appendChild(tbody);
+        });
+      }
+    });
+
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(wrapper);
     return this;
   }
 
-  /**
-   * 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');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Table.renderTo: Invalid component - missing _id (not a Jux component)');
+    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);
 }