@kodaris/krubble-components 1.0.52 → 1.0.54

package/dist/table/table.js

@@ -11,21 +11,25 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { krBaseCSS } from '../style/base.js';
 import '../button/button.js';
 import { KRSnackbar } from '../snackbar/snackbar.js';
-// === Solr Utilities ===
-const SOLR_RESERVED_CHARS = [
-    '"', '+', '-', '&&', '||', '!', '(', ')', '{',
-    '}', '[', ']', '^', '~', '*', '?', ':'
-];
-const SOLR_RESERVED_CHARS_REPLACEMENT = [
-    '\\"', '\\+', '\\-', '\\&\\&', '\\|\\|', '\\!', '\\(', '\\)', '\\{',
-    '\\}', '\\[', '\\]', '\\^', '\\~', '\\*', '\\?', '\\:'
-];
-function escapeSolrQuery(query) {
-    let escaped = query;
-    for (let i = 0; i < SOLR_RESERVED_CHARS.length; i++) {
-        escaped = escaped.split(SOLR_RESERVED_CHARS[i]).join(SOLR_RESERVED_CHARS_REPLACEMENT[i]);
-    }
-    return escaped;
+import '../form/select-field/select-field.js';
+import '../form/select-field/select-option.js';
+import { KRQuery, getOperatorsForType, termify } from './query.js';
+import '../tabs/tabs.js';
+import '../tabs/tab.js';
+/** Internal table model built from user-provided def. */
+class KRTableModel {
+    constructor() {
+        this.title = '';
+        this.actions = [];
+        this.columns = [];
+        this.displayedColumns = [];
+        this.data = null;
+        this.dataSource = null;
+        this.refreshInterval = 0;
+        this.pageSize = 0;
+        this.rowClickable = false;
+        this.rowHref = null;
+    }
 }
 let KRTable = class KRTable extends LitElement {
     constructor() {
@@ -47,25 +51,33 @@ let KRTable = class KRTable extends LitElement {
         this._canScrollRight = false;
         this._canScrollHorizontal = false;
         this._columnPickerOpen = false;
-        this._displayedColumns = [];
+        this._filterPanelOpened = null;
+        this._filterPanelTab = 'filter';
+        this._buckets = new Map();
+        this._filterPanelPos = { top: 0, left: 0 };
         this._resizing = null;
         this._resizeObserver = null;
         this._searchPositionLocked = false;
-        this._def = { columns: [] };
+        this._model = new KRTableModel();
         this.def = { columns: [] };
-        this._handleClickOutsideColumnPicker = (e) => {
-            if (!this._columnPickerOpen)
-                return;
+        this._handleClickOutside = (e) => {
             const path = e.composedPath();
-            const picker = this.shadowRoot?.querySelector('.column-picker-wrapper');
-            if (picker && !path.includes(picker)) {
-                this._columnPickerOpen = false;
+            if (this._columnPickerOpen) {
+                const picker = this.shadowRoot?.querySelector('.column-picker-wrapper');
+                if (picker && !path.includes(picker)) {
+                    this._columnPickerOpen = false;
+                }
+            }
+            if (this._filterPanelOpened) {
+                if (!path.some((el) => el.classList?.contains('filter-panel'))) {
+                    this._handleFilterApply();
+                }
             }
         };
         this._handleResizeMove = (e) => {
             if (!this._resizing)
                 return;
-            const col = this._def.columns.find(c => c.id === this._resizing.columnId);
+            const col = this._model.columns.find(c => c.id === this._resizing.columnId);
             if (col) {
                 const newWidth = this._resizing.startWidth + (e.clientX - this._resizing.startX);
                 col.width = `${Math.min(900, Math.max(50, newWidth))}px`;
@@ -84,7 +96,7 @@ let KRTable = class KRTable extends LitElement {
         this.classList.toggle('kr-table--scroll-edge', this._scrollStyle === 'edge');
         this._fetch();
         this._initRefresh();
-        document.addEventListener('click', this._handleClickOutsideColumnPicker);
+        document.addEventListener('click', this._handleClickOutside);
         this._resizeObserver = new ResizeObserver(() => {
             // Unlock and recalculate on resize since layout changes
             this._searchPositionLocked = false;
@@ -95,22 +107,71 @@ let KRTable = class KRTable extends LitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         clearInterval(this._refreshTimer);
-        document.removeEventListener('click', this._handleClickOutsideColumnPicker);
+        document.removeEventListener('click', this._handleClickOutside);
         this._resizeObserver?.disconnect();
     }
     willUpdate(changedProperties) {
         if (changedProperties.has('def')) {
-            // Copy user's def and normalize action columns
-            this._def = {
-                ...this.def,
-                columns: this.def.columns.map(col => {
-                    if (col.type === 'actions') {
-                        return { ...col, label: col.label ?? '', sticky: 'right', resizable: false };
+            // Build internal model from user-provided def
+            this._model = new KRTableModel();
+            if (this.def.title) {
+                this._model.title = this.def.title;
+            }
+            if (this.def.actions) {
+                this._model.actions = this.def.actions;
+            }
+            if (this.def.data) {
+                this._model.data = this.def.data;
+            }
+            if (this.def.dataSource) {
+                this._model.dataSource = this.def.dataSource;
+            }
+            if (typeof this.def.refreshInterval === 'number') {
+                this._model.refreshInterval = this.def.refreshInterval;
+            }
+            if (typeof this.def.pageSize === 'number') {
+                this._model.pageSize = this.def.pageSize;
+            }
+            if (this.def.rowClickable) {
+                this._model.rowClickable = this.def.rowClickable;
+            }
+            if (this.def.rowHref) {
+                this._model.rowHref = this.def.rowHref;
+            }
+            this._model.columns = this.def.columns.map(col => {
+                const column = {
+                    ...col,
+                    filter: null
+                };
+                if (!column.type) {
+                    column.type = 'string';
+                }
+                if (column.type === 'actions') {
+                    column.label = col.label ?? '';
+                    column.sticky = 'right';
+                    column.resizable = false;
+                    return column;
+                }
+                if (col.filterable || col.facetable) {
+                    column.filter = new KRQuery();
+                    column.filter.field = col.id;
+                    column.filter.type = column.type;
+                    if (col.facetable && !col.filterable) {
+                        column.filter.operator = 'in';
+                        column.filter.value = [];
                     }
-                    return { ...col };
-                })
-            };
-            this._displayedColumns = this._def.displayedColumns || this._def.columns.map(c => c.id);
+                    else if (column.filter.type === 'string') {
+                        column.filter.operator = 'contains';
+                    }
+                }
+                return column;
+            });
+            if (this.def.displayedColumns) {
+                this._model.displayedColumns = this.def.displayedColumns;
+            }
+            else {
+                this._model.displayedColumns = this._model.columns.map(c => c.id);
+            }
             this._fetch();
             this._initRefresh();
         }
@@ -175,6 +236,73 @@ let KRTable = class KRTable extends LitElement {
     // ----------------------------------------------------------------------------
     // Data Fetching
     // ----------------------------------------------------------------------------
+    _toSolrData() {
+        const request = {
+            page: this._page - 1,
+            size: this._pageSize,
+            sorts: [],
+            filterFields: [],
+            queryFields: [],
+            facetFields: []
+        };
+        for (const col of this._model.columns) {
+            if (!col.filter || col.filter.isEmpty() || !col.filter.isValid()) {
+                continue;
+            }
+            const filterData = col.filter.toSolrData();
+            if (col.facetable && col.filter.operator === 'in') {
+                filterData.tagged = true;
+            }
+            request.filterFields.push(filterData);
+        }
+        for (const col of this._model.columns) {
+            if (!col.facetable) {
+                continue;
+            }
+            request.facetFields.push({
+                name: col.id,
+                type: 'FIELD',
+                limit: 100,
+                sort: 'count',
+                minimumCount: 1
+            });
+        }
+        if (this._searchQuery?.trim().length) {
+            request.queryFields.push({
+                name: '_text_',
+                operation: 'IS',
+                value: termify(this._searchQuery, false)
+            });
+        }
+        return request;
+    }
+    _toDbParams() {
+        const request = {
+            page: this._page - 1,
+            size: this._pageSize,
+            sorts: [],
+            filterFields: [],
+            queryFields: [],
+            facetFields: []
+        };
+        for (const col of this._model.columns) {
+            if (!col.filter || col.filter.isEmpty() || !col.filter.isValid()) {
+                continue;
+            }
+            request.filterFields.push(col.filter.toDbParams());
+        }
+        if (this._searchQuery?.trim().length) {
+            this._model.columns.filter(col => col.searchable).forEach(col => {
+                request.queryFields.push({
+                    name: col.id,
+                    operation: 'CONTAINS',
+                    value: this._searchQuery,
+                    and: false
+                });
+            });
+        }
+        return request;
+    }
     /**
      * Fetches data from the API and updates the table.
      * Shows a loading spinner while fetching, then displays rows on success
@@ -182,55 +310,27 @@ let KRTable = class KRTable extends LitElement {
      * Request/response format depends on dataSource.mode (solr, opensearch, db).
      */
     _fetch() {
-        if (!this._def.dataSource)
+        if (this._model.data) {
+            this._data = this._model.data;
+            this._totalItems = this._model.data.length;
+            this._totalPages = Math.ceil(this._model.data.length / this._pageSize);
+            this._dataState = 'success';
+            return;
+        }
+        if (!this._model.dataSource)
             return;
         this._dataState = 'loading';
-        // Build request based on mode
         let request;
-        switch (this._def.dataSource.mode) {
-            case 'opensearch':
-                throw Error('Opensearch not supported yet');
-            case 'db':
-                request = {
-                    page: this._page - 1,
-                    size: this._pageSize,
-                    sorts: [],
-                    filterFields: [],
-                    queryFields: [],
-                    facetFields: []
-                };
-                if (this._searchQuery?.trim().length) {
-                    this._def.columns.filter(col => col.searchable).forEach(col => {
-                        request.queryFields.push({
-                            name: col.id,
-                            operation: 'CONTAINS',
-                            value: this._searchQuery,
-                            and: false
-                        });
-                    });
-                }
-                break;
-            default: // solr
-                request = {
-                    page: this._page - 1,
-                    size: this._pageSize,
-                    sorts: [],
-                    filterFields: [],
-                    queryFields: [],
-                    facetFields: []
-                };
-                if (this._searchQuery?.trim().length) {
-                    request.queryFields.push({
-                        name: '_text_',
-                        operation: 'IS',
-                        value: escapeSolrQuery(this._searchQuery)
-                    });
-                }
+        if (this._model.dataSource.mode === 'db') {
+            request = this._toDbParams();
+        }
+        else {
+            request = this._toSolrData();
         }
-        this._def.dataSource.fetch(request)
+        this._model.dataSource.fetch(request)
             .then(response => {
             // Parse response based on mode
-            switch (this._def.dataSource?.mode) {
+            switch (this._model.dataSource?.mode) {
                 case 'opensearch': {
                     throw Error('Opensearch not supported yet');
                     break;
@@ -249,6 +349,7 @@ let KRTable = class KRTable extends LitElement {
                     this._totalItems = res.data.totalElements;
                     this._totalPages = res.data.totalPages;
                     this._pageSize = res.data.size;
+                    this._parseFacetResults(res);
                 }
             }
             this._dataState = 'success';
@@ -262,6 +363,61 @@ let KRTable = class KRTable extends LitElement {
             });
         });
     }
+    _parseFacetResults(response) {
+        if (!response.data.facetFields) {
+            return;
+        }
+        for (const col of this._model.columns) {
+            if (!col.facetable) {
+                continue;
+            }
+            const rawBuckets = response.data.facetFields[col.id];
+            if (!rawBuckets) {
+                this._buckets.set(col.id, []);
+                continue;
+            }
+            const buckets = [];
+            for (const raw of rawBuckets) {
+                // Solr returns boolean facet values as strings — coerce to actual booleans
+                // so they match the filter values stored by toggle().
+                let val = raw.name;
+                if (col.type === 'boolean' && typeof raw.name === 'string') {
+                    if (raw.name === 'true') {
+                        val = true;
+                    }
+                    else if (raw.name === 'false') {
+                        val = false;
+                    }
+                }
+                if (raw.name === null && raw.count > 0) {
+                    buckets.unshift({
+                        val: null,
+                        count: raw.count
+                    });
+                }
+                if (raw.name !== null) {
+                    buckets.push({
+                        val: val,
+                        count: raw.count
+                    });
+                }
+            }
+            // Bucket sync: ensure selected values appear even with 0 results
+            if (col.filter && col.filter.operator === 'in' && Array.isArray(col.filter.value)) {
+                for (const selectedVal of col.filter.value) {
+                    if (!buckets.some(b => b.val === selectedVal)) {
+                        buckets.push({
+                            val: selectedVal,
+                            count: 0
+                        });
+                    }
+                }
+            }
+            this._buckets.set(col.id, buckets);
+        }
+        // Trigger re-render since Map mutation doesn't trigger Lit updates
+        this._buckets = new Map(this._buckets);
+    }
     /**
      * Sets up auto-refresh so the table automatically fetches fresh data
      * at a regular interval (useful for dashboards, monitoring views).
@@ -269,10 +425,10 @@ let KRTable = class KRTable extends LitElement {
      */
     _initRefresh() {
         clearInterval(this._refreshTimer);
-        if (this._def.refreshInterval && this._def.refreshInterval > 0) {
+        if (this._model.refreshInterval && this._model.refreshInterval > 0) {
             this._refreshTimer = window.setInterval(() => {
                 this._fetch();
-            }, this._def.refreshInterval);
+            }, this._model.refreshInterval);
         }
     }
     _handleSearch(e) {
@@ -331,23 +487,23 @@ let KRTable = class KRTable extends LitElement {
         this._columnPickerOpen = !this._columnPickerOpen;
     }
     _toggleColumn(columnId) {
-        if (this._displayedColumns.includes(columnId)) {
-            this._displayedColumns = this._displayedColumns.filter(id => id !== columnId);
+        if (this._model.displayedColumns.includes(columnId)) {
+            this._model.displayedColumns = this._model.displayedColumns.filter(id => id !== columnId);
         }
         else {
-            this._displayedColumns = [...this._displayedColumns, columnId];
+            this._model.displayedColumns = [...this._model.displayedColumns, columnId];
         }
     }
     // Clear any existing text selection on mousedown so we only detect
     // selections made during this click gesture, not stale selections from elsewhere
     _handleRowMouseDown() {
-        if (!this._def.rowClickable) {
+        if (!this._model.rowClickable) {
             return;
         }
         window.getSelection()?.removeAllRanges();
     }
     _handleRowClick(row, rowIndex) {
-        if (!this._def.rowClickable) {
+        if (!this._model.rowClickable) {
             return;
         }
         const selection = window.getSelection();
@@ -366,8 +522,8 @@ let KRTable = class KRTable extends LitElement {
     // back to its original position in the column definition.
     // Actions columns are always moved to the end.
     getDisplayedColumns() {
-        return this._displayedColumns
-            .map(id => this._def.columns.find(col => col.id === id))
+        return this._model.displayedColumns
+            .map(id => this._model.columns.find(col => col.id === id))
             .sort((a, b) => {
             if (a.type === 'actions' && b.type !== 'actions')
                 return 1;
@@ -436,6 +592,132 @@ let KRTable = class KRTable extends LitElement {
         }));
     }
     // ----------------------------------------------------------------------------
+    // Filter Handlers
+    // ----------------------------------------------------------------------------
+    _handleKqlChange(e, column) {
+        const kql = e.target.value.trim();
+        if (!kql) {
+            column.filter.clear();
+            this.requestUpdate();
+        }
+        else {
+            column.filter.setKql(kql);
+            this.requestUpdate();
+            if (!column.filter.isValid()) {
+                return;
+            }
+        }
+        this._page = 1;
+        this._fetch();
+    }
+    _handleFilterPanelToggle(e, column) {
+        e.stopPropagation();
+        if (this._filterPanelOpened === column.id) {
+            this._filterPanelOpened = null;
+        }
+        else {
+            const rect = e.currentTarget.getBoundingClientRect();
+            let left = rect.left;
+            if (left + 328 > window.innerWidth) {
+                left = window.innerWidth - 328;
+            }
+            this._filterPanelPos = {
+                top: rect.bottom + 4,
+                left
+            };
+            this._filterPanelOpened = column.id;
+            if (column.facetable) {
+                this._filterPanelTab = 'counts';
+            }
+            else {
+                this._filterPanelTab = 'filter';
+            }
+        }
+    }
+    _handleKqlClear(column) {
+        column.filter.clear();
+        this._page = 1;
+        this._fetch();
+    }
+    _handleFilterClear() {
+        const column = this._model.columns.find(c => c.id === this._filterPanelOpened);
+        if (column) {
+            column.filter.clear();
+            if (column.facetable && !column.filterable) {
+                column.filter.operator = 'in';
+                column.filter.value = [];
+            }
+        }
+        this._filterPanelOpened = null;
+        this._page = 1;
+        this._fetch();
+    }
+    _handleFilterTextKeydown(e, column) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this._handleFilterApply();
+        }
+    }
+    _handleOperatorChange(e, column) {
+        column.filter.setOperator(e.target.value);
+        this.requestUpdate();
+    }
+    _handleFilterStringChange(e, column) {
+        column.filter.setValue(e.target.value);
+        this.requestUpdate();
+    }
+    _handleFilterNumberChange(e, column) {
+        column.filter.setValue(Number(e.target.value));
+        this.requestUpdate();
+    }
+    _handleFilterDateChange(e, column) {
+        column.filter.setValue(new Date(e.target.value), 'day');
+        this.requestUpdate();
+    }
+    _handleFilterBooleanChange(e, column) {
+        column.filter.setValue(e.target.value === 'true');
+        this.requestUpdate();
+    }
+    _handleFilterDateStartChange(e, column) {
+        column.filter.setStart(new Date(e.target.value), 'day');
+        this.requestUpdate();
+    }
+    _handleFilterDateEndChange(e, column) {
+        column.filter.setEnd(new Date(e.target.value), 'day');
+        this.requestUpdate();
+    }
+    _handleFilterNumberStartChange(e, column) {
+        column.filter.setStart(Number(e.target.value));
+        this.requestUpdate();
+    }
+    _handleFilterNumberEndChange(e, column) {
+        column.filter.setEnd(Number(e.target.value));
+        this.requestUpdate();
+    }
+    _handleFilterListChange(e, column) {
+        const items = e.target.value.split(',').map((v) => v.trim()).filter((v) => v !== '');
+        if (column.type === 'number') {
+            column.filter.setValue(items.map((v) => Number(v)));
+        }
+        else {
+            column.filter.setValue(items);
+        }
+        this.requestUpdate();
+    }
+    _handleFilterApply() {
+        this._filterPanelOpened = null;
+        this._page = 1;
+        this._fetch();
+    }
+    _handleFilterPanelTabChange(e) {
+        this._filterPanelTab = e.detail.activeTabId;
+    }
+    _handleBucketToggle(e, column, bucket) {
+        column.filter.toggle(bucket.val);
+        this._page = 1;
+        this._fetch();
+    }
+    // ----------------------------------------------------------------------------
     // Rendering
     // ----------------------------------------------------------------------------
     _renderCellContent(column, row, rowIndex) {
@@ -449,11 +731,10 @@ let KRTable = class KRTable extends LitElement {
         }
         switch (column.type) {
             case 'number':
-                return typeof value === 'number' ? value.toLocaleString() : String(value);
-            case 'currency':
-                return typeof value === 'number'
-                    ? value.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
-                    : String(value);
+                if (column.format === 'currency' && typeof value === 'number') {
+                    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+                }
+                return String(value);
             case 'date': {
                 let date;
                 if (value instanceof Date) {
@@ -468,10 +749,11 @@ let KRTable = class KRTable extends LitElement {
                 else {
                     date = new Date(value);
                 }
-                // Show date and time for datetime values
+                // Show date and time for datetime values in UTC
                 return date.toLocaleString(undefined, {
                     year: 'numeric', month: 'short', day: 'numeric',
-                    hour: 'numeric', minute: '2-digit'
+                    hour: 'numeric', minute: '2-digit',
+                    timeZone: 'UTC'
                 });
             }
             case 'boolean':
@@ -588,13 +870,13 @@ let KRTable = class KRTable extends LitElement {
      * Hidden when there's no title, no actions, and data fits on one page.
      */
     _renderHeader() {
-        if (!this._def.title && !this._def.actions?.length && this._totalPages <= 1) {
+        if (!this._model.title && !this._model.actions?.length && this._totalPages <= 1) {
             return nothing;
         }
         return html `
       <div class="header">
-        <div class="title">${this._def.title ?? ''}</div>
-        ${this._def.dataSource?.mode === 'db' && !this._def.columns.some(col => col.searchable) ? html `<div class="search"></div>` : html `
+        <div class="title">${this._model.title ?? ''}</div>
+        ${this._model.dataSource?.mode === 'db' && !this._model.columns.some(col => col.searchable) ? html `<div class="search"></div>` : html `
           <div class="search">
             <!-- TODO: Saved views dropdown
             <div class="views">
@@ -624,9 +906,9 @@ let KRTable = class KRTable extends LitElement {
               <svg viewBox="0 -960 960 960" fill="currentColor"><path d="M121-280v-400q0-33 23.5-56.5T201-760h559q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H201q-33 0-56.5-23.5T121-280Zm79 0h133v-400H200v400Zm213 0h133v-400H413v400Zm213 0h133v-400H626v400Z"/></svg>
             </span>
             <div class="column-picker ${this._columnPickerOpen ? 'open' : ''}">
-              ${[...this._def.columns].filter(col => col.type !== 'actions').sort((a, b) => (a.label ?? a.id).localeCompare(b.label ?? b.id)).map(col => html `
+              ${[...this._model.columns].filter(col => col.type !== 'actions').sort((a, b) => (a.label ?? a.id).localeCompare(b.label ?? b.id)).map(col => html `
                 <div class="column-picker-item" @click=${() => this._toggleColumn(col.id)}>
-                  <div class="column-picker-checkbox ${this._displayedColumns.includes(col.id) ? 'checked' : ''}">
+                  <div class="column-picker-checkbox ${this._model.displayedColumns.includes(col.id) ? 'checked' : ''}">
                     <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                   </div>
                   <span class="column-picker-label">${col.label ?? col.id}</span>
@@ -634,19 +916,19 @@ let KRTable = class KRTable extends LitElement {
               `)}
             </div>
           </div>
-          ${this._def.actions?.length === 1 ? html `
+          ${this._model.actions?.length === 1 ? html `
             <kr-button
               class="actions"
-              .href=${this._def.actions[0].href}
-              .target=${this._def.actions[0].target}
-              @click=${() => this._handleAction(this._def.actions[0])}
+              .href=${this._model.actions[0].href}
+              .target=${this._model.actions[0].target}
+              @click=${() => this._handleAction(this._model.actions[0])}
             >
-              ${this._def.actions[0].label}
+              ${this._model.actions[0].label}
             </kr-button>
-          ` : this._def.actions?.length ? html `
+          ` : this._model.actions?.length ? html `
             <kr-button
               class="actions"
-              .options=${this._def.actions.map(a => ({ id: a.id, label: a.label }))}
+              .options=${this._model.actions.map(a => ({ id: a.id, label: a.label }))}
               @option-select=${(e) => this._handleAction({ id: e.detail.id, label: e.detail.label })}
             >
               Actions
@@ -669,6 +951,299 @@ let KRTable = class KRTable extends LitElement {
         }
         return nothing;
     }
+    _renderFilterPanel() {
+        if (!this._filterPanelOpened) {
+            return nothing;
+        }
+        const column = this._model.columns.find(c => c.id === this._filterPanelOpened);
+        // Build filter content (operator + value input)
+        let valueInput = html ``;
+        if (column.filter.operator === 'empty' || column.filter.operator === 'n_empty') {
+            valueInput = html `
+        <input
+          type="text"
+          class="filter-panel__input"
+          disabled
+          .value=${column.filter.text}
+        />
+      `;
+        }
+        else if (column.filter.operator === 'between' && column.type === 'date') {
+            valueInput = html `
+        <input
+          type="date"
+          class="filter-panel__input"
+          .valueAsDate=${column.filter.value?.start ?? null}
+          @change=${(e) => this._handleFilterDateStartChange(e, column)}
+        />
+        <input
+          type="date"
+          class="filter-panel__input"
+          .valueAsDate=${column.filter.value?.end ?? null}
+          @change=${(e) => this._handleFilterDateEndChange(e, column)}
+        />
+      `;
+        }
+        else if (column.filter.operator === 'between' && column.type === 'number') {
+            valueInput = html `
+        <input
+          type="number"
+          class="filter-panel__input"
+          placeholder="Start"
+          .value=${column.filter.value?.start ?? ''}
+          @input=${(e) => this._handleFilterNumberStartChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+        <input
+          type="number"
+          class="filter-panel__input"
+          placeholder="End"
+          .value=${column.filter.value?.end ?? ''}
+          @input=${(e) => this._handleFilterNumberEndChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+      `;
+        }
+        else if (column.filter.operator === 'in') {
+            valueInput = html `
+        <textarea
+          class="filter-panel__textarea"
+          rows="3"
+          placeholder="Values (comma-separated)"
+          .value=${column.filter.text}
+          @input=${(e) => this._handleFilterListChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        ></textarea>
+      `;
+        }
+        else if (column.type === 'boolean') {
+            valueInput = html `
+        <kr-select-field
+          placeholder="Value"
+          .value=${String(column.filter.value ?? '')}
+          @change=${(e) => this._handleFilterBooleanChange(e, column)}
+        >
+          <kr-select-option value="true">Yes</kr-select-option>
+          <kr-select-option value="false">No</kr-select-option>
+        </kr-select-field>
+      `;
+        }
+        else if (column.type === 'date') {
+            valueInput = html `
+        <input
+          type="date"
+          class="filter-panel__input"
+          .valueAsDate=${column.filter.value}
+          @change=${(e) => this._handleFilterDateChange(e, column)}
+        />
+      `;
+        }
+        else if (column.type === 'number') {
+            valueInput = html `
+        <input
+          type="number"
+          class="filter-panel__input"
+          placeholder="Value"
+          min="0"
+          .value=${column.filter.text}
+          @input=${(e) => this._handleFilterNumberChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+      `;
+        }
+        else {
+            valueInput = html `
+        <input
+          type="text"
+          class="filter-panel__input"
+          placeholder="Value"
+          .value=${column.filter.text}
+          @input=${(e) => this._handleFilterStringChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+      `;
+        }
+        const filterContent = html `
+      <div class="filter-panel__content">
+        <kr-select-field
+          .value=${column.filter.operator}
+          @change=${(e) => this._handleOperatorChange(e, column)}
+        >
+          ${getOperatorsForType(column.type).map(op => html `
+            <kr-select-option value=${op.key}>${op.label}</kr-select-option>
+          `)}
+        </kr-select-field>
+        ${valueInput}
+      </div>
+    `;
+        // Build bucket list content
+        const buckets = this._buckets.get(column.id) || [];
+        let bucketContent;
+        if (!buckets.length) {
+            bucketContent = html `<div class="bucket-empty">No data</div>`;
+        }
+        else {
+            bucketContent = html `
+        <div class="buckets">
+          ${buckets.map(bucket => {
+                let bucketLabel = '(Empty)';
+                if (bucket.val !== null && bucket.val !== undefined) {
+                    if (column.type === 'boolean') {
+                        if (bucket.val === true || bucket.val === 'true') {
+                            bucketLabel = 'Yes';
+                        }
+                        else {
+                            bucketLabel = 'No';
+                        }
+                    }
+                    else {
+                        bucketLabel = String(bucket.val);
+                    }
+                }
+                let checkIcon = nothing;
+                if (column.filter.has(bucket.val)) {
+                    checkIcon = html `
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                </svg>
+              `;
+                }
+                return html `
+              <div
+                class="bucket"
+                @click=${(e) => this._handleBucketToggle(e, column, bucket)}
+              >
+                <div class=${classMap({
+                    'bucket__checkbox': true,
+                    'bucket__checkbox--checked': column.filter.has(bucket.val)
+                })}>
+                  ${checkIcon}
+                </div>
+                <span class="bucket__label">${bucketLabel}</span>
+                <span class="bucket__count">${bucket.count}</span>
+              </div>
+            `;
+            })}
+        </div>
+      `;
+        }
+        // Build panel body — tabs if both filterable+facetable, otherwise just the relevant content
+        let panelBody;
+        if (column.facetable && column.filterable) {
+            panelBody = html `
+        <kr-tab-group
+          size="small"
+          active-tab-id=${this._filterPanelTab}
+          @tab-change=${(e) => this._handleFilterPanelTabChange(e)}
+        >
+          <kr-tab id="filter" label="Filter">
+            ${filterContent}
+          </kr-tab>
+          <kr-tab id="counts" label="Counts">
+            ${bucketContent}
+          </kr-tab>
+        </kr-tab-group>
+      `;
+        }
+        else if (column.facetable) {
+            panelBody = bucketContent;
+        }
+        else {
+            panelBody = filterContent;
+        }
+        return html `
+      <div
+        class="filter-panel"
+        style=${styleMap({
+            top: this._filterPanelPos.top + 'px',
+            left: this._filterPanelPos.left + 'px'
+        })}
+      >
+        ${panelBody}
+        <div class="filter-panel__actions">
+          <kr-button variant="outline" color="secondary" size="small" @click=${this._handleFilterClear}>
+            Clear
+          </kr-button>
+          <kr-button size="small" @click=${this._handleFilterApply}>
+            Apply
+          </kr-button>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Renders filter row below column headers.
+     * Only displays for columns with filterable: true.
+     */
+    _renderFilterRow() {
+        const columns = this.getDisplayedColumns();
+        if (!columns.some(col => col.filterable || col.facetable)) {
+            return nothing;
+        }
+        return html `
+      <div class="filter-row">
+        ${columns.map((col, i) => {
+            if (!col.filterable && !col.facetable) {
+                return html `<div
+              class=${classMap({
+                    'filter-cell': true,
+                    'filter-cell--sticky-left': col.sticky === 'left',
+                    'filter-cell--sticky-right': col.sticky === 'right',
+                    'filter-cell--sticky-right-first': col.sticky === 'right' &&
+                        !columns.slice(0, i).some((c) => c.sticky === 'right')
+                })}
+              style=${styleMap(this._getCellStyle(col, i))}
+            ></div>`;
+            }
+            return html `
+            <div
+              class=${classMap({
+                'filter-cell': true,
+                'filter-cell--sticky-left': col.sticky === 'left',
+                'filter-cell--sticky-right': col.sticky === 'right',
+                'filter-cell--sticky-right-first': col.sticky === 'right' &&
+                    !columns.slice(0, i).some((c) => c.sticky === 'right')
+            })}
+              style=${styleMap(this._getCellStyle(col, i))}
+            >
+              <div class="filter-cell__wrapper">
+                  <input
+                    type="text"
+                    class=${classMap({
+                'filter-cell__input': true,
+                'filter-cell__input--invalid': !col.filter.isValid()
+            })}
+                    .value=${col.filter.kql}
+                    @change=${(e) => this._handleKqlChange(e, col)}
+                  />
+                  ${col.filter?.kql?.length > 0 ? html `
+                    <button
+                      class="filter-cell__clear"
+                      @click=${() => this._handleKqlClear(col)}
+                    >
+                      <svg viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                      </svg>
+                    </button>
+                  ` : nothing}
+                  <button
+                    class=${classMap({
+                'filter-cell__advanced': true,
+                'filter-cell__advanced--opened': this._filterPanelOpened === col.id
+            })}
+                    @click=${(e) => this._handleFilterPanelToggle(e, col)}
+                  >
+                    <svg viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+                    </svg>
+                  </button>
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
     /** Renders the scrollable data grid with column headers and rows. */
     _renderTable() {
         return html `
@@ -690,6 +1265,7 @@ let KRTable = class KRTable extends LitElement {
                     ></div>` : nothing}</div>
               `)}
             </div>
+            ${this._renderFilterRow()}
             ${this._data.map((row, rowIndex) => {
             const cells = this.getDisplayedColumns().map((col, i) => html `
                 <div
@@ -700,10 +1276,10 @@ let KRTable = class KRTable extends LitElement {
                   ${this._renderCellContent(col, row, rowIndex)}
                 </div>
               `);
-            if (this._def.rowHref) {
+            if (this._model.rowHref) {
                 return html `
                   <a
-                    href=${this._def.rowHref(row)}
+                    href=${this._model.rowHref(row)}
                     class=${classMap({ 'row': true, 'row--clickable': true, 'row--link': true })}
                     @mousedown=${() => this._handleRowMouseDown()}
                     @click=${() => this._handleRowClick(row, rowIndex)}
@@ -712,7 +1288,7 @@ let KRTable = class KRTable extends LitElement {
             }
             return html `
                 <div
-                  class=${classMap({ 'row': true, 'row--clickable': !!this._def.rowClickable })}
+                  class=${classMap({ 'row': true, 'row--clickable': !!this._model.rowClickable })}
                   @mousedown=${() => this._handleRowMouseDown()}
                   @click=${() => this._handleRowClick(row, rowIndex)}
                 >${cells}</div>
@@ -730,12 +1306,13 @@ let KRTable = class KRTable extends LitElement {
      * - Loading, error message, or empty state when no data
      */
     render() {
-        if (!this._def.columns.length) {
+        if (!this._model.columns.length) {
             return html `<slot></slot>`;
         }
         return html `
       ${this._renderHeader()}
       ${this._renderTable()}
+      ${this._renderFilterPanel()}
     `;
     }
 };
@@ -1084,6 +1661,7 @@ KRTable.styles = [krBaseCSS, css `
       overflow: hidden;
       text-overflow: ellipsis;
       box-sizing: border-box;
+      border-right: 1px solid #e5e7ebba;
     }
 
     .cell--actions {
@@ -1100,7 +1678,9 @@ KRTable.styles = [krBaseCSS, css `
       white-space: nowrap;
       box-sizing: border-box;
       background: #f9fafb;
+      border-top: 1px solid #e5e7eb;
       border-bottom: 2px solid #e5e7eb;
+      border-right: 1px solid #e5e7ebba;
       font-weight: 600;
       color: #374151;
       overflow: hidden;
@@ -1198,7 +1778,6 @@ KRTable.styles = [krBaseCSS, css `
      * ----------------------------------------------------------------------- */
     :host(.kr-table--scroll-overlay) .content {
       padding-left: 24px;
-      padding-right: 24px;
     }
 
     .overlay-left,
@@ -1257,6 +1836,301 @@ KRTable.styles = [krBaseCSS, css `
     .status--error {
       color: #dc2626;
     }
+
+    /* -------------------------------------------------------------------------
+     * Filter Row
+     * ----------------------------------------------------------------------- */
+    .filter-row {
+      display: contents;
+    }
+
+    .filter-cell {
+      position: sticky;
+      top: 48px;
+      z-index: 2;
+      height: 40px;
+      padding: 4px 8px;
+      display: flex;
+      align-items: center;
+      background: #fafbfc;
+      border-bottom: 1px solid #e5e7eb;
+      border-right: 1px solid #e5e7ebba;
+      box-sizing: border-box;
+    }
+
+
+    .filter-cell--sticky-left,
+    .filter-cell--sticky-right {
+      position: sticky;
+      z-index: 3;
+    }
+
+    .filter-cell--sticky-right-first {
+      border-left: 1px solid #d1d5db;
+    }
+
+    .filter-cell__wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      width: 100%;
+    }
+
+    .filter-cell__input {
+      width: 100%;
+      height: 32px;
+      padding: 0 52px 0 8px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: #fff;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .filter-cell__input:focus {
+      border-color: #163052;
+      box-shadow: 0 0 0 2px rgba(22, 48, 82, 0.1);
+    }
+
+    .filter-cell__input--invalid {
+      border-color: #dc2626;
+    }
+
+    .filter-cell__input--invalid:focus {
+      border-color: #dc2626;
+      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
+    }
+
+    .filter-cell__input::placeholder {
+      color: #9ca3af;
+      font-size: 13px;
+    }
+
+    .filter-cell__clear {
+      position: absolute;
+      right: 28px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: #6b7280;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .filter-cell__clear:hover {
+      background: #e5e7eb;
+      color: #374151;
+    }
+
+    .filter-cell__clear svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .filter-cell__advanced {
+      position: absolute;
+      right: 4px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: #163052;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .filter-cell__advanced:hover {
+      background: #e5e7eb;
+    }
+
+    .filter-cell__advanced svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .filter-cell__advanced--opened {
+      background: #163052;
+      color: #fff;
+    }
+
+    .filter-cell__advanced--opened:hover {
+      background: #1a3a5f;
+      color: #fff;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Filter Panel (Advanced)
+     * ----------------------------------------------------------------------- */
+    .filter-panel {
+      position: fixed;
+      min-width: 320px;
+      background: white;
+      border: 1px solid #9ba7b6;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      z-index: 100;
+      animation: filter-panel-fade-in 150ms ease-out;
+    }
+
+    @keyframes filter-panel-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .filter-panel__content {
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .filter-panel__actions {
+      padding: 12px 16px;
+      border-top: 1px solid #e5e7eb;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 12px;
+    }
+
+
+    .filter-panel__input {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: #fff;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .filter-panel__input:focus {
+      border-color: #163052;
+      box-shadow: 0 0 0 2px rgba(22, 48, 82, 0.1);
+    }
+
+    .filter-panel__input::placeholder {
+      color: #9ca3af;
+    }
+
+    .filter-panel__textarea {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: #fff;
+      outline: none;
+      resize: vertical;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .filter-panel__textarea:focus {
+      border-color: #163052;
+      box-shadow: 0 0 0 2px rgba(22, 48, 82, 0.1);
+    }
+
+    .filter-panel__textarea::placeholder {
+      color: #9ca3af;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Bucket List
+     * ----------------------------------------------------------------------- */
+    .buckets {
+      max-height: 280px;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+
+    .bucket {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      height: 32px;
+      padding: 0 16px;
+      cursor: pointer;
+      transition: background 0.1s;
+    }
+
+    .bucket:hover {
+      background: #f3f4f6;
+    }
+
+    .bucket__checkbox {
+      width: 16px;
+      height: 16px;
+      border: 1.5px solid #9ca3af;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s;
+    }
+
+    .bucket__checkbox--checked {
+      background: var(--kr-primary, #163052);
+      border-color: var(--kr-primary, #163052);
+    }
+
+    .bucket__checkbox svg {
+      width: 12px;
+      height: 12px;
+      color: white;
+    }
+
+    .bucket__label {
+      flex: 1;
+      font-size: 14px;
+      color: #000;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .bucket__count {
+      font-size: 14px;
+      color: #000;
+      flex-shrink: 0;
+    }
+
+    .bucket-empty {
+      font-size: 14px;
+      color: #000;
+      padding: 16px;
+    }
+
   `];
 __decorate([
     state()
@@ -1293,7 +2167,13 @@ __decorate([
 ], KRTable.prototype, "_columnPickerOpen", void 0);
 __decorate([
     state()
-], KRTable.prototype, "_displayedColumns", void 0);
+], KRTable.prototype, "_filterPanelOpened", void 0);
+__decorate([
+    state()
+], KRTable.prototype, "_filterPanelTab", void 0);
+__decorate([
+    state()
+], KRTable.prototype, "_buckets", void 0);
 __decorate([
     property({ type: Object })
 ], KRTable.prototype, "def", void 0);