Displaying nested Object Key in Ant Design Table

Question

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 ??

Answer 1

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.