Add row name to cde table component

Question

I have a table component in my Pentaho CDE dashboard and data source is sql. I want to make a table like this

I need to add a column as row names for this table and a row on the top of column header. I found a method here: Table Component SubColumns to add header, but how can i add a column before other columns?

Óscar Gómez Alcañiz Óscar Gómez Alcañiz · Accepted Answer · 2016-07-13T12:07:52

I think a clever way to do the extra column part would be by modifying the query result object after it's retrieved from the query, so that you add the columns and rows as needed. You can do this in the PostFetch callback function, which takes the query result object as first argument:

function yourTableComponentPostFetch(queryResult) {
    // Let's say you have an array of row names
    var rowNames = ['Title1', 'Title2', ... ];

    // Add a "title" column for every row
    queryResult.resultset.forEach(function (row, idx) {
        // Push it at the beginning of the row array
        row.unshift(rowNames[idx]);
    });

    // Change metadata description of columns to reflect this new structure
    queryResult.metadata.unshift({
        colName: 'Title', 
        colIndex: -1, // this makes sense when reindexing columns below ;)
        colType: 'String'
    });

    // One last re-indexing of metadata column descriptions
    queryResult.metadata.forEach(function (column, idx) {
        // The title added column will be 0, and the rest will rearrange
        column.colIndex++; 
    });
}

The only tricky part is the part about modifying the metadata since you are effectively changing the structure of the dataset, and making sure the queryResult object is updated in-place instead of just changing its reference (queryResult = myNewQueryResult would not work), but the code I proposed should do the trick.

Add row name to cde table component

1 Answers