Merge pull request #1968 from Abderahman88/patch-1930

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

samples/react-datatable/assets/sample.json

@@ -9,7 +9,7 @@
       "This web part provides easy way to render SharePoint custom list in data table view with all the necessary features."
     ],
     "creationDateTime": "2021-03-01",
-    "updateDateTime": "2021-06-02",
+    "updateDateTime": "2021-07-16",
     "products": [
       "SharePoint",
       "Office"

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": {

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}
-        />
-    );
-}
+  return (
+    <CSVLink data={dataSource()} filename={`${listName}.csv`}>
+      <PrimaryButton
+        text={strings.DownloadAsCSVLabel}
+        iconProps={downloadIcon}
+        className={styles.btnCSV}
+      />
+    </CSVLink>
+  );
+}