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

在这个由两部分组成的系列中，您将了解使用 react Bootstrap Table2 组件在 React 中处理表格数据的细节。您将能够轻松创建复杂且具有专业外观的表格，并且能够自定义各个方面。在这一部分中，我们将通过扩展行、分页、单元格编辑和高级自定义来继续旅程。

概述

这是关于React Bootstrap Table2的两部分系列的第二部分 。在第一部分中，我们使用 react-create-app 创建了一个简单的 React 应用程序，并创建了如下所示的表格。

我们还用数据填充了一个表格，处理了列，为表格设置了样式，并选择了行。 

在这一部分中，我们将通过创建扩展行、允许单元格编辑和进行一些高级自定义来继续旅程。

扩展行

扩展行是 React Bootstrap Table2 最酷的特性之一。显示表格数据时，您可能希望在一两行上查看其他数据，但如果显示所有行的所有数据，则可能会使显示混乱。 

一种选择是显示工具提示，但工具提示要求您将鼠标悬停在目标区域上，并且一次只能看到一个工具提示。展开行可以让您在一种抽屉中显示每一行的附加数据，该抽屉可以根据需要保持展开，完成后可以将其折叠回来。您可以同时展开任意数量的行。这是使用 React Bootstrap Table2 完成的。

让我们看看我们的数据。 

const product = [
  {id: 1, name: 'Headphone  Fusion', value: '100'},
  {id: 2, name: 'Headphone Beats', value: '80'},
  {id: 3, name: 'Headphone Modus', value: '70'},
  {id: 4, name: 'Headphone Jam', value: '100'}

];

我们将使用该道具 expandRow 来指定行在点击时如何展开。

const expandRow = {
  renderer: (row, rowIndex) => (
    <div>
      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
      <p>You can render anything here, also you can add additional data on every row object</p>
      <p>expandRow.renderer callback will pass the origin row object to you</p>
    </div>
  )
};

然后我们将 expandRow属性添加到我们的表中。

 <BootstrapTable 
        // striped
        hover
        keyField='id' 
         keyField='id'
          data={ product }
           columns={ columns } 
           // apply the expandRow property here
          expandRow={ expandRow }
/>

这就是单击行时表格的外观。

分页

到目前为止，我们只显示了四行数据。表格旨在显示大量不一定同时显示在屏幕上的数据。这就是分页的用武之地。React Bootstrap Table2 支持许多分页选项。 

让我们通过添加一些条目来用其他数据填充我们的表，如下所示。

const product = [
  {id: 1, name: 'Headphone  Fusion', value: '100'},
  {id: 2, name: 'Headphone Beats', value: '80'},
  {id: 3, name: 'Headphone Modus', value: '70'},
  {id: 4, name: 'Headphone Jam', value: '100'},
  {id: 5, name: 'Headphone Auto', value: '50'},
  {id: 6, name: 'Headphone Byte', value: '70'},
  {id: 7, name: 'Headphone Duo', value: '150'},
  {id: 8, name: 'Headphone Modular', value: '80'},
  {id: 9, name: 'Headphone Pivot', value: '150'},
  {id: 10, name: 'Headphone Optimizer', value: '70'},
  {id: 11, name: 'Headphone Rave', value: '50'},
  {id: 12, name: 'Headphone mach', value: '40'}
];

现在让我们在我们的表上实现分页。首先，使用 NPM 安装 react-bootstrap-table2-paginator包。

npm install react-bootstrap-table2-paginator --save

接下来，打开 App.js 并导入 paginationFactory 函数。

import paginationFactory from 'react-bootstrap-table2-paginator';

 通过声明以下配置来自定义分页。

const options = {
    page: 1,
    sizePerPage: 5,
    nextPageText: '>',
    prePageText: '<',
    showTotal: true
  };

然后我们将属性应用到表中，如下所示。

<BootstrapTable 
        // striped
        hover
        keyField='id' 
         keyField='id'
          data={ person }
           columns={ columns } 
          expandRow={ expandRow }
          //apply the pagination function here
          pagination={ paginationFactory(options) }

    
            />

该表将从第一页开始显示，每页显示五个条目。

单元格编辑

另一种形式的数据操作是就地编辑（也称为单元格编辑）。单元格编辑可以通过单击或双击来触发。要启用此属性，请先安装 react-bootstrap-table2-editor.

npm install react-bootstrap-table2-editor --save

然后在App.js的顶部导入它。

//App.js
import cellEditFactory from 'react-bootstrap-table2-editor';

这是您在表格上启用单元格编辑的方式。

<BootstrapTable 
 hover
 keyField='id' 
 data={ product }
 columns={ columns } 
 expandRow={ expandRow }
 pagination={ paginationFactory(options) }
 cellEdit={ cellEditFactory({ mode: 'click' }) }

    />

您还可以指定不可编辑的行和挂钩函数。例如，下面的代码在第 3 行保留了单元格编辑。

<BootstrapTable 
 hover
 keyField='id' 
 data={ product }
 columns={ columns } 
 expandRow={ expandRow }
 pagination={ paginationFactory(options) }
 cellEdit={ cellEditFactory({
                     mode: 'click',
                     blurToSave: true,
                     nonEditableRows: () => [0, 3] }) }
 
 
 }) }

    />

导出您的数据

有时，在 Web UI 中查看数据是不够的，您需要获取数据并将其提供给其他工具。导入 exportcsv 属性（以及可选的文件名），然后将导出按钮添加到表中。当您单击该按钮时，它允许您将数据保存到 CSV 文件。

安装 react-bootstrap-table2-toolkit.

npm install react-bootstrap-table2-toolkit --save

导出功能可通过包装器exportCSV中的道具获得。ToolkitProvider要显示和启用 CSV 导出， 请将BootstrapTable . ToolkitProvider

import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';

const { ExportCSVButton } = CSVExport;

//  the rest of the code here

<ToolkitProvider
  keyField="id"
  data={ product }
  columns={ columns }
  exportCSV
>
  {
    props => (
      <div>
        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
        <hr />
        <BootstrapTable { ...props.baseProps } />
      </div>
    )
  }
</ToolkitProvider

表搜索

此属性的工作方式与导出功能相同。首先，导入 Search 属性，在 上启用它  ToolKitProvider，并将 包装SearchBar 为 的子级 ToolkitProvider。

import ToolkitProvider, { CSVExport} from 'react-bootstrap-table2-toolkit';
import { Search } from 'react-bootstrap-table2-toolkit';

const { ExportCSVButton } = CSVExport;
const { SearchBar } = Search;

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">REXO</p>
       <ToolkitProvider
        keyField="id"
        data={ product }
        columns={ columns }
        exportCSV
        search
 >
     {
    props => (
      <div>
        <ExportCSVButton  { ...props.csvProps }>Export CSV!!</ExportCSVButton>
        <h3>Search anything below:</h3>
        <SearchBar { ...props.searchProps } />
        <hr />

        <hr />
        <BootstrapTable
                
                pagination={paginationFactory()}
                {...props.baseProps}
              />
      </div>
    )
     }
</ToolkitProvider>

概括

我们在本教程中介绍了很多材料，但 React Bootstrap Table2 有更多内容。实际上，桌子的每个方面都可以定制。阅读 有关如何自定义表格的完整文档。

以下是 React Bootstrap Table2 提供的所有功能：

• 行定制

• 列定制

• 表排序

• 表搜索

• 行选择

• 列过滤器

• 单元格编辑

• 分页

• 可扩展行

• 覆盖

• 远程表

结论

React Bootstrap Table2 具有强大的冲击力。它提供了一个令人愉快的用户界面，用于显示、搜索和操作开箱即用的表格数据。api非常一致——主要功能可以通过指定一个简单的属性来启用，并且可以选择使用通常可以是动态函数的附加属性进行自定义。虽然默认行为和基本配置应该满足大多数用户，但如果您需要更高级的功能和自定义， 官方文档有很多示例说明如何进行。