How to Create Expandable and Collapsible Rows in a Custom Table in OutSystems

Back to Forums

Nguyen Duc Binh

Question

Reactive

Application Type

Reactive

Hi everyone,

I'm trying to create a custom table in OutSystems that allows rows to expand and collapse, similar to the example shown in the image below. I want users to be able to click on specific rows to expand them and reveal additional information, and then collapse them when they click again.

Features I’d like to implement:

The main table rows should display summary data.
Each row should be clickable to expand and show nested rows with more detailed data.
Ability to collapse expanded rows when needed, similar to how it works in hierarchical or drill-down tables.

Image examp:

Questions:

Are there built-in components or patterns in OutSystems that support this kind of table structure?
If not, what would be the best approach to implement this? Would it require custom CSS/JavaScript?
Any guidance or example code on how to handle the click events for expanding and collapsing rows?

30 Oct 2024

Mostafa Othman

Champion

Hello,

Please check following posts which may help you implementing this table:

https://www.outsystems.com/forums/discussion/80599/outsystems-data-grid-how-to-extend-data-grid-to-expand-collapse-row-to-show-det/

https://www.outsystems.com/forums/discussion/89186/outsystems-data-grid-web-where-is-extend-datagrid-to-expand-collapse-row-detai/

30 Oct 2024

Sazid

Hi Nguyen Duc Binh

There are no built-in components that fully support your use case; however, this functionality can be easily achieved using a List widget and a few Web Blocks. Please find the attached OML file, which demonstrates the approach. Note that you will need to update the CSS and other styling to achieve your desired look and feel, as this OML is meant to demonstrate the basic functionality. Additionally, please note that column alignment adjustments will be needed.

Exapandable_Row.oml

30 Oct 2024

Rúben Meireles

Hi Nguyen,

You can also try the component Expandable Table Row:
https://www.outsystems.com/forge/component-overview/10423/expandable-table-row-o11

Cheers,

Rúben

30 Oct 2024

Kiet Phan

Champion

Hi @Nguyen Duc Binh,

TreeGrid can be achieved by using built-in DataGrid component of Outsystems. But it's not officially supported by Outsystems.

Since DataGrid is based on Wijimo Grid which supports built-in tree structure, we can use Javascript to activate the tree. The keyword is childItemsPath, you can search in this forum with that keyword.

I have done recently project with tree based on DataGrid needed from client.