Legacy table Row color: i = index in data, not displayedData

I want to show alternate rows with a gray background in Legacy table (not supported in New). To do so, I use the following code in Row color -> {{ i % 2 == 0 ? 'gray': 'white'}}

Works fine as long as table is not filtered.

This is due to i referencing the row index in data instead of displayedData, which to me is a bug as color is of no interest if row is hidden.

Hi @yiga2! I definitely see how this is a bug and I was able to reproduce the same behavior. I'll file this with the table team!

Hi @yiga2 - as an update, customizing background color of cells in Table should now be possible in both Retool Cloud, and the latest Retool self-hosted release (version 3.6). Check out @AnsonHwang's comment here describing how to do this using item

Trying this out in a sample app on my side, I can show alternating grey and white cells within a column using {{ item % 2 == 0 ? 'gray': 'white'}} in the Appearance > Background settings of the ID column:

Hopefully by doing this at the columns-level, this helps get you closer with new Table to the functionality you had with the legacy Table component!

@kbn that unfortunately still doesn't help much as I am after the displayed row index, not the cell value. Instead of item which returns the cell value, I can use i now in the New Table (see initial post), but as confirmed by @victoria back then (now same behavior for New Table), i refers to the initial index as received from the data source, not the row index as displayed in the table e.g. if you sort or filter, the banding/shading does not change automatically.

To me, this is less a bug as colorizing based on the cell value has definitely its merit - it's more a feature request: a new table property to change dynamically the background color of displayed even rows (odd ones stay as-is). GSheets and Excel call the feature alternating colors and banding rows.

@yiga2 that makes total sense! I've checked with our eng team, and they would like to support row background color in the way you're describing (our eng team refers to this as the "alternate row background color" or "zebra-lines" use case :zebra: :grin: ). I don't have a specific timeline for this but I'm linking the ticket internally so that I can keep you updated as there's movement toward shipping this. Thanks again for surfacing this feedback!

+1 on bringing back the alternate row background color.

Related updates over here:

Confirming on 3.14 - Styles/Alternate rows (e.g. Canvas). Very handy for large tables.
Thanks Retoolers !

1 Like