Distinguish row clicks in Antd (ant design) table React component

user_5429504 0
Viewed 9946

I'm using Ant Design table component: https://ant.design/components/table/#Table

In each row, I'm rendering a title and some link. For example:

Product 1
https://example.com/link/product/1

I'm using the onRow API to open a modal to edit the info for the row, which is working fine. However, the onRow event is also trigged if I click on the link. Is there a way to not trigger the onRow event if I just click on the link in the row, and still keep everything as normal if I click on anywhere on the row cell?

Note: my current work around is using an isEditing state flag, but it's not a good experience since I have to get into "edit mode" and set isEditing to true.

antd reactjs
1 Answers

You'd better show your code usage of onRow and columns, If you use onRow.onClick like below:

<Table
  onRow={(record, rowIndex) => {
    return {
      onClick: event => {}, // click row
    };
  }}
/>

You can custom render of link with Event.stopPropagation() like this:

const columns = [
  {
    dataIndex: "link",
    title: "Link",
    render: (value) => {
      return (
        <a
          onClick={(event) => event.stopPropagation()}
          href={value}
          target="_blank"
        >
          Link
        </a>
      );
    }
  }
]
user_83353170
Related