数据导出使用react-data-table-component export csv

Question

我是 React 新手。

我正在尝试将使用 'react-data-table-component' 显示的 JSON 数据导出到 CSV 文件。

我按照 this link 中的示例复制了提供的确切代码片段。下面是我的代码片段和编译过程中出现的相应错误。

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

有人可以帮助我识别我可能缺少的任何其他模块以具有导出数据功能。提前致谢。

Answer 1

这实际上是一个导入问题。

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

在此处的这一行中，您将从 react-data-table-component 包中导入 默认导出 并将其分配给变量 Export。默认导出是 DataTable 组件，它没有 onExport 属性。

没有 Export 组件从包中导出。您看到的是在其文档中使用的本地声明（未导出）Export 组件。

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

这是source file. It relies on a styled Button component。他们在这里使用 e.target.value 对我来说没有任何意义。

您可以创建自己的 Export 具有适当 TypeScript 类型的组件，方法是将以下任一类型放入您的代码中：

简单版：

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

支持 HTML button 的任何道具（例如 className 和 style）：

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

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

数据导出使用react-data-table-component export csv

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

javascript

reactjs

react-typescript

react-data-table-component