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

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

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