widgets/table-widget.js

class TableWidget extends HTMLElement {
    connectedCallback() {
        const config = JSON.parse(this.getAttribute('config') || '{}');
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: white;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    padding: 1rem;
                }
                .title {
                    font-weight: 600;
                    margin-bottom: 1rem;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                th, td {
                    padding: 0.5rem;
                    text-align: left;
                    border-bottom: 1px solid #e5e7eb;
                }
                th {
                    font-weight: 600;
                    background: #f9fafb;
                }
            </style>
            <div class="title">${config.title}</div>
            <table>
                <thead>
                    <tr>
                        ${config.columns.map(col => `<th>${col}</th>`).join('')}
                    </tr>
                </thead>
                <tbody>
                    ${config.rows.map(row => `
                        <tr>
                            ${row.map(cell => `<td>${cell}</td>`).join('')}
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `;
    }
}
customElements.define('table-widget', TableWidget);