Botón Exportar a CSV en la tabla de reacción

Te damos la bienvenida a nuestro espacio, aquí hallarás la resolución a lo que estabas buscando.

Solución:

Eche un vistazo a esta biblioteca npm: https://www.npmjs.com/package/react-csv

Por ejemplo –

import CSVLink, CSVDownload from 'react-csv';

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['John', 'Doe' , '[email protected]'] ,
  ['Jane', 'Doe' , '[email protected]']
];
Download me
// or

Aunque la respuesta aceptada es correcta, necesitó más trabajo para que la integración fuera perfecta. Así es como se verá la integración

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 

                 

                    
                        Download
                    
                 
                 

                     this.csvLink = r
                        target="_blank"/>

                 
                 

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


export default AllPostPage;

Esto también funcionará con filtros.

Pensé en aprovechar la respuesta extremadamente valiosa de los mejores deseos con una simplificación download implementación.

  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;
      , )
    );

Utilicé esto para permitir múltiples exportaciones de tablas en un componente agregando más export funciones.

Te mostramos reseñas y puntuaciones

---

---

Utiliza Nuestro Buscador