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>
<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>
<td>Less than 2 Cr</td>
<td>More than 2 Cr</td>
</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:
table.mydiv {
width: 100%;
align: center;
border: 1px solid black;
border-collapse: collapse;
}
.mydiv th,
.mydiv td {
text-align: center;
[{"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"}]