Displaying nested Object Key in Ant Design Table

user_17393772 0
Viewed 2356

I am having an object Structure like this :-

const data = {
    "message": "Success",
    "responce": [
        {
            "created_AT": "Wed, 01 Dec 2021 15:39:48 GMT",
            "created_BY": "John",
            "dateTime": "Wed, 01 Dec 2021 15:39:48 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "slots": {
                "email_org": {
                    "influence_conversation": false,
                    "initial_value": null,
                    "type": "text"
                }
            },
            "slots_ID": "f539ba87-26ee-4287-9037-0ffcf8387593",
            "updated_BY": "",
            "user_ID": "av1234"
        },
        {
            "created_AT": "Mon, 20 Dec 2021 13:30:27 GMT",
            "created_BY": "john",
            "dateTime": "Mon, 20 Dec 2021 13:30:27 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "slots": {
                "mobile_number": {
                    "influence_conversation": false,
                    "initial_value": null,
                    "type": "text"
                }
            },
            "slots_ID": "505004fb-f6e5-4eef-81a7-eaf078484d8b",
            "updated_BY": "",
            "user_ID": "av1234"
        },
        {
            "created_AT": "Mon, 20 Dec 2021 13:36:24 GMT",
            "created_BY": "john",
            "dateTime": "Mon, 20 Dec 2021 13:36:24 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "slots": {
                "test_mobile_number": {
                    "influence_conversation": false,
                    "initial_value": null,
                    "type": "text"
                }
            },
            "slots_ID": "fb6529f8-8d45-469d-aa17-a53109c86fc1",
            "updated_BY": "",
            "user_ID": "av1234"
        }
    ],
    "status_code": 0
}

Now I want to display the slots key in ant design table, so the expected output is

Slot Name Created By
email_org John
mobile_number John
test_mobile_number John

But what I am getting is below

Slot Name Created By
John
John
John

The Code, Note the slotData is the data object I am getting which I have mentioned above.

const [dataSource, setDataSource] = useState(slotData)
  const columns = [
    {
      title: "Slot Name",
      dataIndex: "slots",
      key: "slots_ID",
    },
    {
      title: "Created By",
      dataIndex: "created_BY",
      key: "created_BY",
    },
  ];
  return (
    <>
      <Card className="csi-project-card-0934">
        <Table
          bordered
          className="ib-table"
          dataSource={dataSource.responce}
          columns={columns}
          pagination={{ pageSize: 6 }}
          rowKey={Math.random().toString()}
        />
      </Card>
    </>
  );
};
export default SlotTable;

Please Help Where am I going Wrong ??

antd reactjs
1 Answers

Since in your data slots property is an object, antd couldn't show it in the table directly, so you can use render property on your column definition to acheive your goal. like this:

const columns = [
  {
    title: 'Slot Name',
    dataIndex: 'slots',
    key: 'slots_ID',
    render: item => Object.keys(item)[0],
  },
  {
    title: 'Created By',
    dataIndex: 'created_BY',
    key: 'created_BY',
  },
];

Here is an example by your data and columns definition on stackblitz.

user_119779290
Related