@mmlogic/components 0.1.18 → 0.1.20

package/dist/collection/components/mrd-table/mrd-table.js

@@ -18,6 +18,7 @@ export class MrdTable {
         this.pendingPages = new Set();
         this.debounceTimer = null;
         this.outsideClickHandler = null;
+        this.viewSwitcherClickHandler = null;
         this.keydownHandler = null;
         // ── Props ──────────────────────────────────────────────────────────────────
         this.columns = [];
@@ -37,6 +38,10 @@ export class MrdTable {
         this.defaultSort = '';
         /** Toolbar action buttons rendered above the table. */
         this.actions = [];
+        /** Display label of the current view — shown in the toolbar center as a view picker trigger. */
+        this.viewLabel = '';
+        /** Alternative views available for this table; renders a dropdown when non-empty. */
+        this.alternativeViews = [];
         // ── Internal state ─────────────────────────────────────────────────────────
         this.loadedPages = new Map();
         this.requestedPages = new Set();
@@ -61,6 +66,8 @@ export class MrdTable {
         this.textblockModal = null;
         /** Aggregation totals received from the host via setAggregations(). Null = not yet loaded. */
         this.aggregations = null;
+        /** Whether the view switcher dropdown is open. */
+        this.viewSwitcherOpen = false;
         this.handleScroll = (e) => {
             const scroller = e.currentTarget;
             const scrollTop = scroller.scrollTop;
@@ -143,6 +150,10 @@ export class MrdTable {
             document.removeEventListener('click', this.outsideClickHandler);
             this.outsideClickHandler = null;
         }
+        if (this.viewSwitcherClickHandler) {
+            document.removeEventListener('click', this.viewSwitcherClickHandler);
+            this.viewSwitcherClickHandler = null;
+        }
         if (this.keydownHandler) {
             document.removeEventListener('keydown', this.keydownHandler);
             this.keydownHandler = null;
@@ -338,7 +349,7 @@ export class MrdTable {
         // "YYYY-MM-DD" dates so the date inputs show what the user originally entered.
         // If from and to cover the same local day it was an exact-date filter — restore
         // to exact mode so the user sees the single-date input again.
-        if (dataType === 'DATETIME' && existing) {
+        if (dataType === 'DATETIME' && existing && existing.operator !== 'isEmpty' && existing.operator !== 'isNotEmpty') {
             const display = Object.assign({}, existing);
             if (typeof display.from === 'string' && display.from)
                 display.from = this.utcISOToLocalDate(display.from);
@@ -458,7 +469,7 @@ export class MrdTable {
         // Exact date → range covering the full local day (from = midnight, to = next midnight).
         // "to" is always the exclusive end (midnight of the next local day).
         let normalized = Object.assign({}, f);
-        if (f.dataType === 'DATETIME') {
+        if (f.dataType === 'DATETIME' && f.operator !== 'isEmpty' && f.operator !== 'isNotEmpty') {
             if (typeof normalized.value === 'string' && normalized.value) {
                 normalized.from = this.dateLocalToUTCStart(normalized.value);
                 normalized.to = this.dateLocalToUTCEndExclusive(normalized.value);
@@ -513,12 +524,45 @@ export class MrdTable {
             this.emitPagesForWindow(this.renderStart, this.renderEnd);
         }
     }
+    // ── View switcher ──────────────────────────────────────────────────────────
+    openViewSwitcher() {
+        this.viewSwitcherOpen = true;
+        if (this.viewSwitcherClickHandler)
+            document.removeEventListener('click', this.viewSwitcherClickHandler);
+        this.viewSwitcherClickHandler = (ev) => {
+            const wrapper = this.el.querySelector('.mrd-table__view-switcher');
+            if (wrapper && !wrapper.contains(ev.target))
+                this.closeViewSwitcher();
+        };
+        document.addEventListener('click', this.viewSwitcherClickHandler);
+    }
+    closeViewSwitcher() {
+        this.viewSwitcherOpen = false;
+        if (this.viewSwitcherClickHandler) {
+            document.removeEventListener('click', this.viewSwitcherClickHandler);
+            this.viewSwitcherClickHandler = null;
+        }
+    }
+    handleViewSwitch(view) {
+        this.closeViewSwitcher();
+        this.mrdSwitchView.emit({ name: view.name, class: view.class });
+    }
+    renderViewSwitcher() {
+        return (h("div", { class: "mrd-table__view-switcher" }, h("button", { class: `mrd-table__view-switcher-btn${this.viewSwitcherOpen ? ' mrd-table__view-switcher-btn--open' : ''}`, onClick: (e) => {
+                e.stopPropagation();
+                this.viewSwitcherOpen ? this.closeViewSwitcher() : this.openViewSwitcher();
+            } }, h("span", { class: "mrd-table__view-switcher-label" }, this.viewLabel), h("svg", { class: "mrd-table__view-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M7 10l5 5 5-5z" }))), this.viewSwitcherOpen && (h("div", { class: "mrd-table__view-switcher-dropdown", onClick: (e) => e.stopPropagation() }, this.alternativeViews.map(view => {
+            var _a;
+            return (h("button", { class: "mrd-table__view-switcher-item", onClick: () => this.handleViewSwitch(view) }, (_a = view.label) !== null && _a !== void 0 ? _a : view.name));
+        })))));
+    }
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
-        var _a;
+        var _a, _b;
         const filterCount = this.activeFilters.size;
         const hasActions = ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), h("span", { class: "mrd-table__action-tooltip" }, this.filterMode ? t('table_filter_hide', this.locale) : t('table_filter', this.locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', this.locale)})` : '')), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", 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" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, this.actions.map(a => {
+        const hasViewSwitcher = !!this.viewLabel && ((_b = this.alternativeViews) === null || _b === void 0 ? void 0 : _b.length) > 0;
+        return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${this.filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: () => this.handleFilterToggle() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), h("span", { class: "mrd-table__action-tooltip" }, this.filterMode ? t('table_filter_hide', this.locale) : t('table_filter', this.locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', this.locale)})` : '')), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: () => this.clearAllFilters() }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", 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" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', this.locale))))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, this.renderViewSwitcher())), hasActions && (h("div", { class: "mrd-table__toolbar-right" }, this.actions.map(a => {
             var _a;
             return (h("button", { class: `mrd-table__action mrd-table__action--${(_a = a.variant) !== null && _a !== void 0 ? _a : 'secondary'}`, disabled: a.disabled, onClick: () => this.mrdAction.emit({ action: a.action }) }, a.icon
                 ? h("svg", { class: "mrd-table__action-icon", "aria-hidden": "true" }, h("use", { href: a.icon }))
@@ -534,11 +578,13 @@ export class MrdTable {
             return h("p", { class: "mrd-table__filter-no-support" }, t('filter_no_support', this.locale));
         }
         if (dataType === 'BOOLEAN') {
+            const boolOp = pf.operator;
+            const noValueOp = boolOp === 'isEmpty' || boolOp === 'isNotEmpty';
             return (h("div", { class: "mrd-table__filter-radio-group" }, [
                 { labelKey: 'filter_all', value: null },
                 { labelKey: 'yes', value: true },
                 { labelKey: 'no', value: false },
-            ].map(opt => (h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: pf.value === opt.value, onChange: () => this.setPending('value', opt.value) }), t(opt.labelKey, this.locale))))));
+            ].map(opt => (h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: !noValueOp && pf.value === opt.value, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined, value: opt.value }); } }), t(opt.labelKey, this.locale)))), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isEmpty', value: undefined }); } }), t('filter_is_empty', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `bf-${this.openFilterCol}`, checked: boolOp === 'isNotEmpty', onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: 'isNotEmpty', value: undefined }); } }), t('filter_is_not_empty', this.locale))));
         }
         if (dataType === 'LIST') {
             const items = (_c = (_b = col.field) === null || _b === void 0 ? void 0 : _b.listItems) !== null && _c !== void 0 ? _c : [];
@@ -556,17 +602,47 @@ export class MrdTable {
             ].map(o => h("option", { value: o.val, selected: op === o.val }, t(o.labelKey, this.locale)))), !noInput && (h("input", { type: "text", class: "mrd-table__filter-input", value: String((_f = pf.value) !== null && _f !== void 0 ? _f : ''), placeholder: t('filter_search_value', this.locale), onInput: (e) => this.setPending('value', e.target.value) }))));
         }
         if (NUMERIC_TYPES.has(dataType)) {
-            const rangeMode = pf.from !== undefined || pf.to !== undefined;
-            return (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: "number", class: "mrd-table__filter-input", value: pf.value != null ? String(pf.value) : '', onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("span", { class: "mrd-table__filter-range-sep" }, "\u2013"), h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))));
+            const numOp = pf.operator;
+            const noInput = numOp === 'isEmpty' || numOp === 'isNotEmpty';
+            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
+            return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => {
+                    const val = e.target.value;
+                    if (val === 'isEmpty' || val === 'isNotEmpty') {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
+                    }
+                    else {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
+                    }
+                } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), h("option", { value: "isEmpty", selected: numOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: numOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `nm-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: "number", class: "mrd-table__filter-input", value: pf.value != null ? String(pf.value) : '', onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("span", { class: "mrd-table__filter-range-sep" }, "\u2013"), h("input", { type: "number", class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
         }
         if (dataType === 'DATETIME') {
-            const rangeMode = pf.from !== undefined || pf.to !== undefined;
-            return (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: "date", class: "mrd-table__filter-input", value: String((_g = pf.value) !== null && _g !== void 0 ? _g : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range mrd-table__filter-range--stacked" }, h("label", { class: "mrd-table__filter-range-label" }, t('filter_from', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("label", { class: "mrd-table__filter-range-label" }, t('filter_to', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))));
+            const dtOp = pf.operator;
+            const noInput = dtOp === 'isEmpty' || dtOp === 'isNotEmpty';
+            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
+            return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => {
+                    const val = e.target.value;
+                    if (val === 'isEmpty' || val === 'isNotEmpty') {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
+                    }
+                    else {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
+                    }
+                } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), h("option", { value: "isEmpty", selected: dtOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: dtOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: "date", class: "mrd-table__filter-input", value: String((_g = pf.value) !== null && _g !== void 0 ? _g : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range mrd-table__filter-range--stacked" }, h("label", { class: "mrd-table__filter-range-label" }, t('filter_from', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("label", { class: "mrd-table__filter-range-label" }, t('filter_to', this.locale)), h("input", { type: "date", class: "mrd-table__filter-input", value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
         }
         if (DATE_TYPES.has(dataType)) {
             const inputType = dataType === 'DATE' ? 'date' : 'time';
-            const rangeMode = pf.from !== undefined || pf.to !== undefined;
-            return (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: inputType, class: "mrd-table__filter-input", value: String((_h = pf.value) !== null && _h !== void 0 ? _h : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))));
+            const dtdOp = pf.operator;
+            const noInput = dtdOp === 'isEmpty' || dtdOp === 'isNotEmpty';
+            const rangeMode = !noInput && (pf.from !== undefined || pf.to !== undefined);
+            return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => {
+                    const val = e.target.value;
+                    if (val === 'isEmpty' || val === 'isNotEmpty') {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: val, value: undefined, from: undefined, to: undefined });
+                    }
+                    else {
+                        this.pendingFilter = Object.assign(Object.assign({}, pf), { operator: undefined });
+                    }
+                } }, h("option", { value: "", selected: !noInput }, t('filter_has_value', this.locale)), h("option", { value: "isEmpty", selected: dtdOp === 'isEmpty' }, t('filter_is_empty', this.locale)), h("option", { value: "isNotEmpty", selected: dtdOp === 'isNotEmpty' }, t('filter_is_not_empty', this.locale))), !noInput && (h("div", { class: "mrd-table__filter-editor" }, h("div", { class: "mrd-table__filter-radio-group mrd-table__filter-radio-group--inline" }, h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: !rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { from: undefined, to: undefined }); } }), t('filter_exact', this.locale)), h("label", { class: "mrd-table__filter-radio-label" }, h("input", { type: "radio", name: `dt-${this.openFilterCol}`, checked: rangeMode, onChange: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { value: undefined, from: null, to: null }); } }), t('filter_range', this.locale))), !rangeMode ? (h("input", { type: inputType, class: "mrd-table__filter-input", value: String((_h = pf.value) !== null && _h !== void 0 ? _h : ''), onInput: (e) => this.setPending('value', e.target.value) })) : (h("div", { class: "mrd-table__filter-range" }, h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_from', this.locale), value: pf.from != null ? String(pf.from) : '', onInput: (e) => this.setPending('from', e.target.value) }), h("input", { type: inputType, class: "mrd-table__filter-input", placeholder: t('filter_to', this.locale), value: pf.to != null ? String(pf.to) : '', onInput: (e) => this.setPending('to', e.target.value) })))))));
         }
         return null;
     }
@@ -920,6 +996,51 @@ export class MrdTable {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "viewLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display label of the current view \u2014 shown in the toolbar center as a view picker trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-label",
+                "defaultValue": "''"
+            },
+            "alternativeViews": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlternativeView[]",
+                    "resolved": "AlternativeView[]",
+                    "references": {
+                        "AlternativeView": {
+                            "location": "import",
+                            "path": "../../utils/cell-renderer",
+                            "id": "src/utils/cell-renderer.ts::AlternativeView",
+                            "referenceLocation": "AlternativeView"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative views available for this table; renders a dropdown when non-empty."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -939,7 +1060,8 @@ export class MrdTable {
             "popupPos": {},
             "scrollTop": {},
             "textblockModal": {},
-            "aggregations": {}
+            "aggregations": {},
+            "viewSwitcherOpen": {}
         };
     }
     static get events() {
@@ -1030,6 +1152,21 @@ export class MrdTable {
                     "resolved": "{ href: string; fileName: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdSwitchView",
+                "name": "mrdSwitchView",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the user selects an alternative view from the view switcher dropdown."
+                },
+                "complexType": {
+                    "original": "{ name: string; class?: string }",
+                    "resolved": "{ name: string; class?: string | undefined; }",
+                    "references": {}
+                }
             }, {
                 "method": "mrdLoadAggregations",
                 "name": "mrdLoadAggregations",

package/dist/collection/components/mrd-table/mrd-table.scss

@@ -175,6 +175,86 @@
   align-items: center;
 }
 
+.mrd-table__toolbar-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* ── View switcher ───────────────────────────────────────────────────────── */
+.mrd-table__view-switcher {
+  position: relative;
+}
+
+.mrd-table__view-switcher-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  color: var(--mrd-color-neutral-400);
+  font-size: var(--mrd-font-size-sm);
+  border-radius: var(--mrd-border-radius);
+  transition: color 0.15s, background-color 0.15s;
+  line-height: 1.4;
+}
+
+.mrd-table__view-switcher-btn:hover {
+  color: var(--mrd-color-neutral-700);
+  background-color: var(--mrd-color-neutral-50);
+}
+
+.mrd-table__view-switcher-label {
+  font-weight: var(--mrd-font-weight-medium);
+}
+
+.mrd-table__view-switcher-chevron {
+  width: 1.1rem;
+  height: 1.1rem;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+
+.mrd-table__view-switcher-btn--open .mrd-table__view-switcher-chevron {
+  transform: rotate(180deg);
+}
+
+.mrd-table__view-switcher-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 160px;
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));
+  z-index: var(--mrd-z-dropdown, 200);
+  overflow: hidden;
+}
+
+.mrd-table__view-switcher-item {
+  display: block;
+  width: 100%;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+  white-space: nowrap;
+  transition: background-color 0.1s, color 0.1s;
+}
+
+.mrd-table__view-switcher-item:hover {
+  background-color: var(--mrd-color-neutral-50);
+  color: var(--mrd-color-neutral-900);
+}
+
 .mrd-table__action {
   position: relative;
   display: inline-flex;

package/dist/collection/dev/api.js

@@ -51,6 +51,14 @@ async function apiFetchDashboard(token, tenantCode, pluralName) {
   return body; // { layouts, views, _links }
 }
 
+function applyViewFilter(href, viewFilter) {
+  if (!viewFilter?.length) return href;
+  const params = new URLSearchParams();
+  viewFilter.forEach(f => { if (f.name && f.value != null) params.set(f.name, String(f.value)); });
+  const qs = params.toString();
+  return qs ? `${href}?${qs}` : href;
+}
+
 async function apiFetchPage(token, baseHref, pageNumber, sort = '') {
   const sep = baseHref.includes('?') ? '&' : '?';
   let url = `${baseHref}${sep}page=${pageNumber}`;

package/dist/collection/dev/app.js

@@ -7,6 +7,8 @@ let _selectedType   = null; // { name, pluralName }
 let _relationMeta   = {};   // relatedClass / mostSignificantClass → { name, mostSignificantClass }
 let _tableDataHref  = null; // base href for the current table view (without ?page=)
 let _locale         = navigator.language || 'nl-NL';
+let _dashboard      = null; // full dashboard response — used for view switching
+let _currentViewKey = null; // key of the view currently displayed in the table
 
 /* =====================================================================
    UTILITIES
@@ -160,71 +162,91 @@ async function loadTable() {
 
   try {
     const dashboard = await apiFetchDashboard(authGetToken(), _selectedTenant, pluralName);
+    _dashboard = dashboard;
 
-    const viewKey  = dashboard.layouts?.[0]?.items?.[0]?.name;
-    const view     = viewKey && dashboard.views?.[viewKey];
-    const dataHref = viewKey && dashboard._links?.[viewKey]?.href;
+    const layoutItem = dashboard.layouts?.[0]?.items?.[0];
+    const viewKey    = layoutItem?.name;
+    const view       = viewKey && dashboard.views?.[viewKey];
+    const dataHref   = viewKey && dashboard._links?.[viewKey]?.href;
     if (!view || !dataHref) throw new Error('Geen geldige view gevonden in dashboard response.');
 
+    _currentViewKey = viewKey;
+
     // Strip any ?page= from href so we control pagination ourselves
     _tableDataHref = dataHref.replace(/([?&])page=\d+/, '').replace(/\?$/, '');
 
-    const columns     = (view.values ?? []).map(mapApiItem);
-    const defaultSort = view.defaultSort ?? '';
+    const columns          = (view.values ?? []).map(mapApiItem);
+    const defaultSort      = view.defaultSort ?? '';
+    const viewLabel        = layoutItem?.label ?? viewKey ?? '';
+    const alternativeViews = layoutItem?.alternativeViews ?? [];
+    const viewFilter       = view.filter ?? [];
 
-    // Fetch page 0 for totalElements + first rows (including defaultSort)
-    const page0    = await apiFetchPage(authGetToken(), _tableDataHref, 0, defaultSort);
+    // Fetch page 0 for totalElements + first rows (including defaultSort + view filters)
+    const page0    = await apiFetchPage(authGetToken(), applyViewFilter(_tableDataHref, viewFilter), 0, defaultSort);
     const meta     = page0.page ?? {};
     const total    = meta.totalElements ?? 0;
     const pageSize = meta.size ?? 20;
     const embedded = page0._embedded ?? {};
     const rows0    = Object.values(embedded)[0] ?? [];
 
-    renderTable(columns, total, pageSize, rows0, _tableDataHref, defaultSort);
+    renderTable(columns, total, pageSize, rows0, _tableDataHref, defaultSort, viewLabel, alternativeViews, viewFilter);
   } catch (err) {
     tablePanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
   }
 }
 
-function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defaultSort = '') {
+function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defaultSort = '', initialViewLabel = '', initialAlternativeViews = [], initialViewFilter = []) {
   const tablePanel = document.getElementById('panel-table');
   tablePanel.innerHTML = '<mrd-table id="live-table"></mrd-table>';
 
   customElements.whenDefined('mrd-table').then(async () => {
     const table = document.getElementById('live-table');
 
-    // Active filters stored here; combined with sort in every mrdLoadPage call
-    let _activeFilters = [];
-
-    table.columns       = columns;
-    table.locale        = _locale;
-    table.pageSize      = pageSize;
-    table.tableHeight   = 500;
-    table.totalElements = totalElements;
-    table.defaultSort   = defaultSort;
-    table.actions       = [
+    // Mutable closure state — reassigned on view switch so subsequent handlers see new values
+    let _activeFilters   = [];
+    let viewLabel        = initialViewLabel;
+    let alternativeViews = initialAlternativeViews;
+    let viewFilter       = initialViewFilter; // static filters from view definition
+
+    _tableDataHref = dataHref;
+
+    table.columns          = columns;
+    table.locale           = _locale;
+    table.pageSize         = pageSize;
+    table.tableHeight      = 500;
+    table.totalElements    = totalElements;
+    table.defaultSort      = defaultSort;
+    table.viewLabel        = viewLabel;
+    table.alternativeViews = alternativeViews;
+    table.actions          = [
       { action: 'create', label: 'Nieuw record',          icon: 'dev/sprites.svg#icon-plus',       variant: 'primary' },
       { action: 'export', label: 'Exporteer naar Excel',  icon: 'dev/sprites.svg#icon-file-excel' },
     ];
 
+    function buildParams(sort) {
+      const params = new URLSearchParams();
+      if (sort) params.set('sort', sort);
+      // Static view-level filters (from view.filter in dashboard response)
+      viewFilter.forEach(f => { if (f.name && f.value != null) params.set(f.name, String(f.value)); });
+      // User-applied column filters
+      _activeFilters.forEach(f => {
+        if (f.operator === 'isEmpty')    { params.set(f.field, '');                       return; }
+        if (f.operator === 'isNotEmpty') { params.set(f.field + '_notempty', 'true');     return; }
+        if (f.values?.length)            { params.set(f.field, f.values.join(','));        return; }
+        if (f.value != null && f.value !== '') params.set(f.field, String(f.value));
+        if (f.from  != null && f.from  !== '') params.set(f.field + '_from', String(f.from));
+        if (f.to    != null && f.to    !== '') params.set(f.field + '_to',   String(f.to));
+      });
+      return params;
+    }
+
     // Register mrdLoadPage before init() so scroll events are caught immediately
     table.addEventListener('mrdLoadPage', async (e) => {
       const { page, sort } = e.detail;
       try {
-        const params = new URLSearchParams();
-        if (sort) params.set('sort', sort);
-        // Apply active filters as simple ?field=value params (range = future API)
-        _activeFilters.forEach(f => {
-          if (f.operator === 'isEmpty')    { params.set(f.field, '');            return; }
-          if (f.operator === 'isNotEmpty') { params.set(f.field + '_notempty', 'true'); return; }
-          if (f.values?.length)            { params.set(f.field, f.values.join(',')); return; }
-          if (f.value != null && f.value !== '') params.set(f.field, String(f.value));
-          // Range: _from/_to suffix (future API support)
-          if (f.from != null && f.from !== '') params.set(f.field + '_from', String(f.from));
-          if (f.to   != null && f.to   !== '') params.set(f.field + '_to',   String(f.to));
-        });
+        const params = buildParams(sort);
         const qs  = params.toString();
-        const url = qs ? `${dataHref}?${qs}` : dataHref;
+        const url = qs ? `${_tableDataHref}?${qs}` : _tableDataHref;
 
         const result   = await apiFetchPage(authGetToken(), url, page);
         const embedded = result._embedded ?? {};
@@ -256,19 +278,11 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
     table.addEventListener('mrdLoadAggregations', async (e) => {
       const { sum, avg, count } = e.detail;
       try {
-        const aggUrl = dataHref.split('?')[0] + '/aggregations';
-        const params = new URLSearchParams();
+        const aggUrl = _tableDataHref.split('?')[0] + '/aggregations';
+        const params = buildParams('');
         if (sum?.length)   params.set('sum',   sum.join(','));
         if (avg?.length)   params.set('avg',   avg.join(','));
         if (count?.length) params.set('count', count.join(','));
-        _activeFilters.forEach(f => {
-          if (f.operator === 'isEmpty')    { params.set(f.field, '');                       return; }
-          if (f.operator === 'isNotEmpty') { params.set(f.field + '_notempty', 'true');     return; }
-          if (f.values?.length)            { params.set(f.field, f.values.join(','));        return; }
-          if (f.value != null && f.value !== '') params.set(f.field, String(f.value));
-          if (f.from  != null && f.from  !== '') params.set(f.field + '_from', String(f.from));
-          if (f.to    != null && f.to    !== '') params.set(f.field + '_to',   String(f.to));
-        });
         const qs     = params.toString();
         const result = await apiRequest('GET', qs ? `${aggUrl}?${qs}` : aggUrl, authGetToken());
         if (result.ok) await table.setAggregations(result.body);
@@ -277,6 +291,50 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
       }
     });
 
+    // Switch to an alternative view: swap current and clicked view
+    table.addEventListener('mrdSwitchView', async (e) => {
+      const newKey  = e.detail.name;
+      const newView = _dashboard?.views?.[newKey];
+      const newHref = _dashboard?._links?.[newKey]?.href;
+      if (!newView || !newHref) { console.error('[mrdSwitchView] view niet gevonden:', newKey); return; }
+
+      const clickedAlt   = alternativeViews.find(av => av.name === newKey);
+      const newViewLabel = clickedAlt?.label ?? newKey;
+      const layoutItem   = _dashboard.layouts?.[0]?.items?.[0];
+
+      // Old current becomes an alternative; clicked alternative becomes current
+      const newAlts = [
+        { name: _currentViewKey, label: viewLabel, class: layoutItem?.class ?? '' },
+        ...alternativeViews.filter(av => av.name !== newKey),
+      ];
+
+      _currentViewKey  = newKey;
+      _tableDataHref   = newHref.replace(/([?&])page=\d+/, '').replace(/\?$/, '');
+      viewLabel        = newViewLabel;
+      alternativeViews = newAlts;
+      viewFilter       = newView.filter ?? [];
+      _activeFilters   = [];
+
+      try {
+        const newDefaultSort = newView.defaultSort ?? '';
+        const page0    = await apiFetchPage(authGetToken(), applyViewFilter(_tableDataHref, viewFilter), 0, newDefaultSort);
+        const meta     = page0.page ?? {};
+        const rows0    = Object.values(page0._embedded ?? {})[0] ?? [];
+
+        table.columns          = (newView.values ?? []).map(mapApiItem);
+        table.defaultSort      = newDefaultSort;
+        table.totalElements    = meta.totalElements ?? 0;
+        table.pageSize         = meta.size ?? 20;
+        table.viewLabel        = viewLabel;
+        table.alternativeViews = alternativeViews;
+
+        await table.init();
+        await table.setPage(0, rows0);
+      } catch (err) {
+        console.error('[mrdSwitchView] laden mislukt', err);
+      }
+    });
+
     await table.init();
     await table.setPage(0, page0Rows); // inject pre-fetched page 0 — no extra request
   });

package/dist/collection/utils/i18n.js

@@ -42,6 +42,7 @@ const translations = {
         filter_contains: 'Bevat',
         filter_starts_with: 'Begint met',
         filter_equals: 'Gelijk aan',
+        filter_has_value: 'Heeft waarde',
         filter_is_empty: 'Is leeg',
         filter_is_not_empty: 'Is niet leeg',
         filter_exact: 'Exact',
@@ -100,6 +101,7 @@ const translations = {
         filter_contains: 'Contains',
         filter_starts_with: 'Starts with',
         filter_equals: 'Equals',
+        filter_has_value: 'Has value',
         filter_is_empty: 'Is empty',
         filter_is_not_empty: 'Is not empty',
         filter_exact: 'Exact',
@@ -158,6 +160,7 @@ const translations = {
         filter_contains: 'يحتوي على',
         filter_starts_with: 'يبدأ بـ',
         filter_equals: 'يساوي',
+        filter_has_value: 'له قيمة',
         filter_is_empty: 'فارغ',
         filter_is_not_empty: 'ليس فارغاً',
         filter_exact: 'دقيق',
@@ -216,6 +219,7 @@ const translations = {
         filter_contains: 'Contient',
         filter_starts_with: 'Commence par',
         filter_equals: 'Égal à',
+        filter_has_value: 'A une valeur',
         filter_is_empty: 'Est vide',
         filter_is_not_empty: "N'est pas vide",
         filter_exact: 'Exact',