React使用表格结构化数据 – ReactJS实战教程

上一章ReactJS实战教程请查看：React map函数用法介绍

表格table是将信息组织成行和列的一种安排，它用于以结构化格式存储和显示数据。

react-table是一个轻量级的、快速的、完全可定制的(JSX、模板、状态、样式、回调)，以及为React构建的可扩展数据表格，它是完全可控的，通过可选的props和回调。

react-table的特性

• 它是轻量级的，有11kb(对于样式只需要多2kb)。
• 它是完全可定制的(JSX、模板、状态、样式、回调)。
• 它是完全可控的，通过可选的props和回调。
• 它具有客户端和服务器端分页。
• 它有过滤器。
• 旋转和聚合
• 最小的设计和易于定制主题

安装react-table

让我们使用以下命令创建一个React应用程序。

$ npx create-react-app myreactapp  

接下来，我们需要安装react-table，我们可以通过npm命令安装react-table，如下所示。

$ npm install react-table  

安装了react-table之后，需要将react-table导入到react组件。为此，打开src/App.js文件并添加以下代码片段。

import ReactTable from "react-table";  

假设我们有需要使用react-table来渲染数据。

const data = [{  
        name: 'AAA',  
        age: 26  
        },{  
        name: 'BBB',  
        age: 22  
        },{  
        name: 'CCC',  
        age: 40   
        },{  
        name: 'DDD',  
        age: 30  
        },{  
        name: 'EEE',  
        age: 32  
        },{  
        name: 'FFF',  
        age: 37  
        }]  

除了数据之外，我们还需要用列属性指定列信息。

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

在render方法中，我们需要将此数据与react-table绑定，然后返回react-table。

return (  
     <div>  
        <ReactTable  
            data={data}  
            columns={columns}  
            defaultPageSize = {2}  
            pageSizeOptions = {[2,4, 6]}  
         />  
     </div>        
)  

现在，我们的src/App.js文件如下所示。

import React, { Component } from 'react';  
import ReactTable from "react-table";  
import "react-table/react-table.css";  
  
class App extends Component {  
  render() {  
     const data = [{  
        name: 'AAA',  
        age: 26  
        },{  
         name: 'BBB',  
         age: 22  
         },{  
         name: 'CCC',  
         age: 40      
         },{  
         name: 'DDD',  
         age: 30  
         },{  
         name: 'EEE',  
         age: 32  
         },{  
         name: 'FFF',  
         age: 37  
         }]  
     const columns = [{  
       Header: 'Name',  
       accessor: 'name'  
       },{  
       Header: 'Age',  
       accessor: 'age'  
       }]  
    return (  
          <div>  
              <ReactTable  
                  data={data}  
                  columns={columns}  
                  defaultPageSize = {2}  
                  pageSizeOptions = {[2,4, 6]}  
              />  
          </div>        
    )  
  }  
}  
export default App;