Sorting data in bootstrap table (datafield issue)

Question

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

have you tried it by adding dataFormat={showGame1} after the datafield attribute, and then adding following function 'function showGame1(cell, row) { return cell.game1; }' With this you should be able to get nested fields — mr deadsven
– mr deadsven, Commented Jul 4, 2018 at 9:47

AllenFang · Accepted Answer · 2018-07-10 14:52:58Z

1

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 :)

answered Jul 10, 2018 at 14:52

AllenFang

1612 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Doe veto Over a year ago

I have already solved this problem by creating a javascript function that flattens the object, so that there are no nested objects/children, but then sorting is the next problem I have.

AllenFang Over a year ago

@JohnDoeveto about the sorting problem I think the only way to fix is custom a sort function by yourself.

Collectives™ on Stack Overflow

Sorting data in bootstrap table (datafield issue)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related