1087
Views
12
Comments
Solved
Table Records with dynamic columns and rows
Question

Hi guys,

I look for a solution to create a table records with dynamic number of columns and rows from a 2D array similar to below image.


Do you guys have any suggestion for this? Thanks in advanced.

mvp_badge
MVP
Rank: #15
Solution

Hi Eucliwood,

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL" 

Regards

Marcelo

Rank: #10909

Fábio Fantato wrote:

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.

Marcelo Ferreira wrote:

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL" 

Hi Fábio and Marcelo, 

Thank you for the input.

Looks like both the ways to approach the issue is to create the table using JSON. I have tested the two components, though I have trouble when trying to merge adjacent cells in the table.

Let's say I want all adjacent cells to be merged together when they have the same value. What should I do to achieve this using JSON?


mvp_badge
MVP
Rank: #6

Hi Eucliwood,

If you know the MAXIMUM number of columns, you can use a Table Records and HIDE columns in the browser using Display NONE (CSS). The downside is that the columns will be in the HTML.

The alternative is to use lists inside lists. For that, you will probably have a list of "lines" and then, for each line, a list of columns. Your data model can simplify or make this more complex, of course, as implementation will depend on it.

Cheers.

mvp_badge
MVP
Rank: #2

Hi Eucliwood,

Alternatively, if you are on Platform 11, you could take a look at the Data Grid Forge component.

EDIT: Correction, it's also available for P10.

Rank: #10909

Thank you all for the input.


Eduardo Jauch wrote:

Hi Eucliwood,

If you know the MAXIMUM number of columns, you can use a Table Records and HIDE columns in the browser using Display NONE (CSS). The downside is that the columns will be in the HTML.

The alternative is to use lists inside lists. For that, you will probably have a list of "lines" and then, for each line, a list of columns. Your data model can simplify or make this more complex, of course, as implementation will depend on it.

Cheers.

Hi Eduardo,

I thought about this too. But as I will not know the maximum number of columns, I will be unable to create a Table Records.

Your suggestion of using lists inside lists is great. I will test to see if I can implement it this way.


Kilian Hekhuis wrote:

Hi Eucliwood,

Alternatively, if you are on Platform 11, you could take a look at the Data Grid Forge component.

EDIT: Correction, it's also available for P10.

Hi Kilian,

My understanding for Data Grid component is you have to know the number of columns you are going to create. Is it true?

mvp_badge
MVP
Rank: #2

Eucliwood wrote:

My understanding for Data Grid component is you have to know the number of columns you are going to create. Is it true?

Yes, you seem to be right. I hadn't looked at the component in detail, and it seems the columns need to be set at design time. However, they do have a "Hide" Property that seems to make it easier to hide columns than when using Table Records.


mvp_badge
MVP
Rank: #6

Didn't used it yet, always forgetting... 

It allows to create columns dynamically? 

mvp_badge
MVP
Rank: #47

Hi Eucliwood,


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.

See the image below:


mvp_badge
MVP
Rank: #15
Solution

Hi Eucliwood,

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL" 

Regards

Marcelo

Rank: #10909

Fábio Fantato wrote:

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.

Marcelo Ferreira wrote:

With data grid component you don't need to know which columns you want to use. The GridContainer has a property called "AutoGenerateColumns" that generate the columns needed based on the JSON that you output in the rest service you use on the variable "RestURL" 

Hi Fábio and Marcelo, 

Thank you for the input.

Looks like both the ways to approach the issue is to create the table using JSON. I have tested the two components, though I have trouble when trying to merge adjacent cells in the table.

Let's say I want all adjacent cells to be merged together when they have the same value. What should I do to achieve this using JSON?


mvp_badge
MVP
Rank: #2

Cool! Thanks Marcelo.

in Alternative to what was already suggested, I would suggest a less efficient way but more versatile.


Create a Table Record with 2 Cols, 1  col with the main list and another col that will take an webblock (since you cannot have a list inside a list). That webblock will receive the parameter from the Table Record and will create the data for that "line" inside the webblock.


How do you draw the cols dynamically? you add an expression inside the list record with "Escape content = no" and create your tags with the values inside the List Record 


Eg:

"</td><td class =""table class i forgot the name"" ">"+ListRecord.List.Current.Value+"</td>"


With this line it will create as much cols as values you have in your list Record. 


For the header you have to do the same process but with the header Names.


Last question and probably the more anoying one is have the same size in the header and in the respective col. Well for that i used percentages. 


I hope this helped.


BR

mvp_badge
MVP
Rank: #15

Hi,

To be honest never try to do that but on this sample there are a couple of examples that do that. check if any of them helps you.

Regards,

Marcelo

Hi friends

Marcelo as you had suggested, i was looking for a Grid Container but I didn't find the propoerty "AutoGenerateColumns". I'm developing in Reactive Web right now...

Capturar.PNG