complex-table-header-builder
Reactive icon

Complex Table Header Builder

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 03 January 2022
 by 
4.5
 (2 ratings)
complex-table-header-builder

Complex Table Header Builder

Details
This application demonstrate how we can build complex table header with the use of table_header entity and simple jquery.
Read more

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"}]



Release notes (1.0.0)
Reviews (2)
by 
2022-01-03
in version 1.0.0
very useful for insurance benefit illustration or loan amortization sheet use case. However, i see there is a bug which is posing difficulty in first load. Jquery is not loaded on time to run your jquery. However, we got the hack to create complex header.
by 
2022-01-03
in version 1.0.0
Amazing forge component! Very useful for static table .
Team
Other assets in this category