NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Datatabel met bediening Nieuw

Facturentabel met zoeken, filteren op status, sorteren per kolom (aria-sort), rijselectie met checkboxen (ook half-geselecteerd), een bulkactie-balk, paginering en een lege staat met één uitweg. Op smalle schermen worden de rijen kaarten via een container query; zonder container-query-support blijft de tabel horizontaal scrollbaar. Koppel in productie de filters aan je API-parameters.

Facturen, sorteerbaar per kolom
Status

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Datatabel met bediening · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dtb">
  <div class="dtb__tools">
    <div class="dtb__std">
      <label class="dtb__search"><span class="dtb__sr">Zoek op klant, plaats of nummer</span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><input type="search" placeholder="Zoek klant of nummer"></label>
      <label class="dtb__sel"><span class="dtb__sr">Status</span><select class="dtb__status"><option value="">Alle statussen</option><option>Open</option><option>Te laat</option><option>Betaald</option></select></label>
      <label class="dtb__sel dtb__sortsel"><span class="dtb__sr">Sorteren</span><select><option value="due:asc">Vervaldatum, eerst</option><option value="due:desc">Vervaldatum, laatst</option><option value="amt:desc">Bedrag, hoog-laag</option><option value="amt:asc">Bedrag, laag-hoog</option><option value="name:asc">Klant, A-Z</option></select></label>
    </div>
    <div class="dtb__bulk" hidden>
      <span class="dtb__count">0 gekozen</span>
      <button type="button" class="dtb__btn" data-act="paid" aria-label="Markeer als betaald">Betaald</button>
      <button type="button" class="dtb__btn" data-act="remind" aria-label="Herinnering sturen">Herinnering</button>
      <button type="button" class="dtb__link" data-act="none" aria-label="Selectie wissen">Wissen</button>
    </div>
  </div>
  <div class="dtb__wrap">
    <table class="dtb__t">
      <caption class="dtb__sr">Facturen, sorteerbaar per kolom</caption>
      <thead><tr>
        <th class="dtb__ck" scope="col"><label class="dtb__cb"><input type="checkbox" class="dtb__all" aria-label="Alle facturen op deze pagina selecteren"><span></span></label></th>
        <th scope="col" aria-sort="none"><button type="button" data-k="name">Klant<i aria-hidden="true"></i></button></th>
        <th scope="col" class="dtb__num" aria-sort="none"><button type="button" data-k="amt">Bedrag<i aria-hidden="true"></i></button></th>
        <th scope="col">Status</th>
        <th scope="col" aria-sort="ascending"><button type="button" data-k="due">Vervalt<i aria-hidden="true"></i></button></th>
      </tr></thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="dtb__pagin">
    <span class="dtb__range" aria-live="polite"></span>
    <button type="button" class="dtb__pg" data-d="-1" aria-label="Vorige pagina"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m14 6-6 6 6 6"/></svg></button>
    <button type="button" class="dtb__pg" data-d="1" aria-label="Volgende pagina"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m10 6 6 6-6 6"/></svg></button>
  </div>
  <p class="dtb__sr dtb__live" aria-live="polite"></p>
</div>
</div>

Meer uit cijfers & grafieken

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →