@mmlogic/components 0.1.9 → 0.1.11

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

@@ -1,16 +1,22 @@
 import { h, Host } from "@stencil/core";
 import { CellRenderer } from "../../utils/cell-renderer";
+import { t } from "../../utils/i18n";
 const BUFFER = 10;
 /** Wacht deze tijd (ms) na het laatste scroll-event voordat pagina's worden
  *  aangevraagd. Pagina's die de gebruiker snel voorbij scrollt worden zo geskipt. */
 const REQUEST_DEBOUNCE_MS = 150;
+/** Breedte van de filterpopup in px — voor overflow-correctie. */
+const POPUP_WIDTH = 280;
+const TEXT_TYPES = new Set(['TEXT', 'TEXTBLOCK', 'EMAIL', 'HYPERLINK']);
+const NUMERIC_TYPES = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
+const DATE_TYPES = new Set(['DATE', 'DATETIME', 'TIME']);
+const NO_FILTER_TYPES = new Set(['FILE', 'IMAGE']);
 export class MrdTable {
     constructor() {
-        // ── Debounce internals (geen @State — triggert geen re-render) ─────────────
-        /** Pagina's die wachten op debounce-flush. */
+        // ── Non-state internals ────────────────────────────────────────────────────
         this.pendingPages = new Set();
-        /** Handle van de actieve debounce-timer. */
         this.debounceTimer = null;
+        this.outsideClickHandler = null;
         // ── Props ──────────────────────────────────────────────────────────────────
         this.columns = [];
         /** Direct rows (non-paginated mode, used when totalElements === 0). */
@@ -27,32 +33,45 @@ export class MrdTable {
         /** Initial sort applied on load, e.g. "timestamp,desc" or "name".
          *  Parsed by init() into sortField + sortDir. */
         this.defaultSort = '';
+        /** Toolbar action buttons rendered above the table. */
+        this.actions = [];
         // ── Internal state ─────────────────────────────────────────────────────────
-        /** Pages injected via setPage(). Always replaced by a new Map to trigger re-render. */
         this.loadedPages = new Map();
-        /** Pages already requested via mrdLoadPage (to avoid duplicate events). */
         this.requestedPages = new Set();
-        /** Absolute index of the first row currently in the render window. */
         this.renderStart = 0;
-        /** Absolute index of the last row currently in the render window. */
         this.renderEnd = 0;
-        /** Locked column widths (px) — measured after first page renders, then fixed. */
         this.colWidths = [];
-        /** Column currently used for sorting (empty = no sort). */
         this.sortField = '';
-        /** Sort direction for sortField. */
         this.sortDir = 'asc';
+        /** Whether the filter UI is visible on column headers. */
+        this.filterMode = false;
+        /** Active filters keyed by field name. */
+        this.activeFilters = new Map();
+        /** Field name of the currently open filter popup (null = closed). */
+        this.openFilterCol = null;
+        /** Filter state being edited in the open popup. */
+        this.pendingFilter = null;
+        /** Viewport-relative position for the filter popup. */
+        this.popupPos = { top: 0, left: 0 };
+        /** Current scroll offset of the scroll container — drives pagination footer. */
+        this.scrollTop = 0;
         this.handleScroll = (e) => {
             const scroller = e.currentTarget;
             const scrollTop = scroller.scrollTop;
             const total = this.totalElements;
             const visStart = Math.floor(scrollTop / this.rowHeight);
             const visEnd = Math.min(visStart + this.visibleCount(), total - 1);
+            this.scrollTop = scrollTop;
             this.renderStart = Math.max(0, visStart - BUFFER);
             this.renderEnd = Math.min(total - 1, visEnd + BUFFER);
             this.requestPagesForWindow(this.renderStart, this.renderEnd);
         };
     }
+    // ── Prop watchers ─────────────────────────────────────────────────────────
+    /** Clamp renderEnd when totalElements shrinks (e.g. after a filter is applied). */
+    totalElementsChanged(newVal) {
+        this.renderEnd = Math.min(this.renderEnd, Math.max(0, newVal - 1));
+    }
     // ── Public API ─────────────────────────────────────────────────────────────
     /**
      * Initialise (or reset) the virtual scroll.
@@ -69,7 +88,6 @@ export class MrdTable {
         this.loadedPages = new Map();
         this.requestedPages = new Set();
         this.colWidths = [];
-        // Apply defaultSort prop as the initial sort state.
         if (this.defaultSort) {
             const parts = this.defaultSort.split(',');
             this.sortField = parts[0].trim();
@@ -79,66 +97,105 @@ export class MrdTable {
             this.sortField = '';
             this.sortDir = 'asc';
         }
+        this.scrollTop = 0;
         this.renderStart = 0;
-        this.renderEnd = Math.max(0, Math.min(this.visibleCount() + BUFFER, this.totalElements - 1));
-        // Scroll the container back to the top when switching datasets.
+        // No BUFFER on init — only request what fits the visible area (page 0).
+        // BUFFER is applied during scroll to pre-fetch the next page proactively.
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() - 1, this.totalElements - 1));
         const scroller = this.el.querySelector('.mrd-table__scroll');
         if (scroller)
             scroller.scrollTop = 0;
-        // Do NOT emit mrdLoadPage here — the host injects page 0 via setPage().
     }
     /**
      * Inject the rows for a given page (0-based).
      * Creates a new Map reference so Stencil detects the state change.
+     *
+     * When the page contains fewer rows than pageSize it is the last page.
+     * renderEnd is clamped immediately so no loading-placeholder rows appear
+     * beyond the actual data — without requiring the host to update totalElements.
      */
     async setPage(pageNumber, rows) {
+        if (rows.length < this.pageSize) {
+            // lastRowIdx is -1 when the page is empty; clamp renderEnd to -1 so the
+            // render loop does not execute and no shimmer rows appear.
+            const lastRowIdx = pageNumber * this.pageSize + rows.length - 1;
+            this.renderEnd = Math.min(this.renderEnd, lastRowIdx);
+        }
         const next = new Map(this.loadedPages);
         next.set(pageNumber, rows);
         this.loadedPages = next;
     }
-    // ── Private helpers ────────────────────────────────────────────────────────
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    disconnectedCallback() {
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler);
+            this.outsideClickHandler = null;
+        }
+    }
+    componentDidRender() {
+        if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
+            const ths = this.el.querySelectorAll('.mrd-table__header');
+            if (ths.length > 0) {
+                this.colWidths = Array.from(ths).map(th => th.offsetWidth);
+            }
+        }
+    }
+    // ── Paging / scroll helpers ────────────────────────────────────────────────
     visibleCount() {
         return Math.ceil(this.tableHeight / this.rowHeight);
     }
-    /** Returns the current sort value for use in ?sort= query params. */
     sortParam() {
         if (!this.sortField)
             return '';
         return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
     }
-    /** Called when a header cell is clicked. Toggles direction or sets a new column. */
     colName(col) {
         var _a, _b, _c, _d;
         return (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
     }
-    handleSortClick(col) {
-        const name = this.colName(col);
-        if (this.sortField === name) {
-            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
-        }
-        else {
-            this.sortField = name;
-            this.sortDir = 'asc';
-        }
-        // Cancel any pending scroll debounce.
+    colDataType(col) {
+        var _a, _b;
+        if (col.type === 'RELATION')
+            return 'RELATION';
+        return (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : 'TEXT';
+    }
+    /** Reset pagination state and scroll to top (used after sort or filter change). */
+    resetPages() {
         if (this.debounceTimer !== null) {
             clearTimeout(this.debounceTimer);
             this.debounceTimer = null;
         }
         this.pendingPages.clear();
-        // Wipe all loaded data so the new sort order is fetched fresh.
         this.loadedPages = new Map();
         this.requestedPages = new Set();
         this.colWidths = [];
+        this.scrollTop = 0;
         this.renderStart = 0;
-        this.renderEnd = Math.max(0, Math.min(this.visibleCount() + BUFFER, this.totalElements - 1));
+        // No BUFFER here — totalElements may be stale after a filter change.
+        // Only request what is visible; BUFFER kicks in during scroll as usual.
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() - 1, this.totalElements - 1));
         const scroller = this.el.querySelector('.mrd-table__scroll');
         if (scroller)
             scroller.scrollTop = 0;
-        // Emit immediately — no debounce for intentional sort clicks.
+    }
+    handleSortClick(col) {
+        const name = this.colName(col);
+        if (this.sortField === name) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortField = name;
+            this.sortDir = 'asc';
+        }
+        this.resetPages();
+        this.emitPagesForWindow(this.renderStart, this.renderEnd);
+    }
+    applySort(col, dir) {
+        this.sortField = this.colName(col);
+        this.sortDir = dir;
+        this.resetPages();
         this.emitPagesForWindow(this.renderStart, this.renderEnd);
     }
-    /** Emits mrdLoadPage immediately for all missing pages in [start, end]. */
     emitPagesForWindow(start, end) {
         const firstPage = Math.floor(start / this.pageSize);
         const lastPage = Math.floor(end / this.pageSize);
@@ -171,13 +228,10 @@ export class MrdTable {
         }
         if (!anyNew)
             return;
-        // Reset de timer: wacht tot het scrollen even stopt.
         if (this.debounceTimer !== null)
             clearTimeout(this.debounceTimer);
         this.debounceTimer = setTimeout(() => this.flushPendingPages(), REQUEST_DEBOUNCE_MS);
     }
-    /** Emitteert mrdLoadPage alleen voor pagina's die na de debounce-wachttijd
-     *  nog steeds binnen het huidige render-venster vallen. */
     flushPendingPages() {
         this.debounceTimer = null;
         if (this.pendingPages.size === 0)
@@ -185,10 +239,8 @@ export class MrdTable {
         const next = new Set(this.requestedPages);
         let changed = false;
         for (const page of this.pendingPages) {
-            // Sla over als pagina inmiddels geladen of al aangevraagd is.
             if (this.loadedPages.has(page) || next.has(page))
                 continue;
-            // Sla over als de pagina buiten het huidige venster is geraakt.
             const pageStart = page * this.pageSize;
             const pageEnd = pageStart + this.pageSize - 1;
             if (pageEnd < this.renderStart || pageStart > this.renderEnd)
@@ -201,42 +253,236 @@ export class MrdTable {
         if (changed)
             this.requestedPages = next;
     }
-    // ── Lifecycle ──────────────────────────────────────────────────────────────
-    /** After the first page of data renders, lock column widths so subsequent
-     *  page loads don't cause layout shifts. */
-    componentDidRender() {
-        if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
-            const ths = this.el.querySelectorAll('.mrd-table__header');
-            if (ths.length > 0) {
-                this.colWidths = Array.from(ths).map(th => th.offsetWidth);
-            }
+    // ── Filter helpers ─────────────────────────────────────────────────────────
+    handleFilterToggle() {
+        this.filterMode = !this.filterMode;
+        if (!this.filterMode)
+            this.closeFilterPopup();
+    }
+    handleFilterOpen(col, e) {
+        e.stopPropagation();
+        const btn = e.currentTarget;
+        const rect = btn.getBoundingClientRect();
+        let left = rect.left;
+        if (left + POPUP_WIDTH > window.innerWidth - 8)
+            left = rect.right - POPUP_WIDTH;
+        this.popupPos = { top: rect.bottom + 4, left: Math.max(8, left) };
+        const name = this.colName(col);
+        const dataType = this.colDataType(col);
+        const existing = this.activeFilters.get(name);
+        this.pendingFilter = existing ? Object.assign({}, existing) : { field: name, dataType };
+        this.openFilterCol = name;
+        // Close on outside click — re-register to replace any stale handler
+        if (this.outsideClickHandler)
+            document.removeEventListener('click', this.outsideClickHandler);
+        this.outsideClickHandler = (ev) => {
+            const popup = this.el.querySelector('.mrd-table__filter-popup');
+            if (popup && !popup.contains(ev.target))
+                this.closeFilterPopup();
+        };
+        document.addEventListener('click', this.outsideClickHandler);
+    }
+    closeFilterPopup() {
+        this.openFilterCol = null;
+        this.pendingFilter = null;
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler);
+            this.outsideClickHandler = null;
+        }
+    }
+    setPending(key, val) {
+        this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { [key]: val });
+    }
+    togglePendingValue(key, checked) {
+        var _a, _b;
+        const current = (_b = (_a = this.pendingFilter) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
+        this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { values: checked ? [...current, key] : current.filter(k => k !== key) });
+    }
+    filterHasValue(f) {
+        if (f.operator === 'isEmpty' || f.operator === 'isNotEmpty')
+            return true;
+        if (f.values !== undefined && f.values.length > 0)
+            return true;
+        if (f.value != null && f.value !== '')
+            return true;
+        if (typeof f.value === 'boolean')
+            return true;
+        if (f.from != null && f.from !== '')
+            return true;
+        if (f.to != null && f.to !== '')
+            return true;
+        return false;
+    }
+    applyFilter() {
+        const f = this.pendingFilter;
+        if (!(f === null || f === void 0 ? void 0 : f.field)) {
+            this.closeFilterPopup();
+            return;
+        }
+        const next = new Map(this.activeFilters);
+        if (this.filterHasValue(f)) {
+            next.set(f.field, f);
+        }
+        else {
+            next.delete(f.field);
+        }
+        this.activeFilters = next;
+        this.closeFilterPopup();
+        this.mrdFilter.emit({ filters: Array.from(this.activeFilters.values()) });
+        if (this.totalElements > 0) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
+    clearFilter() {
+        const name = this.openFilterCol;
+        const next = new Map(this.activeFilters);
+        if (name)
+            next.delete(name);
+        this.activeFilters = next;
+        this.closeFilterPopup();
+        this.mrdFilter.emit({ filters: Array.from(this.activeFilters.values()) });
+        if (this.totalElements > 0) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
+    clearAllFilters() {
+        this.activeFilters = new Map();
+        this.mrdFilter.emit({ filters: [] });
+        if (this.totalElements > 0) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
+    // ── Render: toolbar ────────────────────────────────────────────────────────
+    renderToolbar() {
+        var _a;
+        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 => {
+            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 }))
+                : a.label, h("span", { class: "mrd-table__action-tooltip" }, a.label)));
+        })))));
+    }
+    // ── Render: filter popup ───────────────────────────────────────────────────
+    renderFilterEditor(col) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const pf = (_a = this.pendingFilter) !== null && _a !== void 0 ? _a : {};
+        const dataType = this.colDataType(col);
+        if (NO_FILTER_TYPES.has(dataType)) {
+            return h("p", { class: "mrd-table__filter-no-support" }, t('filter_no_support', this.locale));
+        }
+        if (dataType === 'BOOLEAN') {
+            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))))));
         }
+        if (dataType === 'LIST') {
+            const items = (_c = (_b = col.field) === null || _b === void 0 ? void 0 : _b.listItems) !== null && _c !== void 0 ? _c : [];
+            const selected = (_d = pf.values) !== null && _d !== void 0 ? _d : [];
+            return (h("div", { class: "mrd-table__filter-list" }, h("div", { class: "mrd-table__filter-list-controls" }, h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: items.map(i => i.key) }); } }, t('filter_select_all', this.locale)), h("button", { class: "mrd-table__filter-list-btn", onClick: () => { this.pendingFilter = Object.assign(Object.assign({}, pf), { values: [] }); } }, t('filter_select_none', this.locale))), items.map(item => (h("label", { class: "mrd-table__filter-checkbox-label" }, h("input", { type: "checkbox", checked: selected.includes(item.key), onChange: (e) => this.togglePendingValue(item.key, e.target.checked) }), item.label)))));
+        }
+        if (TEXT_TYPES.has(dataType) || dataType === 'RELATION') {
+            const op = (_e = pf.operator) !== null && _e !== void 0 ? _e : 'startsWith';
+            const noInput = op === 'isEmpty' || op === 'isNotEmpty';
+            return (h("div", { class: "mrd-table__filter-editor" }, h("select", { class: "mrd-table__filter-select", onChange: (e) => this.setPending('operator', e.target.value) }, [
+                { val: 'startsWith', labelKey: 'filter_starts_with' },
+                { val: 'equals', labelKey: 'filter_equals' },
+                { val: 'isEmpty', labelKey: 'filter_is_empty' },
+                { val: 'isNotEmpty', labelKey: 'filter_is_not_empty' },
+            ].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) })))));
+        }
+        if (DATE_TYPES.has(dataType)) {
+            const inputType = dataType === 'DATE' ? 'date'
+                : dataType === 'DATETIME' ? 'datetime-local'
+                    : '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((_g = pf.value) !== null && _g !== void 0 ? _g : ''), 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;
+    }
+    renderFilterPopup() {
+        var _a, _b, _c, _d;
+        if (!this.openFilterCol || !this.pendingFilter)
+            return null;
+        const col = this.columns.find(c => this.colName(c) === this.openFilterCol);
+        if (!col)
+            return null;
+        const label = (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : this.openFilterCol;
+        const sortActive = this.sortField === this.openFilterCol;
+        return (h("div", { class: "mrd-table__filter-popup", style: { top: `${this.popupPos.top}px`, left: `${this.popupPos.left}px` }, onClick: (e) => e.stopPropagation() }, h("div", { class: "mrd-table__filter-popup-header" }, h("span", { class: "mrd-table__filter-popup-title" }, label), h("button", { class: "mrd-table__filter-close", onClick: () => this.closeFilterPopup() }, "\u2715")), h("div", { class: "mrd-table__filter-section" }, h("div", { class: "mrd-table__filter-section-label" }, t('filter_sorting', this.locale)), h("div", { class: "mrd-table__filter-sort-buttons" }, h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'asc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'asc') }, "\u25B2 ", t('filter_ascending', this.locale)), h("button", { class: `mrd-table__filter-sort-btn${sortActive && this.sortDir === 'desc' ? ' mrd-table__filter-sort-btn--active' : ''}`, onClick: () => this.applySort(col, 'desc') }, "\u25BC ", t('filter_descending', this.locale)))), h("div", { class: "mrd-table__filter-divider" }), h("div", { class: "mrd-table__filter-section" }, h("div", { class: "mrd-table__filter-section-label" }, t('filter_section', this.locale)), this.renderFilterEditor(col)), h("div", { class: "mrd-table__filter-popup-footer" }, h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--clear", onClick: () => this.clearFilter() }, t('filter_clear', this.locale)), h("button", { class: "mrd-table__filter-btn mrd-table__filter-btn--apply", onClick: () => this.applyFilter() }, t('filter_apply', this.locale)))));
+    }
+    // ── Render: footer ────────────────────────────────────────────────────────
+    renderFooter(rowCount, effectiveTotal) {
+        const total = this.totalElements;
+        // Non-paginated mode: show plain row count
+        if (total === 0) {
+            const count = rowCount !== null && rowCount !== void 0 ? rowCount : 0;
+            if (count === 0)
+                return null;
+            return (h("div", { class: "mrd-table__footer" }, count, " ", t('table_of', this.locale), " ", count));
+        }
+        // Paginated mode: only show once page 0 has loaded (avoids stale total during filter reset)
+        if (!this.loadedPages.has(0))
+            return null;
+        // Use effectiveTotal (derived from actual page lengths) so the counter
+        // is correct even when the host has not yet updated totalElements.
+        const displayTotal = effectiveTotal !== null && effectiveTotal !== void 0 ? effectiveTotal : total;
+        // Compute from/to independently so partial rows at top/bottom are included.
+        const from = Math.min(Math.floor(this.scrollTop / this.rowHeight) + 1, displayTotal);
+        const to = Math.min(Math.ceil((this.scrollTop + this.tableHeight) / this.rowHeight), displayTotal);
+        return (h("div", { class: "mrd-table__footer" }, from, "\u2013", to, " ", t('table_of', this.locale), " ", displayTotal));
     }
     // ── Render ─────────────────────────────────────────────────────────────────
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
             return null;
         const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
         // ── Non-paginated mode ──────────────────────────────────────────────────
         if (this.totalElements === 0) {
-            return (h(Host, null, h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => {
+            return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => {
                 var _a, _b, _c, _d;
-                return (h("th", { class: "mrd-table__header" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''));
+                const name = this.colName(col);
+                const isFiltered = this.activeFilters.has(name);
+                return (h("th", { class: `mrd-table__header${isFiltered ? ' mrd-table__header--filtered' : ''}` }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), this.filterMode && (h("button", { class: `mrd-table__header-filter-btn${isFiltered ? ' mrd-table__header-filter-btn--active' : ''}`, onClick: (e) => this.handleFilterOpen(col, e) }, "\u25BE"))));
             }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => {
                 var _a, _b;
                 const value = CellRenderer.render(col, row, this.locale);
                 const isNumeric = col.type === 'FIELD' && numericTypes.has((_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '');
                 return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
-            })))))), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden.")))));
+            })))))), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup()));
         }
         // ── Paginated / virtual-scroll mode ────────────────────────────────────
-        const total = this.totalElements;
+        // Derive the authoritative row count from loaded pages:
+        // if any loaded page is shorter than pageSize it is the last page,
+        // so the true total cannot exceed (pageNum * pageSize + pageRows.length).
+        // This self-corrects without requiring the host to update totalElements.
+        let effectiveTotal = this.totalElements;
+        for (const [pageNum, pageRows] of this.loadedPages) {
+            if (pageRows.length < this.pageSize) {
+                effectiveTotal = Math.min(effectiveTotal, pageNum * this.pageSize + pageRows.length);
+            }
+        }
+        // Clamp renderEnd to what we actually know exists (-1 when empty)
+        const clampedEnd = Math.min(this.renderEnd, effectiveTotal - 1);
         const colCount = this.columns.length;
         const topSpacerHeight = this.renderStart * this.rowHeight;
-        const bottomSpacerHeight = Math.max(0, (total - 1 - this.renderEnd) * this.rowHeight);
+        const bottomSpacerHeight = Math.max(0, (effectiveTotal - 1 - clampedEnd) * this.rowHeight);
+        const tableStyle = this.colWidths.length > 0
+            ? { tableLayout: 'fixed' }
+            : undefined;
         const renderedRows = [];
-        for (let i = this.renderStart; i <= this.renderEnd; i++) {
+        for (let i = this.renderStart; i <= clampedEnd; i++) {
             const row = this.getRow(i);
             if (row === null) {
                 renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--loading" }, h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, h("span", { class: "mrd-table__placeholder-bar" }))));
@@ -250,15 +496,19 @@ export class MrdTable {
                 })));
             }
         }
-        const tableStyle = this.colWidths.length > 0
-            ? { tableLayout: 'fixed' }
-            : undefined;
-        return (h(Host, null, h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
+        return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
             var _a, _b, _c, _d;
-            const isActive = this.sortField === this.colName(col);
-            const cls = `mrd-table__header mrd-table__header--sortable${isActive ? ` mrd-table__header--sorted-${this.sortDir}` : ''}`;
-            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
-        }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))))), total === 0 && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden."))));
+            const name = this.colName(col);
+            const isActive = this.sortField === name;
+            const isFiltered = this.activeFilters.has(name);
+            const cls = [
+                'mrd-table__header',
+                'mrd-table__header--sortable',
+                isActive ? `mrd-table__header--sorted-${this.sortDir}` : '',
+                isFiltered ? 'mrd-table__header--filtered' : '',
+            ].filter(Boolean).join(' ');
+            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅'), this.filterMode && (h("button", { class: `mrd-table__header-filter-btn${isFiltered ? ' mrd-table__header-filter-btn--active' : ''}`, onClick: (e) => { e.stopPropagation(); this.handleFilterOpen(col, e); } }, "\u25BE"))));
+        }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))))), effectiveTotal === 0 && this.loadedPages.has(0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale))), effectiveTotal > 0 && this.renderFooter(undefined, effectiveTotal), this.renderFilterPopup()));
     }
     static get is() { return "mrd-table"; }
     static get encapsulation() { return "scoped"; }
@@ -441,6 +691,31 @@ export class MrdTable {
                 "reflect": false,
                 "attribute": "default-sort",
                 "defaultValue": "''"
+            },
+            "actions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableAction[]",
+                    "resolved": "TableAction[]",
+                    "references": {
+                        "TableAction": {
+                            "location": "import",
+                            "path": "../../utils/cell-renderer",
+                            "id": "src/utils/cell-renderer.ts::TableAction",
+                            "referenceLocation": "TableAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toolbar action buttons rendered above the table."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -452,7 +727,13 @@ export class MrdTable {
             "renderEnd": {},
             "colWidths": {},
             "sortField": {},
-            "sortDir": {}
+            "sortDir": {},
+            "filterMode": {},
+            "activeFilters": {},
+            "openFilterCol": {},
+            "pendingFilter": {},
+            "popupPos": {},
+            "scrollTop": {}
         };
     }
     static get events() {
@@ -491,6 +772,43 @@ export class MrdTable {
                         }
                     }
                 }
+            }, {
+                "method": "mrdAction",
+                "name": "mrdAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a toolbar action button is clicked. Detail contains the action identifier."
+                },
+                "complexType": {
+                    "original": "{ action: string }",
+                    "resolved": "{ action: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdFilter",
+                "name": "mrdFilter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when active filters change. Host translates filters to API query params."
+                },
+                "complexType": {
+                    "original": "{ filters: ColumnFilter[] }",
+                    "resolved": "{ filters: ColumnFilter[]; }",
+                    "references": {
+                        "ColumnFilter": {
+                            "location": "import",
+                            "path": "../../utils/cell-renderer",
+                            "id": "src/utils/cell-renderer.ts::ColumnFilter",
+                            "referenceLocation": "ColumnFilter"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -541,11 +859,17 @@ export class MrdTable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Inject the rows for a given page (0-based).\nCreates a new Map reference so Stencil detects the state change.",
+                    "text": "Inject the rows for a given page (0-based).\nCreates a new Map reference so Stencil detects the state change.\n\nWhen the page contains fewer rows than pageSize it is the last page.\nrenderEnd is clamped immediately so no loading-placeholder rows appear\nbeyond the actual data \u2014 without requiring the host to update totalElements.",
                     "tags": []
                 }
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "totalElements",
+                "methodName": "totalElementsChanged"
+            }];
+    }
 }