@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
82 lines (81 loc) • 3.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dropdown } from 'flowbite-react';
import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';
import { FiDownload } from 'react-icons/fi';
import * as XLSX from 'xlsx';
const TableDownload = ({ columns, data }) => {
const handleDownload = (format) => {
if (data.length === 0) {
console.warn('No data available for download');
return;
}
switch (format) {
case 'csv':
downloadCSV(columns, data);
break;
case 'excel':
downloadExcel(columns, data);
break;
case 'pdf':
downloadPDF(columns, data);
break;
default:
console.warn('Unsupported format');
}
};
// CSV Export
const downloadCSV = (columns, data) => {
const columnKeys = columns.map((col) => col.accessor);
const headers = columns.map((col) => col.header);
const csvContent = 'data:text/csv;charset=utf-8,' +
[
headers.join(','),
...data.map((row) => columnKeys.map((key) => `"${String(row[key])}"`).join(',')),
].join('\n');
const encodedUri = encodeURI(csvContent);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'table_data.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
// Excel Export
const downloadExcel = (columns, data) => {
const columnKeys = columns.map((col) => col.accessor);
const formattedData = data.map((row) => columnKeys.reduce((acc, key) => {
acc[key] = row[key];
return acc;
}, {}));
const worksheet = XLSX.utils.json_to_sheet(formattedData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Table Data');
XLSX.writeFile(workbook, 'table_data.xlsx');
};
// PDF Export
const downloadPDF = (columns, data) => {
const doc = new jsPDF();
doc.text('Table Data Report', 20, 10);
const headers = columns.map((col) => col.header);
autoTable(doc, {
head: [headers],
body: data,
styles: {
fillColor: [255, 255, 255],
textColor: [0, 0, 0],
overflow: 'linebreak',
},
headStyles: {
fillColor: [255, 255, 255],
textColor: [0, 0, 0],
},
bodyStyles: {
valign: 'top',
},
});
doc.save('table_data.pdf');
};
return (_jsxs(Dropdown, { color: "light", label: _jsxs("div", { className: "inline-flex items-center text-primary-500", children: [_jsx(FiDownload, { className: "h-5 w-5 mr-2", "aria-hidden": "true" }), "Download Report"] }), children: [_jsx(Dropdown.Item, { onClick: () => handleDownload('csv'), children: "CSV" }), _jsx(Dropdown.Item, { onClick: () => handleDownload('excel'), children: "Excel" }), _jsx(Dropdown.Item, { onClick: () => handleDownload('pdf'), children: "PDF" })] }));
};
export default TableDownload;