How to expand Antd table row by click a button - antd

Question

Version
3.0.3
Environment
pc, chrome
Reproduction link
https://codesandbox.io/s/my02ok19wy
Steps to reproduce
now, Table can expand row by two ways:
use icon in the first column
click the whole row with expandRowByClick as true.
But those are not what I want. I want to use the button in some other column, maybe the button Show More. Then, when I click Show More, the row will expand. How to realize this?
Like the demo shows, I want to expand the row by click Show More instead of click the button in the first cell. Thanks
What is expected?
expand one row by click one button not in the first cell
What is actually happening?
Must click the button in the first cell of the row. The button can't move to other cell.

Answer 1

It's possible but I prefer not to do the code for you, but I will explain how.
There is a props call expandedRowKeys where you specify keys of rows that you want to expand.
so
adding expandedRowKeys={[1,3]} to <Table /> will expand the first and the third row.
Now, you just need to implement the handleClickMore function to manipulate an array of row keys. and how something like
expandedRowKeys={this.state.expandedKeys}

Answer 2

You can use expandIcon and expandedRowRender for your purpose
This is the modified code:
import React from "react";
import ReactDOM from "react-dom";
import { version, Table, Button } from "antd";
import "antd/dist/antd.css";
const columns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Age", dataIndex: "age", key: "age" },
{ title: "Address", dataIndex: "address", key: "address" },
{ title: "Action", dataIndex: "", key: "expand" }
];
const data = [
{
key: 1,
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
description:
"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
},
{
key: 2,
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
description:
"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
},
{
key: 3,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
description:
"My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
}
];
ReactDOM.render(
<div style={{ margin: 24 }}>
<p style={{ marginBottom: 24 }}>
Current antd version: {version} <br />
You can change antd version on the left panel (Dependencies section).
</p>
<Table
// expandIconColumnIndex={3}
columns={columns}
expandedRowRender={(record) => (
<p style={{ margin: 0 }}>{record.description}</p>
)}
dataSource={data}
expandIcon={({ expanded, onExpand, record }) =>
expanded ? (
<Button
onClick={(e) => onExpand(record, e)}
>
Collapse
</Button>
) : (
<Button onClick={(e) => onExpand(record, e)}>Expand</Button>
)
}
/>
</div>,
document.getElementById("root")
);