diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index 393c92358c..b05d7c0dcc 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/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 ( + + +
+ exportData('csv', true)}> + Download as CSV + + exportData('xlsx', true)}> + Download as Excel + +
+
+
+ ); + } return (
)} {showDownloadButton && ( - exportData('csv', true)} - > - - + + + + + )}
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index 6fe4c3f321..21e4bf4611 100644 --- a/frontend/src/_styles/theme.scss +++ b/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; + } + } + +}