[ Enhancement ] : [ Table widget ] added support to download data in excel (#4134)

* adding support for  download data in excel

* adding pop-over to display various download options

* made the download options bold on hover

* update the theme.scss

* made the parent container width fixed

frontend/src/Editor/Components/Table/Table.jsx

@@ -27,6 +27,9 @@ import generateColumnsData from './columns';
 import generateActionsData from './columns/actions';
 import IndeterminateCheckbox from './IndeterminateCheckbox';
 import { useTranslation } from 'react-i18next';
+import * as XLSX from 'xlsx/xlsx.mjs';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
 
 export function Table({
   id,
@@ -134,10 +137,30 @@ export function Table({
     return setExposedVariables(changesToBeSavedAndExposed);
   }
 
-  function getExportFileBlob({ columns, data }) {
-    const headerNames = columns.map((col) => col.exportValue);
-    const csvString = Papa.unparse({ fields: headerNames, data });
-    return new Blob([csvString], { type: 'text/csv' });
+  function getExportFileBlob({ columns, data, fileType, fileName }) {
+    if (fileType === 'csv') {
+      const headerNames = columns.map((col) => col.exportValue);
+      const csvString = Papa.unparse({ fields: headerNames, data });
+      return new Blob([csvString], { type: 'text/csv' });
+    } else if (fileType === 'xlsx') {
+      const header = columns.map((c) => c.exportValue);
+      const compatibleData = data.map((row) => {
+        const obj = {};
+        header.forEach((col, index) => {
+          obj[col] = row[index];
+        });
+        return obj;
+      });
+
+      let wb = XLSX.utils.book_new();
+      let ws1 = XLSX.utils.json_to_sheet(compatibleData, {
+        header,
+      });
+      XLSX.utils.book_append_sheet(wb, ws1, 'React Table Data');
+      XLSX.writeFile(wb, `${fileName}.xlsx`);
+      // Returning false as downloading of file is already taken care of
+      return false;
+    }
   }
 
   function onPageIndexChanged(page) {
@@ -408,6 +431,27 @@ export function Table({
     );
   }, [JSON.stringify(globalFilteredRows.map((row) => row.original))]);
 
+  function downlaodPopover() {
+    return (
+      <Popover
+        id="popover-basic"
+        data-cy="popover-card"
+        className={`${darkMode && 'popover-dark-themed theme-dark'} shadow table-widget-download-popup`}
+        placement="bottom"
+      >
+        <Popover.Content>
+          <div className="d-flex flex-column">
+            <span className="cursor-pointer" onClick={() => exportData('csv', true)}>
+              Download as CSV
+            </span>
+            <span className="pt-2 cursor-pointer" onClick={() => exportData('xlsx', true)}>
+              Download as Excel
+            </span>
+          </div>
+        </Popover.Content>
+      </Popover>
+    );
+  }
   return (
     <div
       data-disabled={parsedDisabledState}
@@ -453,13 +497,11 @@ export function Table({
                 </span>
               )}
               {showDownloadButton && (
-                <span
-                  data-tip="Download as CSV"
-                  className="btn btn-light btn-sm p-1"
-                  onClick={() => exportData('csv', true)}
-                >
-                  <img src="assets/images/icons/download.svg" width="15" height="15" />
-                </span>
+                <OverlayTrigger trigger="click" overlay={downlaodPopover()} rootClose={true} placement={'bottom-end'}>
+                  <span data-tip="Download" className="btn btn-light btn-sm p-1">
+                    <img src="assets/images/icons/download.svg" width="15" height="15" />
+                  </span>
+                </OverlayTrigger>
               )}
             </div>
           </div>

frontend/src/_styles/theme.scss

@@ -6491,3 +6491,14 @@ input.hide-input-arrows{
     }
   }
 }
+
+// download pop-up in the table widget
+.table-widget-download-popup{
+  .cursor-pointer{
+    width: 130px;
+    &:hover{
+      font-weight: bolder;
+    }
+  }
+
+}