Matrix Widget for Mendix

Mendix Matrix Widget using Ant Design Table (MIT License). This is inspired on the Tree Table widget, but takes objects in the columns as well.

Show a reference table. Rows & Columns are Mendix objects, Entry objects are in between.

See test-project https://dynamictabletest-sandbox.mxapps.io/ for a live demo! On the bottom of this page there is a short explanation of the Domain model that is used. Test-project can be downloaded here

Missing features? See TODO at the bottom to see which items are still on the TODO list. If you find other bugs, please report this as an issue here

Features

• Display a matrix, where rows can have children, like a tree
• Data Sources: XPath, Microflow, Nanoflow
• Children: Get over reference, Microflow, Nanoflow
• Selection of rows (single, multi)
• Events: Click/Double click on Row, Column, Entry or empty field

This widget is about 600Kb uncompressed, so in your cloud deployment this widget should take about 160 Kb of network resources

Tested:

• IE11 & Edge
• Chrome
• Firefox
• Safari

Basic Configuration

1. Row

• Rows can be retrieved over XPath, Microflows and Nanoflows
• Your title can be purely text or HTML, either through the attribute or Nanoflow. Make sure you sanitize any user input to prevent XSS issues.

2. Row Children

• This is totally optional. If you want to do a tree structure, please configure the children
• You can either get these over a Child reference (see bottom for explanation) or through a Microflow/Nanoflow when using a hasChildren attribute

3. Column

• Columns can be retrieved over XPath, Microflows and Nanoflows
• Your title can be purely text or HTML, either through the attribute or Nanoflow. Make sure you sanitize any user input to prevent XSS issues.

4. Entries

• An Entry is an object that is linked to 1 row and 1 column
• An Entry has a title (see Column/Row title, same principle)
• In order to retrieve entries, you will need to use a Data Helper (see next)

5. Data Helper

• See explanation in the settings screen

6. Selection

7. Events

8. UI Settings

Demo project

https://dynamictabletest-sandbox.mxapps.io/

Domain Model

This demo uses the following domain model:

Short explanation:

• A table is placed inside a data view with a View object
• For the first rows, it will get all Rows that have a reference to View and _Root = true
• Every row might have children. You either get these over a reference Children, or when you use a Microflow and _hasChildren = true
• Column Objects also have a reference to View, although it is not entirely necessary
• When loading Entry object, the widget will create a EntryHelper object that has references to the shown Rows&Columns. This helper is passed down to a microflow/nanoflow
• When the Entry objects are loaded, the widget will place these in the correct field based on the reference to a Column/Row
• The SelectionHelper is used for selections, but this is based on the test-project and can be disregarded here.

Issues, suggestions and feature requests

Please report your issues here

TODO

The following things need to be further tested and/or fixed. Please don't report this as a bug if this is in the TODO list:

• Basic WebModeler preview + settings
• Add Icon attribute (from Tree Table)
• Add config for when context changes (reload rows?)
• Column overflow (first column)
• Header height
• Left column lock issue with header. This is when locking the left column, it can get out of sync with the header.
• Unit tests

License

Apache 2