juxscript 1.1.166 → 1.1.168

package/lib/components/dataframe.d.ts

@@ -12,6 +12,8 @@ export interface DataFrameOptions {
     filterable?: boolean;
     paginated?: boolean;
     rowsPerPage?: number;
+    showStatus?: boolean;
+    icon?: string;
     style?: string;
     class?: string;
 }
@@ -30,78 +32,41 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _storageKey;
     private _pendingSource;
     private _inlineUpload;
+    private _showStatus;
+    private _icon;
     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;
     /**
-     * Add an inline file upload control above the table.
-     * Auto-wires parsing, storage, and display — zero callbacks needed.
-     *
-     * @param label - Button/label text (default: 'Upload File')
+     * Add an inline file upload control.
+     * @param label - Button label (default: 'Upload File')
      * @param accept - File types (default: '.csv,.tsv,.txt,.xlsx,.xls')
+     * @param icon - Upload icon name (default: 'upload'). Pass '' to hide icon.
      */
-    withUpload(label?: string, accept?: string): this;
-    /**
-     * Apply a transform to the current DataFrame and update the table
-     */
+    withUpload(label?: string, accept?: string, icon?: string): this;
+    /** Show/hide the status bar */
+    showStatus(v: boolean): this;
+    /** Set a custom icon for the status bar */
+    statusIcon(v: string): this;
     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;
@@ -112,6 +77,7 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _updateStatus;
     private _setDataFrame;
     private _updateTable;
+    private _showFilterInput;
     update(prop: string, value: any): void;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAMnC,MAAM,WAAW,gBAAgB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,cAAc,GAAG,SAAS,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,qBAAa,kBAAmB,SAAQ,aAAa,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,GAAG,CAA0B;IACrC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,aAAa,CAOnB;IACF,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,cAAc,CAAsC;IAC5D,OAAO,CAAC,aAAa,CAAgE;IACrF,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,KAAK,CAAc;gBAEf,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IA+BtD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAC/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAMhD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAwB9B,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAsBpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI;IAiBnE;;;;;OAKG;IACH,UAAU,CACN,KAAK,GAAE,MAAsB,EAC7B,MAAM,GAAE,MAAoC,EAC5C,IAAI,GAAE,MAAiB,GACxB,IAAI;IASP,+BAA+B;IAC/B,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAE5B,2CAA2C;IAC3C,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAM3B,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI;IAQ7C,MAAM,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI;IAI7E,MAAM,CAAC,GAAG,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAI/B,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI;IAI7C,IAAI,CAAC,CAAC,GAAE,MAAU,GAAG,IAAI;IAIzB,IAAI,CAAC,CAAC,GAAE,MAAU,GAAG,IAAI;IAIzB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,GAAG,IAAI;IAIpF,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQxH,IAAI,EAAE,IAAI,SAAS,GAAG,IAAI,CAAqB;IAC/C,IAAI,MAAM,IAAI,aAAa,CAAyB;IACpD,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,CAAwB;IACjD,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IACtC,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM;IACjC,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE;IAC/B,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAsC;IACnE,IAAI,OAAO,IAAI,MAAM,EAAE,CAAoC;IAErD,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAUhD,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IACzB,SAAS,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC3B,QAAQ,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC1B,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC5B,SAAS,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAC3B,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAM5B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,gBAAgB;IAiDxB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAMtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAkFrE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,kBAAkB,CAExF"}

package/lib/components/dataframe.js

@@ -3,6 +3,7 @@ import { DataFrame } from '../storage/DataFrame.js';
 import { TabularDriver } from '../storage/TabularDriver.js';
 import { FileUpload } from './fileupload.js';
 import { Table } from './table.js';
+import { renderIcon } from './icons.js';
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
 export class DataFrameComponent extends BaseComponent {
@@ -24,12 +25,16 @@ export class DataFrameComponent extends BaseComponent {
         this._storageKey = null;
         this._pendingSource = null;
         this._inlineUpload = null;
+        this._showStatus = true;
+        this._icon = '';
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', options.storeName ?? 'frames');
+        this._showStatus = options.showStatus ?? true;
+        this._icon = options.icon ?? '';
         this._tableOptions = {
             striped: options.striped ?? true,
             hoverable: options.hoverable ?? true,
             sortable: options.sortable ?? true,
-            filterable: options.filterable ?? true,
+            filterable: options.filterable ?? false, // defer until data loaded
             paginated: options.paginated ?? true,
             rowsPerPage: options.rowsPerPage ?? 25
         };
@@ -39,18 +44,17 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * DATA SOURCES
      * ═══════════════════════════════════════════════════ */
-    /**
-     * Load from IndexedDB by storage key
-     */
     fromStorage(key) {
         this._storageKey = key;
-        this._pendingSource = async () => {
+        const loadFn = async () => {
             this.state.loading = true;
+            this._updateStatus('⏳ Loading...', 'loading');
             try {
-                let df = await this._driver.loadByName(key);
+                const df = await this._driver.loadByName(key);
                 if (!df) {
                     this._triggerCallback('error', 'No table found with key: ' + key, null, this);
                     this.state.loading = false;
+                    this._updateStatus('No table found: ' + key, 'empty');
                     return;
                 }
                 this._setDataFrame(df, 'storage: ' + key);
@@ -58,42 +62,44 @@ export class DataFrameComponent extends BaseComponent {
             catch (err) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
+                this._updateStatus('❌ ' + err.message, 'error');
             }
         };
+        if (this._table) {
+            loadFn();
+        }
+        else {
+            this._pendingSource = loadFn;
+        }
         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;
+                this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
                 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);
+                    this._setDataFrame(df, file.name);
                 }
                 catch (err) {
                     this._triggerCallback('error', err.message, null, this);
                     this.state.loading = false;
+                    this._updateStatus('❌ ' + err.message, 'error');
                 }
             });
         };
         return this;
     }
-    /**
-     * Load from raw data — array of objects or Record<string, any[]>
-     */
     fromData(data) {
-        this._pendingSource = async () => {
+        const loadFn = async () => {
             this.state.loading = true;
+            this._updateStatus('⏳ Loading data...', 'loading');
             try {
                 const df = new DataFrame(data);
                 this._setDataFrame(df, 'inline data');
@@ -101,27 +107,37 @@ export class DataFrameComponent extends BaseComponent {
             catch (err) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
+                this._updateStatus('❌ ' + err.message, 'error');
             }
         };
+        if (this._table) {
+            loadFn();
+        }
+        else {
+            this._pendingSource = loadFn;
+        }
         return this;
     }
     /**
-     * Add an inline file upload control above the table.
-     * Auto-wires parsing, storage, and display — zero callbacks needed.
-     *
-     * @param label - Button/label text (default: 'Upload File')
+     * Add an inline file upload control.
+     * @param label - Button label (default: 'Upload File')
      * @param accept - File types (default: '.csv,.tsv,.txt,.xlsx,.xls')
+     * @param icon - Upload icon name (default: 'upload'). Pass '' to hide icon.
      */
-    withUpload(label = 'Upload File', accept = '.csv,.tsv,.txt,.xlsx,.xls') {
-        this._inlineUpload = { label, accept };
+    withUpload(label = 'Upload File', accept = '.csv,.tsv,.txt,.xlsx,.xls', icon = 'upload') {
+        this._inlineUpload = { label, accept, icon };
         return this;
     }
     /* ═══════════════════════════════════════════════════
-     * TRANSFORM API (returns new DataFrameComponent view)
+     * UI TOGGLES
+     * ═══════════════════════════════════════════════════ */
+    /** Show/hide the status bar */
+    showStatus(v) { this._showStatus = v; return this; }
+    /** Set a custom icon for the status bar */
+    statusIcon(v) { this._icon = v; return this; }
+    /* ═══════════════════════════════════════════════════
+     * TRANSFORM API
      * ═══════════════════════════════════════════════════ */
-    /**
-     * Apply a transform to the current DataFrame and update the table
-     */
     apply(fn) {
         if (!this._df)
             return this;
@@ -130,78 +146,38 @@ export class DataFrameComponent extends BaseComponent {
         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 */
+    describe() { return this._df?.describe() ?? null; }
+    toCSV(delimiter) { return this._df?.toCSV(delimiter) ?? ''; }
+    toRows() { return this._df?.toRows() ?? []; }
+    get shape() { return this._df?.shape ?? [0, 0]; }
+    get columns() { return this._df?.columns ?? []; }
     async save(key) {
         if (!this._df)
             return null;
@@ -220,10 +196,26 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
-    _updateStatus(text) {
+    _updateStatus(text, type = 'empty') {
         const el = document.getElementById(`${this._id}-status`);
-        if (el)
-            el.textContent = text;
+        if (!el)
+            return;
+        el.className = 'jux-dataframe-status';
+        if (type)
+            el.classList.add(`jux-dataframe-status-${type}`);
+        // Clear and rebuild
+        el.innerHTML = '';
+        if (this._icon && type === 'success') {
+            const iconEl = renderIcon(this._icon);
+            iconEl.style.width = '16px';
+            iconEl.style.height = '16px';
+            iconEl.style.marginRight = '6px';
+            iconEl.style.verticalAlign = 'middle';
+            el.appendChild(iconEl);
+        }
+        const span = document.createElement('span');
+        span.textContent = text;
+        el.appendChild(span);
     }
     _setDataFrame(df, sourceName) {
         this._df = df;
@@ -237,7 +229,11 @@ export class DataFrameComponent extends BaseComponent {
             this._df = df.select(...cleanCols);
         }
         this._updateTable();
-        this._updateStatus(`✅ ${sourceName} — ${this._df.height} rows × ${this._df.width} cols`);
+        this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
+        // Enable filter now that data exists
+        if (this._tableOptions.filterable) {
+            this._showFilterInput();
+        }
         this._triggerCallback('load', this._df, null, this);
     }
     _updateTable() {
@@ -245,6 +241,49 @@ export class DataFrameComponent extends BaseComponent {
             return;
         this._table.columns(this._df.columns).rows(this._df.toRows());
     }
+    _showFilterInput() {
+        const wrapper = document.getElementById(this._id);
+        if (!wrapper)
+            return;
+        // Only add once
+        if (wrapper.querySelector('.jux-dataframe-filter'))
+            return;
+        const filterContainer = document.createElement('div');
+        filterContainer.className = 'jux-dataframe-filter';
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = 'Filter rows...';
+        input.className = 'jux-input-element jux-dataframe-filter-input';
+        const iconEl = renderIcon('search');
+        iconEl.style.width = '16px';
+        iconEl.style.height = '16px';
+        const iconWrap = document.createElement('span');
+        iconWrap.className = 'jux-dataframe-filter-icon';
+        iconWrap.appendChild(iconEl);
+        filterContainer.appendChild(iconWrap);
+        filterContainer.appendChild(input);
+        // Insert before the table
+        const tableWrapper = wrapper.querySelector('.jux-table-wrapper');
+        if (tableWrapper) {
+            wrapper.insertBefore(filterContainer, tableWrapper);
+        }
+        else {
+            wrapper.appendChild(filterContainer);
+        }
+        input.addEventListener('input', () => {
+            if (!this._df)
+                return;
+            const text = input.value.toLowerCase();
+            if (!text) {
+                this._table?.rows(this._df.toRows());
+                return;
+            }
+            const filtered = this._df.filter((row) => {
+                return Object.values(row).some(v => v !== null && v !== undefined && String(v).toLowerCase().includes(text));
+            });
+            this._table?.rows(filtered.toRows());
+        });
+    }
     update(prop, value) { }
     /* ═══════════════════════════════════════════════════
      * RENDER
@@ -259,13 +298,16 @@ export class DataFrameComponent extends BaseComponent {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
-        // Inline upload (if withUpload was called)
+        // Inline upload
         if (this._inlineUpload) {
-            const upload = new FileUpload(`${this._id}-upload`, {
+            const uploadOpts = {
                 label: this._inlineUpload.label,
-                accept: this._inlineUpload.accept
-            });
-            // Wire it as a fromUpload source
+                accept: this._inlineUpload.accept,
+            };
+            if (this._inlineUpload.icon) {
+                uploadOpts.icon = this._inlineUpload.icon;
+            }
+            const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
             this._uploadRef = upload;
             this._pendingSource = async () => {
                 upload.bind('change', async (files) => {
@@ -273,7 +315,7 @@ export class DataFrameComponent extends BaseComponent {
                         return;
                     const file = files[0];
                     this.state.loading = true;
-                    this._updateStatus('⏳ Parsing ' + file.name + '...');
+                    this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
                     try {
                         const df = await this._driver.streamFile(file);
                         await this._driver.store(file.name, df, { source: file.name });
@@ -282,11 +324,10 @@ export class DataFrameComponent extends BaseComponent {
                     catch (err) {
                         this._triggerCallback('error', err.message, null, this);
                         this.state.loading = false;
-                        this._updateStatus('❌ ' + err.message);
+                        this._updateStatus('❌ ' + err.message, 'error');
                     }
                 });
             };
-            // Render upload into wrapper before status/table
             const uploadContainer = document.createElement('div');
             uploadContainer.className = 'jux-dataframe-upload';
             uploadContainer.id = `${this._id}-upload-container`;
@@ -297,19 +338,20 @@ export class DataFrameComponent extends BaseComponent {
         else {
             container.appendChild(wrapper);
         }
-        // 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);
-        // Create internal table
+        // Status bar (conditional)
+        if (this._showStatus) {
+            const statusBar = document.createElement('div');
+            statusBar.className = 'jux-dataframe-status jux-dataframe-status-empty';
+            statusBar.id = `${this._id}-status`;
+            statusBar.textContent = 'No data loaded.';
+            wrapper.appendChild(statusBar);
+        }
+        // Table — filterable is false initially; we enable it after data loads
         const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,
             sortable: this._tableOptions.sortable,
-            filterable: this._tableOptions.filterable,
+            filterable: false, // we handle filtering ourselves
             paginated: this._tableOptions.paginated,
             rowsPerPage: this._tableOptions.rowsPerPage
         });