Mendix Table with Dropdown/Expand Button for Extra Details

0
Hi everyone, I’m new to Mendix. I’d like to create a table similar to the one in the Mendix Marketplace (screenshot attached), where each row has a dropdown/expand button on the left. When clicked, it reveals additional details such as release notes, UUID, etc. Does anyone know which Mendix widget I should use to recreate this expandable row table?    
asked
4 answers
1

You can also use the accordion dynamically!

 

In the image below, I have a table (Data Grid2) that shows the items registered in the system, and just below, I have an accordion, simulating what we have in the marketplace:

image.png

 

In Mendix, a list view was configured to display all items registered in the database. Within the list view, I have an accordion configured with one expansion. All data displayed is dynamic, according to the item displayed in the list view:

image.png

 

image.png

 

Need some assistance with this setup?

answered
1

HI Ilias Papailia,

You can get the same expandable rows as the Mendix Marketplace by using Data Grid 2 with a custom row layout. Instead of the default columns, design the row yourself: put your main info in the first line and add a chevron button on the left.

That button simply toggles a boolean through a nanoflow, which controls whether an extra details section under the row is visible or hidden. With a bit of styling, like indenting the expanded part and switching the chevron icon, it looks almost identical to the Marketplace.

If you prefer accordion behavior where only one row stays open at a time, just adjust the nanoflow to collapse the others before expanding the selected one.

 

Regards 

Reemali

answered
0

Hi Ilias, Welcome to Mendix!

 

You can use the Accordion widget for this.

image.png

 

To configure it, simply access the settings after placing it on the screen and add Groups.

image.png

Each group represents a section on the screen.

image.png

To place the icon on the left side, access the widget settings again and go to the Visualization tab. Select the Left option and save.

image.png

 

Need any further help with that?

 

answered
0

Hi Édrien,

Thanks a lot for your answer. The Accordion widget explanation is super clear and helpful 🙏.

That said, I think Accordion works better for mostly static content. What I’m trying to achieve is closer to a table with expandable rows.

In fact, when I inspected the Mendix Marketplace page, I noticed that it seems to be using a Data Grid 2 setup for that behavior. The problem is, I’m not sure how they’ve configured it to support row expansion (with the dropdown/expand button on the left and additional details showing when expanded).

answered