I have a bootsrap table react component and I will like to add the nested json record as a table when each row in the bootstrap table, the row should expand and show the nested json has a table. However, I can not access the nested json in the expand row function.
My Goal: Presently I have a table showing the data of the outer json in a table. However, I want the elements in the the nested json summary to be represented in a table when each row is clicked.
const userList = [
{ id: 1, firstName: "james", lastName: "smith", age: 20,summary:{city:'lag', min:12} },
{ id: 2, firstName: "alex", lastName: "green", age: 20 , summary:{city:'lao', min:121}},
{ id: 3, firstName: "may", lastName: "jones", age: 18, summary:{city:'dag', min:112} }
];
columns=[
{text:'id',dataField:id},
{text:'firstName',dataField:id firstName},
{text:'lastName',dataField: lastName}
]
const expandRow = {
renderer: row => (
<BoostrapTable data={userList} columns={row.columns.summary}/>
)
};
<BoostrapTable data={userList} columns={columns} keyField="id expandRow={ExpandRow}/>
You are using the wrong variable, it's not rows, but row:
const expandRow = {
renderer: row => (
<BoostrapTable data={[row.summary]} columns={{text:'city',dataField:'city'},
{text:'min',dataField:'min'}}/>
)
};