7

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

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Raul
  • 659
  • 1
  • 6
  • 11
  • 4
    Sounds like you're missing a `key` field for each record in your data. – Scratch'N'Purr Jan 06 '21 at 05:53
  • 1
    @Scratch'N'Purr that's right, the key was missing, I added rowkey={(record) => record.stationId} to my Table component and now is working prefectly, thanxs. – Raul Jan 07 '21 at 07:52

3 Answers3

14

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" />
  • Nash like I said to @Scratch'N'Purr you are rifht, the key was missing, tanks. – Raul Jan 07 '21 at 07:55
  • 6
    for me it had to look like this: ``` record.key} />``` and also loop through the rows of my data and assign a unique ```key```.
     – Embedded_Mugs Sep 20 '21 at 20:21
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" } ]

Vasilakopoulou
  • 21
  • 1
  • actually, in my case, the parent table keys not accepted by rowKey attribute. so I had to set the keys to each column. I added keys to column definition and each column of data source. I used this reply to understand it. Thank you! – Vidurajith Darshana Jun 09 '22 at 05:52
0

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.

Tzvetan Marinov
  • 26
  • 1