Ant Design - prevent table row click in specific column/area - antd

Question

I'm using ant design table component. I have "actions" column that I don't want the onRowClick event will trigger in this column.
How can it be done?
http://codepen.io/liron_e/pen/zZjVKZ?editors=001
const { Table, Modal } = antd;
const confirm = (id) => {
Modal.confirm({
title: 'Confirm',
content: 'Bla bla ...',
okText: 'OK',
cancelText: 'Cancel',
});
};
const info = (id) => {
Modal.info({
title: 'Info',
content: 'Bla bla ...',
okText: 'OK',
cancelText: 'Cancel',
});
};
const columns = [
{
key: 'status',
title: 'text',
dataIndex: 'text'
}, {
key: 'actions',
title: 'actions',
dataIndex: 'id',
render: (id) => {
return (
<span>
<a href="#" onClick={() => confirm(id)}>
Clone
</a>
<span className="ant-divider" />
<a href="#" onClick={() => confirm(id)}>
Replace
</a>
</span>
);
}
}
];
const dataSource = [
{
id: '1',
text: 'Hello'
},{
id: '123',
text: 'adsaddas'
},{
id: '123344',
text: 'cvbbcvb'
},{
id: '5665',
text: 'aasddasd'
},
];
ReactDOM.render(
<div>
<Table
columns={columns}
onRowClick={() => this.info()}
dataSource={dataSource}
/>
</div>
, mountNode);
As you can try when pressing on row the info modal would open.
When pressing some action the info and the confirm modals would open, and I would like that only confirm modal would open.
Thanks (:

Answer 1

In your render function:
render: (id) => {
return (
<span>
<a href="#" onClick={(e) => {
e.stopPropagation();
confirm(id);
}}>
Clone
</a>
<span className="ant-divider" />
<a href="#" onClick={() => confirm(id)}>
Replace
</a>
</span>
);
}

Answer 2

Just stop propagation in your action handler:
<span>
<a href="#" onClick={() => confirm(id)}>
Clone
</a>
<span className="ant-divider" />
<a href="#" onClick={() => confirm(id)}>
Replace
</a>
</span>

Answer 3

<Menu.Item onClick={(e)=>{
e.domEvent.stopPropagation();
handleUpdate(id)}}>
Edit
</Menu.Item>

Answer 4

Using react Link we can have a default anchor link functionality by stoping event propagation and trigger event on particular column.
"react-router": "^5.2.0",
import { Link } from "react-router-dom";
render: (value, record) => {
// Conditional checks if needs to handle on particular set of column
return (
<Link to={'TARGET_LINK_HERE'}
target="_blank" rel="noopener noreferrer"
onClick={(event) => {
event.stopPropagation(); // prevent event to propogate to parent to have row click which is default functionality
}}>{value}</Link>
)
}