Is it possible to auto determine page size?

[JoshGlazebrook]

So I don't set a height on my table, I just let it expand to its parent and then scroll if needed. Does anyone have a solution or pointers for having automatic page size based on how many rows can fit in the table view before scrolling is needed?

Pretty sure the most obvious solution is to just pass a ref to scrollViewportRef + combine that with the useResizeObserver from mantine. And the other requirement is all table rows have to be a known equal height, so I can divide the scrollviewport height by the row height to determine how many rows can be displayed per page.

Any idea if something like this will be added out of the box in the future?

[icflorescu]

That would indeed be some sort of Holy Grail :-)

I thought about it too at some point, but decided against it because it would end up slowing down the UI rendering too much, for an ideal use-case that never happens in reality (i.e. all table rows to have equal know heights, identical on different browsers/devices, etc.).

So no, something like this will never come out of the box in the future.

That being said, I think you're on the right track if you have the time and curiosity to implement this in a particular use-case.
If you do, let me know how it works...

[JoshGlazebrook]

I was able to get this working (demo: https://capture.dropbox.com/GSgFws1ULtEjGLC8) using essentially what I mentioned already. I know that react-virtualized's AutoSizer does this (combined with a virtualized list), and I've used that with a table of 30,000 items before without many issues, so technically it could be doable, but shouldn't be the default for sure.

My case will never have more than a couple thousand in the table elements and I doubt people will be resizing constantly so I think it will be fine for my use case.

I can see if I can clean up my code a bit and share later, but if anyone is looking at attempting this, I'm using a combination of useElementSize + passing that ref into scrollViewportRef. Then take the height of the scroll viewport and subtract the table header height, and then divide by your row height. From there you can determine the maximum number of items per page that can be shown at any time, and adjust your pagination state, and then the table will re-render based on that, etc.

This does require forcing all rows to have an equal height (you will need to have at least some kind of wrapper component in the table cell as you can't override table cell element heights directly).

The only thing I still need to figure out is how to throttle the ref updates from useElementSize(), as it fires a lot when resizing, causing excessive re-renders of the table.

[icflorescu]

@JoshGlazebrook fyi Mantine 7.8 came out with a couple of new hooks you might be interested in. See if useDebouncedCallback helps you somehow...

[icflorescu]

...and btw, the demo you've shared is really cool!

[gabrielmaldi]

@JoshGlazebrook, looks great! If you decide to share the code I'll give it a shot 😊