Table rows in two colors alternating

[Zeta]

Dear Community,

Is there a way to display table rows in two colors, similar to the attached Excel version? (The color is unimportant)

I would be very grateful for any help.

Best regards

[RégisBer]

Hello, use this formulas in dimension and expression cell background-color

if(mod(RowNo(),2)=0,RGB(192,230,245),white())

Regards,

[MatheusC · Accepted solution]

Hi,  

You can do this by expressing the background color of each column with rowno() and mod(), as mentioned by @RégisBer  this will color your rows

if(mod(rowno(total),2)=0,'YourColor')

This will give you the result, but it may not be what, it will interfere with your dynamic sorting on your table columns

Another example would be the use of CSS, in the Multi KPI chart of custom objects, style tab

[data-tid="qv-st-row"]:nth-child(odd) {
background-color: #EAEAEA;
}

The point for this use is that it will not interfere with your dynamic classification, but if there are other tables also in this application, it will receive this customization.


- Regards, Matheus

[Zeta]

Thank you for the solution, but if I use this formula in Data -> Columns -> "Background color expression" the table can no longer be sorted by a measure column. Therefore, unfortunately, I cannot apply this solution.

How could I solve the problem?

Best regards

[Escudeiro]

The alternative seems to have already been informed above by @MatheusC 

[Zeta]

Thank you for the details on the sorting function. This should work in my case too. Unfortunately, the way the multi KPI is displayed is visually very unattractive. Is there no solution in the table chart?

[MatheusC]

The graphical solution would be the one presented with rowno(), Using Rowno() causes the sorting to be lost, hence the use of CSS.

In the case of Mult KPI, regarding visualization, you could try customizing the Backgroud color of the KPI graph itself and scaling the size in a way that makes it presentable.

However, these are currently the suggestions presented.

- Regards, Matheus

[chriscammers]

I did a quick test and I created a theme with no properties in it besides an entry in css. I believe this will use the default theme for all the other colors and properties.

The line I added in the css sets the alternate row colors. there are other properties you can set too but you'll have to inspect the objects in your browser dev tools to figure out the properties you want to manipulate.

This is the css code

tr.qv-st-data-row.ng-scope {
    background-color: #00d3ff1c;
}

I will admit I'm not exactly sure how this alternates rows since there is no conditional evaluation  but I imagine if I inspected the page a bit more closely I'd figure it out.

I hope this helps.

Chris