Typing of custom component to render in GridActionsCellItem

[rafael-zilberman]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Why using version 5.6.1 of mui-x/data-grid we were using the component prop of the underlying ButtonBase component in order to integrate with react-router as follows:

<GridActionsCellItem
                        component={RouterLink}
                        to={`/notes`}
                        icon={<NoteIcon/>}
                        label="Notes"
                    />,

While Updating to versions older then 5.7.0 we are experiencing typing error stating that GridActionsCellItem doesn't have this prop enymore.

I followed the history of this component here but it seems that nothin relevant has been changed.

I found this commit containing bundling changes and did manged to find out that the difference between the latest version and the last version that has this feature working is type called GridActionsCellItem that has been added to the typing file in addition to GridActionsCellItemProps.

[Janpot]

Was hitting the same issue after upgrading mui packages in Toolpad. Did a quick code review and I believe this issue has the same root cause as mui/material-ui#32392.

[m4theushw]

@Janpot is right. The xxxProps interfaces of IconButton and MenuItem don't include component. This prop is only available when using the component itself, not when extending it (what we do). The following diff should be sufficient for now:

diff --git a/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx
index a54b786da..1e6096c64 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -7,6 +7,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 export type GridActionsCellItemProps = {
   label: string;
   icon?: React.ReactElement;
+  component?: React.ElementType;
 } & (
   | ({ showInMenu?: false; icon: React.ReactElement } & IconButtonProps)
   | ({ showInMenu: true } & MenuItemProps)

[dfliess]

hi! has this been added ?

[rafael-zilberman]

GridActionsCellItem

Still not fixed.

A nasty workaround for now:

import {GridActionsCellItem, GridActionsCellItemProps} from "@mui/x-data-grid";
import React, {RefAttributes} from "react";
import {Link as RouterLink} from "react-router-dom";

type GridLinkActionProps = {to: string} & GridActionsCellItemProps & RefAttributes<HTMLButtonElement>;

const GridLinkAction = ({to, ...props}: GridLinkActionProps) => {
    return (<RouterLink to={to}>
        <GridActionsCellItem {...props} />
    </RouterLink>);
};

export default GridLinkAction;

[boonya]

Or, one more workaround

// This is a workaround due to known issue https://github.com/mui/mui-x/issues/4654
const EditLink = forwardRef<HTMLAnchorElement>((props, ref) => {
  return <RouterLink ref={ref} {...props} to={generatePath(ROUTES.edit, {id})} />;
});
EditLink.displayName = 'EditLink';

return (
  <GridActionsCellItem
    {...props}
    component={EditLink}
  />
);