CODEWITHSUNDEEP
reactjsmantine
Thor Christensen
Thor Christensen

Reputation: 63

Clickable table rows covers button

Made a table containing some fetched data with a button to open a menu on the right end of the rows. Made every row clickable to get redirected to a render where you can edit the current entry. However making the rows clickable(adding the link to the <tr>) covers the "Menu" button as they are rendered on the rows as well. Is there a way to avoid this, meaning still having the row clickable but the button rendered with each entry wont be affected?

<thead>
<tr>
<th>#</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th>TestData</th>
<th></th>
</tr>
</thead>
           
<tbody>
{tableValues && tableValues.map((tableValue, index) => (
<tr key={index} className="hover:cursor-pointer" onClick={() => handleRowClick(tableValue.id)}>

<td>{index + 1}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.dispatch && dayjs.unix(tableValue.dispatch.seconds).format('DD/MM/YY')}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>{tableValue.TestData}</td>
<td>
<Menu shadow="md" width={200}>
<Menu.Target>
<UnstyledButton>
<IconDotsVertical>Toggle menu</IconDotsVertical>
</UnstyledButton>
</Menu.Target>
</Menu>
</tbody>

Example of a row in the table, dots on the right is the button https://i.sstatic.net/5WTfJ.png

Upvotes: 4

Views: 1442

Answers (1)

Ionut-Cristian Florescu
Ionut-Cristian Florescu

Reputation: 1864

You'll most likely have to stop the event propagation when clicking on the button, something like this:

<UnstyledButton
  onClick={(e) => e.stopPropagation()}
>
  <IconDotsVertical>Toggle menu</IconDotsVertical>
</UnstyledButton>

The stopPropagation() method prevents further propagation of the current event in the capturing and bubbling phases.

Stopping propagation is quite a common pattern. For instance, I've most recently met a similar problem while developing a library called Mantine DataTable (you might want to check it out since it appears you are using Mantine).

In my case, while I was building the "record selection" feature, I had to add a selection Checkbox to every row, but on the other hand the row itself had to have an onClick handler.

The solution I found was to simply use stopPropagation() when the user clicks the checkbox.

I think the same would work in your case as well.

Upvotes: 1

Related Questions