topic Table rows in two colors alternating in App Development

Table rows in two colors alternating

Zeta — Fri, 13 Dec 2024 10:02:10 GMT

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

Re: Table rows in two colors alternating

RégisBer — Fri, 13 Dec 2024 10:23:11 GMT

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

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

Regards,

Re: Table rows in two colors alternating

MatheusC — Fri, 13 Dec 2024 18:37:36 GMT

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

Re: Table rows in two colors alternating

Zeta — Fri, 13 Dec 2024 14:05:36 GMT

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

Re: Table rows in two colors alternating

Escudeiro — Fri, 13 Dec 2024 14:39:12 GMT

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

Re: Table rows in two colors alternating

Zeta — Fri, 13 Dec 2024 16:42:10 GMT

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?

Re: Table rows in two colors alternating

MatheusC — Fri, 13 Dec 2024 18:54:23 GMT

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

Re: Table rows in two colors alternating

chriscammers — Fri, 13 Dec 2024 19:48:05 GMT

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