React-Bootstrap-Table-Next 对动态表上的字母数字字符串进行排序

Question

我有一个在 React-Bootstrap-Table-Next 中生成 70 多列的动态表。我在尝试按字母数字顺序对列进行排序时遇到问题（有些列是数字，有些列是字母）。输入列的数据都是字符串。我正在使用 sortFunc 但当然它只对数字字符串的列进行排序。如何让 sortFunc 对两者都进行排序？

这是我尝试过的功能。查看 sortFunc。

let columns = [];
let headers = Object.keys(this.props.reconDetails[0]); //creating the text for headers
const newColumn = {
   dataField: header,
   text: header,
   sort: true,
   sortFunc: (a, b, order, dataField) => {
      if (order === 'asc') {
          return b - a;
      }
       return a - b;
      };
   columns.push(newColumn);
   this.setState({
     columns
   })
}

引导表：

BootstrapTable
   striped
   headerClasses="tableHeader"
   classes="tableBody"
   wrapperClasses="table-responsive"
   keyField={"Case_Line_Number"}
   data={this.state.RECON_DETAIL}
   columns={this.state.columns}
   />

Answer 1

在这里找到答案，因为它解释得很好。作者使用了 localeCompare 方法。 http://fuzzytolerance.info/blog/2019/07/19/The-better-way-to-do-natural-sort-in-JavaScript/

我在下面解决了我的问题：

sortFunc: (a, b, order, dataField) => {
   if (order === 'asc' || !order) {
       return b.localeCompare(a, navigator.languages[0] || navigator.language, {numeric: true, ignorePunctuation: true});
       }
       return a.localeCompare(b, navigator.languages[0] || navigator.language, {numeric: true, ignorePunctuation: true});
       },