Bouton exporter vers CSV à réagir table

La recherche d'un moyen d'ajouter un "Export CSV" bouton à une réaction de la table qui est un npmjs paquet (https://www.npmjs.com/package/react-table).

J'ai besoin d'ajouter un bouton personnalisé pour l'exportation de la table de données à une feuille excel en csv ou xls?

  • Comment avez-vous obtenir les données qui sont présentes dans la table(comme après l'application de filtres). Je veux exporter les données présentes après l'application de filtres et non pas à l'ensemble de données d'origine fourni
  • Eh bien, j'ai eu de travail enfin via le réglage d'une ref dans le réagir table insatance et de récupération de données actuelles par le biais de ce.reactTable.getResolvedState().sortedData
InformationsquelleAutor Zinngg | 2018-02-13
  1. 20

    Prendre un coup d'oeil à ce mnp bibliothèque - https://www.npmjs.com/package/react-csv

    Par exemple - 

    import {CSVLink, CSVDownload} from 'react-csv';

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['John', 'Doe' , '[email protected]'] ,
  ['Jane', 'Doe' , '[email protected]']
];
<CSVLink data={csvData} >Download me</CSVLink>
//or
<CSVDownload data={csvData} target="_blank" />
    InformationsquelleAutor Rishikesh Dhokare
  2. 17

    Bien que l'on a accepté la réponse est correcte, mais il faut plus de travail à faire de l'intégration sans couture. Voici comment l'intégration ressemblera

    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;

    Cela fonctionne avec des filtres ainsi.

    • Merci pour l'exemple de la façon de faire le lien sur un bouton.
    • la méthode de téléchargement peut être simplifiée en séparant les en-têtes et les données. Voir ce lien. Vous pouvez mapper la colonne d'en-tête id et le transmettre à CSVLink composant comme en-tête de l'hélice, et sortedData de table réf données prop.
    • Est-ce de travailler avec des données côté serveur ainsi?
    • il devrait, essayez juste une fois.
    InformationsquelleAutor best wishes