DataGrid component

[dukesx]

I was scrolling through, just to encounter a few libraries i needed to use for an admin panel i am developing currently. i needed data tables to show data. so i came across these two:

1. Revo Grid
2. React Data Grid

Two of the most lightest and actually "data" centered tables that i have seen by far. Now i am not sure if they go with CSS in JS or emotion but worth a try if anyone from the community is willing to work on it. Its probably a needful implementation considering that data tables are very commonly used. Both libraries have been updated constantly, according to OpenBase Graph, active team.

• Screen 1 : Revo Grid
  

• Screen 2: React Data Grid
  

[dukesx]

I'll be working on data grid package some time next year, most likely it will be built with react-table – https://react-table.tanstack.com/

Well, isn't this library going to take an immense amount of time ? i like the fact that it's headless and has hooks but implementation seems complex somewhat.

[rtivital]

Well, isn't this library going to take an immense amount of time

Why? react-table handles all complex cases. Headless approach will allow us to customize styles to match other components while handling all crazy stuff like columns resizing.

[esistgut]

Any update on this? The lack of a data table component is a massive blocker for any kind of CRUD application.

[wapenshaw]

I'd like to add a suggestion regarding datatables and datagrids, please make them responsive, i.e. the columns stack into rows on mobile screen sizes. Example

There are very few libraries in the react ecosystem that offer this functionality (afaik, primereact, elasticui) Last time I checked even Ant Design didn't have responsive tables (they can hide/show columns based on breakpoints but thats it)

If you look at ElasticUI, all their tables and grid components offer this feature but EUI is not nearly as flexible as mantine

https://elastic.github.io/eui/#/tabular-content/tables#a-basic-table << check this page on a mobile screen width to see the stacking

[mlarcher]

I agree that this feature is a really nice one, and should be a target for Mantine to keep a great mobile experience !

[alexkreidler]

Personally I really love this project: https://github.com/glideapps/glide-data-grid, which uses React but renders using Canvas instead of regular HTML, which may limit some the styling customization options.

[AnhV90]

Any update on this? I'm about to implement react-table myself.

[Kuechlin]

i'm also implementing a data grid with react-table v8 (it now has good typescript support).

https://github.com/Kuechlin/mantine-data-grid

[dukesx]

i'm also implementing a data grid with react-table v8 (it now has good typescript support).

https://github.com/Kuechlin/mantine-data-grid

Nice ! looks beautiful !

[moshOntong-IT]

i'm also implementing a data grid with react-table v8 (it now has good typescript support).

https://github.com/Kuechlin/mantine-data-grid

You are savior woaahhh

[rwieruch]

Another alternative: Check out the Mantine integration in react-table-library.

[codellyson]

Mantine integration
Thanks you literally saved me tons of work

[mlarcher]

@rtivital any idea when you'll have time to work on that ? Is it something to be expected soon, in v5, not before next year or more...? Any hint would be appreciated

[rtivital]

I'm not planning to work on DataGrid any time soon

[elarens]

@rtivital Is there anything that can be done by the community to accelerate the development of this component?

[iamyuu]

https://github.com/Kuechlin/mantine-data-grid

[elarens]

@iamyuu I've seen the impressive effort by other people to build the component but I would love to see it an official part of the library, hence my question to Vitaly

[rtivital]

No, there are no plans to add such component in the next six months

[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.

[elarens]

@icflorescu Marvellous implementation of a very useful feature and excellent documentation!
I can see that the rows are clickable (which makes sense) - what happens if there are other clickable components in the row, like links or action buttons? How will they interact?

[icflorescu]

Thanks for the kind words, @elarens!

Rows are indeed clickable if you are:

• providing an onRowClick handler;
• using a context menu triggered by left clicking;
• using the row expansion feature.

In my opinion, you simply shouldn't place clickable components in a row if you're using one of the above features because you'd end up confusing the user. If, for whatever reason, you absolutely have to, you could intercept the click event on the clickable component and do a .stopPropagation() on it. To my knowledge this works even for simple links.

Let's discuss here if you feel like this should somehow be explained on the docs website in an example.

[elarens]

Posted a question in discussion #28

[icflorescu]

@elarens, please have a look at Using with clickable components in cells - currently the last section on this example page.

[icflorescu]

One major key thing I'd like to add about Mantine DataTable, now that more than 6 months have passed since its initial release: despite its large number of features and out-of-the-box Mantine look-and-feel, it has no external dependencies and it's probably the lightest alternative in terms of bundle size:

Though it doesn't have the full feature set of React Table, it's built solely with Mantine primitives and should cover most usage scenarios. It's backed by a nice custom-built mobile-friendly documentation website.

[icflorescu]

@Bladeyy

Hope this gets better by time with more features

That's the plan.

[rwieruch]

I created React Table Library as an almost headless table library which easily integrates with UI libraries such as Mantine. In the documentation, you will find Mantine via Library Themes/Mantine.

It comes with:

• TypeScript support
• Tailwind CSS support
• custom UI library support (Mantine, MUI, ...)
• server-side operations support (e.g. server-side pagination)
• virtualization
• fixed columns/header
• sorting/filtering/searching
• tree view
• single-select/multi-select
• pagination
• custom theming
• column hiding
• ... and much more ...

More awesome table examples built with the library.

[vaynevayne]

https://www.mantine-react-table.com/docs/examples/data-export#data-export-example , i want try this

[ChinmayGopal931]

@icflorescu is there anyway to add styling to each row in a dataGrid? I want each row to be styled differently

[icflorescu]

@ChinmayGopal931: Yes, individual row styling is possible.

Have a look at the last section ("Row styling") in the "Additional styling" example of the documentation website.

The documentation website includes lots of examples of what you can do with Mantine DataTable: