前言
在 Web 开发中，表格展示数据是非常常见的一种 UI 元素，而对于前端来说，去手写一个可复用的表格组件是颇为繁琐的一项任务。但好在现在有很多第三方的表格组件库可供使用，并且这些组件库常常非常易用，且可以超出你的预期。其中，就包括 npm 包 @bretkikehara/react-table。
@bretkikehara/react-table 是一个基于 React 的表格组件库。其提供的功能非常丰富，包括排序、过滤、分页、自定义表头和单元格、行拖动、表头固定、响应式布局等。本篇文章将开展使用 @bretkikehara/react-table 的教程，以及合理的代码示例和详细讲解。
安装和使用 @bretkikehara/react-table
要使用 @bretkikehara/react-table，可以直接运行以下命令进行安装：
--- ------- -------------------------
安装成功后，我们即可在项目中使用 @bretkikehara/react-table。使用前，需要导入表格组件：
------ ------ - ------- - ---- -------- ------ ----- ---- ----------------------------
接下来，我们定义表格的配置项和数据源：
----- ---- - -
- ----- --------- ---- --- ---- ------ --
- ----- ------- ---- --- ---- -------- --
- ----- ------- ---- --- ---- -------- --
--
----- ------- - --------
-- -- -
-
------- -------
--------- -------
--
-
------- ------
--------- ------
--------- --------
--
-
------- ------
--------- ------
--
--
--
--data 数组是表格的数据源，每个对象代表一行数据。而 columns 数组是表格的列配置项，定义表头和数据列的映射关系。
最后，我们在 JSX 模板中使用 @bretkikehara/react-table 组件将配置项和数据源应用到表格中：
------ ----------------- ----------- --
酱紫，我们就使用 @bretkikehara/react-table 创建了一个非常基本的表格。
实现表格排序
很多新手在创建表格时，都希望表格可以支持排序或筛选的功能，因为这对预览表格数据和对数据分析非常有帮助。
@bretkikehara/react-table 组件库有一个非常好用的排序功能，它可以让我们非常容易地给表格数据排序。接下来，我们看下如何使用这个功能。
覆盖 sortType
@bretkikehara/react-table 的排序功能是非常强大的，它能够自动推断排序方式和排序格式，而且可以根据不同的排序需求来使用不同的排序方式。
- ------- ------ --------- ------ --------- -------- --
在这个例子中，我们将 accessor 设置为了 'age' ，sortType 设置为了 'basic' 。这里的 'basic' 让 @bretkikehara/react-table 知道 'age' 是一个普通的数据类型，应该使用基本的排序方式进行排序。
如果我们设置 sortType 为其他值（如 'datetime'，'alphanumeric'），表格就会使用其他对应的排序方式，这对于不同类型的排序需求非常有帮助。
内部实现
@bretkikehara/react-table 会根据用户传递给组件的属性，内部构建一个所谓的“实例”，这个实例包含了全部的配置信息和数据用于处理业务逻辑和渲染。如果想要控制表格排序，只需要在 columns 配置项中，将 sortType 设置成对应的字符串即可。
默认情况下，@bretkikehara/react-table 会按照以下的顺序执行排序：
- 调用传入的 sortType 函数；
- 如果没有传入，根据 accessor 所提供的值的数据类型执行排序；
- 如果 accessor 提供的是一个数组，就按提供的顺序执行排序；
- 如果以上都返回 null，则调用默认的排序方式。
实现筛选
筛选，指的是将表格某一列的数据根据管理员所设置的条件过滤掉一些数据。这个功能可以让用户更加容易地发现所需的数据。
@bretkikehara/react-table 组件库甚至还支持对单个数据列或多个数据列同时进行筛选。它提供了给列传递 filters 属性的选项，从而可以让你非常轻松地实现表格筛选功能。
columns 配置
- ------- ------- --------- ------- ------------ ------- ------ ------- -------------------- --
我添加了 placeholder 属性、Filter 属性和 defaultColumn 属性。placeholder 能够给出一个占位符，它会在输入框为空的时候显示出来，很多人会选择用它来提示用户进行输入。
Filter 属性是一个 react 组件，用于渲染筛选表单。这里，它使用了内置的默认的列 filter，你可以完全自定义 Filter 组件的外观和行为。
defaultColumn 属性是另外一个重要属性，它允许你为某个表格属性在不传递 Filter 属性时配置一个默认的筛选器。
实现筛选功能
@bretkikehara/react-table 提供了一个 useFilters 钩子能够帮助我们很容易地在应用组件之间传递和处理筛选器器。只要在 useTable 上调用它就可以自动隐式渲染任何筛选表格的组件。
----- - -------------- ------------------ ------------- ----- ---------- - - ---------
-
--------
-----
--
----------
--在这个例子中，useTable 的第二个参数是 useFilters，这告诉 useTable 我们希望使用上述 API 来使用筛选器。
实现表格分页
表格分页，是指将数据分割成页面内的小部分以便更清晰地展示和处理数据。在很多情况下，您可能需要显示非常大的数据集，不过将它们分割成更小的部分可以让页面加载得更快，让用户体验更佳。当然，@bretkikehara/react-table 也提供了一个强大的分页功能。
分页选项
----- -
--------------
------------------
-------------
-----
-----------
------------
------ - ---------- -------- --
---------
-------------
------------
----------------
-----
---------
----------
------------
- - ---------
-
--------
-----
------------- - ---------- - --
--
-----------
-------------
--在这个例子中，我添加了 usePagination 钩子。使用 usePagination 钩子后，你将获得许多分页选项，例如：
- pageIndex - 当前显示区域的页码（从0开始）；
- pageSize - 当前分页的大小；
- pageCount - 可分页的总数量；
- page - 当前所展现的页面数据；
- setPageIndex - 设置当前显示区域的页码；
- gotoPage - 更具体地设置当前显示区域的页码，并跳转到那个页面；
- nextPage 和 previousPage - 跳转到下一页和上一页。
基本实现
在要使用分页功能的组件中，我们需要加入@bretkikehara/react-table 的 useTable 钩子，同时也要在 useTable 上调用 usePagination 来启用分页功能：
----- - -------------- ------------------ ------------- ----- ---------- - - ---------
-
--------
-----
--
-------------
--这个话，我们带着一个默认配置的表格，加上了数据分页的功能。这样，我们的 @bretkikehara/react-table 已经可以支持简单的分页操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f75238a385564ab689d