How to get the value of clicked cell in React Material Table? - reactjs

Question

I am trying to get the corresponding value of cell in React Material UI Table Component.
I was looking for already predefined component api properties but couldn't find anything appropriate.
Working with Material UI DataGrid component, I achieved that, getting the selected row via onSelectionModelChange thanks to this answer.
But in this case, Table doesn't have any checkboxes and I need to retrieve the data by clicking.
Here is the codesandbox link and the example code:
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";
export default function BasicTable({ users }: any) {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>userId</TableCell>
<TableCell align="right">id</TableCell>
<TableCell align="right">Title</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users &&
users.map((user: any) => (
<TableRow
key={users.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell align="right">{user.userId}</TableCell>
<TableCell align="right">{user.id}</TableCell>
<TableCell align="right">{user.title}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
Any help will be appreciated.

Answer 1

You can create an onClick function on the cells that you want this behavior to happen. Assuming that you want this on user.title cells and using console.log as example:
<TableCell align="right" onClick={({target}) => console.log(target.textContent)}>{user.title}</TableCell>

Answer 2

Since you are mapping over your data, you can simply use the desired data from the map:
{users &&
users.map((user: any) => (
<TableRow
key={user.id}
onClick={() => console.log(user.id)} // set desired state here
>
<TableCell align="right">{user.userId}</TableCell>
<TableCell align="right">{user.id}</TableCell>
<TableCell align="right">{user.title}</TableCell>
</TableRow>
))}