search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.47k stars 1.3k forks source link

[data grid] Add support for other UI libraries, e.g. Shadcn UI #12370

Open oliviertassinari opened 8 months ago

oliviertassinari commented 8 months ago

Summary

It doesn't make sense to invest in building a world-class data grid with MUI X while coupling so much to a given design system that it's not appealing to use without it (Material UI). This is why we have #10143 or #1016.

Now, once this is done, if we can trust https://twitter.com/FormKit/status/1765556603607023765 (the most requested feature from headless Vue forms is UI libraries integrations), it seems likely that developers will ask the same from MUI X:

SCR-20240310-oyqk

Examples

Examples of how we could pull off integration with other UI libraries: https://www.notion.so/mui-org/Theme-toggle-452dffde2a374db19fe6e2f871044c10.

Libraries we could support (you can add the corresponding emoji to upvote a given library or just upvote the whole idea 👍):

Motivation

We built https://mui.com/x/react-data-grid/style/#custom-theme for Ant Design at the beginning, but we never did something serious with it, it's not a convincing demo or usable.

SCR-20240307-qyvi

Search keywords: -

yehudamakarov commented 7 months ago

LOVE the grid. May need to use some shadcn at the moment. So I'm happy to see this issue.

Would love a straightforward way to have the grid match shadcn

oliviertassinari commented 5 months ago

@yehudamakarov One of our ongoing key objectives is to improve the distribution of MUI X Data Grid by not having it tightly coupled with Material UI this year (as long as needed to make it happen actually). I think that you can expect to see movement on https://github.com/mui/mui-x/issues/10143 or https://github.com/mui/mui-x/issues/1016 going forward. For example @KenanYusuf recently joined the Data Grid team to help, and we are close to fill a 5th Product Engineer role on the same team.