ReactJS-表格

ReactJS 是一款非常流行的 JavaScript 库，而表格是前端页面中最常用的数据展示方式之一。本文将介绍如何使用 ReactJS 制作简单的表格和一些扩展组件库。

基础表格

制作基础表格包含三个步骤：创建表头、创建表体和渲染表格。

创建表头

表头可以使用 HTML <thead> 元素来定义，同时可以在其中使用 <th> 元素来定义列名。我们可以通过创建一个函数来返回表头内容：

const renderTableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
  );
};

创建表体

表体可以使用 HTML <tbody> 元素来定义，同时可以在其中使用 <tr> 元素来定义行，使用 <td> 元素来定义单元格内容。我们可以通过创建一个函数来返回表体内容：

const renderTableBody = () => {
  return (
    <tbody>
      <tr>
        <td>John</td>
        <td>30</td>
        <td>London</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>40</td>
        <td>Tokyo</td>
      </tr>
    </tbody>
  );
};

渲染表格

创建完毕表头和表体后，我们可以将它们组合起来渲染出完整的表格：

const Table = () => {
  return (
    <table>
      {renderTableHeader()}
      {renderTableBody()}
    </table>
  );
};

这样我们就可以使用 <Table /> 组件来显示表格了。

扩展表格

一些扩展的 ReactJS 组件库提供了一些更加灵活的表格功能，比如支持排序、分页等。下面是两个比较流行的组件库：

react-table

React Table 提供了使用数据分页、排序、过滤的灵活性，并且非常容易自定义。

1. 安装

npm install react-table

2. 使用

import ReactTable from 'react-table';
import 'react-table/react-table.css';

const ReactTableComponent = () => {
 const data = [
   { name: 'John', age: 30, city: 'London' },
   { name: 'Jane', age: 25, city: 'New York' },
   { name: 'Bob', age: 40, city: 'Tokyo' },
 ];

 const columns = [
   { Header: 'Name', accessor: 'name' },
   { Header: 'Age', accessor: 'age' },
   { Header: 'City', accessor: 'city' },
 ];

 return <ReactTable data={data} columns={columns} />;
};

react-bootstrap-table-next

React Bootstrap Table Next 是一个非常流行的表格组件库，它提供了基于 Bootstrap 样式的表格组件和丰富的配置选项，支持远程数据加载、分页、排序、筛选等功能。

1. 安装

npm install react-bootstrap-table-next react-bootstrap-table2-paginator react-bootstrap-table2-filter

2. 使用

import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';

const BootstrapTableComponent = () => {
  const columns = [
    { dataField: 'name', text: 'Name', filter: textFilter() },
    { dataField: 'age', text: 'Age', sort: true },
    { dataField: 'city', text: 'City', filter: textFilter() },
  ];

  const data = [
    { name: 'John', age: 30, city: 'London' },
    { name: 'Jane', age: 25, city: 'New York' },
    { name: 'Bob', age: 40, city: 'Tokyo' },
  ];

  const paginationOptions = {
    sizePerPage: 5,
    hideSizePerPage: true,
    hidePageListOnlyOnePage: true,
  };
  return (
    <BootstrapTable
      keyField='name'
      data={data}
      columns={columns}
      pagination={paginationFactory(paginationOptions)}
      filter={filterFactory()}
    />
  );
};

结论

ReactJS 本身提供了一些基础的表格渲染功能，而一些扩展组件库则提供了更加复杂灵活的表格功能。我们可以根据自己的需求来选择适合的组件库。