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

上一章ReactJS实战教程请查看：React map函数用法介绍
【React使用表格结构化数据 – ReactJS实战教程】表格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 = http://www.srcmini.com/[{ 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=http://www.srcmini.com/{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 = http://www.srcmini.com/[{ 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=http://www.srcmini.com/{data} columns={columns} defaultPageSize = {2} pageSizeOptions = {[2,4, 6]} /> < /div> ) } } export default App;