diff --git a/src/components/CsvGenerator.tsx b/src/components/CsvGenerator.tsx new file mode 100644 index 0000000..ed7b957 --- /dev/null +++ b/src/components/CsvGenerator.tsx @@ -0,0 +1,56 @@ +import React from "react"; + +interface CsvGeneratorProps { + data: object[]; // Array of objects to convert to CSV + fileName?: string; // Name of the CSV file +} + +const CsvGenerator: React.FC = ({ data, fileName = "data.csv" }) => { + const generateCsv = () => { + if (!data || data.length === 0) { + alert("No data available to generate CSV."); + return; + } + + // Extract headers + const headers = Object.keys(data[0]); + const csvRows = []; + + // Add header row + csvRows.push(headers.join(",")); + + // Add data rows + data.forEach((row) => { + const values = headers.map((header) => { + const cell = row[header]; + return typeof cell === "string" ? `"${cell.replace(/"/g, '""')}"` : cell; + }); + csvRows.push(values.join(",")); + }); + + // Combine rows into a single string + const csvContent = csvRows.join("\n"); + + // Create a blob and a downloadable link + const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }); + const url = URL.createObjectURL(blob); + + const link = document.createElement("a"); + link.href = url; + link.download = fileName; + link.click(); + + URL.revokeObjectURL(url); // Clean up + }; + + return ( + + ); +}; + +export default CsvGenerator;