How to know on which column the click event has happened in Antd Table?

Question

I have an antd table in which I need to do some operations only when the click event happens on a specific column.

Currently, I am using the onRow prop in the table component as below

onRow={(record, rowIndex) => {
  return {
    onClick: (event) => {
      // some operations              
    },
  };
}}

With this implementation, click is triggered for the entire row ( when clicked on any column )

I have tried to see the column dataIndex or key to return the click event only when the event has happened on a specific column. But args of onRow do not have that data.

Is there a way to achieve the required behavior?

Answer 1

If I understand correctly you want to create a table with editable row. I would suggest to create a new column (e.g. Actions) in which you will have a button that when you click it, it will let you edit the row you want. Check the following link, hope it's what you are looking for:

https://codesandbox.io/s/editable-rows-antd-4-20-6-forked-hvul4u?file=/demo.js

Answer 2

If you are looking to capture click events for a specific column, you can use the onCell property for column. (Codesandbox)

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    render: (text, row, index) => <a>{text}</a>,
    onCell: (record, rowIndex) => {
      return {
        onClick: () => {
          console.log(record, rowIndex);
        }
      };
    }
  },
...
]