Mantine DataTable

[icflorescu]

I know there are already a few alternatives out there, but you might also want to take a look at Mantine DataTable, a component I've built with Mantine primitives (not React Table), that covers most of the features mentioned above and should support:

• Asynchronous data loading
• Pagination
• Multiple rows selection
• Scrollable behavior, while maintaining a fixed header, pagination footer and row selection column
• Column sorting
• Custom cell data rendering
• Row context-menu
• Dark themes

I've also tried to build a nice documentation website (following as much as possible the excellent Mantine's docs design patterns) and I've included a series of examples and usage scenarios.
The component properties are be self explanatory, well typed and also documented with JSDoc, so it should be quite straightforward to use.

[rtivital]

Great job @icflorescu, thanks for sharing!

[icflorescu]

Thank you for your kind words and for building the best React UI framework, @rtivital!

[goodlythink]

The best datatable

[italodeandra]

Hey @icflorescu,

Realy nice DataTable, congrats 👏🏻. I'm already using it on my projects ❤️

[icflorescu]

Here's some exciting news:

Starting with v.1.7.0, Mantine DataTable features row expansion.

[icflorescu]

Thank you all for your kind words of encouragement, they really mean a lot to me!

Just a couple of points I'd like to reiterate here, after seeing and learning from people's reactions:

Mantine DataTable is certainly not the single option in terms of data table / data grid functionality, and far from me to claim it's the best one out there. "The best" is always a subjective notion and it naturally depends on one's specific needs and preferences. Others offer features such as virtualization, better filtering support perhaps, etc., while mine comes with a few features that I considered to be important, such as:

• Context menu support;
• Additive / subtractive multiple row selection (when you're shift-clicking a row, the current selection is expanded / reduced naturally, as it happens in Gmail, for instance);
• Good UI integration with core Mantine components - "as Mantine as it gets"; this may be subjective, but IMO the component shouldn't feel out of place in your application UI;
• Lean footprint. There was a temporary shameful peerDependency (lodash :-P) in the initial versions, but I've managed to eliminate it with the help of a kind contributor.

There are, of course, a lot more features that could be added in time, and I'll hopefully manage to implement some of them with the help of other contributors - people who are kind and generous enough to contribute with quality code in their own time. For now, we have a lot of discussions going on regarding new feature requests; there are many ideas, but when it comes to open-source code contributions, time is always a scarce resource and implementing new features that work seamlessly in conjunction with existing ones isn't always trivial.

Thanks again for your support and encouragement!

[mlshvdv]

@icflorescu Unbelievable, amazing work! Thanks!

[icflorescu]

Here's some good news:

Mantine DataTable V7.1.0-alpha.5 is here 😅🎉

Be advised that it comes with a few breaking changes, as expected.

The amount of effort spent to rewrite the entire documentation website with Next.js 14 was gruesome, but I had to do it in order to make sure the component works in every example.

If everything go as planned and we're not bumping into any critical bugs, I'm planning to release the final version in a day or two.

[ladderschool]

Is it possible to edit cells by navigating with arrow keys on the keyboard and if a cell is focused start typing in it?

[Akronae]

I'm really struggling with inputs in cells that trigger heavy re-renders & focus loss

[Kokleng-Dev]

is it work with nuxt or vue js?

[ryuhangyeong]

mantine is a react ui library.

Therefore, only react and nextjs are available.

suggestion tanstack table vue

https://tanstack.com/table/latest/docs/introduction

[BrendanC23]

I've had a lot of success using Mantine DataTable. It is both fully-featured and easy to use.

I also recently stumbled across https://v2.mantine-react-table.com/ (though I haven't had a chance to use it yet), which looks like a promising alternative. V2 is currently in beta. There's a comparison between both libraries here, though I can't speak to how accurate it is.