Table = (config) => { const {data, style, headers, opts } = config /* NOTES Keys in data should match key in headers Feed in data as numeric values and then format to string (allows easy sorting) */ const headersDesktop = headers.filter(d => d.showOnDesktop) const headersMobile = headers.filter(d => d.showOnMobile) const table = (data) => { /* // Start of effort to translate this from D3 construction to a simple template // Eric sketched this out and realized it makes some of the interactive stuff harder const tableMarkup = `

${opts.title}

${opts.dataNote}

${opts.sourceNote}

${opts.creditNote}

` */ const container = document.createElement('div') const titleHeading = html`

${opts.title}

` const dataNote = html`

${opts.dataNote}

` const sourceNote = html`

${opts.sourceNote}

` const creditNote = html`

${opts.creditNote}

` const isMobileView = () => window.innerWidth <= 768; container.id = 'table-container'; container.append(titleHeading); container.append(dataNote); const searchInput = document.createElement('input'); searchInput.setAttribute('placeholder', opts.searchPlaceholder); searchInput.className = 'search-input'; const table = document.createElement('table'); const thead = document.createElement('thead'); const tbody = document.createElement('tbody'); const pagination = document.createElement('div'); pagination.className = 'pagination-div'; table.id = 'table'; table.style.width = '100%'; table.style.borderCollapse = 'separate'; table.style.borderSpacing = '0'; const tableWrapper = document.createElement('div'); tableWrapper.className = 'responsive-table-wrapper'; tableWrapper.appendChild(table); container.append(searchInput, tableWrapper, pagination, sourceNote, creditNote); table.append(thead, tbody); const rowsPerPage = opts.rowsPerPage; // Table state let currentPage = 1; let filteredData = data; let isMobile = isMobileView(); let headers = isMobile ? headersMobile : headersDesktop; // Table functions const renderTableHeaders = () => { thead.innerHTML = ''; const tr = document.createElement('tr'); headers.forEach((header) => { const th = document.createElement('th'); th.innerHTML = header.name; th.className = `${header.key}-header`; if (header.sortable) { th.style.cursor = 'pointer'; const sortOn = header.sortKey ?? header.key; th.addEventListener('click', () => sortTable(sortOn)); const arrow = document.createElement('span'); arrow.textContent = ' ▲▼'; arrow.style.fontSize = isMobile ? '13px' : '14px'; arrow.style.marginTop = '2px'; th.appendChild(arrow); } // Optional: center all header content if this is the combined column if (header.key === 'combinedPass') { th.style.textAlign = 'center'; } tr.appendChild(th); }); thead.appendChild(tr); }; const renderTableRows = (dataSlice) => { tbody.innerHTML = ''; dataSlice.forEach((row) => { const tr = document.createElement('tr'); headers.forEach((header) => { const td = document.createElement('td'); let value = row[header.key]; td.innerHTML = `${header.format(value)}` td.className = `${header.class}`; tr.appendChild(td); }); tbody.appendChild(tr); }); }; const updatePagination = (totalItems) => { pagination.innerHTML = ''; const totalPages = Math.ceil(totalItems / rowsPerPage); for (let i = 1; i <= totalPages; i++) { const btn = document.createElement('button'); btn.textContent = i; btn.className = i === currentPage ? 'active' : ''; btn.addEventListener('click', () => { currentPage = i; updateTable(); }); pagination.appendChild(btn); } }; const updateTable = () => { isMobile = isMobileView(); headers = isMobile ? headersMobile : headersDesktop; const start = (currentPage - 1) * rowsPerPage; const end = start + rowsPerPage; const pageData = filteredData.slice(start, end); renderTableHeaders(); tableWrapper.scrollIntoView({ behavior: 'smooth' }); renderTableRows(pageData); updatePagination(filteredData.length); }; const sortTable = (key) => { const order = (sortTable.lastOrder = sortTable.lastOrder === 'asc' ? 'desc' : 'asc'); filteredData.sort((a, b) => { let aVal = a[key] ?? ''; let bVal = b[key] ?? ''; // This shouldn't be necessary if we pass in data in numeric form and then apply formatting via a function // if (isNumericColumn(key)) { // aVal = parseFloat(String(aVal).replace(/,/g, '')) || 0; // Remove commas and convert to number // bVal = parseFloat(String(bVal).replace(/,/g, '')) || 0; // } return aVal < bVal ? (order === 'asc' ? -1 : 1) : aVal > bVal ? (order === 'asc' ? 1 : -1) : 0; }); currentPage = 1; updateTable(); }; searchInput.addEventListener('input', (e) => { const query = e.target.value.toLowerCase().trim() console.log('x', query) filteredData = opts.searchFunction(query); currentPage = 1; updateTable(); }); window.addEventListener('resize', () => { const wasMobile = isMobile; isMobile = isMobileView(); if (wasMobile !== isMobile) { updateTable(); } }); updateTable(); return container; }; return table(data) }