NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Datatabel met bediening New

Invoice table with search, status filter, sortable columns (aria-sort), row selection with checkboxes (including indeterminate), a bulk action bar, pagination and an empty state with one way out. On narrow screens rows become cards through a container query; without container query support the table stays horizontally scrollable. In production you map the filters to your API parameters.

Facturen, sorteerbaar per kolom
Status

How to use it

  1. Paste the HTML where the numbers & charts should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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>

More numbers & charts

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 →