Adding virtualisation for the table

[viveknigam3003]

Is your feature request related to a problem? Please describe.

I've been using this library for my project and found that there is no virtualisation available. We used a basic <div> like structure to render a list of items with react-window for performance purposes. Using mantine-datable is a delight, but then I could not find a way in which I can virtualise the list for handling large amounts of rows and columns. Our table has continuous pagination (infinite scrolling type) so virtualisation makes for a very strong use case.

Describe the solution you'd like

I explored other libraries like TanStack Table and it seems to have virtualisation enabled. If there could be a way to virtualise the rows it would do the job of handling extensive data without making the DOM heavy.

Describe alternatives you've considered
N/A

Additional context
N/A

[aaly00]

+1

[alexandersimoes]

+1

[icflorescu]

Guys, this has already been discussed a number of times :-)
I'm fully aware of the benefits of virtualization, and I'm more than open to review/accept a PR implementing virtualization in a way that plays nicely with all the other features...

[alexcastrodev]

@icflorescu

I can work on it.

My question is, there are many ways to solve this:

• Windowing ( React recommendation for Virtualize Long Lists )
• Intersection Observer
• Dynamic Loading
• Memoization

I suggest windowing, because intersection Observer is new and maybe will be needed pollyfill.

We can use react-window or react-virtualized

what you think ?

PS: What you think to having Discord channel for this project?

[alexcastrodev]

@icflorescu ?

[icflorescu]

Hey @alexcastrodev, sorry for being unable to reply sooner, but I'm currently pretty caught-up in a deadline.
I don't have experience with any of them, but at the first glance react-window seems the obvious logical choice.

So, yes, if you're up to it and have the time, feel free to have a go at it, I'd be happy to support in any way I can (though, as stated above, I'm currently under a bit of pressure) and your PRs are more than welcomed.

I have built a few other open-source projects besides mantine-datatable over the last years and learned that - while lots of users would come up with feature requests or how-to questions - very few are willing and/or able to contribute their own effort :-)

About setting up a discord channel for the project, yes, I did thought about it a while ago, but again, couldn't find the time to do it...

[jnachtigall]

Hi @icflorescu , thanks for mantine-datatable which is a great lib. I've used it in a project. However, now the table can grow depending on some filters dynamically in column (from 1 to 500 cols) and row size (from 1 to 3000 rows). And I am afraid that without virtualization / windowing we have to switch from mantine-datatable to React TanStack Table which supports virtualization.

Has anybody implemented virtualization / windowing on top of mantine-datatable already?

@icflorescu if not can you give some general info (guidance/pointers) on how this could be implemented using either react-window or TanStack Virtual?

[jnachtigall]

fyi: there's a WiP PR in #690