React - 表格

React 通过第三方 UI 组件库提供 table component。React 社区提供了大量 UI / UX 组件，选择适合我们需求的正确库很困难。

Bootstrap UI 库是开发者流行的选择之一，并且被广泛使用。React Bootstrap (https://react-bootstrap.github.io/) 已将几乎所有的 bootstrap UI 组件移植到 React 库中，并且对 Table component 的支持也是最好的。

在本章中，我们将学习如何使用 react-bootstrap 库中的 Table component。

Table component

Table component 允许开发者在 Web 应用程序中创建带有 bootstrap UI 设计的简单表格。Table component 接受以下 table 标签：

• thead

• tbody

• tfoot

Table component 接受一小组 props 来自定义表格组件，具体如下：

• bordered (boolean) − 为表格和单元格的所有边添加边框。

• borderless (boolean) − 移除表格和单元格的所有边框。

• hover (boolean) − 为表格（tbody）中的每一行启用 hover 状态。

• responsive (boolean | string) − 为小设备启用垂直滚动。sm | md | lg | xl 选项为相应设备启用响应式。例如，sm 仅在设备分辨率非常小时启用。

• size (string) − 启用表格的紧凑渲染。可能的选项有 sm、md 等。

• striped (boolean | string) − 为所有表格行启用斑马条纹。columns 选项还会为列添加斑马条纹。

• variant (dark) − 使用 dark 值时启用深色变体。

• bsPrefix (string) − 用于自定义底层 CSS 类的前缀。

应用 Table 组件

首先，使用以下命令创建一个新的 React 应用并启动它。

create-react-app myapp
cd myapp
npm start

接下来，使用以下命令安装 bootstrap 和 react-bootstrap 库，

npm install --save bootstrap react-bootstrap

接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。

// 删除所有 css 类

接下来，创建一个简单的 table 组件，SimpleTable (src/Components/SimpleTable.js)，并按以下所示渲染表格 −

import { Table } from 'react-bootstrap';
function SimpleTable() {
   return (
      <Table striped bordered hover>
         <thead>
            <tr>
               <th>#</th>
               <th>Name</th>
               <th>Age</th>
               <th>Email</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>1</td>
               <td>John</td>
               <td>25</td>
               <td>john.example@example.com</td>
            </tr>
            <tr>
               <td>1</td>
               <td>Peter</td>
               <td>15</td>
               <td>peter.example@example.com</td>
            </tr>
            <tr>
               <td>1</td>
               <td>Olivia</td>
               <td>23</td>
               <td>olivia.example@example.com</td>
            </tr>
         </tbody>
      </Table>
   );
}
export default SimpleTable;

在这里，我们有，

• 使用 striped props 创建斑马纹表格。

• 使用 bordered props 为表格和单元格启用边框。

• 使用 hover props 启用悬停状态。

接下来，打开 App 组件 (src/App.js)，导入 bootstrap css，并使用以下所示的 bootstrap button 更新内容 −

import './App.css'
import "bootstrap/dist/css/bootstrap.min.css";
import SimpleTable from './Components/SimpleTable'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleTable />
            </div>
         </div>
      </div>
   );
}
export default App;

在这里，我们有，

• 使用 import 语句导入了 bootstrap 类。

• 渲染了我们的新 SimpleTable 组件。

• 包含了 App.css 样式。

最后，在浏览器中打开应用并检查最终结果。Table 组件将按以下所示渲染 −

添加暗色变体和列条纹

让我们在 table 组件中应用暗色变体和列条纹选项，并查看它如何更新表格设计。

首先，打开我们的轮播应用，并按以下所示更新 SimpleTable 组件 −

import { Table } from 'react-bootstrap';
function SimpleTable() {
   return (
      <Table bordered hover striped="columns" variant="dark">
      // ...

在这里，我们有，

• 使用带有 columns 的 striped props 启用基于列的斑马纹条纹。

• 使用带有 dark 选项的 variant props 启用表格设计的暗色变体。

接下来，在浏览器中打开应用并检查最终结果。Table 组件将带有列条纹和暗色变体按以下所示渲染 −

总结

Bootstrap table 组件提供了所有必要选项，以简单、直观且灵活的方式设计表格。