在 React 前端开发中，表格是非常常见的组件。但是，自己写一个表格组件需要考虑的东西非常多，比如样式、分页、搜索等等，这对于初学者来说非常繁琐。而 bs-react-table 就是一个优秀的表格组件库，它提供了很多可定制的功能和 API，非常适合在实际开发中使用。
安装
在使用之前，我们需要将此库安装到项目中。打开命令行工具，进入到项目根目录，执行以下命令：
npm install bs-react-table
安装成功后，我们就可以开始使用了。
自定义表格组件
首先，在 React 组件中引入 bs-react-table 库：
import React from "react"; import Table from "bs-react-table";
然后，我们就可以创建表格组件了。下面是一个简单的示例：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
--
-
------------------- -
-- - ----------------- --------- -----
--------------------------------- -- -
---------------
----- -------------
---
---
-
-------- -
----- ------- - -
-
------ -----
---- -----
------ --
--
-
------ -----
---- ------
--
-
------ -----
---- ------
------ --
--
-
------ -----
---- --------
--
-
------ -----
---- ----------
------ ----
------- ------ ------- -- -
------
-- -----------------------------------
-- - --
-- ---------------------------- --------------------------
--
----
-------
-
-
--
------ -
------
-----------------
----------------------------
-----------
------------- --------- -- --
--
--
-
-在这个示例中，我们定义了一个 MyTable 组件，它包含了表格组件。在 componentDidMount 中，我们使用 axios 发送请求获取数据，并将 response.data 更新到 state 中。在 render 中，我们定义了表格的列信息和数据源信息，并将它们作为 props 传递给表格组件。其中，rowKey 用于指定数据源中每一项的唯一标识，这样表格才能正确地判断哪一行数据被选中。
此外，在 columns 中我们还定义了一个“操作”列，用于显示操作按钮。render 属性接收两个参数，text 和 record，分别表示当前单元格的值和整行数据。我们利用这些信息，生成了编辑和删除链接。
我们还为表格配置了分页，让每页显示 10 条数据。pagination 属性中的其他配置，比如 current 和 total 等，可以根据实际情况进行修改。
高级功能
bs-react-table 还提供了其他很多高级功能，包括：
行样式
可以通过 rowClassName 属性配置表格行的样式。
-- -------------------- ---- -------
------
-----------------
-----------------
-----------
---------------------- ------ -- -
-- ------ - - --- -- -
------ -----------
- ---- -
------ ----------
-
--
--排序
可以通过 sorter 属性实现表格列的排序。
-- -------------------- ---- -------
------
----------
-
------ -----
---- -------
------- --- -- -- ----------------------------
--
-
---
-
--
-----------------
-----------
--过滤
可以通过 filterDropdown 属性实现表格列的过滤。
-- -------------------- ---- -------
------
----------
-
------ -----
---- -------
--------------- -- ------- ------- -- -- -
-----
------ ----------- -------------- --
------- ----------- -- ----------------------
------
--
----------- -- -------- -- -- -
----- -------------- - -------- - ----------- --
-
--
-
---
-
--
-----------------
-----------
--选择
可以通过 rowSelection 属性实现表格行的选择。
-- -------------------- ---- -------
------
-----------------
-----------------
-----------
---------------
--------- --------------- -- -
--------------------------------------------------
-
--
--滚动
可以通过 scroll 属性实现表格的滚动。
<Table
columns={columns}
dataSource={data}
rowKey="id"
scroll={{ x: 600, y: 300 }}
/>在这个示例中，我们将表格的宽度设置为 600px，高度设置为 300px，超出部分将自动滚动。
总结
bs-react-table 是一个很好用的表格组件库，它提供了丰富的功能和 API，可以满足各种场景下的需求。在使用时，我们需要认真阅读文档，对其各种属性和方法有一个完整的了解，才能发挥其最大的作用。
完整代码示例见 GitHub。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde535f