Data export using react-data-table-component export csv

Question

I am new to React.

I am trying to export JSON data that is displayed using the 'react-data-table-component' to a CSV file.

I have followed the example from this link by copying the exact code snippet provided. Below is my code snippet and the corresponding error occurring during compilation.

import Export from "react-data-table-component"
import DataTable, { TableColumn, TableStyles } from "react-data-table-component";
import React from "react";

  ---code declarations---

  const actionsMemo = React.useMemo(() => <Export onExport={() => downloadCSV(customerList)} />, []);

  return (
    <>
      <Row>
        <Col lg={3}>
          <Box className="box" sx={{ display: 'flex', alignItems: 'flex-end' }}>
          
            <TextField id="input-with-sx" label="Input National ID" variant="standard" />
            <PersonSearchIcon sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
          </Box>
        </Col>
      </Row>
      <br/>
      <Row>
        <Col lg={12}>
          <div className="card mb-3">
            <div className="card-body">
              <DataTable columns={columns} data={customerList}
                pagination  customStyles={mycustomStyles} actions={actionsMemo}/>
            </div>
          </div>          
        </Col>
      </Row>
    </>
  );

Could someone help me in identifying any other modules that I may be missing in order to have an export data functionality. Thanks in advance.

Answer 1

I have very simple solution for this issue.

You can try to convert table data json to csv or xlsx with very simple methods.

My sample code is try to convert json to xlsx:

  function downloadXLS() {
    const ws = XLSX.utils.json_to_sheet(this.myJsonDataArray);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "People");
    XLSX.writeFile(wb, 'reports.xlsx');
  }

Add button to download:

<Button onClick={() => downloadXLS()}>Export</Button>

Another solution is data array to csv: (I got this code from previous response)

function convertArrayOfObjectsToCSV(array) {
    let result;

    const columnDelimiter = ',';
    const lineDelimiter = '\n';
    const keys = Object.keys(data[0]);

    result = '';
    result += keys.join(columnDelimiter);
    result += lineDelimiter;

    array.forEach(item => {
        let ctr = 0;
        keys.forEach(key => {
            if (ctr > 0) result += columnDelimiter;

            result += item[key];
            // eslint-disable-next-line no-plusplus
            ctr++;
        });
        result += lineDelimiter;
    });

    return result;
}


function downloadCSV() {
    const link = document.createElement('a');
    let csv = convertArrayOfObjectsToCSV(this.myJsonDataArray);
    if (csv == null) return;

    const filename = 'export.csv';

    if (!csv.match(/^data:text\/csv/i)) {
        csv = `data:text/csv;charset=utf-8,${csv}`;
    }

    link.setAttribute('href', encodeURI(csv));
    link.setAttribute('download', filename);
    link.click();
}

Add button to download:

<Button onClick={() => downloadCSV()}>Export</Button>

Answer 2

Based from Bilal Demir, this is my solution for React + react-data-table-component:

First install:

    npm install xlsx

Excel.tsx

import { utils, writeFileXLSX } from 'xlsx';
export const handleDownloadExcel = (dataSource:any,sheetName:string,fileName:string) => {
        const ws = utils.json_to_sheet(dataSource);
        const wb = utils.book_new();
        utils.book_append_sheet(wb, ws, sheetName);
        writeFileXLSX(wb, `${fileName}.xlsx`);        
    };

In Table View, react-bootstrap + react-data-table-component:

    import { handleDownloadExcel } from "../../../components/Excel";

    const downloadExcel = () => {
        handleDownloadExcel(dataSource,"SHEET_NAME","MY_FILENAME")  
    };
 

    <Container fluid className="form-group row mt-10">

    <Col>
        <Button type={'button'} className="btn-sm float-end mx-2" text="Excel" onClick={downloadExcel}  />           
        <DataTable
            columns={columns}
            data={dataSource}
            pagination               
            
        />
    </Col>
</Container>

Answer 3

This is actually an import issue.

import Export from "react-data-table-component"

In this line right here, you are importing the default export from the react-data-table-component package and assigning it to the variable Export. The default export is the DataTable component, which does not have an onExport prop.

---

There is no Export component exported from the package. What you are seeing is a locally declared (not exported) Export component which is used in their documentation.

const Export = ({ onExport }) => <Button onClick={e => onExport(e.target.value)}>Export</Button>;

Here's the source file. It relies on a styled Button component. Their use of e.target.value here does not make any sense to me.

---

You can create your own Export component with proper TypeScript types by putting either of these in your code:

Simple version:

export const Export = ({ onExport }: { onExport: () => void }) => (
  <button onClick={() => onExport()}>Export</button>
);

With support for any props of the HTML button (such as className and style):

type ExportProps = {
  onExport: React.MouseEventHandler<HTMLButtonElement>;
} & JSX.IntrinsicElements["button"];

export const Export = ({ onExport, ...props }: ExportProps) => (
  <button {...props} onClick={onExport}>
    Export
  </button>
);