CODEWITHSUNDEEP
antd
Junna Lee
Junna Lee

Reputation: 21

How to expand Antd table row by click a button

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:

  1. use icon in the first column
  2. 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.

Upvotes: 2

Views: 13188

Answers (2)

shibashis
shibashis

Reputation: 67

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")
);

Upvotes: 0

Yichz
Yichz

Reputation: 9681

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}

Upvotes: 6

Related Questions