Is there a way to specify a minimum number of rows

[mickm77]

We have an odd problem where at a point scrolling down the table a row is added to the list and the columns resize to adjust for the data.
One of the headers then wraps over two lines which makes the header taller and pushes the last row out of view.
The columns resize because the long data has gone, which lets the wrapped header text unwrap, making the header shorter allowing for another row to be added.....

You end up with a jumping effect.

Two fixes I can think of, have the number of rendered items not depend fully on the size of the viewport or if it was redrawn twice without a scroll or a viewport change, don't redraw until one of those happens.

[oleggrishechkin]

Hi, @mickm77. It's hard to advise something without code example/reproduction, but I think you can try to use different overscan prop values. Overscan increases limits/bounds for viewport window. 5-10 is a good range of values for overscan prop.

Also, could you check your issue in Safari (Desktop)? Or with overflow-anchor: none in scroll container styles (don't forget to add overflowAnchor="none" property for ViewportList too).

[mickm77]

I have tried different overscan properties and it only resulted in offsetting the scroll position where the jiggling happens.

I kinda feel that whilst the number of items rendered if purley based on the size of the viewport and height of the rows then modifying any of these properties would simple push the problem to somewhere else.

To be fair, it was a fluke find (although, i can recreate is quite well on my screen res, on a particular client and which item to scroll to.)

There is a column header, "Show On Screen" that fits onto one line. Scroll down a bit and an item that, in an earlier column has some long text, causes the column widths to change. "Show On Screen" breaks between On and Screen and is now on two lines. This makes the table header taller and pushes the last item out of the viewport so no longer rendered.
Now that that item with the long text has gone, the columns reshuffle once again and "Show On Screen" hoes back to being on one line.
Now we have room for just one more item....

We could fix this by having a fixed height header, but would prefer not to as could be different via screen size etc.
Fixed width columns would fix it too. But we'd rather not.

The simplest solution would to have a minItemsToRender prop. So if the header size grew from 30px to 130px it wouldn't change the number of items taken into account for layout.

[oleggrishechkin]

I tried this workaround (render some fixed minimum items count) but it's unstable and doesn't fix loop of adding/deleting items. You MUST guarantee that rows heights is independant by another row mount/unmount. You can try to solve your problem with hardcoding your header height (with media queries if you want to some adaptive layout for mobile). Another way is to catch moment when header height was increased and save new height as "height" somewhere in header local state (for example) and use it in inline styles (to prevent height decreasing). If you can show me some screencast/gif I'll try to give you better suggestions, maybe.