ReactJS Reactstrap 表格组件

Reactstrap 是一个基于 Bootstrap 4 的 React 组件库，其中包含很多用于快速构建 Web 应用程序的 UI 组件，其中包括表格组件。Reactstrap 表格组件可以轻松地创建响应式的、可排序的和可过滤的表格。

安装

安装 Reactstrap 包和 Bootstrap CSS 样式库：

npm install --save reactstrap bootstrap

使用

import React, { Component } from 'react';
import { Table } from 'reactstrap';

class ExampleTable extends Component {
  render() {
    return (
      <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>用户名</th>
            <th>邮箱地址</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>user1</td>
            <td>user1@example.com</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>user2</td>
            <td>user2@example.com</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>user3</td>
            <td>user3@example.com</td>
          </tr>
        </tbody>
      </Table>
    );
  }
}

基本用法

表格组件可以使用 <Table> 元素来创建。可以在 <thead> 中添加表头行， <tbody> 中添加表格数据行。表头行和表格数据行可以使用 <tr> 标签创建，单元格可以使用 <th> 或 <td> 标签创建。

<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>用户名</th>
      <th>邮箱地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>user1</td>
      <td>user1@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>user2</td>
      <td>user2@example.com</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>user3</td>
      <td>user3@example.com</td>
    </tr>
  </tbody>
</Table>

响应式表格

Reactstrap 表格组件支持响应式表格，可以根据设备屏幕大小自动调整表格行的宽度。可以使用 responsive 属性来启用响应式表格。

<Table responsive>
  <thead>
    <tr>
      <th>#</th>
      <th>用户名</th>
      <th>邮箱地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>user1</td>
      <td>user1@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>user2</td>
      <td>user2@example.com</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>user3</td>
      <td>user3@example.com</td>
    </tr>
  </tbody>
</Table>

排序表格

Reactstrap 表格组件还支持排序表格，可以根据单元格内容对表格数据进行排序。可以使用 sortable 属性启用排序表格。

<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>用户名</th>
      <th>Email 地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>user2</td>
      <td>user2@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>user3</td>
      <td>user3@example.com</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>user1</td>
      <td>user1@example.com</td>
    </tr>
  </tbody>
</Table>

在 Reactstra 表格组件中，使用 data-field 属性来指定排序字段的名称，使用 data-order 属性来指定排序方式（'asc'或'desc'）。在单击表格标题时，会自动按指定的字段和排序方式对表格数据进行排序。