@mmlogic/components 0.1.9 → 0.1.11

package/dist/esm/mrd-table.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-_tsCCkAi.js';
-import { f as formatTime, a as formatDateTime, b as formatDate, c as formatCurrency, d as formatNumber, e as formatPercentage } from './format-Dt-aHxkM.js';
+import { f as formatTime, a as formatDateTime, b as formatDate, c as formatCurrency, d as formatNumber, e as formatPercentage, t } from './format-EzhfM0uw.js';
 import { ClientLayoutItemType } from './index.js';
 
 class CellRenderer {
@@ -63,22 +63,29 @@ class CellRenderer {
     }
 }
 
-const mrdTableScss = () => `.sc-mrd-table-h{display:block;width:100%}.mrd-table__scroll.sc-mrd-table{overflow-y:auto;overflow-x:auto;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow-anchor:none}.mrd-table.sc-mrd-table{overflow-x:auto}.mrd-table__table.sc-mrd-table{width:auto;min-width:100%;border-collapse:collapse;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-table__scroll.sc-mrd-table .mrd-table__table.sc-mrd-table{min-width:max-content}.mrd-table__header.sc-mrd-table{position:sticky;top:0;z-index:1;background:var(--mrd-color-white);text-align:left;padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:2px solid var(--mrd-border-color);color:var(--mrd-color-neutral-600);font-weight:var(--mrd-font-weight-medium);white-space:nowrap;font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em}.mrd-table__header--sortable.sc-mrd-table{cursor:pointer;user-select:none}.mrd-table__header--sortable.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-800)}.mrd-table__header--sorted-asc.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-label.sc-mrd-table{margin-right:var(--mrd-space-1)}.mrd-table__sort-icon.sc-mrd-table{font-size:0.65rem;opacity:0.4;vertical-align:middle}.mrd-table__header--sorted-asc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table{opacity:1;color:var(--mrd-color-primary)}.mrd-table__row.sc-mrd-table{border-bottom:1px solid var(--mrd-border-color)}.mrd-table__row.sc-mrd-table:hover{background:var(--mrd-color-neutral-200) !important}.mrd-table__row--clickable.sc-mrd-table{cursor:pointer}.mrd-table__spacer.sc-mrd-table{border:none}.mrd-table__spacer.sc-mrd-table td.sc-mrd-table{padding:0;border:none}.mrd-table__cell.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);vertical-align:top;white-space:nowrap}.mrd-table__cell--numeric.sc-mrd-table{text-align:right;font-variant-numeric:tabular-nums}.mrd-table__row--loading.sc-mrd-table{background:transparent}.mrd-table__cell--placeholder.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__placeholder-bar.sc-mrd-table{display:block;height:0.75rem;width:55%;border-radius:var(--mrd-border-radius-sm);background:linear-gradient(     90deg,     var(--mrd-color-neutral-200) 25%,     var(--mrd-color-neutral-100) 50%,     var(--mrd-color-neutral-200) 75%   );background-size:200% 100%;animation:mrd-shimmer 1.4s ease infinite}@keyframes mrd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mrd-table__empty.sc-mrd-table{padding:var(--mrd-space-4) var(--mrd-space-3);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center;margin:0}`;
+const mrdTableScss = () => `.sc-mrd-table-h{display:block;width:100%}.mrd-table__scroll.sc-mrd-table{overflow-y:auto;overflow-x:auto;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow-anchor:none}.mrd-table.sc-mrd-table{overflow-x:auto}.mrd-table__table.sc-mrd-table{width:auto;min-width:100%;border-collapse:collapse;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-table__scroll.sc-mrd-table .mrd-table__table.sc-mrd-table{min-width:max-content}.mrd-table__header.sc-mrd-table{position:sticky;top:0;z-index:1;background:var(--mrd-color-white);text-align:left;padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:2px solid var(--mrd-border-color);color:var(--mrd-color-neutral-600);font-weight:var(--mrd-font-weight-medium);white-space:nowrap;font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em}.mrd-table__header--sortable.sc-mrd-table{cursor:pointer;user-select:none}.mrd-table__header--sortable.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-800)}.mrd-table__header--sorted-asc.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-label.sc-mrd-table{margin-right:var(--mrd-space-1)}.mrd-table__sort-icon.sc-mrd-table{font-size:0.65rem;opacity:0.4;vertical-align:middle}.mrd-table__header--sorted-asc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table{opacity:1;color:var(--mrd-color-primary)}.mrd-table__row.sc-mrd-table{border-bottom:1px solid var(--mrd-border-color)}.mrd-table__row.sc-mrd-table:hover{background:var(--mrd-color-neutral-200) !important}.mrd-table__row--clickable.sc-mrd-table{cursor:pointer}.mrd-table__spacer.sc-mrd-table{border:none}.mrd-table__spacer.sc-mrd-table td.sc-mrd-table{padding:0;border:none}.mrd-table__cell.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);vertical-align:top;white-space:nowrap}.mrd-table__cell--numeric.sc-mrd-table{text-align:right;font-variant-numeric:tabular-nums}.mrd-table__row--loading.sc-mrd-table{background:transparent}.mrd-table__cell--placeholder.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__placeholder-bar.sc-mrd-table{display:block;height:0.75rem;width:55%;border-radius:var(--mrd-border-radius-sm);background:linear-gradient(     90deg,     var(--mrd-color-neutral-200) 25%,     var(--mrd-color-neutral-100) 50%,     var(--mrd-color-neutral-200) 75%   );background-size:200% 100%;animation:mrd-shimmer 1.4s ease infinite}@keyframes mrd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mrd-table__toolbar.sc-mrd-table{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--mrd-space-2)}.mrd-table__toolbar-left.sc-mrd-table,.mrd-table__toolbar-right.sc-mrd-table{display:flex;gap:var(--mrd-space-2);align-items:center}.mrd-table__action.sc-mrd-table{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--mrd-border-radius);cursor:pointer;color:var(--mrd-color-neutral-400);transition:background-color 0.15s, border-color 0.15s, color 0.15s}.mrd-table__action.sc-mrd-table:hover{background-color:var(--mrd-color-neutral-100);border-color:var(--mrd-color-neutral-300);color:var(--mrd-color-neutral-700)}.mrd-table__action.sc-mrd-table:disabled{opacity:0.4;cursor:not-allowed}.mrd-table__action--primary.sc-mrd-table{color:var(--mrd-color-neutral-500)}.mrd-table__action--primary.sc-mrd-table:hover{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__action--danger.sc-mrd-table{color:var(--mrd-color-error)}.mrd-table__action--danger.sc-mrd-table:hover{background-color:var(--mrd-color-error-light, #fef2f2);border-color:var(--mrd-color-error)}.mrd-table__action-icon.sc-mrd-table{width:1.25rem;height:1.25rem;pointer-events:none;fill:currentColor}.mrd-table__action-tooltip.sc-mrd-table{display:none;position:absolute;bottom:calc(100% + 6px);right:0;padding:var(--mrd-space-1) var(--mrd-space-2);font-size:var(--mrd-font-size-xs);white-space:nowrap;background:var(--mrd-color-tooltip, #fffce1);color:var(--mrd-color-neutral-900);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-sm, var(--mrd-border-radius));pointer-events:none;z-index:10}.mrd-table__action.sc-mrd-table:hover .mrd-table__action-tooltip.sc-mrd-table{display:block}.mrd-table__filter-toggle--active.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-toggle--active.sc-mrd-table:hover{background:var(--mrd-color-primary-dark, var(--mrd-color-primary));border-color:var(--mrd-color-primary-dark, var(--mrd-color-primary));color:var(--mrd-color-white)}.mrd-table__filter-badge.sc-mrd-table{position:absolute;top:-6px;right:-6px;min-width:1.25rem;height:1.25rem;padding:0 3px;background:var(--mrd-color-error, #e53e3e);color:var(--mrd-color-white);border-radius:9999px;font-size:0.65rem;font-weight:var(--mrd-font-weight-medium);line-height:1.25rem;text-align:center;pointer-events:none}.mrd-table__header--filtered.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-filter-btn.sc-mrd-table{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--mrd-space-1);padding:0 3px;background:transparent;border:none;border-radius:3px;cursor:pointer;color:var(--mrd-color-neutral-500);font-size:0.8rem;line-height:1;vertical-align:middle}.mrd-table__header-filter-btn.sc-mrd-table:hover{background:var(--mrd-color-neutral-200);color:var(--mrd-color-neutral-800)}.mrd-table__header-filter-btn--active.sc-mrd-table{color:var(--mrd-color-primary)}.mrd-table__filter-popup.sc-mrd-table{position:fixed;width:280px;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);font-size:var(--mrd-font-size-sm)}.mrd-table__filter-popup-header.sc-mrd-table{display:flex;align-items:center;justify-content:space-between;padding:var(--mrd-space-2) var(--mrd-space-3);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__filter-popup-title.sc-mrd-table{font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);font-size:var(--mrd-font-size-sm)}.mrd-table__filter-close.sc-mrd-table{background:transparent;border:none;cursor:pointer;color:var(--mrd-color-neutral-500);font-size:0.9rem;padding:2px 4px;border-radius:3px;line-height:1}.mrd-table__filter-close.sc-mrd-table:hover{background:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-800)}.mrd-table__filter-section.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-3)}.mrd-table__filter-section-label.sc-mrd-table{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);text-transform:uppercase;letter-spacing:0.04em;color:var(--mrd-color-neutral-500);margin-bottom:var(--mrd-space-2)}.mrd-table__filter-sort-buttons.sc-mrd-table{display:flex;gap:var(--mrd-space-2)}.mrd-table__filter-sort-btn.sc-mrd-table{flex:1;padding:var(--mrd-space-1) var(--mrd-space-2);background:transparent;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);cursor:pointer;font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-700)}.mrd-table__filter-sort-btn.sc-mrd-table:hover{background:var(--mrd-color-neutral-100)}.mrd-table__filter-sort-btn--active.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-divider.sc-mrd-table{height:1px;background:var(--mrd-border-color);margin:0}.mrd-table__filter-editor.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-table__filter-select.sc-mrd-table,.mrd-table__filter-input.sc-mrd-table{width:100%;padding:var(--mrd-space-1) var(--mrd-space-2);border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900);background:var(--mrd-color-white);box-sizing:border-box}.mrd-table__filter-select.sc-mrd-table:focus,.mrd-table__filter-input.sc-mrd-table:focus{outline:none;border-color:var(--mrd-color-primary);box-shadow:0 0 0 2px rgba(0,0,0,.06)}.mrd-table__filter-range.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1)}.mrd-table__filter-range.sc-mrd-table .mrd-table__filter-input.sc-mrd-table{flex:1;min-width:0}.mrd-table__filter-range-sep.sc-mrd-table{color:var(--mrd-color-neutral-400);flex-shrink:0}.mrd-table__filter-radio-group.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-table__filter-radio-group--inline.sc-mrd-table{flex-direction:row;gap:var(--mrd-space-3)}.mrd-table__filter-radio-label.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1);cursor:pointer;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-table__filter-list.sc-mrd-table{display:flex;flex-direction:column;gap:var(--mrd-space-1);max-height:180px;overflow-y:auto}.mrd-table__filter-list-controls.sc-mrd-table{display:flex;gap:var(--mrd-space-2);margin-bottom:var(--mrd-space-1)}.mrd-table__filter-list-btn.sc-mrd-table{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-primary);background:transparent;border:none;cursor:pointer;padding:0;text-decoration:underline}.mrd-table__filter-checkbox-label.sc-mrd-table{display:flex;align-items:center;gap:var(--mrd-space-1);cursor:pointer;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-800)}.mrd-table__filter-no-support.sc-mrd-table{font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);margin:0;font-style:italic}.mrd-table__filter-popup-footer.sc-mrd-table{display:flex;justify-content:flex-end;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);border-top:1px solid var(--mrd-border-color)}.mrd-table__filter-btn.sc-mrd-table{padding:var(--mrd-space-1) var(--mrd-space-3);border-radius:var(--mrd-border-radius);border:1px solid var(--mrd-border-color);font-size:var(--mrd-font-size-sm);cursor:pointer}.mrd-table__filter-btn--clear.sc-mrd-table{background:transparent;color:var(--mrd-color-neutral-600)}.mrd-table__filter-btn--clear.sc-mrd-table:hover{background:var(--mrd-color-neutral-100)}.mrd-table__filter-btn--apply.sc-mrd-table{background:var(--mrd-color-primary);border-color:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-table__filter-btn--apply.sc-mrd-table:hover{background:var(--mrd-color-primary-dark, var(--mrd-color-primary));border-color:var(--mrd-color-primary-dark, var(--mrd-color-primary))}.mrd-table__footer.sc-mrd-table{padding:var(--mrd-space-1) var(--mrd-space-2);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);text-align:right}.mrd-table__empty.sc-mrd-table{padding:var(--mrd-space-4) var(--mrd-space-3);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center;margin:0}`;
 
 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']);
 const MrdTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.mrdLoadPage = createEvent(this, "mrdLoadPage");
         this.mrdRowClick = createEvent(this, "mrdRowClick");
-        // ── Debounce internals (geen @State — triggert geen re-render) ─────────────
-        /** Pagina's die wachten op debounce-flush. */
+        this.mrdAction = createEvent(this, "mrdAction");
+        this.mrdFilter = createEvent(this, "mrdFilter");
+        // ── 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). */
@@ -95,32 +102,45 @@ const MrdTable = class {
         /** 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.
@@ -137,7 +157,6 @@ const MrdTable = class {
         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();
@@ -147,66 +166,105 @@ const MrdTable = class {
             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);
@@ -239,13 +297,10 @@ const MrdTable = class {
         }
         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)
@@ -253,10 +308,8 @@ const MrdTable = class {
         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)
@@ -269,42 +322,236 @@ const MrdTable = class {
         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" }))));
@@ -318,17 +565,26 @@ const MrdTable = class {
                 })));
             }
         }
-        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()));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "totalElements": [{
+                "totalElementsChanged": 0
+            }]
+    }; }
 };
 MrdTable.style = mrdTableScss();
 

package/dist/mosterdcomponents/mosterdcomponents.esm.js

@@ -1 +1 @@
-import{p as e,b as l}from"./p-_tsCCkAi.js";export{s as setNonce}from"./p-_tsCCkAi.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((async e=>(await a(),l([["p-baf08615",[[2,"mrd-table",{columns:[16],rows:[16],locale:[1],totalElements:[2,"total-elements"],pageSize:[2,"page-size"],rowHeight:[2,"row-height"],tableHeight:[2,"table-height"],defaultSort:[1,"default-sort"],loadedPages:[32],requestedPages:[32],renderStart:[32],renderEnd:[32],colWidths:[32],sortField:[32],sortDir:[32],init:[64],setPage:[64]}]]],["p-2a8cb2eb",[[2,"mrd-form",{layout:[16],locale:[1],values:[16],referenceHref:[1,"reference-href"],referenceClass:[1,"reference-class"],showCancel:[4,"show-cancel"],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},null,{values:[{valuesChanged:0}]}],[2,"mrd-field",{item:[16],locale:[1],value:[16]}],[2,"mrd-boolean-field",{name:[1],label:[1],value:[4],required:[4],disabled:[4],locale:[1],checked:[32]}],[2,"mrd-currency-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],amountDisplay:[32],currency:[32],error:[32]}],[2,"mrd-date-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-datetime-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-email-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-file-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],fileName:[32],isDragging:[32],error:[32]}],[2,"mrd-hyperlink-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-image-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],previewUrl:[32],fileName:[32],isDragging:[32],error:[32]}],[2,"mrd-list-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],multiple:[4],locale:[1],listItems:[16],error:[32],selected:[32]}],[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}],[2,"mrd-relation-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],relatedClass:[1,"related-class"],mostSignificantClass:[1,"most-significant-class"],displayType:[1,"display-type"],editBehavior:[1,"edit-behavior"],commonRelation:[1,"common-relation"],multiple:[4],dropdownValues:[16],value:[1],searchQuery:[32],searchResults:[32],allRecords:[32],isLoading:[32],selectedItems:[32],showResults:[32],error:[32],highlightedIndex:[32],setAllRecords:[64],setSearchResults:[64],setLoading:[64]}],[2,"mrd-text-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-textarea-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32],editorReady:[32]}],[2,"mrd-time-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}]]]],e))));
+import{p as e,b as l}from"./p-_tsCCkAi.js";export{s as setNonce}from"./p-_tsCCkAi.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((async e=>(await a(),l([["p-27f6947a",[[2,"mrd-table",{columns:[16],rows:[16],locale:[1],totalElements:[2,"total-elements"],pageSize:[2,"page-size"],rowHeight:[2,"row-height"],tableHeight:[2,"table-height"],defaultSort:[1,"default-sort"],actions:[16],loadedPages:[32],requestedPages:[32],renderStart:[32],renderEnd:[32],colWidths:[32],sortField:[32],sortDir:[32],filterMode:[32],activeFilters:[32],openFilterCol:[32],pendingFilter:[32],popupPos:[32],scrollTop:[32],init:[64],setPage:[64]},null,{totalElements:[{totalElementsChanged:0}]}]]],["p-ca5f9919",[[2,"mrd-form",{layout:[16],locale:[1],values:[16],referenceHref:[1,"reference-href"],referenceClass:[1,"reference-class"],showCancel:[4,"show-cancel"],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},null,{values:[{valuesChanged:0}]}],[2,"mrd-field",{item:[16],locale:[1],value:[16]}],[2,"mrd-boolean-field",{name:[1],label:[1],value:[4],required:[4],disabled:[4],locale:[1],checked:[32]}],[2,"mrd-currency-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],amountDisplay:[32],currency:[32],error:[32]}],[2,"mrd-date-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-datetime-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-email-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-file-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],fileName:[32],isDragging:[32],uploading:[32],error:[32]},null,{value:[{valueChanged:0}]}],[2,"mrd-hyperlink-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-image-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],accept:[1],maxSize:[2,"max-size"],previewUrl:[32],fileName:[32],isDragging:[32],uploading:[32],error:[32]},null,{value:[{valueChanged:0}]}],[2,"mrd-list-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],multiple:[4],locale:[1],listItems:[16],error:[32],selected:[32]}],[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}],[2,"mrd-relation-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],relatedClass:[1,"related-class"],mostSignificantClass:[1,"most-significant-class"],displayType:[1,"display-type"],editBehavior:[1,"edit-behavior"],commonRelation:[1,"common-relation"],multiple:[4],dropdownValues:[16],value:[1],searchQuery:[32],searchResults:[32],allRecords:[32],isLoading:[32],selectedItems:[32],showResults:[32],error:[32],highlightedIndex:[32],setAllRecords:[64],setSearchResults:[64],setLoading:[64]}],[2,"mrd-text-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}],[2,"mrd-textarea-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32],editorReady:[32]}],[2,"mrd-time-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],locale:[1],error:[32]}]]]],e))));