ReactJS - 表格

---

---

React 通过第三方 UI 组件库提供表格组件。React 社区提供大量的 UI/UX 组件，选择满足我们需求的正确库是一件很困难的事情。

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

让我们学习如何在本章中使用 react-bootstrap 库中的表格组件。

表格组件

表格组件允许开发者在 Web 应用中创建具有 Bootstrap UI 设计的简单表格。表格组件接受如下所示的表格标签：

• thead

• tbody

• tfoot

Table 组件接受少量 props 来自定义表格组件，如下所示：

• bordered (布尔值) - 为表格和单元格的所有边添加边框。

• borderless (布尔值) - 移除表格和单元格所有边的边框。

• hover (布尔值) - 为表格 (tbody) 中的每一行启用悬停状态。

• responsive (布尔值 | 字符串) - 为小型设备启用垂直滚动。sm | md | lg | xl 选项为相关设备启用响应式。例如，只有当设备分辨率非常小时，才会启用 sm。

• size (字符串) - 启用表格的紧凑渲染。可能的选项有 sm、md 等。

• striped (布尔值 | 字符串) - 为所有表格行启用斑马条纹。columns 选项还会为列添加斑马条纹。

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

• bsPrefix (字符串) - 用于自定义底层 CSS 类的前缀。

应用表格组件

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

create-react-app myapp
cd myapp
npm start

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

npm install --save bootstrap react-bootstrap

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

// remove all css classes

接下来，创建一个简单的表格组件，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>[email protected]</td>
            </tr>
            <tr>
               <td>1</td>
               <td>Peter</td>
               <td>15</td>
               <td>[email protected]</td>
            </tr>
            <tr>
               <td>1</td>
               <td>Olivia</td>
               <td>23</td>
               <td>[email protected]</td>
            </tr>
         </tbody>
      </Table>
   );
}
export default SimpleTable;

在这里我们：

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

• 使用 bordered 属性在表格和单元格周围启用边框。

• 使用 hover 属性启用悬停状态。

接下来，打开 App 组件 (src/App.js)，导入 Bootstrap CSS 并使用 Bootstrap 按钮更新内容，如下所示：

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 样式。

最后，在浏览器中打开应用程序并检查最终结果。表格组件将按如下所示渲染：

添加暗色变体和列条纹

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

首先，打开我们的轮播应用程序，并按如下所示更新 SimpleCarousel 组件：

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

在这里我们：

• 使用带 columns 的 striped 属性来启用基于列的斑马条纹。

• 使用带 dark 选项的 variant 属性来启用表格设计的暗色变体。

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

总结

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