Our customers are having a UI issue using Good Data table visualizations when there are lots of columns and they need to side scroll to the right, which then makes it difficult to know which row they are looking at because the label columns disappear. See the attached screen recording with dummy data showing what I mean. I'm wondering if there is a way to do one or both of the following ideas to improve this UI. 1. Is there a way to make the rows alternate in color? I see there is an article for how to do this in Good Data classic, but it is not clear in the docs how this could be applied to Good Data Cloud: https://help.gooddata.com/classic/en/dashboards-and-insights/reports/working-with-tables/add-color-formatting-to-tables/ 2. Is there a way to pin the first label column so it is always showing when you scroll to the right? I can't find any mention of this in the builder or the docs. Any help here would be much appreciated.

Hi Adam, unfortunately we do not support the alternating row colours, or the option for pinning columns. However, I will be happy to mark this thread as “Product feedback”. on your behalf which will then highlight this thread to our Product team who will then review this and consider for future development

🎉 New note created.

Hi @Adam Steele, for the alternating row colours, if you happen to embed the dashboard, you can quite easily override the styles applied for table visuals. These are the CSS classes, that enables to display as in attached image:

.ag-row {  /* odd table row */
            background: rgb(128, 82, 134);
        }
        

        .gd-pivot-table-header-label {
            background: rgb(129, 146, 146);
        }

        .ag-root-wrapper-body { 
            background: rgb(177, 190, 101);
        }

Not sure if relevant for you though.

@Jakub Vajda that's a good idea. I'm embedding via iframe so I think if I can figure out how to apply that CSS via JS and CORS etc then perhaps it will work. Do you happen to know that aspect off the top of your head?

I work for GoodData and am observing people tend to do more embedding than utilising the UI, so more than a 50/50 🙂

I added our domain to CORS in good data dev settings and then tried to change the CSS in the table visualization in the iframe, but I keep running into a permission error, e.g. load the page and then do the following in the browser console:

var iframe = document.getElementById("good_data_iframe");
var evenRows = iframe.contentWindow.document.getElementsByClassName("ag-row-even");

Hits the following error:
Uncaught DOMException: Permission denied to access property "document" on cross-origin object

I'm a noob with CORS so perhaps I am missing a step. Anyone know how to get this to work?

Hey @Adam Steele, I was fiddling with an iframe too and I suspect, there is some security setting preventing to alter styles of an mounted frame. (I am currently experimenting with events and let you know my outcomes soon) The way to alter that an easy way is to embed via web components. This way, the component is generated directly into HTML code and you can apply CSS styles on the main level.

I see. Thanks for the follow up. Please let me know if you get a breakthrough with the iframe approach since we need to use that route so we can also embed the edit dashboard/visualization stuff. It is my understanding that you can’t do that aspect with web components.