When row span scrolls, the merged row will be invalid

[condorheroblog]

In my project, seven rows of tables are required to be merged, but I found that if the row span value is greater than three, the merged row will fail when scrolling. Here's the picture: is there a solution.

[condorheroblog]

The code of merging three lines in the figure is the same as the code below the GIF figure

columns[rowSpanIndex].rowSpan = ({ rowData, rowIndex }) => rowIndex % 3 === 0 && rowIndex <= data.length - 3 ? 3 : 1

If it is greater than five lines, stop scrolling, and the merged line is invalid all the time

When it is less than five lines, it will flash down only when rolling.

Look forward to your reply. 🙏🙏🙏

[nihgwu]

I understand the problem here, and the reason is the merged row is recycled because of virtualization, you can set overscanCount to ease the problem, but it's still not ideal, it works great if you scroll down, but if you scroll up, the overscan don't works so well as expected

[giiska]

_getVerticalRangeToRender() has lines in react-window src/createGridComponent.js

      const overscanBackward =
        !isScrolling || verticalScrollDirection === 'backward'
          ? Math.max(1, overscanCountResolved)
          : 1;

when isScrolling this always return 1

[StianIsmar]

      const overscanBackward =
        !isScrolling || verticalScrollDirection === 'backward'
          ? Math.max(1, overscanCountResolved)
          : 1;

Is this a working solution for you?

If so- where do you pass in overScanCountResolved?

[Yeenot]

@nihgwu @StianIsmar Is there any workaround on solving this flickering issue when scrolling down?

[seonghong1]

We're having the same problem Did you solve it?
If you solved it, what keywords did you use to solve it