Antd: How to get the entire row value in a specific cell click?

Question

Problem Statement

In my react project (using antd for Tables), I have a big table containing some rows and columns. I need to get the row value when a cell is clicked or specifically cell data from one cell when another is clicked.

Example:

In the below given example when any cell of Active column is clicked, I need the email value as well and then do some operations (such as API call etc). And there doesn't seem any cleaner way to do this.

If observed,

There is a custom render which can be provided for column but it only have the value for that particular column only (check onClick of button). So seem useless at the moment.
There is onRow prop to Table but it triggers when any of the cell is clicked. It means I need to do custom handling which doesn't look good in the longer run. If there are n columns with n actions, I need to have n (or more) conditions. Each cell click need to have some different action so code will become messier as more and more functionality is added. Also, I need to rely on data attached to html tags (such as id, class etc) and write extra logic which seem complicate to this.

Is there any cleaner/better way to do this?

const Table = antd.Table
const Button = antd.Button

class App extends React.Component {
  render() {
    const dataSource = [
      {
        email: 'sunil@gmail.com',
        active: true,
      },
      {
        email: 'anil@gmail.com',
        active: false,
      },
    ];
    const columns = [
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Active',
        dataIndex: 'active',
        key: 'active',
        align: 'center',
        render: (d) => 
      },
    ];

    return (
      
         ({
            onClick: event => { console.log("onRow onClick", event.target, event.target.className, record, recordIndex) } 
          })}
        />
      
    )
  }
}

ReactDOM.render(, document.getElementById("root"))
.as-console-wrapper {
  overflow: scroll !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important;
  left: 50% !important;
  height: 100% !important;
}

user_3844188 · Answer

Ant design gives you access to the record / row data in the second parameter of the render method of the cell

render: (text, record, index) => ....

you can use that record when clicking on the active cell to retrieve the email of the selected row

see snippets

const Table = antd.Table
const Button = antd.Button

class App extends React.Component {
  render() {
    const dataSource = [{
        email: 'sunil@gmail.com',
        active: true,
      },
      {
        email: 'anil@gmail.com',
        active: false,
      },
    ];
    const columns = [{
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Active',
        dataIndex: 'active',
        key: 'active',
        align: 'center',
        render: (text, record, index) => < div className = "btn-wrap"
        style = {
          {
            width: "200px"
          }
        } > < Button onClick = {
          (e) => {
            console.log("corresponding email is :", record.email)
          }
        } > Click < /Button>


      },
    ];

    return ( <
      div >
      <
      Table columns = {
        columns
      }
      dataSource = {
        dataSource
      }
      /> <
      /div>
    )
  }
}

ReactDOM.render( < App / > , document.getElementById("root"))

.as-console-wrapper {
  overflow: scroll !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important;
  left: 50% !important;
  height: 100% !important;
}

Antd: How to get the entire row value in a specific cell click?

Problem Statement

Example:

1 Answers