How to apply zebra row banding for GridTable in Helical Insight 6.1?

Technical queries
#1

Hello Helical Team,

We are using Helical Insight Enterprise Edition 6.1 GA.

I followed the official Adhoc customization example to apply row banding / zebra stripes to tabular reports using custom CSS.

For example, I used the following CSS:

#hi-report-852063ce table tbody tr:nth-child(odd) td {
    background-color: #f8fafc !important;
}

#hi-report-852063ce table tbody tr:nth-child(even) td {
    background-color: #ffffff !important;
}

This works correctly for Table and CrossTable visualizations.

However, the same approach does not work for GridTable. I inspected the GridTable report area in the browser developer tools and it looks like the GridTable is rendered inside an AntV S2 container with a <canvas> element, instead of a normal HTML table structure.

The DOM structure looks similar to this:

<div class="antv-s2-wrapper">
    <div class="antv-s2-container">
        <canvas></canvas>
    </div>
</div>

Because of this, CSS selectors such as table tbody tr td do not affect the GridTable cells.

Could you please let us know the recommended way to apply zebra row banding / alternate row background colors for GridTable in Helical Insight 6.1?

Specifically:

  1. Is there any built-in setting for row banding in GridTable?
  2. Can GridTable styling be customized through CSS, or does it require AntV S2 theme/custom cell rendering configuration?
  3. Is there any supported way in Helical Insight 6.1 to customize the GridTable row background color?
  4. If CSS is not supported for GridTable row banding, what is the recommended alternative?

Thank you.