CODEWITHSUNDEEP
reactjsantd
PremKumar
PremKumar

Reputation: 1354

Antd table duplicate columns

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.

Upvotes: 0

Views: 542

Answers (1)

Priyen Mehta
Priyen Mehta

Reputation: 1187

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} />;

Upvotes: 1

Related Questions