Tabel responsive

Prezentare

Păstrează relațiile tabulare intacte pe ecrane înguste, prin derulare locală, nu prin ascunderea coloanelor.

Când se folosește

• pentru orice tabel de date care poate depăși lățimea unui ecran îngust.

Când nu se folosește

• pentru date care nu sunt cu adevărat tabulare — un tabel folosit doar pentru layout, fără date reale, e greșit semantic.

Anatomie

Un `<div class="sd-table-container" role="region" aria-label="…" tabindex="0">` care încadrează un `<table class="sd-table">` cu `<caption>` și antete `<th scope>`.

Variante

• implicit
• `sd-table--numeric` — aliniază coloanele numerice la dreapta, cu `white-space: nowrap`

Stări

• :focus-visible pe container

Comportament

Fără JavaScript. Overflow-ul orizontal e local, prin `.sd-table-container` (`overflow-x: auto`), nu la nivelul întregii pagini — exact bug-ul opus a fost identificat și corectat în PR #175, unde un tabel neîncadrat forța overflow pe toată pagina. La tipărire, containerul devine `overflow: visible` și tabelul `min-width: 0`, ca să încapă pe pagină.

Reguli de conținut

• caption-ul descrie conținutul tabelului, chiar dacă e vizual ascuns.

Responsabilitățile implementatorului

• orice tabel nou trebuie încadrat în `.sd-table-container` cu `role="region"` și `aria-label` descriptiv — omiterea lui produce exact bug-ul de overflow corectat în PR #175.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/51 (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';

<div class="sd-table-container" role="region" aria-label="Cereri; tabel derulabil" tabindex="0"><table class="sd-table"><caption>Cereri înregistrate</caption><thead><tr><th scope="col">Instituție</th><th scope="col">Cereri</th></tr></thead><tbody><tr><th scope="row">Instituția A</th><td>1.248</td></tr></tbody></table></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).