Antd expandable table, expand all rows at same time when click on expand button

Question

I'm using an expandable table from antd design version 4.10 in my app with Next.js v10.0.4. When I clicked in + button in table its suppose to open only the row which is selected but I don't know why it is opening all the rows at same time.

This is my table component:

<Table
    size="small"
    dataSource={data}
    columns={updateColumns}
    expandable={{
      expandedRowRender: (record) => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      rowExpandable: (record) => record.level !== "3",
      onExpand: (expanded, record) =>
        console.log("onExpand: ", record, expanded),
    }}
  />

Is exactly the same code as documentation in antd design: https://ant.design/components/table/#components-table-demo-expand

Answer 1

You need a key property for each record in your data. If you have no key property, you can specified it on <Table> component using rowKey prop

<Table rowKey="your_data_id" />

Answer 2

I had the same problem with the table, I issue is not the code but your data. For the table work you need to add a "key" to every set of json data that you are giving to the table . Example: [ { "key": 1, "name": "hello", "surname": "world" }, { "key": 2, "name": "hello", "surname": "world" } ]

Answer 3

This probably due to missing keys in your dataSource array which is fed into the Table, which can be verified by a message in the DevTools console saying smth about missing key.