A Mendix pluggable web widget that renders a matrix / pivot grid — rows come from one data source, columns from another, and cells from a third, mapped to their row and column by association. Based on the Apache-2.0 ClevrSolutions Dynamic Data Grid, retargeted to Mendix 11 / React 19 and extended by Olari.
- Advanced sorting — click a row-dimension or column-dimension header to cycle ascending → descending → none. Sorting calls
setSortOrderon that dimension's data source. - Native attribute filtering — configure a list of row/column filter attributes on the widget. It renders the right input per attribute type (text for strings/numbers, dropdown for enum/boolean, date picker for dates) and applies the combined condition with
setFilteron that dimension's data source. Conditions are built from the grid's own data-source attributes, so they always apply cleanly (no data-source-scoping errors). - Association (reference) filtering — a multi-select dropdown of options, styled like the Atlas combobox, for filtering rows/columns by a reference; position it anywhere among the other filters.
- Export to Excel — a toolbar button generates a real
.xlsxfile in the browser (SheetJS) from the currently-loaded matrix. An Export value expression per cell/row/column lets custom-content cells (badges etc.) export meaningful text. The button caption and a Mendix icon are configurable. - Toolbar show/hide — a Boolean expression and a dynamic class control the whole toolbar (filters + export), so it can be wired to your app's filter toggle.
Filter rows/columns by a reference with an Atlas-styled multi-select dropdown:
| Group | Key properties |
|---|---|
| Data source → Cell / Row / Column | The three data sources plus referenceRow / referenceColumn associations (unchanged from the base) |
| Sorting & Filtering | enableRowSort + rowSortAttribute, enableColumnSort + columnSortAttribute, rowFilterAttributes, columnFilterAttributes |
| Export | showExportButton, exportButtonCaption, exportFileName, exportPosition, cellExportValue, rowExportValue, columnExportValue |
Add entries to Row filters / Column filters, each pointing at an attribute of the row/column entity (plus an optional label and placeholder). Supported types: String, Enum, Boolean, Integer, Long, Decimal, AutoNumber, DateTime. String/number attributes filter by "contains"; enum/boolean render a dropdown; date renders a day picker. (These are native inputs, not the standard Mendix filter widgets — those can't be hosted in a custom grid because their conditions are bound to their own data source.)
Export serializes what is currently loaded (it respects paging). Cells shown as custom content export blank unless you set a Cell export value expression that returns the text to export.
npm install
npm run build # outputs olari.OlariDynamicMatrix.mpk into ../../Olari-main/widgets
npm run dev # watch build against a running Studio ProTarget: Mendix 11 / React 19, @mendix/pluggable-widgets-tools 11.x. shelljs is pinned to 0.8.5 (newer versions produce a broken .mpk missing the .xml/icons). packagePath is olari (a single segment — otherwise the widget JS 404s at runtime).
Column grouping, sticky headers / frozen columns, enhanced accessibility (ARIA grid semantics + keyboard navigation), and virtual scrolling for very large data sets.
Apache-2.0. See LICENSE and NOTICE for attribution to Clevr BV (base widget) and Mendix Technology B.V. (vendored filter-hosting code).


