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

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.

score 0 · Accepted Answer · answered Nov 22 '21 at 15:29

0

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>

answered Nov 22 '21 at 15:29

Daniel Baldi

794
1
9

Hi @ Daniel Baldi, thanks for the answer. I encountered this as well, but I am trying to get the whole object, the way you suggest, it returns only a string – FD3 Nov 22 '21 at 15:34
What do you mean by the whole object? If you're referring to `user`, you can just do `onClick={() => console.log(user)}` – Daniel Baldi Nov 22 '21 at 15:43
Also, if you're handling the whole object it would make sense to add this `onClick` function to the `TableRow` component instead of the `TableCell`! Then clicking anywhere in the row will trigger it. – Daniel Baldi Nov 22 '21 at 15:51
thanks, for the answer. you are right, that is very true – FD3 Nov 22 '21 at 15:55

score -1 · Answer 2 · answered May 13 '22 at 19:27

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>
        ))}

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

2 Answers2