1. Docs
2. Erste Schritte
3. Datentabelle

Datentabelle 1.2.0

The <velin-data-Tabelle> Web Komponente enhances a plain <Tabelle> with Sortierung, Filterung and pagination. The markup stays semantic, so the Tabelle is fully readable before the Komponente upgrades and with JavaScript disabled. English: Data Table

Wann verwenden

• Tabular data that needs client-side sort, filter, and/or pagination on a semantic <Tabelle>.
• Progressive enhancement: the Tabelle must remain readable before JS upgrades and with scripting disabled.
• Prefer <velin-data-Tabelle> attributes and data-sort / data-filter over ad-hoc Tabelle scripts.

Wann nicht verwenden

• Do not use it for layout grids or non-tabular content — use CSS layout instead.
• Do not expect server-side / virtualized datasets; this enhances light-DOM rows already in the Seite.
• For static styling only (no sort/filter), use Tabellen without the Web Komponente.

Grundlagen

Wrap an ordinary Tabelle. Add sortable to make every column sortable, or opt in per column with data-sort.

<velin-data-table filter-input="#dtFilter" page-size="3">
  <table class="velin-table">
    <caption>Team members</caption>
    <thead>
      <tr>
        <th data-sort="text">Name</th>
        <th data-sort="number">Commits</th>
        <th data-sort="date">Joined</th>
        <th data-sort="none">Role</th>
      </tr>
    </thead>
    <tbody>…</tbody>
  </table>
</velin-data-table>

The Tabelle needs an accessible name. Provide a <caption>, an aria-label, or a label attribute on the host — the Komponente warns in the console if all three are missing.

Sortierung

Each sortable header is replaced with a real <Button>, so Sortierung works with the Tastatur and is announced as a Button by Screenreader. The aktuell state lives on the <th> as aria-sort, and only one column is sorted at a time. Activating the same column again reverses the direction.

To sort by something other than the sichtbar text — a raw timestamp behind a formatted date, for example — put the comparable value in data-sort-value on the cell.

<td data-sort-value="1700000000">15 Nov 2023</td>

Filterung

Point filter-input at any existing input; typing filters rows on a debounced substring match. Non-matching rows get the verborgen attribute, which removes them from the layout and the accessibility tree rather than just hiding them visually.

By Standard the whole row is searched. Mark one or more cells with data-filter to restrict matching to those columns.

<td data-filter>Ada Lovelace</td>
<td>412</td>  <!-- ignored while filtering -->

Wenn nichts passt, wird eine einzelne Zeile mit empty-text über alle Spalten gerendert.

Paginierung

Set Seite-size to show a slice at a time. A labelled <nav> with Zurück and Weiter Buttons and a “Seite X of Y” status is appended; the edge Buttons are disabled rather than removed so Fokus is never lost. Paginierung is omitted entirely while everything fits on one Seite, and Filterung resets to Seite 1.

Attribut

JavaScript-API

const table = document.querySelector('velin-data-table');

table.sort(1, 'descending');   // column index, optional direction
table.filter('ada');           // same matching as the bound input
table.goToPage(2);             // clamped to the available pages

table.rows;          // every data row
table.matchingRows;  // rows passing the current filter
table.visibleRows;   // rows on the current page
table.page;          // current page number
table.pageCount;     // total pages for the current filter

Ereignisse

• velin-data-Tabelle-sort — detail.index, detail.direction, detail.column
• velin-data-Tabelle-filter — detail.query, detail.count
• velin-data-Tabelle-Seite — detail.Seite, detail.pageCount

Barrierefreiheit

• Progressive enhancement over a semantic <Tabelle>: header cells, scope and caption are the author's markup, untouched.
• Sort triggers are native Buttons (WCAG 2.1.1 Tastatur) and the sorted column exposes aria-sort (4.1.2 Name, Rolle, Value).
• Sort direction is conveyed by aria-sort and an announcement, not by the arrow glyph alone (1.4.1 Use of Color).
• Sort, filter and Seite changes are announced politely through <velin-announcer> (4.1.3 Status Messages).
• verborgen rows use the verborgen attribute, so they leave the accessibility tree instead of lingering as invisible content.
• No animation, so there is nothing to suppress for prefers-reduced-motion.
• Sort Buttons fill the header cell and keep a 2.75rem minimum block size (2.5.8 Target Size).

Vertragsstatus in core/a11y/Komponente-contracts.json: bestanden.

Verwandt

• Content — Tabellen (static .velin-Tabelle styling)
• Paginierung
• Announcer
• Barrierefreiheit