react-bootstrap-table排序在数字字段上无法正常工作

Question

我有一个项目使用ReactJS作为Firebase实时数据库的前端。 react-bootstrap-table用于数据列表。对数字字段进行排序无法正常工作。我无法找到任何API /插件来强制更改这些字段的数据类型。

  

默认排序依据：价格 - 设计

  

排序依据：容量 - desc

  

项目的JSON结构

<BootstrapTable data={this.state.posts} striped hover search pagination exportCSV options={ options }>
    <TableHeaderColumn dataField="id" isKey dataAlign="center" hidden>Key</TableHeaderColumn>
    <TableHeaderColumn dataField="capacity" dataSort>Capacity</TableHeaderColumn>
    <TableHeaderColumn dataField="location" dataSort>Location</TableHeaderColumn>
    <TableHeaderColumn dataField="price" dataSort>Price</TableHeaderColumn>
    <TableHeaderColumn dataField="createdByLong" valueField="id" dataSort dataFormat={this.dateFormatter}>Created By</TableHeaderColumn>

Answer 1

我知道这是一个旧的，但如果你没有找到解决方案，这可能会有所帮助。

默认情况下，排序功能看起来像字母顺序。

要应用数字排序，请尝试在要应用数字排序的列上使用sortFunc，并提供自定义回调函数来执行数字排序。

例如，对于价格，我添加了numericSortFunc函数，如下所示：

function numericSortFunc(a, b, order) {
  if (order === 'desc') {
    return Number(b.price) - Number(a.price);
  } else {
    return Number(a.price) - Number(b.price);
  }
}

<BootstrapTable data={this.state.posts} striped hover search pagination exportCSV options={ options }>
  …
  <TableHeaderColumn dataField="price" dataSort sortFunc={ numericSortFunc }>Price</TableHeaderColumn>
  …
</BootstrapTable>

希望这是有道理的！