Context:

Many time we have requirements where some report (read only) requires complex table header like one shown below. For ease of understanding, I will be using below requirement to navigate through the solution.

Solution Approach:

Imagine we have to build above table using html, code would look like below. Here we are going row by row and defining column of each row with rowspan and colspan.

<table style="width:100%">

  <tr>

    <td colspan="2">Tenure</td>

    <td colspan="4">Interest Rate</td>

    <td rowspan="3">Tax Saving</td>

  </tr>

  <tr>

            <td rowspan="2">Range start</td>

            <td rowspan="2">Range end</td>

            <td colspan="2">Less than 50 Years</td>

            <td colspan="2">More than 50 Years</td>

  </tr>

  <tr>

            <td>Less than 2 Cr</td>

            <td>More than 2 Cr</td>

            <td>Less than 2 Cr</td>

            <td>More than 2 Cr</td>

  </tr>

  <tr>

  </tr>

</table>

Outsystems Implementation:

Step 1: Entity to hold header structure

Context – if you have several complex table requirements, we can filter header elements for required context.

Row – row number like 1 for first row, 2 for second row …

column_seq – placement of column in each row, like row 1 column 1 – 1, row 1 column 2 – 2, row 2 column 1  - 1 and so on…

name – titles of each header element (to be displayed)

height – column span of each cell (<td colspan=”2”>)

width – row span of each cell (<td rowspan=”3”>)

For above example below is the table:

Step 2: Retrieve the table structure using Outsystems aggregate:

Filter – context

Sorting by row and then column seq

Step 3: JSONIFY the table structure and create table using jquery code (recommended on :

Points to remember:

• Include OutsystemsUI Jquery as Required Javascript in dependency
• Style table, td and th appropriately for your requirement (this needs to be done at web block level or screen level to avoid its impact on other screen of application)

table.mydiv {

  width: 100%;

  align: center;

  border: 1px solid black;

  border-collapse: collapse;

}

.mydiv th,

.mydiv td {

  text-align: center;

  border: 1px solid black;

  border-collapse: collapse;

}

• During debugging ensure data retrieved from header table and post JSONifying looks like this:

[{"row":1,"col_seq":1,"name":"Tenure","height":"1","width":"2"}

,{"row":1,"col_seq":2,"name":"Interest Rate","height":"1","width":"4"}

,{"row":1,"col_seq":3,"name":"Tax Saving","height":"3","width":"1"}

,{"row":2,"col_seq":1,"name":"Range start","height":"2","width":"1"}

,{"row":2,"col_seq":2,"name":"Range end","height":"2","width":"1"}

,{"row":2,"col_seq":3,"name":"Less 50 Years","height":"1","width":"2" }

,{"row":2,"col_seq":4,"name":"More 50 Years","height":"1","width":"2"}

,{"row":3,"col_seq":1,"name":"Less than 2 Cr","height":"1","width":"1"}

,{"row":3,"col_seq":2,"name":"More than 2 Cr","height":"1","width":"1"}

,{"row":3,"col_seq":3,"name":"Less than 2 Cr","height":"1","width":"1"}

,{"row":3,"col_seq":4,"name":"More than 2 Cr","height":"1","width":"1"}]