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>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;

在這裡我們：

使用 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 表格元件提供所有必要的選項，以簡單、直觀和靈活的方式設計表格。

列印頁面