optimistic-gold•2y ago

In Need of DataGridPro Demo for Refine with MUI X v6

Hello everyone, I am currently working on a Refine application where I'm trying to implement DataGridPro from Material-UI X v6. Despite my efforts, I've been unable to find any demos or examples showcasing its integration in a similar context. Specifically, I am using the useDataGrid and useMany hooks in my application, and am struggling with their implementation alongside DataGridPro. If anyone could share an example or point me towards any resources where these hooks are used with DataGridPro, it would be incredibly helpful. Any guidance or suggestions would be greatly appreciated. Thank you in advance!

15 Replies

kapa.ai•2y ago

Hi @darshan_sandhu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- Hello! You can find an example of using the useDataGrid hook with the DataGridPro component in the refine documentation. Here's the link to the example: - With DataGridPro Component (https://github.com/refinedev/refine/tree/master/examples/table-material-ui-data-grid-pro) To run this example in your local environment, you can use the following command:

npm create refine-app@latest -- --example table-material-ui-data-grid-pro

npm create refine-app@latest -- --example table-material-ui-data-grid-pro

As for the useUpdateMany hook, there isn't a specific example with DataGridPro. However, you can refer to the example using useUpdateMany with Material UI Table: - useUpdateMany Example (https://github.com/refinedev/refine/tree/master/examples/table-material-ui-use-update-many) To run this example in your local environment, use the following command:

npm create refine-app@latest -- --example table-material-ui-use-update-many

npm create refine-app@latest -- --example table-material-ui-use-update-many

You can use these examples as a reference to implement the useDataGrid and useUpdateMany hooks with the DataGridPro component in your refine application. Good luck! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

GitHub

refine/examples/table-material-ui-data-grid-pro at master · refined...

Build your React-based CRUD applications, without constraints. - refine/examples/table-material-ui-data-grid-pro at master · refinedev/refine

GitHub

refine/examples/table-material-ui-use-update-many at master · refin...

Build your React-based CRUD applications, without constraints. - refine/examples/table-material-ui-use-update-many at master · refinedev/refine

kapa.ai•2y ago

<@672579770692665354> kapa.ai is still learning and improving, please let us how it did by reacting below

optimistic-gold•2y ago

@kapa.ai The demo you provided is indeed very useful, however, it uses an older version of @mui/x-data-grid-pro (^5.11.1). My application is built with version (^6.0.2), and I am looking for guidance on how to use this specific version with Refine. If anyone could provide an example or any resources that use @mui/x-data-grid-pro version ^6.0.2 with Refine, it would be greatly appreciated.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. The provided examples are based on the older version of @mui/x-data-grid-pro. I recommend checking the official Refine documentation (https://refine.dev/docs) and Refine blog (https://refine.dev/blog) for updates and examples. You can also keep an eye on the Refine GitHub repository (https://github.com/refinedev/refine) for new examples and updates. In the meantime, you can try to adapt the existing examples to work with the newer version of @mui/x-data-grid-pro by referring to the MUI X v6 migration guide (https://mui.com/guides/migration-v5/#mui-x) and making necessary changes in your code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

Blog | refine

A Docusaurus powered blog!

GitHub

GitHub - refinedev/refine: Build your React-based CRUD applications...

Build your React-based CRUD applications, without constraints. - GitHub - refinedev/refine: Build your React-based CRUD applications, without constraints.

kapa.ai•2y ago

<@672579770692665354> kapa.ai is still learning and improving, please let us how it did by reacting below

optimistic-gold•2y ago

@kapa.ai is "@refinedev/mui": "^4.16.4" compatible with "@mui/x-data-grid-pro": "^6.0.2"?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. The provided examples and information extracts do not mention the compatibility between @refinedev/mui version ^4.16.4 and @mui/x-data-grid-pro version ^6.0.2. I recommend checking the official Refine documentation (https://refine.dev/docs) and Refine blog (https://refine.dev/blog) for updates and compatibility information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

Blog | refine

A Docusaurus powered blog!

kapa.ai•2y ago

<@672579770692665354> kapa.ai is still learning and improving, please let us how it did by reacting below

optimistic-gold•2y ago

@kapa.ai Just found that @refinedev/mui uses @mui/x-data-grid version 5.12.1 in node_modules. I have @mui/x-data-grid-pro version 6.0.2. Could this be causing problems? I'm still learning, but I'm changing to 5.12.1. Spent way too much time on this today 😪

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- Yes, having different versions of @mui/x-data-grid and @mui/x-data-grid-pro in your project could potentially cause problems due to compatibility issues. It's a good idea to align the versions to avoid any conflicts. In your case, since @refinedev/mui uses @mui/x-data-grid version 5.12.1, you can try downgrading your @mui/x-data-grid-pro to version 5.12.1 as well. This should help resolve any compatibility issues you might be facing. To downgrade the version, you can update your package.json file with the desired version and then run npm install or yarn install to update your dependencies.

{
  "dependencies": {
    "@mui/x-data-grid-pro": "5.12.1",
    // ... other dependencies
  }
}

{
  "dependencies": {
    "@mui/x-data-grid-pro": "5.12.1",
    // ... other dependencies
  }
}

Remember to keep an eye on the Refine documentation (https://refine.dev/docs) and Refine blog (https://refine.dev/blog) for updates and compatibility information, as they might release examples and updates for newer versions of @mui/x-data-grid-pro in the future. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

Blog | refine

A Docusaurus powered blog!

kapa.ai•2y ago

<@672579770692665354> kapa.ai is still learning and improving, please let us how it did by reacting below