I am currently utilizing a Material UI Datagrid to showcase some data. Within one of the columns, there is a link that, when clicked, opens a URL in a new tab. I am facing an issue where I want to navigate to another page upon clicking on a row, but do not wish to do so if the link within the cell is clicked.
While I can simply disable click behavior for the entire cell containing the link, this is not the ideal solution. Is there a way to prevent the execution of onRowClicked when clicking on the Link itself, for instance?
Here is a simplified example of the setup I am working with:
<DataGrid
columns={[
{ flex: 200, field: 'name', headerName: 'Naam' },
{
flex: 250,
field: 'url',
headerName: 'Link',
renderCell: (cell: GridCellParams) => (
<Box width="100%" overflow="scroll">
<Link
href={cell.value}
target="_blank"
>
Click here
</Link>
</Box>
),
},
]}
onRowClicked={(row) => {
navigate(Routes.OTHER_PAGE.replace(':id', row.id))
}}
rows={rows}
/>