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

But what I am getting is below

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

CodePudding user response：

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.