Enhanced Stock Table - Copy this Html, Tailwind Component to your project
Can-you-add-a-column-to-my-html-code-called-'Class'-between-Ticker-and-Company/ETF:-<!DOCTYPE-html>-<html>-<head>-<title>Investor-Filings-Search</title>-<style>-body-{-font-family:-Arial,-sans-serif;-}-.tab-{-overflow:-hidden;-border-bottom:-1px-solid-#ddd;-}-.tab-button-{-background-color:-#f1f1f1;-border:-none;-outline:-none;-cursor:-pointer;-padding:-14px-16px;-transition:-0.3s;-}-.tab-button:hover-{-background-color:-#ddd;-}-.tab-button.active-{-background-color:-#ccc;-}-.tabcontent-{-display:-none;-padding:-20px;-border:-1px-solid-#ddd;-border-top:-none;-}-.table-container-{-width:-100%;-overflow-x:-auto;-max-height:-500px;-overflow-y:-auto;-}-table-{-width:-100%;-border-collapse:-collapse;-margin-top:-20px;-min-width:-1000px;-}-th,-td-{-border:-1px-solid-#ddd;-padding:-8px;-text-align:-center;-vertical-align:-middle;-}-th-{-background-color:-#f2f2f2;-position:-sticky;-top:-0;-z-index:-2;-cursor:-pointer;-}-th-.sort-icons-{-display:-inline-block;-margin-left:-5px;-font-size:-0.8em;-color:-#aaa;-}-th.sort-asc-.sort-icons-.asc-{-color:-#000;-}-th.sort-desc-.sort-icons-.desc-{-color:-#000;-}-tr:hover-{-background-color:-#f1f1f1;-}-td:first-child,-td[data-column="Issuer"]-{-text-align:-left;-}-td:nth-child(3),-td:nth-child(4)-{-text-align:-right;-}-td[data-column="value"]-{-text-align:-right;-}-/*-Add-this-CSS-for-bold-labels-*/-#controls-label-{-font-weight:-bold;-}-</style>-</head>-<body>-<h1>Superinvestors-Portfolios</h1>-<div-class="tab">-<button-class="tablinks"-onclick="openTab(event,-'Filings')"-id="defaultOpen">Search-Investor-Filings</button>-</div>-<div-id="Filings"-class="tabcontent">-<div-id="controls">-<!---Search-Field-for-Investor-Names--->-<label-for="investorSearch">Search-Investor:</label>-<input-id="investorSearch"-list="investorList"-placeholder="Start-typing-to-search-investors..."-/>-<datalist-id="investorList">-<!---Options-will-be-dynamically-populated--->-</datalist>-<!---New-Stock-Filter-Field-Below--->-<label-for="stockFilter">Stock-Filter:</label>-<input-id="stockFilter"-placeholder="Enter-stock-code-(e.g.,-AAPL)"-/>-<label-for="quarterField">Quarter:</label>-<select-id="quarterField">-<!---Quarters-will-be-dynamically-populated--->-</select>-<!---Total-Portfolio-Value-Display--->-<label>Total-Portfolio-Value:</label>-<span-id="totalPortfolioValue">$0</span>-<!---Top-10%-Display--->-<label>Top-10-%:</label>-<span-id="top10Percent">0%</span>-</div>-<div-class="table-container">-<table>-<thead>-<tr>-<th-data-column="stock_ticker"-onclick="sortTable('stock_ticker')">-Ticker-<span-class="sort-icons">-<span-class="asc">▲</span>-<span-class="desc">▼</span>-</span>-</th>-<th-data-column="Issuer"-onclick="sortTable('Issuer')">-Company/ETF-<span-class="sort-icons">-<span-class="asc">▲</span>-<span-class="desc">▼</span>-</span>-</th>-<th-data-column="cusip"-onclick="sortTable('cusip')">-CUSIP-<span-class="sort-icons">-<span-class="asc">▲</span>-<span-class="desc">▼</span>-</span>-</th>-<th-data-column="shares"-onclick="sortTable('shares')">-Shares-<span-class="sort-icons">-<span-class="asc">▲</span>-<span-class="desc">▼</span>-</span>-</th>-<th-data-column="value"-onclick="sortTable('value')">-Value-('000)-<span-class="sort-icons">-<span-class="asc">▲</span>-<span-class="desc">▼</span>-</span>-</th>-<th-data-column="percentage"-onclick="sortTable('percentage')">-%-<span-class="sort-icons">-<span-class="asc">▲</span>-<span-class="desc">▼</span>-</span>-</th>-</tr>-</thead>-<tbody-id="resultsBody">-<!---Rows-will-be-dynamically-added-here--->-</tbody>-</table>-</div>-</div>-<script>-let-investors-=-[];-let-quarters-=-[];-let-top10PercentValue-=-0;-//-Store-the-"Top-10-%"-value-globally-//-New-Function:-Calculate-Top-10-%-function-calculateTop10Percent(data,-totalPortfolioValue)-{-const-rows-=-data.map(item-=>-({-value:-item.value,-percentage:-(item.value-/-totalPortfolioValue)-*-100,-}));-const-sortedRows-=-rows.sort((a,-b)-=>-b.percentage---a.percentage);-top10PercentValue-=-sortedRows-.slice(0,-10)-.reduce((sum,-row)-=>-sum-+-row.percentage,-0)-.toFixed(2);-//-Update-the-"Top-10-%"-field-document.getElementById('top10Percent').innerText-=-`${top10PercentValue}%`;-}-function-fetchInvestors()-{-fetch('/investors')-.then(response-=>-response.json())-.then(data-=>-{-investors-=-data;-const-datalist-=-document.getElementById('investorList');-datalist.innerHTML-=-investors-.map(investor-=>-`<option-value="${investor}"></option>`)-.join('');-})-.catch(error-=>-{-console.error('Error-fetching-investors:',-error);-});-}-function-fetchQuartersForInvestor(investorName)-{-fetch(`/quarters?investor=${encodeURIComponent(investorName)}`)-.then(response-=>-response.json())-.then(data-=>-{-quarters-=-data;-const-quarterSelect-=-document.getElementById('quarterField');-quarterSelect.innerHTML-=-quarters-.map(q-=>-`<option-value="${q}">${q}</option>`)-.join('');-if-(quarters.length->-0)-{-quarterSelect.value-=-quarters[0];-//-Select-the-latest-quarter-by-default-performSearch();-//-Trigger-a-search-for-the-latest-quarter-}-})-.catch(error-=>-{-console.error('Error-fetching-quarters:',-error);-});-}-function-performSearch()-{-const-investorQuery-=-document.getElementById('investorSearch').value.trim();-const-stockQuery-=-document.getElementById('stockFilter').value.trim();-const-quarterQuery-=-document.getElementById('quarterField').value;-if-(!investorQuery)-{-console.log('No-investor-selected.-Clearing-table-and-resetting-values.');-document.getElementById('resultsBody').innerHTML-=-'';-document.getElementById('totalPortfolioValue').innerText-=-'$0';-//-Reset-portfolio-value-document.getElementById('top10Percent').innerText-=-'0%';-//-Reset-Top-10%-return;-}-console.log(`Fetching-total-portfolio-value-for-Investor:-${investorQuery},-Quarter:-${quarterQuery}`);-//-Fetch-the-total-portfolio-value-fetch(`/portfolio_total?investor=${encodeURIComponent(investorQuery)}&quarter=${encodeURIComponent(quarterQuery)}`)-.then(response-=>-response.json())-.then(totalPortfolioValue-=>-{-console.log('Total-Portfolio-Value:',-totalPortfolioValue);-//-Update-the-total-portfolio-value-display-document.getElementById('totalPortfolioValue').innerText-=-`$${totalPortfolioValue.toLocaleString()}`;-console.log(`Fetching-search-results-for-Investor:-${investorQuery},-Quarter:-${quarterQuery},-Stock/Issuer:-${stockQuery}`);-//-Fetch-the-filtered-search-results-fetch(`/search?investor=${encodeURIComponent(investorQuery)}&quarter=${encodeURIComponent(quarterQuery)}&stock=${encodeURIComponent(stockQuery)}`)-.then(response-=>-response.json())-.then(data-=>-{-console.log('Search-Results:',-data);-if-(!stockQuery)-{-calculateTop10Percent(data,-totalPortfolioValue);-}-renderTable(data,-'resultsBody',-totalPortfolioValue);-})-.catch(error-=>-console.error('Error-fetching-search-results:',-error));-})-.catch(error-=>-console.error('Error-fetching-total-portfolio-value:',-error));-}-function-renderTable(data,-tableBodyId,-totalPortfolioValue)-{-console.log('Rendering-table-with-Total-Portfolio-Value:',-totalPortfolioValue);-//-Debug-log-const-tableBody-=-document.getElementById(tableBodyId);-tableBody.innerHTML-=-'';-if-(data.length-===-0)-{-tableBody.innerHTML-=-'<tr><td-colspan="6">No-results-found.</td></tr>';-return;-}-//-Calculate-percentages-and-build-the-table-const-rows-=-data.map(item-=>-{-const-percentage-=-((item.value-/-totalPortfolioValue)-*-100).toFixed(2);-return-{-...item,-percentage:-parseFloat(percentage),-};-});-//-Render-the-rows-in-the-table-rows.forEach(item-=>-{-const-row-=-`-<tr>-<td>${item.stock_ticker-||-'N/A'}</td>-<td-data-column="Issuer">${item.Issuer}</td>-<td>${item.cusip}</td>-<td>${Number(item.shares).toLocaleString()}</td>-<td-data-column="value">$${(item.value-/-1000).toLocaleString(undefined,-{-minimumFractionDigits:-0,-maximumFractionDigits:-0-})}</td>-<td>${item.percentage.toFixed(2)}%</td>-</tr>-`;-tableBody.innerHTML-+=-row;-});-}-function-sortTable(column)-{-const-rows-=-Array.from(document.querySelectorAll('#resultsBody-tr'));-const-index-=-Array.from(document.querySelectorAll('th')).findIndex(th-=>-th.dataset.column-===-column);-const-isNumeric-=-['shares',-'value',-'percentage'].includes(column);-if-(window.lastSortedColumn-===-column)-{-window.sortOrder-=-window.sortOrder-===-'asc'-?-'desc'-:-'asc';-}-else-{-window.sortOrder-=-'asc';-}-window.lastSortedColumn-=-column;-rows.sort((a,-b)-=>-{-const-aText-=-a.cells[index].innerText;-const-bText-=-b.cells[index].innerText;-let-aValue-=-aText;-let-bValue-=-bText;-if-(isNumeric)-{-aValue-=-parseFloat(aText.replace(/[\$,]/g,-''))-||-0;-bValue-=-parseFloat(bText.replace(/[\$,]/g,-''))-||-0;-}-if-(aValue-<-bValue)-return-window.sortOrder-===-'asc'-?--1-:-1;-if-(aValue->-bValue)-return-window.sortOrder-===-'asc'-?-1-:--1;-return-0;-});-const-tableBody-=-document.getElementById('resultsBody');-tableBody.innerHTML-=-'';-rows.forEach(row-=>-tableBody.appendChild(row));-}-document.addEventListener('DOMContentLoaded',-()-=>-{-fetchInvestors();-document.getElementById('investorSearch').addEventListener('input',-(event)-=>-{-const-investorName-=-event.target.value.trim();-if-(investorName)-{-fetchQuartersForInvestor(investorName);-//-Update-quarters-for-the-selected-investor-}-});-document.getElementById('quarterField').addEventListener('change',-performSearch);-document.getElementById('stockFilter').addEventListener('input',-performSearch);-});-let-sortOrder-=-'asc';-let-lastSortedColumn-=-'';-function-openTab(evt,-tabName)-{-const-tabcontent-=-document.getElementsByClassName("tabcontent");-for-(let-i-=-0;-i-<-tabcontent.length;-i++)-{-tabcontent[i].style.display-=-"none";-}-const-tablinks-=-document.getElementsByClassName("tablinks");-for-(let-i-=-0;-i-<-tablinks.length;-i++)-{-tablinks[i].className-=-tablinks[i].className.replace("-active",-"");-}-document.getElementById(tabName).style.display-=-"block";-evt.currentTarget.className-+=-"-active";-}-document.getElementById("defaultOpen").click();-</script>-</body>-</html>
