CODEWITHSUNDEEP
pentaho-cde
user11828716
user11828716

Reputation:

Changing table style on Pentaho CDE?

I just started to use Pentaho, and since I know only basics of CSS&JS, I have troubles on changing table style on CDE. While doing some research, I found some use JS functions on draw function, some on post execution, some just add css ressource. So I'm very confused.

First of all, I'd like to put columns' names in center(now they are on left).

Then change the background color of columns' names fields (so the first row of the table).

Finally add the table's name on the top of the table, so make it as the first row of the table.

Please can anyone help me ? Thanks in advance!!

Upvotes: 0

Views: 1415

Answers (1)

nsousa
nsousa

Reputation: 4544

You will need different tweaks for different things.

  1. Styling the table, such as centering cells, adding bold text, increasing font sizes, changing colours, etc: do it in CSS. The best way is to first open the browser's inspector to see what styles are being applied (there are many CSS files overlapping each other in the stack), and then determining how to refer to the HTML element you need to style. For example, to change all numeric values to be centered, you could use something like .tableComponent table tbody td.numeric{ text-align: center} (actual CSS selector will vary with your Pentaho version, so use the browser inspector to identify it)

  2. Adding the arrows. I believe there's a cell style already implemented for that. Just change the column type property to trendArrow (you will need to specify types for all columns, so in the case of your screenshot they'd be string,numeric,numeric,numeric,trendArrow). To see other column types available open the Column types property and press the down arrow on your keyboard to open up the list of available options.

  3. drawFunction behaviour: this is used mostly to manipulate the table AFTER it's rendered. For example, replacing a url coming from the query (as a string) to a link to an external resource; You would use the drawFunction to run through the url column values and replacing that string value by a <a> HTML tag. Another example would be to add the table name on top. On the draw function you can use jQuery to inject a new row into the thead element.

  4. preExec and postExec: these code snippets are called before and after the table renders, resp. Ideal to do things such as:

    • change the number of columns dynamically depending on some parameter value (which would be done in the preExec;

    • disable the table altogether if some parameter is set to a certain value (if preExec returns false the component will not be executed

  5. postFetch: you didn't mention this one, but it's also interesting: use it if you want something to happen based on the query results (e.g., set a certain parameter in case there's no data returned, or depending on the number of records).

Upvotes: 0

Related Questions