使用 React-Table 庫對資料進行排序

有時，React 開發人員必須建立一個表格元件來以有組織的方式顯示大量資料。本文將解釋 react-table，這是一個很棒的庫，帶有自定義元件以在表格中顯示資料。

使用 react-table 庫將資料顯示和排序為表格

描述 react-table 庫的最簡單方法是一組用於構建靈活但多功能的表格和網格以顯示資料的鉤子。

不管你怎麼想，這些鉤子都不會渲染任何 CSS 或 HTML 元素。

react-table 庫背後的開發人員最近釋出了一個新的和改進的版本 7。它是圍繞鉤子設計的，它很有效，但需要一些學習時間。

React 中的 useTable 鉤子

這是庫的主要鉤子，它接受一個引數 options 物件，你可以使用它來提供需要顯示的資料、自定義功能（例如表的預設排序或過濾器）等等.

引數需要包含兩個陣列值：列和資料。

要了解有關選項的更多資訊，以及這兩個陣列的條件，請閱讀官方文件頁面。

react-table 庫的預設排序

通常，你的表應包含初始化時的資料。react-table 讓你可以自由地對初始資料進行排序。

在通過 options 物件傳遞了兩個必需的陣列後，你可以傳遞第三個 initialState 選項，這是一個具有指定初始資料的預設格式、過濾和排序的鍵值對的物件。

讓我們看一個 useTable() 鉤子的示例例項。

useTable(
    {
        columns,
        data,
        initialState: {
            sortBy: [
                {
                    id: 'id',
                    desc: true
                }
            ]
        }
    }

在此示例中，我們使用 sortBy 陣列指定我們要對 id 列進行排序，並預設按降序（按字母順序）對其進行排序。

如果你想同時按兩列排序，你可以新增另一個物件來指定列或資料的順序。