Need to add more features and examples in Table component

[mvmilanjain]

Table is one of the most important component which is required by most of the companies. I have listed some features/examples which you should consider for Table component:

• Sorting
• Filtering
• Selection
• Multi Selection
• Inline Editing
• Pagination
• Searching
• Toolbar
• Context Menu
• Async Data Source
• Resizing of Columns
• Fixed Columns
• Scrolling

Please refer Ant Design Table Component

[rtivital]

Thanks for feedback, Table is a simple wrapper for html table element with theme styles, it will remain as is. What you're describing is usually called a DataGrid – I'm planning to add such component in of future releases.

[rtivital]

Yep, that was the plan

[bkniffler]

What about building the datatable component on top of react-table? Its got so many stuff figured out already, would be mainly about presentational code then @rtivital .

[rtivital]

We will evaluate this option before working on data-grid package

[mvmilanjain]

What about building the datatable component on top of react-table? Its got so many stuff figured out already, would be mainly about presentational code then @rtivital .

I have tried Data grid component using React-table & Mantine. Check below ink:
https://codesandbox.io/s/react-table-datagrid-eojw8

[codellyson]

this is cool

[AndersSpringborg]

Is this a feature you guys want?
I'm writing a version of @mvmilanjain Data grid component, into a core component right now

[rtivital]

Yes, this feature is planned.

[AndersSpringborg]

Okay. Are you okay with added react table as a dependency, to mantine/core?

[rtivital]

DataGrid should be a separate package @mantine/data-grid

[mvmilanjain]

I have tried my hand with React-Table library.
Check out link: https://codesandbox.io/s/react-table-datagrid-eojw8

[PatrikElfstrom]

Here is a good read about the differences between a table and a data grid:
https://blog.ag-grid.com/react-data-grid-vs-react-data-table-vs-react-grid/

One important thing I think is that it's recommended to build a data grid using divs instead of tables.
For example React Virtualized/window, AG Grid, React Data Grid and MUI Data Grid all use divs instead of tables.

[emilhe]

I am also really interested in a mantine DataGrid component. I was considering implementing one myself, but if it is already on the roadmap, I guess it would be better to wait for an official component :)

[bogordesaincom]

i have using with react table

[hunt3r]

Did you just add manual styles or did you find some table styles play well with react table. I'm also using this approach but react table doesn't give really any styling guidelines.

[zeestack]

react-table is headless, it will not provide you any styling. You can style your table the way you want.

[nealoke]

Any update on this? :) Seems like a very nice addition

[rtivital]

We are not planning to add this component any time soon.

[elarens]

Sadly, it makes Mantine unusable for me (and likely many other frontend developers specialising in admin interfaces). Tables (or DataGrids, if you prefer) are the core components for managing complex data, and not having basic capabilities like sorting, filtering, selection, search, pagination and async data fetching means that I have to choose another component library, as it is too time-consuming to build those things from scratch. That's unfortunate, as I was getting very impressed with Mantine otherwise.

[bkniffler]

As much as I miss a table component, I find its not too hard to implement your own (as shown by @mvmilanjain above, using react-table). Maybe someone in the community will create a table component and publish as a separate lib. And maybe this could get merged into mantine at some point.

[clayreinhardt]

ugh

[hunt3r]

I’ve been using react table for this. It’s super bare bones on styling and is pretty agnostic on markup so it works fairly well with mantine. Albeit a bit more work to implement. I agree that a more robust out of the box solution would be ideal. On May 11, 2022, at 8:00 AM, Benjamin Kniffler ***@***.***> wrote:  As much as I miss a table component, I find its not too hard to implement your own (as shown by @mvmilanjain above, using react-table). Maybe someone in the community will create a table component and publish as a separate lib. Any maybe this could get merged into mantine at some point. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

[icflorescu]

You might 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.

[wachidmudi]

Okay. Nice work anyway.

[elarens]

@icflorescu Beautiful implementation. Would be great to have a render prop to render ReactNode in cells instead of just text, much like Ant Design tables do, since it's essential for functionality like rendering action buttons that then allow users to further interact with the data. But very nice work otherwise.

[icflorescu]

@elarens Thank you for the kind words! A Mantine DataTable column DOES have a render prop that allows you to output ReactNode in cells:

/**
 * Custom cell data render function accepting the current record
 */
render?: (record: T) => ReactNode;

Have a look at the example in the getting started page.
Perhaps I should make this more evident in the column properties example page, or even create a specifically-targeted example...

[elarens]

@icflorescu Indeed it is there. I missed it, apologies - should have been more attentive. You've done an incredible job.

[icflorescu]

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

[hunt3r]

Awesome, I think this will work out nicely to replace the react table stuff I have. I'm going to give it a try.

…

On Fri, Sep 2, 2022 at 6:35 AM Ionut-Cristian Florescu < ***@***.***> wrote: You might want to take a look at Mantine DataTable <https://icflorescu.github.io/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. [image: Mantine DataTable] <https://icflorescu.github.io/mantine-datatable/> — Reply to this email directly, view it on GitHub <#195 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACPJU3ATFC7IVHTDTORNI3V4HJ6HANCNFSM5BXSPOWQ> . You are receiving this because you commented.Message ID: ***@***.***>

[petrvecera]

Hello guys

We are evaluating Mantine for our next big project. It looks like awesome library which we would like to use. And it looks like this is basically the only thing which is stopping us. The https://github.com/icflorescu/mantine-datatable looks really great. But we would like to avoid adding 3rd party components. You usually want to keep your dependencies to minimum or you will have problems 3 years later...

Is there any update on the Mantine table inside the lib? Maybe even in beta-version? Because it might takes few months before we hit production. So even beta version would be fine for us right now.

Thank you
🚀 ❤️

[rtivital]

There are no plans of adding data grid component soon. You can use one of the libraries built by community.

[KevinVandy]

Here's another 3rd party Mantine Table library I'm introducing as an option here: www.mantine-react-table.com/

[RabeeAbuBaker]

Hi @rtivital, any updates on the data grid component?

[rtivital]

I'm not planning to work on it any time soon, you can use one of the packages provided by the community.

[langziyang]

hope make table or datagrid is responsive

[kevin-griley]

Just noting I agree to use TanStack Table for this in the future, its headless and already works will with mantine.

[icflorescu]

Just wanted to let everyone interested know:

Mantine DataTable V7 is here and fully supports Mantine V7 🎉

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.