Bases: Don't unload table row when scroll pass the screen

Custom CSS & Theme Design
1

What I’m trying to do

I have the following CSS to color the background of odd row a color.

.bases-table-container .bases-tbody .bases-tr:nth-child(odd) {
    background: var(--bases-table-odd-color);
}

image
image1768×1286 385 KB

But when I scroll up, the row got unload immediately. The last row (5th row) was painted a light grey color now becomes white.

I hope this will not be the behavior in the future because I don’t see the point of unload the table row.

image
image1762×1232 421 KB

1 Like
2

The reason it is unloaded is performance

3

Could we do something like adding property data-id=“<number>” for each row so even when you unload the row, the attribute data-id remains the same and then we can select odd row using

.bases-table-container .bases-tbody .bases-tr {
    &[data-id$='1'],
    &[data-id$='3'],
    &[data-id$='5'],
    &[data-id$='7'],
    &[data-id$='9'] {
        background: var(--bases-table-odd-color);
    }
}

Look a bit ridiculous but can the team somehow support coloring the odd/even row background without it shifting due to unloading row?