App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React from 'react'; import DataGrid from 'react-data-grid'; import { saveAs } from 'file-saver'; import Papa from 'papaparse'; import jsPDF from 'jspdf'; import 'jspdf-autotable'; // For creating tables in PDFs import 'react-data-grid/lib/styles.css'; const columns = [ { key: 'id', name: 'ID' }, { key: 'name', name: 'Name' }, { key: 'age', name: 'Age' }, { key: 'country', name: 'Country' } ]; const rows = [ { id: 1, name: 'Alice', age: 25, country: 'USA' }, { id: 2, name: 'Bob', age: 30, country: 'Canada' }, { id: 3, name: 'Charlie', age: 35, country: 'UK' }, { id: 4, name: 'Diana', age: 28, country: 'Australia' }, { id: 5, name: 'Edward', age: 40, country: 'India' }, { id: 6, name: 'Fiona', age: 22, country: 'Germany' }, { id: 7, name: 'George', age: 33, country: 'France' }, { id: 8, name: 'Hannah', age: 27, country: 'Italy' }, { id: 9, name: 'Ian', age: 29, country: 'Spain' }, { id: 10, name: 'Jackie', age: 31, country: 'Brazil' }, { id: 11, name: 'Karen', age: 26, country: 'Mexico' }, { id: 12, name: 'Liam', age: 34, country: 'Japan' }, { id: 13, name: 'Mona', age: 23, country: 'South Korea' }, { id: 14, name: 'Nathan', age: 32, country: 'Netherlands' }, { id: 15, name: 'Olivia', age: 24, country: 'South Africa' }, { id: 16, name: 'Peter', age: 36, country: 'Russia' }, { id: 17, name: 'Quincy', age: 37, country: 'China' }, { id: 18, name: 'Rachel', age: 28, country: 'Sweden' }, { id: 19, name: 'Steve', age: 38, country: 'Norway' }, { id: 20, name: 'Tina', age: 29, country: 'Argentina' } ]; function App() { // Export to CSV const exportToCSV = () => { const csvData = Papa.unparse(rows); const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' }); saveAs(blob, 'data.csv'); }; // Export to PDF const exportToPDF = () => { const doc = new jsPDF(); doc.text('Data Export', 20, 10); const tableColumn = columns.map(col => col.name); const tableRows = rows.map(row => columns.map(col => row[col.key])); doc.autoTable({ head: [tableColumn], body: tableRows }); doc.save('data.pdf'); }; return ( <div> <div style={{ marginBottom: '10px' }}> <button onClick={exportToCSV} style={{ marginRight: '10px' }}> Export to CSV </button> <button onClick={exportToPDF}>Export to PDF</button> </div> <DataGrid columns={columns} rows={rows} /> </div> ); } export default App; |
