如何對 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 以獲得正確的排序。