Error: attempted to render too many rows 1016821 table must be contained in a scrollable div While Already Using Scrollable div

[RChenNYM]

this is my global.css file for styling this is the file of my code rendering the hightable I already wrap it in a scrollable div this is how it shows with 500+rows but when it reach to 100k+ rows, even i have scrollable div, still show error saying it must be contained in a scrollable div

[platypii]

This is a warning that either you have the scrollable style wrong, or that you don't have a height/max-height on the table-scroll container.

Basically, hightable needs to be contained in a limited-size div, and then it will look at the scroll view window to determine which rows to render. If hightable is NOT constrained, then it will try to expand to the full size of all rows, and then when it tries to determine which rows to render, it looks like "all rows are in view" and that would be far too many rows. So I put a sanity-check that you really shouldn't ever need to render 1k+ rows, it's almost always a sign of a layout issue.

So I strongly suspect that you not containing the table-scroll element to have a fixed or max height. We could potentially improve that warning message, as the problem is often not the scrollability, but actually is about the containment of height.

[RChenNYM]

this is how i return the hightable
return (

    <HighTable cacheKey={filePath} data={df} />

);

and i am using the css styling file from hightable lib which it defines the table-scroll (https://github.com/hyparam/hightable/blob/master/src/HighTable.module.css)

but i am still getting the same error

[platypii]

I think the issue is that you are not containing the height outside of the scroll.

Hightable can't control the styling outside of its component. There's lots of ways you might be structuring your layout outside of hightable, so hightable doesn't constrain its own height. You need to constrain the height, either with: <HighTable className='your-hightable-style> or in the parent div containing it.

Because css is annoying, you might need to set something like: height: 1vh or max-height: 1vh. Or maybe your parent is a flexbox and you need to set min-height: 0 because of the classic CSS footgun where the default min-height is auto.

[RChenNYM]

Thanks for your response, that's helpful!