table { width: 100%; border-collapse: collapse; font-size: 1rem; } th, td { padding: 0.5em; border: 1px solid #bbb; } th { background: #f5f5f5; } About Us

Changing the World.
One Website at a time.

Lorem ipsum veniam anim ea veniam magna ut esse dolor dolore ex aliquip ullamco. Cillum nisi veniam, aliqua sunt ex voluptate veniam ullamco.

class CsvTable extends HTMLElement { static get observedAttributes() { return ['src']; } connectedCallback() { // Prüfen, ob das Template schon eingefügt wurde if (!this.querySelector('table')) { this.innerHTML = `

`; } const src = this.getAttribute('src'); if (src) this.loadCsv(src); } attributeChangedCallback(name, oldValue, newValue) { if (name === 'src' && newValue && newValue !== oldValue) { this.loadCsv(newValue); } } async loadCsv(url) { try { const response = await fetch(url); if (!response.ok) { this.renderError('Fehler beim Laden der CSV-Datei.'); return; } const text = await response.text(); const rows = this.parseCsv(text); if (rows.length === 0) { this.renderError('Keine Daten gefunden.'); return; } this.renderTable(rows); } catch (e) { this.renderError('Fehler beim Laden der CSV-Datei.'); } } parseCsv(text) { return text.trim().split('\n').map(row => row.split(',').map(cell => cell.trim()) ); } renderTable(rows) { const [header, ...body] = rows; const thead = this.querySelector('thead'); const tbody = this.querySelector('tbody'); thead.innerHTML = `${header.map(h => `${h}`).join('')}`; tbody.innerHTML = body.map(row => `${row.map(cell => `${cell}`).join('')}` ).join(''); } renderError(message) { const thead = this.querySelector('thead'); const tbody = this.querySelector('tbody'); if (thead && tbody) { thead.innerHTML = ''; tbody.innerHTML = `${message}`; } } } customElements.define('csv-table', CsvTable);