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.

#2

Hello,
Unfortunaetly the kind of DOM content stucture which GridTable visualization has (there is common div for all the content rendered, and we don’t have individual div control), there is no scope of custom JS and CSS which can allow to achieve zebra/row banding. This is a specific chart level limitation, that is why we provide multiple charting options.

Better option is to use the CrossTable visualization in which very easily such kind of zebra row banding can be achieved.

We also have a VF option through which even an all together new visualization can also be integrated. Hence, if you have a very custom visualization requirement with a very custom UI UX changes, then that option can also be used.

Further reading for VF : Custom Charts - Usage of VF in Helical Insight Version 5.2 Onwards - Helical Insight

VF second example : Visualization Framework (VF) In Helical Insight Version 5.1.0 - Helical Insight