ReactJS - 表格

更新于 2025/3/24 10:22:17

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

Bootstrap UI 库是开发人员的热门选择之一，被广泛使用。React Bootstrap (https://react-bootstrap.github.io/) 已将几乎所有 bootstrap UI 组件移植到 React 库，并且它对表格组件也提供了最佳支持。

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

Table 表格组件

Table 表格组件允许开发人员在 Web 应用程序中使用 bootstrap UI 设计创建简单的表格。表格组件接受如下所示的表格标签 −

thead
tbody
tfoot

Table 表格组件接受一小组属性来自定义表格组件，它们如下 −

bordered (boolean) − 在表格和单元格的所有边上添加边框。
borderless (boolean) − 删除表格和单元格所有边上的边框。
hover (boolean) −为表格 (tbody) 中的每一行启用悬停状态。
responsive (boolean | string) − 为小型设备启用垂直滚动。sm | md | lg | xl 选项为相关设备启用响应式。例如，仅当设备分辨率非常小时才会启用 sm。
size (string) − 启用表格的紧凑渲染。可能的选项有 sm、md 等，
striped (boolean | string) − 为所有表格行启用斑马线条纹。columns 选项也会为列添加斑马线条纹。
variant (dark) 使用深色值时启用深色变体。
bsPrefix (string) −用于自定义底层 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 类。

// 删除所有 css 类

接下来，创建一个简单的表格组件， 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@tutorialspoint.com</td>
            </tr>
            <tr>
               <td>1</td>
               <td>Peter</td>
               <td>15</td>
               <td>peter.example@tutorialspoint.com</td>
            </tr>
            <tr>
               <td>1</td>
               <td>Olivia</td>
               <td>23</td>
               <td>olivia.example@tutorialspoint.com</td>
            </tr>
         </tbody>
      </Table>
   );
}
export default SimpleTable;

这里我们有，

使用条纹道具创建斑马表。
使用边框道具启用表格和单元格周围的边框。
使用悬停道具启用悬停状态。

接下来，打开 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">
      // ...

这里我们有，