691
Views
8
Comments
how to create Dynamic Table columns and row in reactive app?
Question
Application Type
Reactive

Dear Team, 


I have to create a Table with a view like below :

Al the data are present in different entity such Department, Quarters And location My use case is to create a table so that the data can be viewed as per above picture and it can be changed on the select of depat. from the drop down.


also if Q4 data added so the table will show the Q4 data also be shown in the table.

Thanks in advance.

2022-06-23 06-21-50
Siddharth Vyas

Hi Asif,
You can use table widget and right click on table and select Insert Widget-->Editable Table. I hope this will help you

UserImage.jpg
Asif khan

Hello Siddharth,

Thanks for the reply, as I am creating reactive app editable table is not available.


regards

2022-06-23 06-21-50
Siddharth Vyas

Hi Asif,
There are two ways.

This could also be achieved using CSS grid layout, but then it would not be a table. 

or

Did you try this component https://www.outsystems.com/forge/component-overview/3669/dynamictable ? It is simpler than DataGrid, but for your usecase maybe it could work.
Please let me know if that works for you.

UserImage.jpg
Asif khan

Hey Sid, 

Great thanks, for the reply and solution I really appreciate, but as i mentioned I am creating a reactive and the above Dynamic table is for Traditional App. But will try he Css approach and will let you know.

Regards,

Asif

2022-06-23 06-21-50
Siddharth Vyas

Thanks Asif. 

Please let me know if it works 

2025-04-10 11-25-12
Diogo Reis

Hi Asif,


Recently I had the same problem. Wanted a dynamic table and there was no widget in Reactive that could do that. 

What I did was create a table from the root. Using the HTML Element Widget, you can build table using HTML. 

First of all, I put a HTML Element and named it as "table" whose class is "table".

It is necessary to "open" the table's header.

For each header row, I had to create a specific structure to pass the information that I wanted. In this case, my header is a list of cells, so I used the list widget and named his Tag as "tr".

For each cell, I used the structure to pass the information of how many columns the cell should occupy.


For the body rows and cells, the process is the same.

I used this technique to build a gantt table:

I hope I could help.

2024-02-08 13-00-21
Thales Ferraz

You are the best!

2025-04-10 11-25-12
Diogo Reis

Thank you Thales.

Soon, it will be released a component able to do that

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.