反应表中的导出到 CSV 按钮 [英] Export to CSV button in react table

问题描述

寻找一种方法将导出到 CSV"按钮添加到作为 npmjs 包的 react-table (https://www.npmjs.com/package/react-table).

我需要添加一个自定义按钮，用于将表格数据导出为 csv 或 xls 格式的 excel 工作表?

解决方案

下面是集成的样子

从'react'导入反应；导入'react-dropdown/style.css'导入反应表/反应表.css"从react-table"导入 ReactTable；从react-csv"导入 {CSVLink}；常量列 = [{标题:'名称'，accessor: 'name',//基于字符串的值访问器！},{标题:'年龄'，访问者:'年龄'，}]类 AllPostPage 扩展 React.Component {构造函数(道具){超级(道具)；this.download = this.download.bind(this);这个.state = {表属性:{所有数据:[{姓名":ramesh"，年龄":12"}，{姓名":账单"，年龄":13"}，{姓名":阿伦"，年龄":9"}，{姓名":凯西"，年龄":21"}]},数据下载:[]};}下载(事件){const currentRecords = this.reactTable.getResolvedState().sortedData;var data_to_download = []for (var index = 0; index < currentRecords.length; index++) {让 record_to_download = {}for(var colIndex = 0; colIndex < columns.length ; colIndex ++) {record_to_download[columns[colIndex].Header] = currentRecords[index][columns[colIndex].accessor]}data_to_download.push(record_to_download)}this.setState({ dataToDownload: data_to_download }, () => {//点击 CSVLink 组件触发 CSV 下载this.csvLink.link.click()})}使成为() {返回 
<button onClick={this.download}>下载</按钮></div>
<ReactTable ref={(r)=>this.reactTable = r}数据={this.state.tableproperties.allData} 列={columns} 可过滤defaultFilterMethod={(过滤器, 行) =>String(row[filter.id]).toLowerCase().includes(filter.value.toLowerCase())}/></div></div>}}导出默认的 AllPostPage；

这也适用于过滤器.

Looking for a way to add an "Export to CSV" button to a react-table which is an npmjs package (https://www.npmjs.com/package/react-table).

I need to add a custom button for exporting the table data to an excel sheet in the csv or xls format?

解决方案

Here is how integration will look like

import React from 'react';
import 'react-dropdown/style.css'
import 'react-table/react-table.css'
import ReactTable from "react-table";
import {CSVLink} from "react-csv";

const columns = [
   {
       Header: 'name',
       accessor: 'name', // String-based value accessors!
   },
   {
       Header: 'age',
       accessor: 'age',

  }]
class AllPostPage extends React.Component {
    constructor(props) {
       super(props);
       this.download = this.download.bind(this);
       this.state = {
          tableproperties: {
             allData: [
                {"name": "ramesh","age": "12"},
                {"name": "bill","age": "13"},
                {"name": "arun","age": "9"},
                {"name": "kathy","age": "21"}
             ]
          },
          dataToDownload: []
       };
    }

   download(event) {
      const currentRecords = this.reactTable.getResolvedState().sortedData;
      var data_to_download = []
      for (var index = 0; index < currentRecords.length; index++) {
         let record_to_download = {}
         for(var colIndex = 0; colIndex < columns.length ; colIndex ++) {
            record_to_download[columns[colIndex].Header] = currentRecords[index][columns[colIndex].accessor]
         }
         data_to_download.push(record_to_download)
      }
      this.setState({ dataToDownload: data_to_download }, () => {
         // click the CSVLink component to trigger the CSV download
         this.csvLink.link.click()
      })
    } 

    render() {
       return <div>
                 <div>
                    <button onClick={this.download}>
                        Download
                    </button>
                 </div>
                 <div>
                    <CSVLink
                        data={this.state.dataToDownload}
                        filename="data.csv"
                        className="hidden"
                        ref={(r) => this.csvLink = r}
                        target="_blank"/>

                 </div>
                 <div>
                    <ReactTable ref={(r) => this.reactTable = r}
                                data={this.state.tableproperties.allData} columns={columns} filterable
                                defaultFilterMethod={(filter, row) =>
                                    String(row[filter.id]).toLowerCase().includes(filter.value.toLowerCase())}
                    />
                 </div>
              </div>
    }
}

export default AllPostPage;

This will work with filters as well.

这篇关于反应表中的导出到 CSV 按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！