Expanding Tables (DataTables)

Table Expansion

Table Expansion refers to the ability of a table to open up an extra block and display additional data about the selected row.

For example, a table might be showing the details of the different departments in a company and when a department is selected, a new row “opens up” or “expands” to show another table containing the names of the employees in that department.

ScreenShot 1:



Here you can see that the list of departments is given in a tabular form along with its department id.

ScreenShot 2:


Here when the user clicks on the department name (“HQ General Management”), a new row opens up and gives another table containing the details of the people working in that department.


How is it Done?

There are 3 components created to make this type of table possible

  1. Outer Table (tabularChart)
  2. Inner Table (innerTabularChart)
  3. Custom Script (runScript)

The first two components are alotted <div> tags in the .html file while the script is needed to display the Inner Table inside the outer table at the desired location.

The Outer Chart is created by calling “chart 1” from the tabular.efwvf file. For the creation of the initial table we have used a hard coded SQL query in dataConn.efwd file since this is a test example.

We add a “on click()” function to the “$(document).ready(function () {  /*script*/});

This “on click”function recognises where the click is occuring, i.e- on which department name. This deparment name is then passed onto the “chart 2” creation script where the new table (Inner Table) is dynamically created by fetching the data from the database, based on the “department name”.

Here, the “opened row” is also alloted a new id and class name, making it identifiable for later references.

Now this second table is placed at the <div> tag with the id “innerTabularChart”, but it is not made visible.

Here is the tricky section, the code doesnt display the Inner Table on the screen but it is present in the memory awaiting command that will display it on the screen.

At this point, the Custom Script is executed. The job of this script is to “Clone” (using .clone()) the data held in the <div> tag called “innerTabularChart” and display it in the “opened up” row.

Once the inner table is displayed inside the opened/expanded row, it is VERY important to empty the initial <div> tag of the .html file so that the new table doen not get displayed as a drill-down chart.

After the “innerTabluarChart” wiped clean, all the components are updated. Now we finally get the result of expanding tables as seen in the above screenshots.

Important :

If user wishes to add more than one table in the “expanded” row, It can be done by splitting the <div id=”innerTabularChart”>  tag and writing the appropriate custom script for displaying the second table.

html code:

<div class=”row”>
<div class=”container”>
<div class=”col-sm-11″ style=”padding-left:30px;”>
<h2 id=”heading”>Table Expansion Example</h2>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-12″ id= “tabularChart”></div>
<div class=”col-sm-12″ id=”innerTabularChart” style=”display: none;” ></div>


//Custom script


Create a row grouping in Table Component (Jasper Report)

Create a row grouping in Table Component (Jasper)

Consider an example currently you are showing the data as shown in below using tabular component.

State Person Name Tax Amount
Iowa PQR 10,000
Iowa XYZ 15,248
Utah ABC 14,245
Utah DEF 13,256
Wisconsin GHI 12,789
Wisconsin JKL 11,100

But If you want to show the data as shown in the table.

State Person Name Tax Amount
PQR 10,000
XYZ 15,248
Total 25,248
ABC 14,245
DEF 13,256
Total 27,501
GHI 12,789
JKL 11,100
Total 23,889

For this you need to follow these simple steps.

  1. Create a group in the Groups property of data set (This data set is used by table component).
    Say Country is the name of the group and then put the expression.
  2. Note : Sometime in the Jasper Studio 6.0.1 the name of the group does not change in that case you need to keep the by default name to the group.

  3. After creating the Group you can see the two new bands added to table component. You can see in the figure.
  4. groupShow

  5. Create a cell in Group header and put group expression in it (in my case $F{country}).
  6. In order to calculate the total group wise you need to create a variable with reset type your group name (Country) otherwise you will not get the correct result.
  7. Put this variable (say total) in the group footer.

Note: You can create multiple group in a table.