Use ButtonBase for ripple effect on Material UI TableRow

Question

I'm looking to add a ripple effect to the Material UI Table. I've tried a whole bunch of solutions but none of them quite seem to work perfectly. They all have their own quirks.

I did find this article, but not much effort was put into a solution. My trials so far seem like they could lead to a possible solution (hopefully)? My table rows either end up being the wrong height (and not taking up multiple columns) or they end up being weirdly centered.. not sure how to handle.

https://codesandbox.io/s/pmry2x11vj

<div className="App">
  <Router>
    <Grid container>
      <Grid item xs={12}>
        <Card>
          <Table>
            <TableBody>
              <TableRow hover>
                <TableCell>test</TableCell>
                <TableCell>Property</TableCell>
              </TableRow>
              <TableRow
                hover
                component={Link}
                to={"/"}
                style={{ textDecoration: "none" }}
              >
                <TableCell>Other</TableCell>
                <TableCell>Row</TableCell>
              </TableRow>
              <ButtonBase style={{ width: "100%", height: "100%" }}>
                <TableRow
                  hover
                  component={Link}
                  to={"/"}
                  style={{ textDecoration: "none" }}
                >
                  <TableCell>row</TableCell>
                  <TableCell>is weirdly centered</TableCell>
                </TableRow>
              </ButtonBase>
              <ButtonBase style={{ width: "100%", height: "100%" }}>
                <TableRow
                  hover
                  component={Link}
                  to={"/"}
                  style={{
                    textDecoration: "none",
                    width: "100%",
                    height: "100%"
                  }}
                >
                  <TableCell>row</TableCell>
                  <TableCell>
                    not right height, missing space on right
                  </TableCell>
                </TableRow>
              </ButtonBase>
              <TableRow
                hover
                component={Link}
                to={"/"}
                style={{
                  textDecoration: "none",
                  width: "100%",
                  height: "100%"
                }}
              >
                <ButtonBase style={{ width: "100%", height: "100%" }}>
                  <TableCell>row</TableCell>
                  <TableCell>
                    not right height, missing space on left / right
                  </TableCell>
                </ButtonBase>
              </TableRow>
              <TableRow>
                <TableCell style={{ width: "100%", height: "100%" }}>
                  <ButtonBase style={{ width: "100%", height: "100%" }}>
                    Extra
                  </ButtonBase>
                </TableCell>
                <TableCell>Normal Row</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>Extra</TableCell>
                <TableCell>Normal Row</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </Card>
      </Grid>
    </Grid>
  </Router>
</div>

Answer 1

Here is a solution 2023 updated

I was able to use <ButtonBase> and <TableRow> as follows using Material UI ^5.8.1 for getting the desired effect:

import {
  ButtonBase,
  SxProps,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Card,
} from "@mui/material";

import React from 'react'

const dataRowSX: SxProps = {
  display: "table-row",
  ":hover": {
    backgroundColor: "#f5f5f5",
    cursor: "pointer",
  },
};

export function MyTable({ rows }: { rows: any }) {
  return (
    <Card>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>FirstName</TableCell>
              <TableCell>LastName</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => {
              const { id, firstName, lastName } = row;
              return (
                <ButtonBase key={id} component={TableRow} sx={dataRowSX}>
                  <TableCell>{id}</TableCell>
                  <TableCell>{firstName}</TableCell>
                  <TableCell>{lastName}</TableCell>
                </ButtonBase>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </Card>
  );
}

display: "table-row" ensures that the display provided by <ButtonBase> is overrided to match the one of <TableRow>.