juxscript 1.1.163 → 1.1.165

package/index.d.ts

@@ -13,6 +13,7 @@ import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
 import { dropdownMenu } from './lib/components/dropdown-menu.js';
+import { dataframe } from './lib/components/dataframe.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -53,6 +54,7 @@ export { tabularDriver } from './lib/storage/TabularDriver.js';
 export { DataFrame } from './lib/storage/DataFrame.js';
 export { indexedDBDriver } from './lib/storage/IndexedDBDriver.js';
 export { fileStorage } from './lib/storage/FileStorage.js';
+export { dataframe } from './lib/components/dataframe.js';
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
 import { ZStack, zstack } from './lib/components/stack/ZStack.js';
@@ -73,6 +75,7 @@ export declare const jux: {
     code: typeof code;
     container: typeof container;
     data: typeof data;
+    dataframe: typeof dataframe;
     datepicker: typeof datepicker;
     dialog: typeof dialog;
     divider: typeof divider;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -13,6 +13,7 @@ import { dialog } from './lib/components/dialog.js';
 import { divider } from './lib/components/divider.js';
 import { dropdown } from './lib/components/dropdown.js';
 import { dropdownMenu } from './lib/components/dropdown-menu.js';
+import { dataframe } from './lib/components/dataframe.js';
 import { element } from './lib/components/element.js';
 import { fileupload } from './lib/components/fileupload.js';
 import { grid } from './lib/components/grid.js';
@@ -56,6 +57,7 @@ export { tabularDriver } from './lib/storage/TabularDriver.js';
 export { DataFrame } from './lib/storage/DataFrame.js';
 export { indexedDBDriver } from './lib/storage/IndexedDBDriver.js';
 export { fileStorage } from './lib/storage/FileStorage.js';
+export { dataframe } from './lib/components/dataframe.js';
 // Import Stack components (already added earlier)
 import { VStack, vstack } from './lib/components/stack/VStack.js';
 import { HStack, hstack } from './lib/components/stack/HStack.js';
@@ -79,6 +81,7 @@ export const jux = {
     code,
     container,
     data,
+    dataframe,
     datepicker,
     dialog,
     divider,

package/lib/components/dataframe.d.ts

@@ -0,0 +1,110 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { DataFrame } from '../storage/DataFrame.js';
+import { TabularDriver } from '../storage/TabularDriver.js';
+import { FileUpload } from './fileupload.js';
+import { Table } from './table.js';
+export interface DataFrameOptions {
+    dbName?: string;
+    storeName?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+    paginated?: boolean;
+    rowsPerPage?: number;
+    style?: string;
+    class?: string;
+}
+type DataFrameState = BaseState & {
+    loaded: boolean;
+    sourceName: string;
+    rowCount: number;
+    colCount: number;
+};
+export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
+    private _df;
+    private _driver;
+    private _table;
+    private _tableOptions;
+    private _uploadRef;
+    private _storageKey;
+    private _pendingSource;
+    constructor(id: string, options?: DataFrameOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    /**
+     * Load from IndexedDB by storage key
+     */
+    fromStorage(key: string): this;
+    /**
+     * Load from a FileUpload component — auto-wires change event
+     */
+    fromUpload(upload: FileUpload): this;
+    /**
+     * Load from raw data — array of objects or Record<string, any[]>
+     */
+    fromData(data: Record<string, any>[] | Record<string, any[]>): this;
+    /**
+     * Apply a transform to the current DataFrame and update the table
+     */
+    apply(fn: (df: DataFrame) => DataFrame): this;
+    /**
+     * Filter rows
+     */
+    filter(predicate: (row: Record<string, any>, index: number) => boolean): this;
+    /**
+     * Select columns
+     */
+    select(...cols: string[]): this;
+    /**
+     * Sort by column
+     */
+    sort(col: string, descending?: boolean): this;
+    /**
+     * Show first N rows
+     */
+    head(n?: number): this;
+    /**
+     * Show last N rows
+     */
+    tail(n?: number): this;
+    /**
+     * Add a computed column
+     */
+    withColumn(name: string, fn: (row: Record<string, any>, index: number) => any): this;
+    /**
+     * Where clause
+     */
+    where(col: string, op: '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'startsWith' | 'endsWith', value: any): this;
+    /** Get the underlying DataFrame */
+    get df(): DataFrame | null;
+    /** Get the underlying TabularDriver */
+    get driver(): TabularDriver;
+    /** Get the internal Table component */
+    get table(): Table | null;
+    /** Get describe() stats */
+    describe(): Record<string, any> | null;
+    /** Export to CSV string */
+    toCSV(delimiter?: string): string;
+    /** Export to row objects */
+    toRows(): Record<string, any>[];
+    /** Get shape */
+    get shape(): [number, number];
+    /** Get column names */
+    get columns(): string[];
+    /** Save current DataFrame to IndexedDB */
+    save(key?: string): Promise<string | null>;
+    striped(v: boolean): this;
+    hoverable(v: boolean): this;
+    sortable(v: boolean): this;
+    filterable(v: boolean): this;
+    paginated(v: boolean): this;
+    rowsPerPage(v: number): this;
+    private _setDataFrame;
+    private _updateTable;
+    update(prop: string, value: any): void;
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
+}
+export declare function dataframe(id: string, options?: DataFrameOptions): DataFrameComponent;
+export {};
+//# sourceMappingURL=dataframe.d.ts.map

package/lib/components/dataframe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}

package/lib/components/dataframe.js

@@ -0,0 +1,292 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { DataFrame } from '../storage/DataFrame.js';
+import { TabularDriver } from '../storage/TabularDriver.js';
+import { Table } from './table.js';
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['load', 'error', 'transform'];
+export class DataFrameComponent extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            style: options.style ?? '',
+            class: options.class ?? '',
+            loaded: false,
+            sourceName: '',
+            rowCount: 0,
+            colCount: 0
+        });
+        this._df = null;
+        this._table = null;
+        this._uploadRef = null;
+        this._storageKey = null;
+        this._pendingSource = null;
+        this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
+        this._tableOptions = {
+            striped: options.striped ?? true,
+            hoverable: options.hoverable ?? true,
+            sortable: options.sortable ?? true,
+            filterable: options.filterable ?? true,
+            paginated: options.paginated ?? true,
+            rowsPerPage: options.rowsPerPage ?? 25
+        };
+    }
+    getTriggerEvents() { return TRIGGER_EVENTS; }
+    getCallbackEvents() { return CALLBACK_EVENTS; }
+    /* ═══════════════════════════════════════════════════
+     * DATA SOURCES
+     * ═══════════════════════════════════════════════════ */
+    /**
+     * Load from IndexedDB by storage key
+     */
+    fromStorage(key) {
+        this._storageKey = key;
+        this._pendingSource = async () => {
+            this.state.loading = true;
+            try {
+                let df = await this._driver.loadByName(key);
+                if (!df) {
+                    this._triggerCallback('error', 'No table found with key: ' + key, null, this);
+                    this.state.loading = false;
+                    return;
+                }
+                this._setDataFrame(df, 'storage: ' + key);
+            }
+            catch (err) {
+                this._triggerCallback('error', err.message, null, this);
+                this.state.loading = false;
+            }
+        };
+        return this;
+    }
+    /**
+     * Load from a FileUpload component — auto-wires change event
+     */
+    fromUpload(upload) {
+        this._uploadRef = upload;
+        this._pendingSource = async () => {
+            // Wire upload's change event to parse incoming files
+            upload.bind('change', async (files) => {
+                if (!files || files.length === 0)
+                    return;
+                const file = files[0];
+                this.state.loading = true;
+                try {
+                    const df = await this._driver.streamFile(file);
+                    // Auto-persist to IndexedDB
+                    await this._driver.store(file.name, df, { source: file.name });
+                    this._setDataFrame(df, 'upload: ' + file.name);
+                }
+                catch (err) {
+                    this._triggerCallback('error', err.message, null, this);
+                    this.state.loading = false;
+                }
+            });
+        };
+        return this;
+    }
+    /**
+     * Load from raw data — array of objects or Record<string, any[]>
+     */
+    fromData(data) {
+        this._pendingSource = async () => {
+            this.state.loading = true;
+            try {
+                const df = new DataFrame(data);
+                this._setDataFrame(df, 'inline data');
+            }
+            catch (err) {
+                this._triggerCallback('error', err.message, null, this);
+                this.state.loading = false;
+            }
+        };
+        return this;
+    }
+    /* ═══════════════════════════════════════════════════
+     * TRANSFORM API (returns new DataFrameComponent view)
+     * ═══════════════════════════════════════════════════ */
+    /**
+     * Apply a transform to the current DataFrame and update the table
+     */
+    apply(fn) {
+        if (!this._df)
+            return this;
+        const result = fn(this._df);
+        this._setDataFrame(result, this.state.sourceName + ' (transformed)');
+        this._triggerCallback('transform', result, null, this);
+        return this;
+    }
+    /**
+     * Filter rows
+     */
+    filter(predicate) {
+        return this.apply(df => df.filter(predicate));
+    }
+    /**
+     * Select columns
+     */
+    select(...cols) {
+        return this.apply(df => df.select(...cols));
+    }
+    /**
+     * Sort by column
+     */
+    sort(col, descending) {
+        return this.apply(df => df.sort(col, descending));
+    }
+    /**
+     * Show first N rows
+     */
+    head(n = 5) {
+        return this.apply(df => df.head(n));
+    }
+    /**
+     * Show last N rows
+     */
+    tail(n = 5) {
+        return this.apply(df => df.tail(n));
+    }
+    /**
+     * Add a computed column
+     */
+    withColumn(name, fn) {
+        return this.apply(df => df.withColumn(name, fn));
+    }
+    /**
+     * Where clause
+     */
+    where(col, op, value) {
+        return this.apply(df => df.where(col, op, value));
+    }
+    /* ═══════════════════════════════════════════════════
+     * ACCESSORS
+     * ═══════════════════════════════════════════════════ */
+    /** Get the underlying DataFrame */
+    get df() { return this._df; }
+    /** Get the underlying TabularDriver */
+    get driver() { return this._driver; }
+    /** Get the internal Table component */
+    get table() { return this._table; }
+    /** Get describe() stats */
+    describe() {
+        return this._df?.describe() ?? null;
+    }
+    /** Export to CSV string */
+    toCSV(delimiter) {
+        return this._df?.toCSV(delimiter) ?? '';
+    }
+    /** Export to row objects */
+    toRows() {
+        return this._df?.toRows() ?? [];
+    }
+    /** Get shape */
+    get shape() {
+        return this._df?.shape ?? [0, 0];
+    }
+    /** Get column names */
+    get columns() {
+        return this._df?.columns ?? [];
+    }
+    /** Save current DataFrame to IndexedDB */
+    async save(key) {
+        if (!this._df)
+            return null;
+        const name = key ?? this._storageKey ?? this._id;
+        return this._driver.store(name, this._df);
+    }
+    /* ═══════════════════════════════════════════════════
+     * TABLE OPTIONS (fluent, pre-render)
+     * ═══════════════════════════════════════════════════ */
+    striped(v) { this._tableOptions.striped = v; return this; }
+    hoverable(v) { this._tableOptions.hoverable = v; return this; }
+    sortable(v) { this._tableOptions.sortable = v; return this; }
+    filterable(v) { this._tableOptions.filterable = v; return this; }
+    paginated(v) { this._tableOptions.paginated = v; return this; }
+    rowsPerPage(v) { this._tableOptions.rowsPerPage = v; return this; }
+    /* ═══════════════════════════════════════════════════
+     * INTERNAL
+     * ═══════════════════════════════════════════════════ */
+    _setDataFrame(df, sourceName) {
+        this._df = df;
+        this.state.loaded = true;
+        this.state.loading = false;
+        this.state.sourceName = sourceName;
+        this.state.rowCount = df.height;
+        this.state.colCount = df.width;
+        // Clean __EMPTY columns from xlsx artifacts
+        const cleanCols = df.columns.filter(c => !c.startsWith('__EMPTY'));
+        if (cleanCols.length < df.columns.length) {
+            this._df = df.select(...cleanCols);
+        }
+        this._updateTable();
+        this._triggerCallback('load', this._df, null, this);
+    }
+    _updateTable() {
+        if (!this._table || !this._df)
+            return;
+        this._table.columns(this._df.columns).rows(this._df.toRows());
+    }
+    update(prop, value) { }
+    /* ═══════════════════════════════════════════════════
+     * RENDER
+     * ═══════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { style, class: className } = this.state;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dataframe';
+        wrapper.id = this._id;
+        if (className)
+            wrapper.className += ` ${className}`;
+        if (style)
+            wrapper.setAttribute('style', style);
+        // Status bar
+        const statusBar = document.createElement('div');
+        statusBar.className = 'jux-dataframe-status';
+        statusBar.id = `${this._id}-status`;
+        statusBar.style.cssText = 'font-size:13px;color:#888;margin-bottom:8px;';
+        statusBar.textContent = 'No data loaded.';
+        wrapper.appendChild(statusBar);
+        container.appendChild(wrapper);
+        // Create internal table
+        this._table = new Table(`${this._id}-table`, {
+            striped: this._tableOptions.striped,
+            hoverable: this._tableOptions.hoverable,
+            sortable: this._tableOptions.sortable,
+            filterable: this._tableOptions.filterable,
+            paginated: this._tableOptions.paginated,
+            rowsPerPage: this._tableOptions.rowsPerPage
+        });
+        this._table.render(wrapper);
+        // Watch state for status updates
+        const origUpdate = this.update.bind(this);
+        this.update = (prop, value) => {
+            origUpdate(prop, value);
+            if (prop === 'loaded' || prop === 'loading' || prop === 'rowCount' || prop === 'colCount' || prop === 'sourceName') {
+                const el = document.getElementById(`${this._id}-status`);
+                if (el) {
+                    if (this.state.loading) {
+                        el.textContent = '⏳ Loading...';
+                    }
+                    else if (this.state.loaded) {
+                        el.textContent = `✅ ${this.state.sourceName} — ${this.state.rowCount} rows × ${this.state.colCount} cols`;
+                    }
+                    else {
+                        el.textContent = 'No data loaded.';
+                    }
+                }
+            }
+        };
+        // Execute pending data source
+        if (this._pendingSource) {
+            this._pendingSource();
+            this._pendingSource = null;
+        }
+        this._wireStandardEvents(wrapper);
+        return this;
+    }
+}
+export function dataframe(id, options = {}) {
+    return new DataFrameComponent(id, options);
+}

package/lib/components/dataframe.ts

@@ -0,0 +1,363 @@
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+import { DataFrame } from '../storage/DataFrame.js';
+import { TabularDriver } from '../storage/TabularDriver.js';
+import { FileUpload } from './fileupload.js';
+import { Table } from './table.js';
+
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['load', 'error', 'transform'] as const;
+
+export interface DataFrameOptions {
+    dbName?: string;
+    storeName?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+    paginated?: boolean;
+    rowsPerPage?: number;
+    style?: string;
+    class?: string;
+}
+
+type DataFrameState = BaseState & {
+    loaded: boolean;
+    sourceName: string;
+    rowCount: number;
+    colCount: number;
+};
+
+export class DataFrameComponent extends BaseComponent<DataFrameState> {
+    private _df: DataFrame | null = null;
+    private _driver: TabularDriver;
+    private _table: Table | null = null;
+    private _tableOptions: {
+        striped: boolean;
+        hoverable: boolean;
+        sortable: boolean;
+        filterable: boolean;
+        paginated: boolean;
+        rowsPerPage: number;
+    };
+    private _uploadRef: FileUpload | null = null;
+    private _storageKey: string | null = null;
+    private _pendingSource: (() => Promise<void>) | null = null;
+
+    constructor(id: string, options: DataFrameOptions = {}) {
+        super(id, {
+            visible: true,
+            disabled: false,
+            loading: false,
+            style: options.style ?? '',
+            class: options.class ?? '',
+            loaded: false,
+            sourceName: '',
+            rowCount: 0,
+            colCount: 0
+        });
+
+        this._driver = new TabularDriver(
+            options.dbName ?? 'jux-dataframes',
+            options.storeName ?? 'frames'
+        );
+
+        this._tableOptions = {
+            striped: options.striped ?? true,
+            hoverable: options.hoverable ?? true,
+            sortable: options.sortable ?? true,
+            filterable: options.filterable ?? true,
+            paginated: options.paginated ?? true,
+            rowsPerPage: options.rowsPerPage ?? 25
+        };
+    }
+
+    protected getTriggerEvents(): readonly string[] { return TRIGGER_EVENTS; }
+    protected getCallbackEvents(): readonly string[] { return CALLBACK_EVENTS; }
+
+    /* ═══════════════════════════════════════════════════
+     * DATA SOURCES
+     * ═══════════════════════════════════════════════════ */
+
+    /**
+     * Load from IndexedDB by storage key
+     */
+    fromStorage(key: string): this {
+        this._storageKey = key;
+        this._pendingSource = async () => {
+            this.state.loading = true;
+            try {
+                let df = await this._driver.loadByName(key);
+                if (!df) {
+                    this._triggerCallback('error', 'No table found with key: ' + key, null, this);
+                    this.state.loading = false;
+                    return;
+                }
+                this._setDataFrame(df, 'storage: ' + key);
+            } catch (err: any) {
+                this._triggerCallback('error', err.message, null, this);
+                this.state.loading = false;
+            }
+        };
+        return this;
+    }
+
+    /**
+     * Load from a FileUpload component — auto-wires change event
+     */
+    fromUpload(upload: FileUpload): this {
+        this._uploadRef = upload;
+        this._pendingSource = async () => {
+            // Wire upload's change event to parse incoming files
+            upload.bind('change', async (files: File[]) => {
+                if (!files || files.length === 0) return;
+                const file = files[0];
+                this.state.loading = true;
+
+                try {
+                    const df = await this._driver.streamFile(file);
+                    // Auto-persist to IndexedDB
+                    await this._driver.store(file.name, df, { source: file.name });
+                    this._setDataFrame(df, 'upload: ' + file.name);
+                } catch (err: any) {
+                    this._triggerCallback('error', err.message, null, this);
+                    this.state.loading = false;
+                }
+            });
+        };
+        return this;
+    }
+
+    /**
+     * Load from raw data — array of objects or Record<string, any[]>
+     */
+    fromData(data: Record<string, any>[] | Record<string, any[]>): this {
+        this._pendingSource = async () => {
+            this.state.loading = true;
+            try {
+                const df = new DataFrame(data);
+                this._setDataFrame(df, 'inline data');
+            } catch (err: any) {
+                this._triggerCallback('error', err.message, null, this);
+                this.state.loading = false;
+            }
+        };
+        return this;
+    }
+
+    /* ═══════════════════════════════════════════════════
+     * TRANSFORM API (returns new DataFrameComponent view)
+     * ═══════════════════════════════════════════════════ */
+
+    /**
+     * Apply a transform to the current DataFrame and update the table
+     */
+    apply(fn: (df: DataFrame) => DataFrame): this {
+        if (!this._df) return this;
+        const result = fn(this._df);
+        this._setDataFrame(result, this.state.sourceName + ' (transformed)');
+        this._triggerCallback('transform', result, null, this);
+        return this;
+    }
+
+    /**
+     * Filter rows
+     */
+    filter(predicate: (row: Record<string, any>, index: number) => boolean): this {
+        return this.apply(df => df.filter(predicate));
+    }
+
+    /**
+     * Select columns
+     */
+    select(...cols: string[]): this {
+        return this.apply(df => df.select(...cols));
+    }
+
+    /**
+     * Sort by column
+     */
+    sort(col: string, descending?: boolean): this {
+        return this.apply(df => df.sort(col, descending));
+    }
+
+    /**
+     * Show first N rows
+     */
+    head(n: number = 5): this {
+        return this.apply(df => df.head(n));
+    }
+
+    /**
+     * Show last N rows
+     */
+    tail(n: number = 5): this {
+        return this.apply(df => df.tail(n));
+    }
+
+    /**
+     * Add a computed column
+     */
+    withColumn(name: string, fn: (row: Record<string, any>, index: number) => any): this {
+        return this.apply(df => df.withColumn(name, fn));
+    }
+
+    /**
+     * Where clause
+     */
+    where(col: string, op: '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'startsWith' | 'endsWith', value: any): this {
+        return this.apply(df => df.where(col, op, value));
+    }
+
+    /* ═══════════════════════════════════════════════════
+     * ACCESSORS
+     * ═══════════════════════════════════════════════════ */
+
+    /** Get the underlying DataFrame */
+    get df(): DataFrame | null { return this._df; }
+
+    /** Get the underlying TabularDriver */
+    get driver(): TabularDriver { return this._driver; }
+
+    /** Get the internal Table component */
+    get table(): Table | null { return this._table; }
+
+    /** Get describe() stats */
+    describe(): Record<string, any> | null {
+        return this._df?.describe() ?? null;
+    }
+
+    /** Export to CSV string */
+    toCSV(delimiter?: string): string {
+        return this._df?.toCSV(delimiter) ?? '';
+    }
+
+    /** Export to row objects */
+    toRows(): Record<string, any>[] {
+        return this._df?.toRows() ?? [];
+    }
+
+    /** Get shape */
+    get shape(): [number, number] {
+        return this._df?.shape ?? [0, 0];
+    }
+
+    /** Get column names */
+    get columns(): string[] {
+        return this._df?.columns ?? [];
+    }
+
+    /** Save current DataFrame to IndexedDB */
+    async save(key?: string): Promise<string | null> {
+        if (!this._df) return null;
+        const name = key ?? this._storageKey ?? this._id;
+        return this._driver.store(name, this._df);
+    }
+
+    /* ═══════════════════════════════════════════════════
+     * TABLE OPTIONS (fluent, pre-render)
+     * ═══════════════════════════════════════════════════ */
+
+    striped(v: boolean): this { this._tableOptions.striped = v; return this; }
+    hoverable(v: boolean): this { this._tableOptions.hoverable = v; return this; }
+    sortable(v: boolean): this { this._tableOptions.sortable = v; return this; }
+    filterable(v: boolean): this { this._tableOptions.filterable = v; return this; }
+    paginated(v: boolean): this { this._tableOptions.paginated = v; return this; }
+    rowsPerPage(v: number): this { this._tableOptions.rowsPerPage = v; return this; }
+
+    /* ═══════════════════════════════════════════════════
+     * INTERNAL
+     * ═══════════════════════════════════════════════════ */
+
+    private _setDataFrame(df: DataFrame, sourceName: string): void {
+        this._df = df;
+        this.state.loaded = true;
+        this.state.loading = false;
+        this.state.sourceName = sourceName;
+        this.state.rowCount = df.height;
+        this.state.colCount = df.width;
+
+        // Clean __EMPTY columns from xlsx artifacts
+        const cleanCols = df.columns.filter(c => !c.startsWith('__EMPTY'));
+        if (cleanCols.length < df.columns.length) {
+            this._df = df.select(...cleanCols);
+        }
+
+        this._updateTable();
+        this._triggerCallback('load', this._df, null, this);
+    }
+
+    private _updateTable(): void {
+        if (!this._table || !this._df) return;
+        this._table.columns(this._df.columns).rows(this._df.toRows());
+    }
+
+    update(prop: string, value: any): void { }
+
+    /* ═══════════════════════════════════════════════════
+     * RENDER
+     * ═══════════════════════════════════════════════════ */
+
+    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
+        const container = this._setupContainer(targetId);
+        const { style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-dataframe';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Status bar
+        const statusBar = document.createElement('div');
+        statusBar.className = 'jux-dataframe-status';
+        statusBar.id = `${this._id}-status`;
+        statusBar.style.cssText = 'font-size:13px;color:#888;margin-bottom:8px;';
+        statusBar.textContent = 'No data loaded.';
+        wrapper.appendChild(statusBar);
+
+        container.appendChild(wrapper);
+
+        // Create internal table
+        this._table = new Table(`${this._id}-table`, {
+            striped: this._tableOptions.striped,
+            hoverable: this._tableOptions.hoverable,
+            sortable: this._tableOptions.sortable,
+            filterable: this._tableOptions.filterable,
+            paginated: this._tableOptions.paginated,
+            rowsPerPage: this._tableOptions.rowsPerPage
+        });
+        this._table.render(wrapper);
+
+        // Watch state for status updates
+        const origUpdate = this.update.bind(this);
+        this.update = (prop: string, value: any) => {
+            origUpdate(prop, value);
+            if (prop === 'loaded' || prop === 'loading' || prop === 'rowCount' || prop === 'colCount' || prop === 'sourceName') {
+                const el = document.getElementById(`${this._id}-status`);
+                if (el) {
+                    if (this.state.loading) {
+                        el.textContent = '⏳ Loading...';
+                    } else if (this.state.loaded) {
+                        el.textContent = `✅ ${this.state.sourceName} — ${this.state.rowCount} rows × ${this.state.colCount} cols`;
+                    } else {
+                        el.textContent = 'No data loaded.';
+                    }
+                }
+            }
+        };
+
+        // Execute pending data source
+        if (this._pendingSource) {
+            this._pendingSource();
+            this._pendingSource = null;
+        }
+
+        this._wireStandardEvents(wrapper);
+
+        return this;
+    }
+}
+
+export function dataframe(id: string, options: DataFrameOptions = {}): DataFrameComponent {
+    return new DataFrameComponent(id, options);
+}

package/lib/components/table.d.ts

@@ -39,7 +39,7 @@ export interface TableOptions {
 }
 type TableState = {
     columns: ColumnDef[];
-    rows: any[][];
+    rows: any[];
     computedColumns: Map<string, ComputedColumnDef>;
     headers: boolean;
     striped: boolean;
@@ -71,7 +71,7 @@ export declare class Table extends BaseComponent<TableState> {
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
     columns(value: (string | ColumnDef)[]): this;
-    rows(value: any[][]): this;
+    rows(value: any[]): this;
     /**
      * Add a computed column that evaluates dynamically at render time
      *

package/lib/components/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"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"}

package/lib/components/table.ts

@@ -66,8 +66,7 @@ export interface TableOptions {
 
 type TableState = {
   columns: ColumnDef[];
-  rows: any[][];
-  // ✨ NEW: Store computed column definitions
+  rows: any[];
   computedColumns: Map<string, ComputedColumnDef>;
   headers: boolean;
   striped: boolean;
@@ -164,7 +163,7 @@ export class Table extends BaseComponent<TableState> {
     return this;
   }
 
-  rows(value: any[][]): this {
+  rows(value: any[]): this {
     const previousRows = this.state.rows;
     const hadSelections = this.state.selectedIndexes.size > 0;
 
@@ -949,7 +948,7 @@ export class Table extends BaseComponent<TableState> {
    * ═════════════════════════════════════════════════════════════════ */
 
   // Data processing
-  private _getFilteredRows(): any[][] {
+  private _getFilteredRows(): any[] {
     if (!this.state.filterText) return this.state.rows;
     const searchText = this.state.filterText.toLowerCase();
     return this.state.rows.filter(row => {
@@ -960,7 +959,7 @@ export class Table extends BaseComponent<TableState> {
     });
   }
 
-  private _getSortedRows(rows: any[][]): any[][] {
+  private _getSortedRows(rows: any[]): any[] {
     if (!this.state.sortColumn) return rows;
 
     // ✨ Check if sorting by computed column
@@ -994,7 +993,7 @@ export class Table extends BaseComponent<TableState> {
     return sorted;
   }
 
-  private _getPaginatedRows(rows: any[][]): any[][] {
+  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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.163",
+  "version": "1.1.165",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",