[Feature Request/QA] Option to virtualize items by an even number, due to css even/odd problems

[OmarOmeiri]

If you have let's say a table that has CSS for even and odd rows, the virtualizer breaks the styles and the rows start flickering back and forth.

I have the following CSS

.TBody {
  color: #faf9f7ff;
}

.TBody > div:nth-child(even) {
  background-color: #3d4045;
}

.TBody > div:nth-child(odd) {
  background-color: #707070ff;
}

I've tried messing around with the overscan option, but without success.
I propose adding an option like

  const rowVirtualizer = useVirtualizer({
    getScrollElement: () => tableContainerRef.current,
    count: rows.length,
    overscan: 11,
    estimateSize: () => 45,
    chunkSize:  2, // <-- HERE
  });

So that the virtualizer renders elements in pairs.
The current virtualizer behavior is rendering elements one by one.
Could this be done with the current set of tools?

video.mp4

UPDATE

Solved by changing the CSS logic to:

.TBody {
  color: #faf9f7ff;
}

.Even {
  background-color: #3d4045;
}

.Odd {
  background-color: #707070ff;
}

And adding a dynamic class in the table row based on the virtualizer index:

virtualRows.map((virtualRow) => {
  const row = rows[virtualRow.index] as Row<T>;
  return (
    <TableRow
      key={row.id}
      row={row}
      className={virtualRow.index % 2 === 0 ? classes.Even : classes.Odd}
      columnOrder={columnOrder}
      styles={styles}
      highLightedRows={highlightedRows}
      setHighLightedRows={setHighLightedRows}
    />
  );
})

Nevertheless, this would be a nice addition.

[piecyk]

So that the virtualizer renders elements in pairs.
The current virtualizer behavior is rendering elements one by one.
Could this be done with the current set of tools?

Yes, using rangeExtractor. This will allow you to control what indexes are rendered.

[nardove]

@piecyk I'm having the same problem, here is a working example, as you scroll you can see how the striped rows jump.

I tried looking in the docs but could not find rangeExtractor can you point me in the right direction, thank you.

[piecyk]

@nardove yeah, we need to work on our docs! Basic the problem is that when scrolling we are removing elements one by one, with rangeExtractor you can change this to remove even https://codesandbox.io/s/gracious-chebyshev-2xnfl0?file=/src/main.tsx

[nardove]

Thank you, worked great!