Add columns using the form.

` : schema.map((col, index) => ` `).join(''); }; document.getElementById('schema-visualizer').addEventListener('click', (e) => { if (e.target.classList.contains('remove-col-btn')) { const index = parseInt(e.target.dataset.index, 10); schema.splice(index, 1); renderSchemaVisualizer(); updateKPIs(); } }); // --- Data Generation & Preview Logic --- generateBtn.addEventListener('click', () => { if (schema.length === 0) { alert('Please add at least one column to the schema first.'); return; } const numRows = parseInt(document.getElementById('numRows').value, 10); generatedData = []; for (let i = 0; i < numRows; i++) { let row = {}; let context = {}; // For related data like using a name to generate an email schema.forEach(col => { row[col.name] = generateFakeData(col.type, context); }); generatedData.push(row); } renderPreviewTable(); updateKPIs(); switchTab('spreadsheet-preview'); }); const renderPreviewTable = () => { const table = document.getElementById('preview-table'); const thead = table.querySelector('thead'); const tbody = table.querySelector('tbody'); thead.innerHTML = `${schema.map(col => `${col.name}`).join('')}`; tbody.innerHTML = generatedData.map(row => ` ${schema.map(col => `${row[col.name]}`).join('')} `).join(''); }; // --- UI State Updates --- const updateKPIs = () => { document.getElementById('kpi-total-columns').textContent = schema.length; document.getElementById('kpi-total-rows').textContent = generatedData.length; }; const updateEmptyState = () => { const hasData = generatedData.length > 0; document.getElementById('preview-area').style.display = hasData ? 'block' : 'none'; document.getElementById('preview-empty-state').style.display = hasData ? 'none' : 'block'; downloadPdfBtn.style.display = hasData ? 'flex' : 'none'; }; // --- PDF Generation --- downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; if (!jsPDF || generatedData.length === 0) return; const doc = new jsPDF({ orientation: 'landscape' }); const title = document.getElementById('spreadsheetTitle').value; doc.setFont('helvetica', 'bold'); doc.setFontSize(16); doc.text(title, 15, 15); const head = [schema.map(col => col.name)]; const body = generatedData.map(row => schema.map(col => row[col.name])); doc.autoTable({ startY: 20, head: head, body: body, theme: 'grid', headStyles: { fillColor: '#10b981', textColor: '#ffffff' } }); doc.save(`${title.replace(/\s+/g, '-') || 'spreadsheet'}.pdf`); }); // --- Initialization --- const loadSampleSchema = () => { schema = [ { name: 'Contact Name', type: 'fullName' }, { name: 'Company', type: 'companyName' }, { name: 'Email Address', type: 'email' }, { name: 'Lead Value', type: 'currency' } ]; renderSchemaVisualizer(); }; loadSampleSchema(); updateKPIs(); updateEmptyState(); switchTab('spreadsheet-preview'); // Start on preview tab });