Antd table duplicate columns-CodePudding

In the below code https://codesandbox.io/s/epic-varahamihira-yqsuds?file=/src/mock.js:228-236

I need some help in looping data in antd table and displaying it without duplicating columns, since array of objects is inside another object I'm not sure how it should be done. From the above example I need to achieve one column as lastname and two rows for it testing and testing 2

Thanks.

CodePudding user response：

Try this, it will work.

const _data = tableData.map(({ mocking }) => mocking).flat()
const _dataSource = tableData.map(item => item.name);
const dataSource = _data?.map((item, index) => ({ ...item, name: _dataSource[index ]}));

Add Columns like this:

const columns = [
 {
   title: "Last Name",
   dataIndex: "lastName",
   key: "lastName"
 },
 {
   title: "Name",
   dataIndex: "name",
   key: "name"
 },
];

Return your Antd Table component.

return <Table pagination={false} dataSource={dataSource} columns={columns} />;