title: Antd: How to get the entire row value in a specific cell click?
body: <h2>Problem Statement</h2>
  <p>In my react project (using <code>antd</code> 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.</p>
  <h3>Example:</h3>
  <p>In the below given example when any cell of <code>Active</code> 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.</p>
  <p>If observed,</p>
  <ul>
  <li>There is a custom <code>render</code> which can be provided for column but it only have the value for that particular column only (<em>check</em> onClick of button). So seem useless at the moment.</li>
  <li>There is <code>onRow</code> 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.</li>
  </ul>
  <p>Is there any cleaner/better way to do this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; &lt;div className="btn-wrap" style={{ width: "200px" }}&gt;&lt;Button onClick={(e) =&gt; { console.log("column click", e.target.value, d) }}&gt;Click&lt;/Button&gt;&lt;/div&gt;
        },
      ];
  
      return (
        &lt;div&gt;
          &lt;Table
            columns={columns}
            dataSource={dataSource}
            onRow={(record, recordIndex) =&gt; ({
              onClick: event =&gt; { console.log("onRow onClick", event.target, event.target.className, record, recordIndex) } 
            })}
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"))</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.as-console-wrapper {
    overflow: scroll !important;
    top: 0 !important;
    right: 0 !important;
    width: 50% !important;
    left: 50% !important;
    height: 100% !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.6.1/antd.min.js" integrity="sha512-rPqRMX/4jFDJThNjfMJdEWy7cLU+ZonHIBTzHmy5OkHdaT6wZmZozvXgs7KvybTNdCDGa537RB2bURRg+LztKw==" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>