Onclick function for material ui tablecell in react

Question

I have a requirement to show popovers, when clicking on table cell (used Material UI table cell). Tried adding onclick function to cell, but not able to pass the element value to the function. How can I achieve this? Below is the code snippet which used to render table.

<TableBody>
 {dataObject.map((data) => (
    <TableRow key={data.id}>
    <TableCell>
        <Button>
            {data.info}
        </Button>
    </TableCell>
    <TableCell>
        {data.request}
    </TableCell>
    </TableRow>
))}
</TableBody>

Thanks in advance.

Dekel · Accepted Answer · 2020-04-15 10:25:33Z

8

The <TableCell> component is eventually a td/th in your html, so you don't really have a value attached to it (it's not like a pure react component that you can just use value, or an input element that has value that you can access).

What you can do is access the element's innerHTML / textContent to access the content of the cell using the event itself:

const handleCellClick = (e) => {
    console.log(e.target.textContent);
}

<TableCell onClick={handleCellClick}>{data.request}</TableCell>

answered Apr 15, 2020 at 10:25

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vithursa Mahendrarajah Over a year ago

Thanks.. this is what I was looking.

Vithursa Mahendrarajah Over a year ago

@ Dekel, is it possible to get the values of other columns in same row using the event.target?

Dekel Over a year ago

Everything is possible, but I really wouldn't suggest it to go this way.

Vithursa Mahendrarajah Over a year ago

What would be the appropriate method in such scenario?

Dekel Over a year ago

I would probably use the material-table (which is a component that gives you such functionality), and make sure that onClick I can access the data of the row using the row object (and not only the cell using the textContent).

Collectives™ on Stack Overflow

Onclick function for material ui tablecell in react

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related