sponsorStatsTable = (sponsorStats) => { // put R - Locale on the same line // Add locale search // "Lookup lawmaker" link to cap tracker // onHover make text orange for the link to cap tracker const container = document.createElement('div'); const titleHeading = html`

2025 bill pass rate by Montana lawmakers

`; const dataNote = html`

Note: Excludes non-bill resolutions

`; const sourceNote = html`

Data: Montana Legislative Services

`; const creditNote = html`

Graphic: Jacob Olness/MTFP

`; const isMobileView = () => window.innerWidth <= 768; container.append(titleHeading); container.append(dataNote); container.id = 'sponsor-stats-container'; const searchInput = document.createElement('input'); searchInput.setAttribute('placeholder', 'Search by lawmaker or hometown'); 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 = 'sponsor-stats-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 = 25; let currentPage = 1; let filteredData = sponsorStats; let isMobile = isMobileView(); const headersDesktop = [ { key: 'sponsor', name: 'Sponsor', sortable: true }, { key: 'billsSponsored', name: 'Sponsored', sortable: true }, { key: 'billsPassed', name: 'Passed', sortable: true }, { key: 'billsPassPercentage', name: 'Pass rate', sortable: true } ]; const headersMobile = [ { key: 'sponsor', name: 'Sponsor', sortable: true }, { key: 'combinedPass', name: 'Passed /
Sponsored', sortable: true, sortKey: 'billsSponsored' }, { key: 'billsPassPercentage', name: 'Pass rate', sortable: true } ]; let headers = isMobile ? headersMobile : headersDesktop; const isNumericColumn = (key) => { const numericKeys = [ 'billsSponsored', 'billsPassed', 'billsPassedPercentage', ]; return numericKeys.includes(key); }; 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]; if (header.key === 'sponsor') { const sponsorName = row.sponsor; const title = row.title ?? ''; const party = row.party ?? ''; const locale = row.locale ?? ''; const urlName = sponsorName.replace(/\s+/g, '-'); const url = `https://projects.montanafreepress.org/capitol-tracker-2025/lawmakers/${urlName}/#bills-sponsored`; // determine party color const partyColor = party === 'R' ? '#c62828' : party === 'D' ? '#1565c0' : '#666'; td.innerHTML = ` ${title} ${sponsorName}
${party}-${locale} `; } else { let value = ''; if (header.key === 'combinedPass') { const passed = row.billsPassed ?? 0; const sponsored = row.billsSponsored ?? 0; value = `${passed} / ${sponsored}`; } else { value = row[header.key]; if (typeof value === 'number' && value % 1 !== 0) { value = value.toFixed(2); } if (header.key === 'billsPassPercentage') { value = `${value}%`; } } // Styling if ( header.key === 'billsSponsored' || header.key === 'billsPassed' || header.key === 'billsPassPercentage' || header.key === 'combinedPass' ) { td.style.fontSize = '1.15em'; td.style.fontWeight = '500'; } td.textContent = value ?? ''; } td.className = `${header.key}-cell`; 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] ?? ''; 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(); filteredData = sponsorStats.filter((row) => row.sponsor?.toLowerCase().includes(query) || row.locale?.toLowerCase().includes(query) || row.chamber?.toLowerCase().includes(query) || row.district?.toLowerCase().includes(query) ); currentPage = 1; updateTable(); }); window.addEventListener('resize', () => { const wasMobile = isMobile; isMobile = isMobileView(); if (wasMobile !== isMobile) { updateTable(); } }); updateTable(); return container; };