Skip to content

Repository files navigation

Olari Dynamic Matrix

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.

Matrix grid with sorting, filtering and Excel export

Added features (Phase 1)

  • Advanced sorting — click a row-dimension or column-dimension header to cycle ascending → descending → none. Sorting calls setSortOrder on 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 setFilter on 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 .xlsx file 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.

Screenshots

Filter rows/columns by a reference with an Atlas-styled multi-select dropdown:

Association multi-select filter

Configuration summary

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

Using the filters

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 values & limitations

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.

Build

npm install
npm run build      # outputs olari.OlariDynamicMatrix.mpk into ../../Olari-main/widgets
npm run dev        # watch build against a running Studio Pro

Target: 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).

Roadmap (Phase 2)

Column grouping, sticky headers / frozen columns, enhanced accessibility (ARIA grid semantics + keyboard navigation), and virtual scrolling for very large data sets.

License

Apache-2.0. See LICENSE and NOTICE for attribution to Clevr BV (base widget) and Mendix Technology B.V. (vendored filter-hosting code).

About

Mendix 11 / React 19 matrix-pivot grid widget: advanced row/column sorting, native + association filtering, and client-side Excel export. Apache-2.0, forked from ClevrSolutions Dynamic Data Grid.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages