External link with MUI GridActionsCellItem

Question

I am developing an app using MUI and I have a MUI datagrid with user information such as phone number and email address. The problem I am currently facing is being able to have actions to open the email client to email or phone app to dial (eg. "mailto:[email protected]", "tel:90909090")

So far this is my code

{
    field: 'actions', type: 'actions', width: 120, getActions: (params) => [
                <GridActionsCellItem
                    icon={<EditIcon />}
                    label="Edit User"
                    onClick={() => {
                        navigate("/admin/users/" + params.row.email)
                    }}
                />,
                <GridActionsCellItem
                    icon={<DeleteIcon />}
                    label="Deactivate User"
                    onClick={() => {
                        setDeactivateUser(params.row)
                        handleDeactivateUserDialogOpen()
                    }}
                />,
                <GridActionsCellItem
                    icon={<EmailIcon />}
                    label="Send E-mail"
                    href={"mailto:" + params.row.email}
                    showInMenu
                />,
                <GridActionsCellItem
                    icon={<PhoneIcon />}
                    label="Call"
                    href={"tel:" + params.row.phone_number}
                    showInMenu
                />
            ]
},

I also tried using Link from react-router-dom through LinkComponent but it did not work

Here is a screenshot for reference
reference image

Answer 1

They have added component prop to GridActionsCellItem. https://github.com/mui/mui-x/pull/10344

You can now use component prop to pass Link component from react-router-dom.

[
        <GridActionsCellItem
            icon={<EditIcon />}
            label="Edit User"
            component={Link}
            to={"/admin/users/" + params.row.email}
        />,
        <GridActionsCellItem
            icon={<DeleteIcon />}
            label="Deactivate User"
            onClick={() => {
                setDeactivateUser(params.row)
                handleDeactivateUserDialogOpen()
            }}
        />,
        <GridActionsCellItem
            icon={<EmailIcon />}
            label="Send E-mail"
            component={Link}
            to={"mailto:" + params.row.email}
            showInMenu
        />,
        <GridActionsCellItem
            icon={<PhoneIcon />}
            label="Call"
            component={Link}
            to={"tel:" + params.row.phone_number}
            showInMenu
        />],