在前端开发中，我们经常需要在页面中呈现表格数据。而 Bootstrap Table 是一个功能强大的开源 JavaScript 插件，能够为我们提供丰富的表格操作功能。在 React 开发中，我们可以用 @ocd/react-bootstrap-table 这个 npm 包来方便地在 React 项目中使用 Bootstrap Table。
安装
在使用 @ocd/react-bootstrap-table 之前，我们需要先安装它。可以通过 npm 来进行安装：
npm install @ocd/react-bootstrap-table --save
使用
导入
在项目的源代码中，我们首先需要导入这个 npm 包：
import BootstrapTable from "@ocd/react-bootstrap-table"; import "@ocd/react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
由于 @ocd/react-bootstrap-table 内部依赖了 Bootstrap，因此我们还需要在 HTML 文件中导入 Bootstrap 的样式文件：
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
渲染表格
我们可以通过如下代码来使用 @ocd/react-bootstrap-table 渲染一个简单的表格：
-- -------------------- ---- ------- --------------- ----------- -- ----- ----- ------ ---- -- ----- ----- ------- ------- ----- --------- - ------------------ ----- ------------------------------------- ------------------ ----------------------------------------- -----------------
这个表格包含了两列，分别是 ID 和姓名。我们通过 data 属性传入了一个数组，数组中的每个元素代表一行数据。表格中的第一列 ID 被设置成了关键字，表示它是一个主键。
更多配置
@ocd/react-bootstrap-table 提供了许多配置选项来帮助我们根据需要呈现表格。下面列举一些常用的选项：
- pagination：启用分页功能（默认为 false）。
- search：启用搜索功能（默认为 false）。
- multiColumnSearch：启用多列搜索功能（默认为 false）。
- options：根据需要启用不同的选项。
除了这些属性以外，我们还可以通过 TableHeaderColumn 组件设置每个表头的属性。下面列举一些常用的属性：
- dataField：指定这一列对应数据中的哪个字段。
- isKey：将这一列设置为关键字。
- dataSort：指定是否启用排序功能。
- dataFormat：指定渲染这一列时使用的格式化函数。
示例代码
下面给出一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -----------------------------
------ --------------------------------------------------------------------
-------- ----- -
----- -------- - -
- --- -- ----- -------- --- ------ --- --
- --- -- ----- -------- --- ------ --- --
- --- -- ----- -------- --- ------ --- -
--
------ -
--------------- --------------- ------- ----- ---------- ------ ----------------- ---------- ----------- --- ----- ---
------------------ ----- -------------- ---------------- ----------------------
------------------ ------------------------ ------------------------
------------------ ----------------- -------- ------------------ ---- -- ------------------- -------------------------
-----------------
--
-
------ ------- ----在这个示例中，我们使用了 @ocd/react-bootstrap-table 渲染了一个简单的表格。这个表格包含了三列，分别是产品 ID、产品名称和产品价格，同时还启用了分页和搜索功能。其中，产品价格列使用了一个格式化函数，将单价渲染成了带有美元符号的字符串。如果数据为空，表格会显示“无数据”（noDataText）。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588581e8991b448d5c81