Applying styling to Pivot Table using Table Transformer and CSS

[Green_ Desmond]

I'm using a pivot table, which works nicely to get me the data I need. But I don't like the grey look, and want to change the formatting of the table.

I've wrapped the pivot table in a Table Transformer, but can't figure out how to use the Stylesheet configuration of this macro to adapt the table to how I want it to look.

Specifically, I would like the first row 'Automation status' and 'Count' to remain in bold but the background to be the standard Light Blue 35% background.

Next, I would like the first column in the next rows to not have a grey background, and probably just normal text, not bold. That is, each of the cells 'Automated', 'Not Automated' and 'Total'.

When I try to set what I think is the right CSS, the combinations of TH or TR tags used in the pivot table seems to mean I am always getting it wrong!

[Stiltsoft support]

Hi @Green_ Desmond ,

As you've mentioned the Pivot Table and Table Transformer macros, I suppose you use our Table Filter, Charts & Spreadsheets for Confluence app.

If you have questions regarding the app, you may refer to our support portal.

Meanwhile, you may read about the styling here: 

https://docs.stiltsoft.com/tfac/cloud/advanced-table-cells-formatting-58426218.html

https://docs.stiltsoft.com/tfac/cloud/stylesheet-tab-altering-table-display-with-css-172036808.html

[Green_ Desmond]

Yes, funnily enough the second page was what I referred to in my attempts to get this working. Just using one of the examples and recognising that the colours are awful, I still can't work out how to apply this to my particular use case.

th {background-color:red;} /* Adjusts the background color of the header row */

tr {background-color:yellow;} /* Adjusts the background color of the table rows */

As I said, the pivot table seems to introduce TH elements, but I want the actual first row to have the style I set out, while the other TH elements in rows 2, 3, 4 (or more) to just be unbolded text and no background colour.

So my question remains: when wrapping a pivot table with a table transformer; how do I make that first row with 'Automation status' and 'Count' with a Light Blue 35% background, while the other cells in the first column of all other rows (presumably also underlying TH's) without any color background, and not bold text?

[Stiltsoft support]

You may try to use the second option with the FORMATWIKI then.

[Green_ Desmond]

Ok, I can try. I've taken this approach in some other cases, until I later found a really neat and easy (and actually proved to be simpler) CSS solution. Probably more maintainable too. In such cases, I wished I had used the CSS approach instead of the FORMATWIKI.

I was hoping for some CSS magic or a relatively straightforward answer on here, to that end.

[Green_ Desmond]

I did end up solving it with a combination of using a pre-formatted second table (just the header row), merged in a table transformer with the pivot table and while also using FORMATWIKI to format the row data. That works perfectly. 

I still can’t help wondering if the right line or two of CSS would have been better and easier?

[Stiltsoft support]

In your example you work not with a regular table but with an outcome of the Pivot Table macro where the first column has the header tags <th> in html format.

That's why th {background-color:red;} colors in red both the header row and the first column as is depicted on the screenshot.

As you want to treat the first column as simple cells, you may use the FORMATWIKI function to color these cells.

Or you may use the CSS code and modify the standard SELECT * FROM T* query as 

SELECT FORMATWIKI(T1.'Automation status') AS 'Automation status', T1.'Count' FROM T*.

The latter query will turn the first column into a header and simple cells with data.

[Stiltsoft support]

Hi @Green_ Desmond ,

An update from our developers regarding the use case:

You may refer to the first row of the pivot table ("Automation status" and "Count" cells) as 

thead > tr:first-child > * {background-color:red;}

or

.tablesorter-headerRow>th {background-color:red;}

To refer to table rows while treating the first column as a simple column and not a header column, you may use the following CSS

tbody > tr > * {background-color: yellow;} - to color all the rows at once

or

tbody > tr:nth-child(2) > * { background-color: yellow;} - to color rows with specific indexes