Dynamic Filter Table - Copy this Angular, Css Component to your project
can-you-create-a-filter-for-each-collum-and-more-beautiful-disghn.-<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Dynamic-Candidate-Table</title>-<style>-/*-Base-styling-for-the-table-*/-table-{-width:-100%;-border-collapse:-collapse;-font-family:-Arial,-sans-serif;-margin-top:-20px;-box-shadow:-0px-8px-24px-rgba(0,-0,-0,-0.15);-border-radius:-12px;-overflow:-hidden;-}-/*-Header-styling-*/-th,-td-{-padding:-15px;-text-align:-center;-border:-none;-}-td-{-max-height:-50px;-overflow:-hidden;-text-overflow:-ellipsis;-white-space:-nowrap;-max-width:-400px;-}-th-{-background-color:-#4a7398;-color:-white;-font-weight:-bold;-font-size:-16px;-}-/*-Row-and-hover-styling-*/-tr:nth-child(even)-{-background-color:-#f3f5fa;-}-tr:hover-{-background-color:-#eaf1fc;-transition:-background-color-0.3s-ease;-}-/*-Link-styling-for-Candidate-CV-*/-a-{-color:-#0066cc;-font-weight:-bold;-text-decoration:-none;-position:-relative;-transition:-color-0.3s-ease;-}-a:hover-{-color:-#003d99;-}-/*-Add-underline-effect-on-hover-*/-a::after-{-content:-'';-width:-100%;-height:-2px;-background-color:-#0066cc;-position:-absolute;-bottom:--2px;-left:-0;-transform:-scaleX(0);-transition:-transform-0.3s-ease;-}-a:hover::after-{-transform:-scaleX(1);-}-</style>-</head>-<body>-<table-id="data-table">-<thead>-<!---Table-Header--->-</thead>-<tbody>-<!---Table-Body--->-</tbody>-</table>-<script-type='text/javascript'>-//-Replace-with-your-actual-Spreadsheet-ID-const-spreadsheetId-=-'1-Kq08jekCOILTyuGqmzaKS5wZoBeacQP15mBl-xWCjA';-//-Replace-with-your-API-Key-const-apiKey-=-'AIzaSyBqgs3Nah0g_avO4Ux1lPLyQ1i9cgphGdo';-//-Construct-the-URL-for-Google-Sheets-API-v4-const-url-=-`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/Draft_updated?key=${apiKey}`;-async-function-fetchGoogleSheetData()-{-try-{-//-Fetch-data-from-Google-Sheets-API-const-response-=-await-fetch(url);-if-(!response.ok)-{-throw-new-Error(`HTTP-error!-Status:-${response.status}`);-}-const-data-=-await-response.json();-//-Extract-rows-from-the-data-const-rows-=-data.values;-if-(!rows-||-rows.length-===-0)-{-throw-new-Error("No-data-found-in-the-spreadsheet.");-}-//-Get-the-table-header-and-body-elements-const-tableHeader-=-document.querySelector('#data-table-thead');-const-tableBody-=-document.querySelector('#data-table-tbody');-//-Populate-the-header-const-headerRow-=-document.createElement('tr');-const-columnsToDisplay-=-[-"Company",-"Candidate-Profile-ID",-"Candidate-Status",-"Candidate-Name",-"Seniority-Level",-"Candidate's-CV-(link)"-];-let-indexcolumnsToDisplay-=-[]-rows[0].forEach((header,-index)-=>-{-if-(-columnsToDisplay.some(item-=>-item-===-header)-)-{-console.log(columnsToDisplay.some(item-=>-item-===-header));-indexcolumnsToDisplay.push(index-)-const-th-=-document.createElement('th');-th.textContent-=-header;-headerRow.appendChild(th);-}-});-tableHeader.appendChild(headerRow);-let-filterCompany-=-'Deloitte'-//-Populate-the-body-for-(let-i-=-1;-i-<-rows.length;-i++)-{-const-row-=-document.createElement('tr');-if-(rows[i].includes(-filterCompany)-)-{-rows[i].forEach((cell,-index)-=>-{-if(-indexcolumnsToDisplay.includes(index)-){-const-cellElement-=-document.createElement('td');-//-Check-if-the-cell-is-a-Candidate-CV-link-if-(rows[0][index]-===-"Candidate's-CV-(link)"-&&-cell)-{-const-link-=-document.createElement('a');-link.href-=-cell;-link.textContent-=-"View-CV";-link.target-=-"_blank";-cellElement.appendChild(link);-}-else-{-cellElement.textContent-=-cell;-}-row.appendChild(cellElement);-}-});-tableBody.appendChild(row);-}-}-}-catch-(error)-{-console.error('Error-fetching-Google-Sheets-data:',-error);-alert(`Error:-${error.message}`);-}-}-//-Call-the-function-to-fetch-and-display-data-document.addEventListener('DOMContentLoaded',-fetchGoogleSheetData);-</script>-</body>-</html>
