Introduce new Datatable component (Grid to handle 100,000 of data points)

[ghost]

Summary

Basically, I think there should be hooks designed especially for Material UI Table, particularly for row selection, table pagination, and filtering rows. Every table should accept some kind of a data parameter as a prop an instantiate a context with all of these features which can be accessed via hooks, though they should be passed down appropriately by default. For example:

• table cell should allow truncation for URLs, long strings, etc.
• table body should apply search filter on passed data
• table body should apply slice based on pagination
• table body should account for filter when determining count
• table page should determine count from children count in body
• table page changes (page, row) should have default functions

I'm surprised why all of this state is managed by the developer as seen in the example for sorting and selecting. Again, this should be the default behavior in which the developer doesn't have to go out of his way to manage table state and pass it through props because of the layers of composition. But they should be able to change this default behavior via hooks as well.

Motivation

It's really cumbersome to create a reasonably featured table in Material UI because it is made of many different nested components from TableBody to TableCell and everything in between. As a result of this composition, a developer has to manage state on his own and prop drill current pages, rows per page, count of items, search filters, etc.

[joziahg]

I would suggest using a library like react-table v7. It is a headless table library powered by hooks with additional plugin hooks. I am in the process of building a full featured table with it and am having good luck with it. There are also pre-built libraries like mui-datatables and material-table.

The maintainers have said in the past they aren't interested in building full solutions like datatables or calendars and whatnot and instead defer that to the community. But that might change with the new enterprise repository in the works.

[oliviertassinari]

@joziahg you are right, this has changed. We want to support it all directly here. Going in the unstyled land is definitely in our interest, as well as expanding outside Material Design.

[ghost]

Material UI should ideally follow the MD spec such that CRUD features include inline quick views that expand and or modals that don't require death by composition. Furthermore, any CRUD features should have the option of syncing with the database such that when the UI state changes the database can create, update, or drop an item. All in all, as it now stands the core MUI table could use a lot of work.

[oliviertassinari]

@mbrahimi617 Thanks for the feedback, excited about this upcoming effort :D

[ghost]

@oliviertassinari Thank you for making our lives easier! Is this a project timeline for this coming release?

[amesas]

For a simple table, and compared to other solutions, Material UI tables has a lot of boilerplate code.

For example:
https://vuetifyjs.com/en/components/data-tables
We don't have to define body, head, rows, or cells.

If you need to customize the content/behaviour, then you can use slots, etc...

[oliviertassinari]

Maybe 3 months for a first initial release?

[ghost]

Awesome sounds good. Anything you can recommend in the meantime? I have deeply nested data from DRF which I would like to be editable via modals or quick views.

[oliviertassinari]

DRF=django?

[Floriferous]

Could be interesting to make material-ui easily usable through ag-Grid as well, on top of react-table!

[oliviertassinari]

@Floriferous The strategy is to compete with ag-Grid.

[ghost]

Is there any update on the progress of this component?

[oliviertassinari]

@mbrahimi617 We don't plan to support the rendering of more than 100,000 points, however, we will likely include the option to handle it server-side, with the enterprise version.

[ghost]

I mean I see the data table component in development, but I was more so referring to the UI. It looks like a skeleton without following the Material Design spec yet. Also doesn't appear to include any actions for CRUD features. In my use case, if there's no inline edit then at the very least I'd like to supply actions to view row details, update them, and delete them; as well as update and delete the table title itself in the very same way.

[oliviertassinari]

The component is still in its early days of development. We plan to include the features you have mentioned.

[ghost]

Oh ok, just wanted to double check. Is there a date when we can expect an initial release?

[oliviertassinari]

Solved in https://github.com/mui-org/material-ui-x, the first 3 pages of the documentation are live: https://material-ui.com/components/data-grid/rows/ (they mostly cover the MIT version).