Sorting data in bootstrap table (datafield issue)

So I have a react bootstrap table (very simplified version):

<BootstrapTable data={gameData}>
  <TableHeaderColumn dataField="player">
    Player username
  </TableHeaderColumn>
  <TableHeaderColumn dataField="games">
    Game1 score
  </TableHeaderColumn>
  <TableHeaderColumn datafield="games">
    Game2 score
  </TableHeaderColumn>
  <TableHeaderColumn datafield="total">
    Total score
  </TableHeaderColumn>
</BootstrapTable>   

And I have data coming from somewhere like this:

{
"player" : "playerName",
"games": {
    "game1": "10",
    "game2": "15",
}
"total" : "25"
}

I want to be able to sort the table, and to do so each tableheader needs to have it's own datafield. I am able to sort player, and total score since they have their own datafield, but I am not able to sort games score. I tried this:

 datafield="games.game1">
 datafield="games.game2">

But it does not work. I am really new to react, so is there any way I can solve this problem?

Thanks for the help

Answers:

Answer

react-bootstrap-table doesn't support the nested data field. but react-bootstrap-table-next it does. you can check this demo and also this.

I think you can consider to use react-bootstrap-table-next. here is the official website :)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.