Vacatures als filterbare tabel Nieuw

<!-- Vacatures als filterbare tabel · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vct">
  <div class="vct__in">
    <div class="vct__head">
      <div><span class="vct__eye">Maasland Logistiek · Venlo</span><h2 class="vct__h">Werken bij ons. <span class="vct__count">8 vacatures</span></h2></div>
      <div class="vct__filters">
        <div class="vct__fg" role="group" aria-label="Afdeling"><span>Afdeling</span><button type="button" data-a="alle" class="is-on">Alle</button><button type="button" data-a="Magazijn">Magazijn</button><button type="button" data-a="Transport">Transport</button><button type="button" data-a="Techniek">Techniek</button><button type="button" data-a="Kantoor">Kantoor</button></div>
        <div class="vct__fg" role="group" aria-label="Uren"><span>Uren</span><button type="button" data-u="alle" class="is-on">Alle</button><button type="button" data-u="vt">36 tot 40</button><button type="button" data-u="dt">tot 32</button></div>
      </div>
    </div>
    <div class="vct__table" role="table" aria-label="Vacatures">
      <div class="vct__tr vct__tr--h" role="row"><span role="columnheader">Functie</span><span role="columnheader">Afdeling</span><span role="columnheader">Uren</span><span role="columnheader">Bruto per maand</span><span></span></div>
      <a href="#" class="vct__tr" role="row" data-a="Magazijn" data-h="38" data-min="2650" data-max="3050"><span role="cell"><b>Orderpicker reachtruck</b><small>Dagdienst · 06:00 tot 14:30</small></span><span role="cell">Magazijn</span><span role="cell">38 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <a href="#" class="vct__tr" role="row" data-a="Magazijn" data-h="24" data-min="2650" data-max="2900"><span role="cell"><b>Inpakker retouren</b><small>Avonden, ook voor studenten</small></span><span role="cell">Magazijn</span><span role="cell">16 tot 24 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <a href="#" class="vct__tr" role="row" data-a="Magazijn" data-h="40" data-min="3300" data-max="3900"><span role="cell"><b>Teamleider inbound</b><small>Ploegendienst, 14 collega's</small></span><span role="cell">Magazijn</span><span role="cell">40 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <a href="#" class="vct__tr" role="row" data-a="Transport" data-h="40" data-min="3100" data-max="3650"><span role="cell"><b>Chauffeur CE, nationaal</b><small>Elke avond thuis</small></span><span role="cell">Transport</span><span role="cell">40 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <a href="#" class="vct__tr" role="row" data-a="Transport" data-h="32" data-min="3000" data-max="3500"><span role="cell"><b>Planner wegtransport</b><small>Benelux en Noordrijn-Westfalen</small></span><span role="cell">Transport</span><span role="cell">32 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <a href="#" class="vct__tr" role="row" data-a="Techniek" data-h="40" data-min="3400" data-max="4300"><span role="cell"><b>Monteur sorteersystemen</b><small>Storingsdienst 1 op 5 weken</small></span><span role="cell">Techniek</span><span role="cell">40 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <a href="#" class="vct__tr" role="row" data-a="Kantoor" data-h="36" data-min="3700" data-max="4800"><span role="cell"><b>Customer service, Duits</b><small>Hybride, 2 dagen thuis</small></span><span role="cell">Kantoor</span><span role="cell">36 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <a href="#" class="vct__tr" role="row" data-a="Kantoor" data-h="24" data-min="4200" data-max="5400"><span role="cell"><b>Financieel controller</b><small>Rapporteert aan de directie</small></span><span role="cell">Kantoor</span><span role="cell">24 tot 32 uur</span><span role="cell" class="vct__sal"></span><span class="vct__go" aria-hidden="true">&rarr;</span></a>
      <p class="vct__empty" hidden>Geen vacature met deze combinatie. Stuur een open sollicitatie naar werken@voorbeeld.nl.</p>
    </div>
  </div>
</div>
</div>

/* Vacatures als filterbare tabel · NedDev · eigen werk. */
.vct{background:#fff8e7;color:#2a1f14;font-family:'Switzer',sans-serif;box-sizing:border-box}
.vct *{box-sizing:border-box}
.vct__in{max-width:1180px;margin:0 auto;padding:40px 32px}
.vct__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.vct__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#e4572e}
.vct__h{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.025em;margin:8px 0 0;line-height:1}
.vct__count{font:500 13px 'JetBrains Mono',monospace;letter-spacing:0;color:#e4572e;vertical-align:middle;margin-left:6px}
.vct__filters{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.vct__fg{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vct__fg span{font:500 11px 'JetBrains Mono',monospace;color:#8a7a62;text-transform:uppercase;letter-spacing:.08em;margin-right:4px;min-width:62px;text-align:right}
.vct__fg button{font:600 13px 'Switzer',sans-serif;color:#2a1f14;background:transparent;border:1px solid #d9c9a8;border-radius:3px;padding:6px 11px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.vct__fg button:hover{border-color:#2a1f14}
.vct__fg button.is-on{background:#2a1f14;color:#fff8e7;border-color:#2a1f14}
.vct__fg button:focus-visible,.vct__tr:focus-visible{outline:2px solid #e4572e;outline-offset:2px}
.vct__table{border-top:2px solid #2a1f14}
.vct__tr{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.7fr 28px;gap:16px;align-items:center;padding:12px 4px;border-bottom:1px solid #e8dcc3;text-decoration:none;color:inherit;transition:background .2s}
.vct__tr[hidden]{display:none}
.vct__tr--h{font:500 11px 'JetBrains Mono',monospace;color:#8a7a62;text-transform:uppercase;letter-spacing:.08em;padding:10px 4px}
a.vct__tr:hover{background:#fdeed0}
.vct__tr b{display:block;font-size:15.5px;font-weight:600}
.vct__tr small{font-size:12.5px;color:#7a6a52}
.vct__tr>span{font-size:14px}
.vct__sal{display:flex;flex-direction:column;gap:5px}
.vct__sal em{font-style:normal;font:500 12.5px 'JetBrains Mono',monospace}
.vct__band{position:relative;height:6px;background:#efe3c8;border-radius:3px}
.vct__band i{position:absolute;top:0;bottom:0;background:#e4572e;border-radius:3px}
.vct__go{font-size:18px;color:#e4572e;transition:transform .2s}
a.vct__tr:hover .vct__go{transform:translateX(4px)}
.vct__empty{padding:22px 4px;margin:0;color:#7a6a52;font-size:14px}
@media(max-width:760px){.vct__in{padding:28px 16px}.vct__filters{align-items:flex-start}.vct__fg span{text-align:left;min-width:0;width:100%}
.vct__tr--h{display:none}.vct__tr{grid-template-columns:1fr auto;gap:6px 12px;padding:14px 0}
.vct__tr>span:nth-child(1){grid-column:1/-1}.vct__tr>span:nth-child(2),.vct__tr>span:nth-child(3){font:500 11.5px 'JetBrains Mono',monospace;color:#7a6a52}
.vct__tr>span:nth-child(3){text-align:right}.vct__sal{grid-column:1/2}.vct__go{grid-column:2;grid-row:3;align-self:end}}
@media(prefers-reduced-motion:reduce){.vct__go,.vct__tr{transition:none}}

// Vacatures als filterbare tabel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.vct');if(!w)return;
var MIN=2400,MAX=5600;var rows=w.querySelectorAll('a.vct__tr');var fa='alle',fu='alle';
function eur(n){return '€ '+String(n).replace(/\B(?=(\d{3})+(?!\d))/g,'.');}
rows.forEach(function(r){var a=+r.getAttribute('data-min'),b=+r.getAttribute('data-max');var s=r.querySelector('.vct__sal');
 s.innerHTML='<em>'+eur(a)+' tot '+eur(b)+'</em><span class="vct__band"><i style="left:'+((a-MIN)/(MAX-MIN)*100)+'%;right:'+(100-(b-MIN)/(MAX-MIN)*100)+'%"></i></span>';
 r.addEventListener('click',function(e){e.preventDefault();});});
function apply(){var n=0;rows.forEach(function(r){var h=+r.getAttribute('data-h');var ok=(fa==='alle'||r.getAttribute('data-a')===fa)&&(fu==='alle'||(fu==='vt'?h>=36:h<=32));r.hidden=!ok;if(ok)n++;});
 w.querySelector('.vct__count').textContent=n+(n===1?' vacature':' vacatures');w.querySelector('.vct__empty').hidden=n>0;}
w.querySelectorAll('[data-a]').forEach(function(b){if(b.tagName!=='BUTTON')return;b.setAttribute('aria-pressed',b.classList.contains('is-on'));b.addEventListener('click',function(){fa=b.getAttribute('data-a');w.querySelectorAll('button[data-a]').forEach(function(x){x.classList.toggle('is-on',x===b);x.setAttribute('aria-pressed',x===b);});apply();});});
w.querySelectorAll('button[data-u]').forEach(function(b){b.setAttribute('aria-pressed',b.classList.contains('is-on'));b.addEventListener('click',function(){fu=b.getAttribute('data-u');w.querySelectorAll('button[data-u]').forEach(function(x){x.classList.toggle('is-on',x===b);x.setAttribute('aria-pressed',x===b);});apply();});});
apply();
}
init(document.querySelector('.jouw-container'));