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) => <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: '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></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>