CODEWITHSUNDEEP
jsonreactjsantd
Rhea
Rhea

Reputation: 401

How to display nested json data using antd table in react

I have populated some data in JSON format.

test =   
    [
  {
  "first":[
     {
        "key":"147",
        "count":2
     }
  ],
  "second":[
     {
        "key":"190",
        "count":1
     },
     {
        "key":"168",
        "count":3
     },

     {
        "key":"144",
        "count":5
     }
  ]
}
]

   this.setState({compareSummary: test})

and I have set this json in state and want to display this data in a table

      <Table
            rowKey={record => record.key}
            columns={getData()}
            dataSource ={compareSummary}
            minRows={0}
            pagination={false}
            resizable
          />

I am unable to display data. In a table(I am using antd table here), there should be two columns per entry. One for key and another for value.

Expected table structure:

  first        |        second
key   value    |       key    value
147     2      |      190    1
               |      168    3
               |      144    5

How Can I do that? TIA

Upvotes: 0

Views: 3842

Answers (1)

Omar El Sherif
Omar El Sherif

Reputation: 31

You need to have dataIndex and should look like the following:

dataIndex: ['first', 'key'] //this should display the key

Upvotes: 3

Related Questions