From 2c78f61e2ee998632088141d803b20b7bd790b1b Mon Sep 17 00:00:00 2001
From: Abderahman88 <rags_place@hotmail.com>
Date: Fri, 16 Jul 2021 00:40:56 +0200
Subject: [PATCH] fix download csv

---
 samples/react-datatable/README.md             |  2 +
 samples/react-datatable/package.json          |  4 +-
 .../ExportListItemsToCSV.tsx                  | 62 +++++++------------
 3 files changed, 25 insertions(+), 43 deletions(-)

diff --git a/samples/react-datatable/README.md b/samples/react-datatable/README.md
index 93f8d988f..c2c4bef5b 100644
--- a/samples/react-datatable/README.md
+++ b/samples/react-datatable/README.md
@@ -34,6 +34,7 @@ This web part provides easy way to render SharePoint custom list in datatable vi
 Solution|Author(s)
 --------|---------
 react-datatable | Chandani Prajapati ([@Chandani_SPD](https://twitter.com/Chandani_SPD))
+react-datatable | Abderahman Moujahid
 
 ## Version history
 
@@ -45,6 +46,7 @@ Version|Date|Comments
 1.3|March 31,2021| Changed UI as per SharePoint list, Set themeing as per current SharePoint site theme, Created custom pagination by using reusable controls, Added features to export CSV based on the filter if the filter is available, Added hyperlink feature for image and link column in export to pdf and also set alternative row formatting in generated pdf as per property pane configuration odd/even row color, fixed object issue (for people/hyperlink, etc) in export to CSV.
 1.4|April 10, 2021|Added feature to show profile picture in user column and shows display name of user field in export to CSV and PDF.
 1.5|June 2, 2021|Added feature to show image in dataTable and upgraded to the SPFx version 1.12.1.
+1.6|July 16, 2021|Changed library export-to-csv with react-csv
 
 
 ## Disclaimer
diff --git a/samples/react-datatable/package.json b/samples/react-datatable/package.json
index b84100ae5..34f8e54e0 100644
--- a/samples/react-datatable/package.json
+++ b/samples/react-datatable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-datatable",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "main": "lib/index.js",
   "engines": {
@@ -22,10 +22,10 @@
     "@pnp/sp": "2.5.0",
     "@pnp/spfx-controls-react": "3.1.0",
     "@pnp/spfx-property-controls": "^3.2.0-beta.ab74df5",
-    "export-to-csv": "^0.2.1",
     "office-ui-fabric-react": "7.156.0",
     "pdfmake": "^0.1.70",
     "react": "16.9.0",
+    "react-csv": "^2.0.3",
     "react-dom": "16.9.0"
   },
   "devDependencies": {
diff --git a/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSV.tsx b/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSV.tsx
index 2ed6a0242..543f06672 100644
--- a/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSV.tsx
+++ b/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSV.tsx
@@ -1,47 +1,27 @@
-import * as React from 'react';
-import * as strings from 'ReactDatatableWebPartStrings';
-import { ExportToCsv } from 'export-to-csv';
-import { IIconProps, PrimaryButton } from 'office-ui-fabric-react';
-import styles from './ExportListItemsToCSV.module.scss';
+import * as React from "react";
+import * as strings from "ReactDatatableWebPartStrings";
+import { CSVLink } from "react-csv";
+import { IIconProps, PrimaryButton } from "office-ui-fabric-react";
+import styles from "./ExportListItemsToCSV.module.scss";
 interface IExportToCSV {
-    columnHeader: Array<string>;
-    listName: string;
-    description: string;
-    dataSource: ()=> any[];
+  columnHeader: Array<string>;
+  listName: string;
+  description: string;
+  dataSource: () => any[];
 }
 
 export function ExportListItemsToCSV(props: IExportToCSV) {
+  const downloadIcon: IIconProps = { iconName: "Download" };
 
-    const downloadIcon: IIconProps = { iconName: 'Download' };
+  let { listName, dataSource } = props;
 
-    let { columnHeader, listName, dataSource } = props;
-
-    function generateCSV() {
-
-        let colHeader = columnHeader;
-        const options = {
-            filename: listName,
-            fieldSeparator: ',',
-            quoteStrings: '"',
-            decimalSeparator: '.',
-            showLabels: true,
-            showTitle: true,
-            title: '',
-            useTextFile: false,
-            useBom: true,
-            useKeysAsHeaders: true,
-            headers: colHeader
-        };
-        const csvExporter = new ExportToCsv(options);
-        csvExporter.generateCsv(dataSource());
-    }
-
-    return (
-        <PrimaryButton
-            text={strings.DownloadAsCSVLabel}
-            iconProps={downloadIcon}
-            onClick={() => generateCSV()}
-            className={styles.btnCSV}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <CSVLink data={dataSource()} filename={`${listName}.csv`}>
+      <PrimaryButton
+        text={strings.DownloadAsCSVLabel}
+        iconProps={downloadIcon}
+        className={styles.btnCSV}
+      />
+    </CSVLink>
+  );
+}