如何对React-bootstrap表格组件进行排序

Question

我刚开始学习React，正在使用来自react-bootstrap的Table组件。

我想以“到期天数”列的升序方式对表格进行排序。 但是Table组件没有排序属性，有没有人知道我该怎么做？

- tnoel999888

Answer 1

我建议使用 react-bootstrap-table，然后参考这些 示例。

- Paul McLoughlin

Answer 2

个人而言，我是通过在标题上添加一个onClick事件，并让该事件触发我已经编程的排序函数来完成的。为确保更改显示出来，我添加了一个状态，可以在我进行更改时直接更新以渲染表格。具体效果如下：

    <th className ="text-center" onClick= {()=>sortFunction('headerName')}>HeaderName</th>

以下是函数的简化版本：

    function sortFunction(col){
    switch (col){
    case "headerName":
    dataArray.sort((a, b)=>{
      if(a.attribute>b.attribute){
        return 1:-1;
      }
      if(a.attribute<b.attribute){
        return -1;
      }
      return 0;
    });
    break;
    default:
    //you might want to do something as default, I don't
    break;
    setSort(sort+1);

请记住，我是这样声明状态的：

    const [sort, setSort] = useState(0);

当比较两个字符串时，请确保使用 localeCompare 而不是 ><。使用自定义排序功能的好处是你可以选择如何进行比较，这意味着你可以按照自己喜欢的方式进行排序。我还添加了另一个变量来处理顺序，并在对表格进行排序时交换顺序。

在您的情况下，我会这样做：

    dataArray.sort((a, b)=>{
      if(new Date(a.daysTillExpiry).getTime()>new Date(b.daysTillExpiry).getTime()){
        return 1;
      }
      if(new Date(a.daysTillExpiry).getTime()<new Date(b.daysTillExpiry).getTime()){
        return -1;
      }
      return 0;
    });
    setSort(sort+1);

记住，我没有专门为您的订单尝试过，所以可能需要反转 return 1 和 return -1 以获得正确的排序。

- ConLem