How to disable onClick function on a single table row? - reactjs

Question

I encountered the case having a Link in a specific row and onClick function which triggers if any of rows is clicked. So for the row, that has a Link I don't want to trigger onClick function, but can't find out the correct approach.
Any help will be appreciated.
Codesandobox link
And Code example below
import * as React from "react";
import Table from "#mui/material/Table";
import TableBody from "#mui/material/TableBody";
import TableCell from "#mui/material/TableCell";
import TableContainer from "#mui/material/TableContainer";
import TableHead from "#mui/material/TableHead";
import TableRow from "#mui/material/TableRow";
import Paper from "#mui/material/Paper";
import { Link } from "#mui/material";
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number
) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9)
];
export default function BasicTable() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow onClick={() => alert("test")} key={row.name}>
<Link
target="_blank"
rel="noopener noreferrer"
underline="hover"
href="https://www.google.com/"
sx={{ cursor: "pointer" }}
color="inherit"
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
</Link>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

Answer 1

you can add:
onClick={(e) => e.stopPropagation()}
to your Link element. This way, when the Link is clicked, the click event won't propagate to the parent TableRow

Answer 2

This might help
<TableBody>
{rows.map((row,i) => (
<TableRow onClick={() => {if(!document.getElementById(`row${i}`)) alert("test")}} key={row.name}>
<Link
id={`row${i}`}
target="_blank"
rel="noopener noreferrer"
underline="hover"
href="https://www.google.com/"
sx={{ cursor: "pointer" }}
color="inherit"
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
</Link>