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: '[email protected]',
        active: true,
      },
      {
        email: '[email protected]',
        active: false,
      },
    ];
    const columns = [
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Active',
        dataIndex: 'active',
        key: 'active',
        align: 'center',
        render: (d) => <div className="btn-wrap" style={{ width: "200px" }}><Button onClick={(e) => { console.log("column click", e.target.value, d) }}>Click</Button></div>
      },
    ];

    return (
      <div>
        <Table
          columns={columns}
          dataSource={dataSource}
          onRow={(record, recordIndex) => ({
            onClick: event => { console.log("onRow onClick", event.target, event.target.className, record, recordIndex) } 
          })}
        />
      </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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.6.1/antd.min.js" integrity="sha512-rPqRMX/4jFDJThNjfMJdEWy7cLU+ZonHIBTzHmy5OkHdaT6wZmZozvXgs7KvybTNdCDGa537RB2bURRg+LztKw==" crossorigin="anonymous"></script>
<div id="root"></div>

Answer 1

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: '[email protected]',
        active: true,
      },
      {
        email: '[email protected]',
        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></div >
      },
    ];

    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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.6.1/antd.min.js" integrity="sha512-rPqRMX/4jFDJThNjfMJdEWy7cLU+ZonHIBTzHmy5OkHdaT6wZmZozvXgs7KvybTNdCDGa537RB2bURRg+LztKw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.6.1/antd.min.css" integrity="sha512-2SGI5T/y8FJNyBbuUYsZlNRqQ3ZAbJ3fgd41UQcvEXM+LLnBg9qyHqopKO88/w09uaweOv4HbLsFez0hIH4A+Q==" crossorigin="anonymous" />
<div id="root"></div>
<div id="root"></div>