使用 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 列进行排序，并默认按降序（按字母顺序）对其进行排序。

如果你想同时按两列排序，你可以添加另一个对象来指定列或数据的顺序。