Accessing previous/next row in new table

Is it possible to access the row above or below the current one? I'm referring to the rows as they are shown given the current filter/sorting/... constraints.

My use-case is that I want to alternate the row color in case rows belong to different "groups", i.e., they have different GroupIDs.

A row in a table component?
You could reference the selected index - 1 {{yourTable.selectedDataIndex - 1}}

Yes, a row in the (new, v2) table component.

selectedDataIndex wouldn't work for my use-case since I want to set the row color for every row independently of the selected row. In any case, selectedDataIndex is not available in the context of defining the row color.

I looked for something like {{ data[i-1] }} but only {{ i }} and {{ currentRow }} are available.

Hello, new Table component has a Alternate row background style


is this what you are looking for?

1 Like

Oh, I didn't know about this, thanks for telling me about it! @Oscar_Ortega

However, no, I'm looking for something different: my rows have a (hidden) field GroupID and after sorting by GroupID I'd like to have the row color alternate between groups of rows.

Conceptually, I can achieve this grouping also by using the Group rows by ... feature. However, this looks very bad in my case, since the collapsed group row is completely blank except for the GroupID, i.e., contains no information that's meaningful to the user. (User-defined aggregation functions could solve this problem, but, I guess, we are not that far along.)

This can be a way to achieve that but a major issue would be if groupIDs are not consecutive (1, 2, 3, 4, ...)

1 Like

Sadly, they are not consecutive and I knew about this trick, but it just doesn't work. So I came up with a way to produce different random colors (cid is the group ID here):
{{ ((7919*currentRow.cid) % 16777216).toString(16).padStart(6,'0') }}

Works somewhat, but definitely not pretty. :-/

#{{ (7919*currentRow.column5%16777256).toString().substr(0, 6) + 60}}

:sweat_smile:

#{{ (7919*currentRow.column5%16777256).toString(16).substr(0, 6) + 50}}

Well, these numbers are actually not random. 16777216 = 2^24 to exhaust the color space and 7919 is a big prime number. (Actually, by now I prefer 999331. :wink: ) BTW, I think substr does not work here. It has to be padStart to guarantee strings of length 6. Anyway, that's just fooling around... I guess there's no obvious solution to my original question here.

1 Like

Thanks for sharing your use case! I've moved this to feature requests for the time being :blush: