在前端开发中，表格是一个常见的组件。为了方便开发，我们常常使用一些现成的表格组件库。其中，React 作为一个强大的前端框架，提供了许多开源的 UI 组件库，并且使用 npm 包可以很方便地安装和管理。其中，fm-react-bootstrap-table 是一个基于 Bootstrap 的 React 表格组件库，同时支持分页、排序、过滤、编辑等功能，非常实用。
安装
使用 npm
如果你的项目使用了 npm，可以通过以下命令安装 fm-react-bootstrap-table：
$ npm install fm-react-bootstrap-table
使用 yarn
如果你的项目使用了 yarn，可以通过以下命令安装 fm-react-bootstrap-table：
$ yarn add fm-react-bootstrap-table
使用
导入组件
成功安装之后，你需要在你的代码中导入组件。
import BootstrapTable from 'fm-react-bootstrap-table'; import 'fm-react-bootstrap-table/dist/index.css';
渲染表格
fm-react-bootstrap-table 支持传入 tableColumns 和 tableData 两个属性作为表格的列和数据。其中，tableColumns 是一个数组，每个元素都代表了一个表格的列，比如：
-- -------------------- ---- -------
----- ------------ - -
-
------ -----
---- -----
--
-
------ -----
---- -------
--
-
------ -----
---- ------
--
--而 tableData 则是一个包含了多个对象的数组，每个对象都代表了表格的一行数据，比如：
-- -------------------- ---- -------
----- --------- - -
-
--- --
----- -----
---- ---
--
-
--- --
----- -----
---- ---
--
-
--- --
----- -----
---- ---
--
--最后，你可以在你的代码中使用组件并传入 tableColumns 和 tableData 属性：
<BootstrapTable tableColumns={tableColumns} tableData={tableData} />分页
fm-react-bootstrap-table 支持分页功能。你可以在传入组件的属性中增加 pageLength 和 maxButtons 两个属性。其中，pageLength 代表每页的数据量，maxButtons 代表最多显示多少个分页按钮。比如：
<BootstrapTable tableColumns={tableColumns} tableData={tableData} pageLength={10} maxButtons={5} />排序
fm-react-bootstrap-table 支持对表格进行排序。你可以在传入组件的属性中，增加多个对象，每个对象都包含了一个 columnKey 和 sortOrder 属性，分别表示需要排序的列和排序方式（升序或降序）。比如：
<BootstrapTable tableColumns={tableColumns} tableData={tableData} sorting={[{ columnKey: 'id', sortOrder: 'DESCENDING' }]} />过滤
fm-react-bootstrap-table 支持对表格进行筛选。你可以在传入组件的属性中，增加多个对象，每个对象都包含了一个 columnKey 和 filterValue 属性，分别表示需要过滤的列和过滤的关键字。比如：
<BootstrapTable tableColumns={tableColumns} tableData={tableData} filter={[{ columnKey: 'name', filterValue: '张' }]} />编辑
fm-react-bootstrap-table 支持对表格进行编辑。你可以开启 editing 属性，并且传入一个对象。这个对象包含了 onRowAdd、onRowUpdate 和 onRowDelete 三个方法，分别表示新增、修改、删除操作的回调函数。比如：
-- -------------------- ---- -------
---------------
---------------------------
---------------------
----------
---------- -----
--------- --------- -- -
-- ---------
--
------------ --------- -------- -- -
-- ---------
--
------------ --------- -- -
-- ---------
--
--
--总结
以上就是 fm-react-bootstrap-table 的基本使用教程。作为一款集成了分页、排序、过滤、编辑等多种功能的表格组件库，fm-react-bootstrap-table 在实际开发中非常实用。如果你想引入表格组件库，并且在开发中快速实现表格的各种功能，fm-react-bootstrap-table 绝对是一个值得尝试的库。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555d281e8991b448d2e75