Vacatures als filterbare tabel New

Job openings in a table filterable by department and hours, with a salary band per row that shows where each role sits. For employers with many openings.

Maasland Logistiek · Venlo

Werken bij ons. 8 vacatures

Afdeling

Uren

FunctieAfdelingUrenBruto per maand

Orderpicker reachtruckDagdienst · 06:00 tot 14:30Magazijn38 uur Inpakker retourenAvonden, ook voor studentenMagazijn16 tot 24 uur Teamleider inboundPloegendienst, 14 collega'sMagazijn40 uur Chauffeur CE, nationaalElke avond thuisTransport40 uur Planner wegtransportBenelux en Noordrijn-WestfalenTransport32 uur Monteur sorteersystemenStoringsdienst 1 op 5 wekenTechniek40 uur Customer service, DuitsHybride, 2 dagen thuisKantoor36 uur Financieel controllerRapporteert aan de directieKantoor24 tot 32 uur

How to use it

Paste the HTML where the page sections should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →