View Full Version : Table Component SubColumns

04-04-2013, 05:26 AM
Hi all,
i want to create a table component and obtain the same result as the image on attachment.
In particular, i want a main column and 4 subcolumns for each one.
Is it possible?

Thanks in advance.


04-04-2013, 06:28 AM
Ciao marcolino,
if you use CDE and "mdx over mondrianJndi" as datasource type for your table component,
the result of your query should be a table with this header row:

AreaTerritoriale | Latenza Media/TIM | Latenza Media/Vodafone | ... | Through. Download Medio/TIM | Through. Download Medio/Vodafone | ...

So you can use javascript in Draw Function or Post Execution Function to read and update the content of the header cells and create another header row (at the top of the table) with the right content and colspans.
The idea is to split by "/" the text of the header cells to separate the measure name and the member name.

04-04-2013, 06:31 AM
Hi lukolap,
thanks for the answer!!
Can you post any examples (for access data objects and generate an header row)?


04-04-2013, 09:51 AM
I consider that the number of subcolumns is fixed (4 in your case).

In PostExecution:

function() {
var cells = $( "#" + this.htmlObject + " thead th" );
cells.each(function(i, v) {
if( i > 0 ) { //skip the first cell of each row
var cell = $( v );
var originalText = cell.text();
var originalTextParts = originalText.split( "/" );
cell.text( originalTextParts[1] ); //write the second part (the mobile company in your case)

var newHeaderRow = "<tr><th></th><th colspan='4'>Latenza Media</th><th colspan='4'>Through. Download Medio</th></tr>";
$( "#" + this.htmlObject + " thead" ).prepend( newHeaderRow );

//add some style...
$( "#" + this.htmlObject + " thead th" ).css( "border", "1px solid #DEDEDE" ).css( "background", "#F9F9F9" );
$( "#" + this.htmlObject + " thead th:eq(0)" ).css( "border", "0px solid #DEDEDE" ).css( "background", "#FFFFFF" ); //hide first cell

04-04-2013, 10:19 AM

I appreciated it!!

Some last questions.

1. If i want to access to the cell value (the numeric value)?
2. I have to make scrollable in horizontal way the table. Is it possible?

Thanks very much for the help!!

04-04-2013, 04:49 PM
I'm glad that I've been helpful...

1) Generally I access to the numeric values in Draw Function in this way:

function() {
var oTable = $( "#" + this.htmlObject + " table" ).dataTable();
var rows = $( "#" + this.htmlObject + " tbody tr" );

rows.each(function() { //loop on the rows of the table body
var aData = oTable.fnGetData( this ); //an array representing a row of the table

//aData[0] contains the name of AreaTerritoriale

var value1 = parseFloat( aData[1] ); //in your case is the value of Latenza Media - TIM

// now you can use these values in calculations or just to rewrite them with the correct formatting as follows

$( "td:eq(1)", this ).html( yourFormattingFunction( value1 ) );

2) You can add a scrollbar to the div (htmlObject) that contains the table, using the CSS property overflow-x with value auto (scrollbar visible when necessary)or scroll (scrollbar always visible)

Buon lavoro

04-05-2013, 09:55 AM
Just a quick suggestion:

CDF has these handy extensions called addIns which, for a Table Component, essentially implement new column types, which behind the scenes do something very similar to what lukolap suggested in the draw function. There are several colType addIns already defined in CDF but you can always create your custom ones.

Check out the addIns reference dashboard in:

Plugin Samples/CDE/CDE Reference/AddIn Reference

To use the already available colType addIns you only need to know how to set addIn options, mentioned in the topics "Setting Options" and "Setting Defaults" of the reference, and how to pick an addIn for a given column, which is done easily in CDE by specifying the column type for the target column as the addIn name (for example, dataBar instead of string or numeric). For pre-defined addIns you should get a drop down list.

Hope it helps!


01-24-2016, 07:57 AM
hi there... Would you please help me on how to add a column with merged cells to the cde table component. I want to create a column as the 1st column of my table exactly like the row explained in this thread.

This doesn't work properly:
for (i = 0; i < mytbl.rows.length; i++) {
var x = rows(i).insertCell(0);

thanks in advance for any advice