如何对 react-bootstrap Table 组件进行排序

Question

我是 React 新手，正在使用react-bootstrap中的 Table 组件。

我想按“到期天数”列的升序对表格进行排序。

但是 Table 组件没有排序属性，有人知道我该怎么做吗？

Answer 1

我建议使用react-bootstrap-table然后使用这些示例

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 以获得正确的排序。