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.

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