如何在React中使用表：第一部分

用于呈现数据的最常见的用户界面元素之一是表格。事实证明，使用表格时需要控制很多方面，例如：

• 定义列和标题

• 各种单元格格式（文本、数字、复选框）

• 调整大小

• 过滤

• 动态增长

• 造型

在这个由两部分组成的系列中，您将了解使用 react Bootstrap Table 组件在 React 中处理表格数据的细节。您将能够轻松创建复杂且具有专业外观的表格，并且能够自定义各个方面。

入门  

首先，您应该熟悉 React 本身。如果你需要 React 入门，  Envato Tuts+ 有一个很棒的系列可以帮助你开始使用 React。在本教程中，我们将专注于使用 React Bootstrap Table2。

首先，使用create-react-app 命令创建一个 React 应用程序。您可以  在 React Crash Course for Beginners 中学习如何设置 create-react-app。

create-react-app react-table-app

现在导航到项目文件夹并安装 React Bootstrap Table 2 和 Bootstrap。

cd react-table-app
npm install react-bootstrap-table-next --save
npm install --save bootstrap@4.0.0

创建基本表

我们将从一张基本表开始。我们首先导入 BootstrapTable 组件和css，如下所示。

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';

首先，我们初始化数据和列变量，然后我们将数据分配给BootstrapTable组件。数据包含来自搞笑节目Arrested Development的一些角色的名字。 

const data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];
const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'value',
  text: 'Product value'
}];

Bootstrap 组件具有以下属性。

• keyField

• data

• columns

该 render()方法呈现一个包含三列的表：“ID”、“Name”和“Value”。

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable keyField='id' data={ person } columns={ columns } />
      </div>
    );
  }
}

要查看该表，请发出命令npm start--reload。创建的配置 create-react-app会监视您的代码并在您更改任何内容时重新编译，因此您只需运行一次。然后，每个更改都会自动反映。

Compiled successfully!

You can now view my-table-app in the browser.

  Local:            https://localhost:3002
  On Your Network:  http://192.168.43.206:3002

Note that the development build is not optimized.
To create a production build, use npm run build.

结果如下：

请注意，每列具有相同的宽度。

使用列

您可以控制列的许多方面。特别是，列宽可以以绝对单位、百分比或不指定的形式指定。未指定列的列宽是均分的余数。例如，对于我们的基本表，让我们指定列如下：

• 第一列：20%

• 第二列：60%

• 第三栏：20%

您还可以管理文本和列的对齐方式以及标题和列的样式。以下是如何指定不同列宽、文本对齐方式和自定义样式的示例：

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true,
  headerStyle: (colum, colIndex) => {
          return { width: '60%', textAlign: 'center' };
        }
}, {
  dataField: 'value',
  text: 'Product value',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
  
}];

该表现在如下所示：

造型你的桌子

您看到了如何设置各个列和标题的样式，但样式可以走得更远。React Bootstrap 表 2 提供了很多自定义选项。首先，您可以简单地将 striped 和 hover 属性添加到 BootstrapTable 组件中以获得每行的备用背景颜色。

让我们将 striped 和 hover 属性应用于我们的表。

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        keyField='id'
        data={ person }
        columns={ columns } 
        />
      </div>
    );
  }
}

看看你如何用不同的颜色来设计不同的列。

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc }
}, {
  dataField: 'value',
  text: 'Product value',
  style: { backgroundColor: #fed9b7 }
}];

表格排序

React Bootstrap 表 2 允许可排序的列。这是通过 sort: true 在columns定义中给出一个属性来完成的。

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc },
  sort: true
}, {
  dataField: 'value',
  text: 'Product value',
      style: { backgroundColor: #fed9b7 }
}];

选择行

将数据放入表中后，您可能希望选择一些行来对它们执行一些操作。React Bootstrap 表 2 提供了多种选择选项。所有选项都组织在您作为属性传递给组件的单个对象中 selectRow。以下是一些选择选项：

• 单选模式（单选按钮）

• 多选模式（复选框）

• 可配置的列选择宽度

• select on row click：默认情况下，您必须单击选择器（单选按钮或复选框）

• 隐藏选择列（如果在行单击时选择为真，则很有用）

• 在选择时更改背景颜色

• 初始选定的行

• 选择挂钩（在单行上或在选择所有行时）。

以下组件演示了其中的许多选项：

React 中用于数据表的其他库

让我们探索一些其他的开源 React 表库。

反应虚拟化

react-virtualized 非常适合在渲染大型列表和表格数据时有效地显示大量数据。

react-virtualized 使用一种称为虚拟渲染的技术来有效地显示大量数据。虚拟渲染仅渲染可见的内容。例如，如果您有一个包含一千个项目的大列表，react-virtualized 在任何给定时刻只会显示一小部分数据（适合屏幕的数据），直到用户滚动显示更多。其他功能包括：

• 支持网格、列表、表格、砌体和集合的渲染

• 自动调整组件大小的能力

• 能够以相反的顺序显示项目

• 自定义 CSS 类和样式的能力

反应表

react-table 是一个轻量级的开源库，它允许快速和可扩展的 React 数据网格。它还支持钩子。它的一些最佳功能包括：

• 高度可定制 

• 支持排序、过滤、行选择、列排序和行扩展

• 完全可控的api

• 可动画化和可虚拟化

• 可调整大小

反应数据网格

React Data Grid 是另一个使用 Bootstrap 的开源库，非常适合编辑表格。它还具有令人惊叹的用户界面。特点包括：

• 列排序、搜索、过滤和分组

• 编辑列的能力

• 展开列以显示更多数据

结论

在本教程中，我们使用 create-react-app 创建了一个简单的 React 应用程序，添加了 react-bootstrap-table2，用数据填充了一个表，处理了列，设置了表的样式并选择了行。