CODEWITHSUNDEEP
reactjsmaterial-ui
FD3
FD3

Reputation: 1946

How to disable onClick function on a single table row?

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&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(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>
  );
}

Upvotes: 2

Views: 4320

Answers (2)

clod9353
clod9353

Reputation: 2002

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

Upvotes: 5

hassanqshi
hassanqshi

Reputation: 363

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>

Upvotes: 0

Related Questions