[BUG] MUI useDataGrid's dataGridProps type not compatible with DataGridPro

[jamesdh]

Describe the bug

Upon trying to upgrade from MUI DataGrid to DataGridPro, I'm getting the following TS errors:

TS2322: Type ... is not assignable to type DataGridProProps<any>
Types of property onFilterModelChange are incompatible.
Types of parameters details and details are incompatible.
Types of property reason are incompatible.

Steps To Reproduce

Create an extremely basic component w/ useDataGrid:

import React from 'react';
import {List, useDataGrid} from '@refinedev/mui';
import {DataGridPro} from '@mui/x-data-grid-pro';

const ListPage = () => {
  const { dataGridProps } = useDataGrid<any>({})
  return (
    <List>
       <DataGridPro {...dataGridProps} columns={[]} />
    </List>
  )
}

Expected behavior

The dataGridProps type returned from useDataGrid will also be compatible with DataGridPro.

Packages

• "@refinedev/core": "4.49.2"
• "@refinedev/mui": "5.15.1"
• "@mui/material": "5.15.8"
• "@mui/x-data-grid-pro": "7.5.1"

Additional Context

No response

[jamesdh]

Downgrading @mui/x-data-grid-pro to 6.20.0 helped resolve this. It's a bit odd, as prior to upgrading to the Pro license, the regular @mui/x-data-grid was working fine w/ 7.5.1

[aliemir]

Hey @jamesdh sorry for the issue! I've investigated this a bit. Looks like this is just a type issue and caused by a faulty type from our useDataGrid hooks return type. We have onFilterModelChange as DataGridProps["onFilterModelChange"] in the return type (the function has two arguments model and details) but we're only using the model and doesn't even have details in the implementation 😅

We can update the return type to reflect our implementation (which still satisfies the onFilterModelChange prop of DataGrid components) and get rid of this error easily.

Here's the part defining the return type of the hook:

refine/packages/mui/src/hooks/useDataGrid/index.ts

Lines 33 to 53 in 77df5be

	type DataGridPropsType = Required<
	Pick<
	DataGridProps,
	| "rows"
	| "loading"
	| "rowCount"
	| "sortingMode"
	| "sortModel"
	| "onSortModelChange"
	| "filterMode"
	| "onFilterModelChange"
	| "sx"
	| "disableRowSelectionOnClick"
	| "onStateChange"
	| "paginationMode"
	>
	> &
	Pick<
	DataGridProps,
	"paginationModel" | "onPaginationModelChange" | "filterModel"
	>;

Instead of inferring it directly from the DataGridProps, we can define onFilterModelChange as:

onFilterModelChange: (model: GridFilterModel) => void;

If you want to contribute to Refine and help us fix the issue, check out the Contributing Guide to get started!

[bhargavpshah98]

Hello @jamesdh @aliemir , I would like to contribute for working on this issue. Can you please assign it to me?

[jamesdh]

@bhargavpshah98 absolutely! Feel free to submit a PR for it!

[aliemir]

Hey @bhargavpshah98, assigned the issue! I think my comment above will be enough to get the task done but let us know if you need any help! 🙏

@jamesdh, did you had a chance to check my comment above about the solution, do you need any workaround for now, or does just casting the proper types resolves the issue in your codebase? 🙏

[bhargavpshah98]

Hello, @aliemir , Thank you for assigning the task. Yeah, that sounds good. I will reach out if I need any help or guidance.

[bhargavpshah98]

Hello @aliemir @jamesdh , I need some help regarding testing of the code and the changes I found in the codebase. Let me know the best way to connect with you.

[jamesdh]

@bhargavpshah98 the easiest way is to create a draft PR and ask for feedback on your changes directly.