How to add a column link to material-ui table and redirect to summary detail page using column link id

Question

I am working Material-UI tables, such as the following basic table here but I have added an id column at the beginning.

Assuming I have this basic table example at the route localhost:3000/basic-table within my React app, how can I take the below code and make the <tableCell>{row.id}</tableCell> into a <a href link> which will allow the user to click on this {row.id} column and then present the user with a new screen, where I can take this id and show more data about it?

I will also need a means of returning back to the main page report, i.e. parent page.

What I am trying to achieve is basically from the main parent report, a user can click on a row id, which would then present the user with a detailed report based on that id, i.e. like a drill-down report.

From the doco, I can't find any examples where I can achieve this as unsure how to add a column link.

Can anyone help with this or point me to an example.

      {rows.map((row) => (
        <TableRow key={row.id}>
          <TableCell component="th" scope="row">
            {row.id}
          </TableCell>
          <TableCell align="right">{row.name}</TableCell>
          <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>
      ))}

Answer 1

You can use history API

import { useHistory } from 'react-router-dom';

const YourComponent = () => {
...
const history = useHistory();
return {
    ...
    rows.map((row) => (
        <TableRow key={row.id} onClick={() => history.push(yourLocation)}>
          <TableCell component="th" scope="row">
            {row.id}
          </TableCell>
          <TableCell align="right">{row.name}</TableCell>
          <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>
      ))}
}