expandRow.expanded undefined #898
Description
i get this error after fetching data from remote server. The data is valid (works fine if i remove expand row).
This is how i configured all
"react-bootstrap-table-next": "^3.1.0",
"react-bootstrap-table2-overlay": "^1.0.0",
"react-bootstrap-table2-paginator": "^2.0.4",
"react-bootstrap-table2-toolkit": "^1.4.0",
<BootstrapTable
remote
pagination={_paginationFactory}
fetchInfo={ { dataTotalSize: this.state.totalDataSize } }
onTableChange={ this.onTableChange }
columns={customerColumn}
data={customerData}
keyField={"key"}
containerClass={'index-customer-class'}
noDataIndication={ () => <NoDataIndication /> }
loading = {loading}
overlay={_overlayFactory}
expandRow={expandRow}
/>
const expandRow = {
renderer: row => {
console.log(row);
return(
<table className="inner-table">
<thead>
<tr>
<th>Solution</th>
<th>version</th>
<th>Accounts
<i id="PopoverSearchAccount" className="fas fa-info-circle ml-1" ></i>
{popoverAccount}
</th>
</tr>
</thead>
<tbody>
{row.solutions.map(solution => {
let solutionName =`${solution.name.name} version: ${solution.version}`;
let key = `solution_${solution.id}`;
let accounts = solution.accountInSolution.map(account=>{
console.log(account);
let accountkey = `account_${account.id}_${key}`;
return <a href="#" key={accountkey} onClick={() => row.onClickAccount(account.accountnumber)}>{account.accountnumber} </a>
});
//accounts.unshift(<i className="fas fa-info-circle" data-container="body" data-toggle="popover" data-placement="top" data-content="Click on account number to search all customer that use the account."></i>);
return (
<tr key={key} >
<td><span>{solution.name.name}</span></td>
<td><span>{solution.version}</span></td>
<td>
{accounts}
</td>
</tr>)
})}
</tbody>
</table>
)},
showExpandColumn: true,
onlyOneExpanding: true,
expandByColumnOnly: true,
expandHeaderColumnRenderer: ({ isAnyExpands }) => {
if (isAnyExpands) {
return <i className="fas fa-minus-circle link"/>
}
return <i className="fas fa-plus-circle link"/>
},
expandColumnRenderer: ({ expanded }) => {
if (expanded) {
return <i className="fas fa-minus-circle link"/>
}
return <i className="fas fa-plus-circle link"/>
}};