/** * This application creates a CSV viewer using a Hono app that serves a client-side application. * It allows users to upload a CSV file, view its contents in a table format, and provides basic sorting functionality. * * The approach: * 1. Create a server-side Hono app to handle file uploads and serve the HTML, CSS, and JavaScript. * 2. Implement client-side JavaScript to handle file reading, parsing CSV, and displaying the data in a table. * 3. Add sorting functionality to allow users to sort the table by clicking on column headers. * * Libraries used: * - Hono for the server-side application * - Papa Parse (via esm.sh) for parsing CSV on the client-side */ import { serve } from 'https://esm.town/v/g/serveUtils'; import { Hono } from 'npm:hono'; function html() { /* CSV Viewer

CSV Viewer

*/ } function css() { /* body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } input[type="file"] { display: block; margin: 20px auto; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; font-weight: bold; cursor: pointer; } th:hover { background-color: #e6e6e6; } tr:nth-child(even) { background-color: #f8f8f8; } tr:hover { background-color: #f0f0f0; } */ } function js() { /* import Papa from 'https://esm.sh/papaparse@5.4.1'; const fileInput = document.getElementById('csvFile'); const tableContainer = document.getElementById('tableContainer'); let currentData = []; let currentHeaders = []; fileInput.addEventListener('change', handleFileUpload); function handleFileUpload(event) { const file = event.target.files[0]; if (file) { Papa.parse(file, { complete: function(results) { currentData = results.data; currentHeaders = currentData[0]; displayTable(currentData); } }); } } function displayTable(data) { if (data.length === 0) return; const headers = data[0]; const rows = data.slice(1); let tableHTML = ''; headers.forEach(header => { tableHTML += ``; }); tableHTML += ''; rows.forEach(row => { tableHTML += ''; row.forEach(cell => { tableHTML += ``; }); tableHTML += ''; }); tableHTML += '

${header}
${cell}

'; tableContainer.innerHTML = tableHTML; document.querySelectorAll('th').forEach(th => { th.addEventListener('click', () => sortTable(th.dataset.column)); }); } function sortTable(column) { const columnIndex = currentHeaders.indexOf(column); if (columnIndex === -1) return; const rows = currentData.slice(1); rows.sort((a, b) => { if (a[columnIndex] < b[columnIndex]) return -1; if (a[columnIndex] > b[columnIndex]) return 1; return 0; }); displayTable([currentHeaders, ...rows]); } */ } const app = new Hono(); app.get('/', serve(html, 'text/html')); app.get('/styles.css', serve(css, 'text/css')); app.get('/main.js', serve(js, 'text/javascript')); export default app.fetch;

csvViewer

Versions

v0