web前端[React库]:第三方组件库react-table

Posted 2021-04-26 技术直升机

react-table（https://react-table.js.org）是React应用的一个灵活的表格组件。他有很多有用的接口，例如过滤、排序等。

第一步：

安装react-table库：

npm install react-table

下面以github的rest接口获取数据，用react-table展示数据，接口如下：

https://api.github.com/search/repositories?q=keyword

第二步：

创建一个App.js文件，写入如下代码用来调用上面的rest接口获取数据：

import React, { useState } from 'react';import './App.css';
function App() { const [data, setData] = useState([]); const [keyword, setKeyword] = useState('');  const fetchData = () => { const url = `https://api.github.com/search/repositories?q=${keyword}`; fetch(url) .then(response => response.json())  .then(responseData => { setData(responseData.items);  });  }  const handleChange = (e) => { setKeyword(e.target.value); }   return ( <div className="App"> <input type="text" onChange={handleChange} /> <button onClick={fetchData} value={keyword} >fetch</button> </div> );}
export default App;

第三步：

导入react-table组件与样式

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

第四步：

将获取的数据填入react-table

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

第五步：

创建列对象columns及其每列的属性

const columns = [{ Header: 'Name', // Header of the column  accessor: 'full_name' // Value accessor }, { Header: 'URL', accessor: 'html_url', }, { Header: 'Owner', accessor: 'owner.login',}]

第六步：

将react-table组件添加到return语句中，代码如下所示：

const columns = [{ Header: 'Name', // Header of the column  accessor: 'full_name' // Value accessor }, { Header: 'URL', accessor: 'html_url', }, { Header: 'Owner', accessor: 'owner.login', }]
return ( <div className="App"> <input type="text" onChange={handleChange} /> <button onClick={fetchData} value={keyword} >fetch</button> <ReactTable data={data} columns={columns} /> </div>);

第七步：

运行app，页面具有排序和分页功能，如下图所示

第八步：

默认是没有过滤功能的。下面添加过滤功能以及设置默认分页数。

<ReactTable data={this.state.data} columns={columns}   filterable={true}   defaultPageSize = {10}/>   

运行程序如下图所示：

第九步：

增加一个按钮列

const btnClick = (value) => { alert(value);}

const columns = [{ Header: 'Name', // Header of the column accessor: 'full_name' // Value accessor }, { Header: 'URL', accessor: 'html_url', }, { Header: 'Owner', accessor: 'owner.login', }, { id: 'button', sortable: false, filterable: false, width: 100, accessor: 'full_name',   Cell: ({value}) => (<button onClick={() => {btnClick(value)}}>Press me</button>)}]

运行程序，如下所示：

需要完整工程的可以给我留言。

---

个人网站：

https://mapleeureka.github.io/index-ch.html