How to pass nested json to BootstrapTable in react-bootstrap-table2

Question

I have a table and when a row is clicked, an additional row of more detail is display. I'm using reactJS and react-bootstrap-table2's BootstrapTable.

The below is my json file:

{
"persons": [{
    "id": 1,
    "name": "A",
    "email": "a@email.com",
    "contracts": [{
        "metric": "metric1",
        "contract_detail": [{
            "cpm": 5,
            "country_code": "US"
        },{
            "cpm": 1,
            "country_code": "AU"
        }]
    },{
        "metric": "metric2",
        "contract_detail": [{
            "cpm": 5,
            "country_code": "US"
        },{
            "cpm": 1,
            "country_code": "AU"
        }]
    }]
},
... ]}

The below is the expandRow in react-bootstrap-table2

renderer: row => (
            <div>
                <BootstrapTable
                    data={row.contracts}
                    columns={this.state.contract_columns}
                    keyField='id'
                    >
                    </BootstrapTable>
            </div>
        )

I expected that just passing row.contracts as the data will populate all the fields but the country_code and cpm fields are empty.

I also tried looping with map and filter but in this case, no table is being displayed.

Im new to react and js so finding it a big hard to debug. Any help will be appreciated. Thanks !

Answer 1

In case of Nested Json , need to use dataField specifically like below. Hope this helps!

Excerpt from the documentation

column.dataField (required) - [String] Use dataField to specify what field should be apply on this column. If your raw data is nested, for example:

const row = { id: 'A001', address: { postal: '1234-12335', city: 'Chicago' } } You can use dataField with dot(.) to describe nested object:

dataField: 'address.postal' dataField: 'address.city'