CODEWITHSUNDEEP
reactjsmaterial-ui
blahblahblah
blahblahblah

Reputation: 2437

Make checkboxes and row click in Table component behave differently in Material-UI

I'm using a Material-UI Table component in my React web application, but I can't seem to figure out how to prevent the entire row from being selected when a user clicks somewhere on a table row. I only want the row selected if the user checks the checkbox. If the user clicks anywhere else, I want to show additional details on the row of data.

For additional context, my Table basically functions as a mailbox. When users click the row (a message), it should open a new page with further details, but when users check the checkbox next to the message in the table, the user should be able to flag is important, etc.

How would I go about doing this? Should I be using onCellClick and not use onRowSelection?

Upvotes: 0

Views: 2766

Answers (1)

CaseyC
CaseyC

Reputation: 1482

You can work around this behavior by stopping the event propagation in each <TableRowColumn>. In order to do this just add a <div> with an onClick handler to each <TableRowColumn>. Something like this

<TableRowColumn> <div onClick={(e) => {e.stopPropagation()}}>Column 1</div> </TableRowColumn>

Just make sure you add this to every <TableRowColumn>

Upvotes: 2

Related Questions