How to merge cell headers in a Reactive table
Question
Application Type
Reactive
Service Studio Version
11.53.6 (Build 60879)

Hi all,

I need help with a simple and useful functionality that does not exist in Reactive apps for the Table widget: split and merge cells.

This screenshot is in a Traditional app:

For Reactive, I´m not able to replicate the same as Outsystems has for Traditional apps.

Why I need this? because I want to merge some cells in our Table widget, due the amount of data, please check:

I want to merge the header cell using the name highlighted in red: ACTUAL and BUDGET. Why? because as you can see the width for Actual and Budget is the same as Variance, however if we merge the name, we will be able to have more space available for other values, I mean, in the green brackground we will be able to have Variance data and other value aswell if we perform the merge.

We have tried creating webblocks, but is not the same as we have for traditional apps. Is more complicated and not user friendly.

Any help will be really appreciated.

Thanks and kind regards,

David Novoa.

Hi! 

In traditional  you have all those options in only in the "Table" widget that no longer exists. 

You can simulate that with a structure like 

that gives a result like 

best regards

Graça

Missed an image , remember to put the Attribute Colspan in the columns to merge

Hi David, 
Here is the answer in another thread: https://www.outsystems.com/forums/discussion/36072/merge-cell-table-record/#Post129039


Here is a quick dirty solution, mind you this is not standard functionality so you will have to commit to several losses of standard Outssytems functionality to have a table merge vertically cells with equal values!


 1- Create your screen.

 2- Create your table.

 3- In the column cell you wish to merge equal values do an inline as follows: data-id = "key" + value of the current cell!

 4- In the screen insert an expression anywhere

 5- write the following in the expression 

"//merge cells in key columnfunction 
mergerKey()
 { 
           // prevents the same attribute is used more than once Ip    
var idA = [];     

// finds all cells id column Key    
$('td[data-id^=""key""]').each(function () {      
          var id = $(this).attr('data-id');                 // prevents the same attribute is used more than once IIp     
   if ($.inArray(id, idA) == -1) {    
        idA.push(id);   
                     // finds all cells that have the same data-id attribute    
        var $td = $('td[data-id=""' + id + '""]');   

                     //counts the number of cells with the same data-id  

          var count = $td.size();    

        if (count > 1) {     

        //If there is more than one         

       //then merging          

                                      $td.not(':eq(0)').remove();     

           $td.attr('rowspan', count);     

       } 

       } 

   })}mergerKey();"


6- Set the expression property: escape content to 'No".

 7- Make sure only the column that is being merged has the list sort column available, you won't be able to sort by other columns!


Hi @Volodymyr Tkachenko, we have been reviewing that post, but it´s from 2018. 

For me this not makes sense that in Outsystems Reactive (the future of the company) does not allow/remove useful functionalities.

I hope that somebody from Outsytems can suggest us a better solution to something simple like merge/split cells in a table, without using JS or HTML.

Thanks for your response and kind regards,

David Novoa.

Hi @Maria da Graça Peixoto thanks for your suggestion, however, that solution is not enough for us and is not user friendly as we expect.

Kind regards,

David Novoa.

Well, you can put the resurrection of the "Table" widget at "idea" list

https://www.outsystems.com/ideas/?page=1&q=&t=&s=&c=&o=&scat=ideas


Thanks, I have created the idea.

Kind regards,

David Novoa.

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