I have to dynamically render some data into antD expandable table. The data is a nested object with various properties -
const values = [
[name = 'Josh', city = 'Sydney', pincode='10000'],
[name = 'Matthew', city = 'London', pincode = '20000'],
[name = 'Roger', city = 'Paris', pincode = '2300'],
]
How can I display this data in an antD table? The dataSource = {values} gives an empty table. Kindly guide me. How to display nested array values in the antD table?
First of all, the data you are trying to pass is totally wrong, it should be an array of objects,
const values = [
{key: '1', name: 'Josh', city: 'Sydney', pincode:'10000'},
{key: '1',name:'Matthew', city: 'London', pincode:'20000'},
{key: '3',name: 'Roger', city:'Paris', pincode: '2300'},
]
and second, as you read the Table sample code given on documentation, you also need to pass the table's header,
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'City',
dataIndex: 'city',
key: 'city',
},
{
title: 'Pincode',
dataIndex: 'pincode',
key: 'pincode',
},
]