Tabel sortabil și filtrabil

Prezentare

Adaugă sortare pe coloane și filtrare live peste un tabel obișnuit, rămânând un tabel complet, static, fără JavaScript.

Când se folosește

• pentru tabele cu suficiente rânduri încât sortarea sau filtrarea chiar ajută (liste extinse, cataloage).

Când nu se folosește

• pentru tabele scurte, unde sortarea sau filtrarea nu aduc valoare reală — complexitatea suplimentară nu se justifică.

Anatomie

Un `<div class="sd-sortable-table" data-sd-sortable-table>` care încadrează un `.sd-table-container`/`.sd-table` obișnuit, cu `th[data-sd-sort="text|numeric"]` pe coloanele sortabile.

Variante

• implicit — o singură variantă

Stări

• `aria-sort="none|ascending|descending"` pe antetele sortabile, gestionat de enhancement

Comportament

Fără JavaScript: rămâne un tabel complet, static, complet citibil — nu există input de filtrare sau butoane de sortare fără el, deci niciodată un control mort. Cu JavaScript (`enhanceSortableTables`): adaugă un input de filtrare live (normalizează diacriticele la comparare) și butoane de sortare pe fiecare antet marcat, cu un status text (`role="status"`) care anunță rezultatul fiecărei acțiuni.

Reguli de conținut

• coloanele marcate sortabile (`data-sd-sort`) au sens real de ordonare — nu marca o coloană descriptivă, fără ordine naturală, ca sortabilă.

Responsabilitățile implementatorului

• marchează `data-sd-sort="numeric"` doar pe coloane cu valori cu adevărat numerice — extragerea valorii sortează incorect o coloană textuală marcată greșit ca numerică.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/98 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/content.css';

import { enhanceSortableTables } from '@sistem-digital/components';

<div class="sd-sortable-table" data-sd-sortable-table><div class="sd-table-container" role="region" aria-label="Cereri per instituție; tabel derulabil" tabindex="0"><table class="sd-table sd-table--numeric"><caption>Cereri per instituție</caption><thead><tr><th scope="col" data-sd-sort="text">Instituție</th><th scope="col" data-sd-sort="numeric" class="sd-table__numeric">Cereri</th></tr></thead><tbody><tr><th scope="row">Alba Iulia</th><td class="sd-table__numeric">1.248</td></tr><tr><th scope="row">Cluj-Napoca</th><td class="sd-table__numeric">3.986</td></tr></tbody></table></div></div>

Contract și surse

• Documentația familiei Conținut și date
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).