Table Records with dynamic columns and rows

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.

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 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.

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

It allows to create columns dynamically? 

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?

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.


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:


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

Solution

Cool! Thanks Marcelo.

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?


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

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