Trigger cell onClick instead of row onClick in React Table

Question

I want that clicking on the three dots on the right side of the row will open a pop up menu, so I wrote an onClick function for this cell.

I also want that clicking on any other area in the row will redirect to another page, so i override the onClick of react table, (as suggested in the react table documentation: https://github.com/tannerlinsley/react-table/tree/v6#custom-props) in the following way:

 _getTdProps = (state, rowInfo, column, instance) => ({
     onClick: (e, handleOriginal) => {
        if (this.props.onTableRowClick) {
            this.props.onTableRowClick({ e, column, rowInfo, instance });
        }
        if (this.props.shouldHandleOriginalOnClick && handleOriginal) {
           handleOriginal();
        }
    },
})

My problem is that the redirection to another page occurs also when I pressing the three dots icon, instead of opening the popup menu.

How can I make this functionality works? I've tried to play with z-index for cell and row but it didn't help.

Any suggestions?

Thanks

Tholle · Accepted Answer · 2019-03-14 12:20:59Z

6

You can call the stopPropagation method on the dots click event so that the event will not bubble up to the row when you click the dots.

e.stopPropagation();

edited Mar 14, 2019 at 12:20

answered Mar 14, 2019 at 12:14

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Comments

Muhammad Abdullah Shafiq · Accepted Answer · 2019-03-14 10:06:51Z

1

You can try this:

handleKeyDown(event) {
  event.preventDefault(); // Let's stop this event.
  event.stopPropagation(); // This will work.
}

answered Mar 14, 2019 at 10:06

Muhammad Abdullah Shafiq

8646 silver badges17 bronze badges

Collectives™ on Stack Overflow

Trigger cell onClick instead of row onClick in React Table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related