Export to CSV button in react table

Take a look at this npm library - https://www.npmjs.com/package/react-csv

For example -

import {CSVLink, CSVDownload} from 'react-csv';const csvData =[  ['firstname', 'lastname', 'email'] ,  ['John', 'Doe' , 'john.doe@xyz.com'] ,  ['Jane', 'Doe' , 'jane.doe@xyz.com']];<CSVLink data={csvData} >Download me</CSVLink>// or<CSVDownload data={csvData} target="_blank" />

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.

I thought I'd piggyback on best wishes' extremely valuable answer with a simplified download implementation.

  export = e => {    const currentRecords = this.ReactTable.getResolvedState().sortedData;    this.setState({ dataToDownload: this.dataToDownload(currentRecords, columns) }, () =>      this.csvLink.link.click()    );  }  dataToDownload = (data, columns) =>    data.map(record =>      columns.reduce((recordToDownload, column) => {        recordToDownload[column.Header] = record[column.accessor];        return recordToDownload;      }, {})    );

I used this to allow multiple table exports in one component by adding additional export functions.