Table
Markup canonic · components/table.json
| Document | Dată | Sumă | Status |
|---|---|---|---|
| Factură 2024-104 | 12.03.2024 | 1 200 Lei | Plătit |
.data-list: fiecare rând un card, fiecare celulă o pereche etichetă–valoare (contract data-list.json, WIP; consumatorii rămân pe .tbl până se așază forma). .tbl-wrap răspunde la lățime pe desktop, nu în banda mobilă.Tabel default — thead bej-1, body white
| Furnizor | Tip | Descriere | Sumă | Deduct. | Data |
|---|---|---|---|---|---|
| Hartmann Consulting GmbH | eFactura | Consultanță aprilie | 12.480 Lei | 100% | 22 apr |
| Petrom · Stația Pipera | Bon fiscal | Combustibil | 487 Lei | 50% | 21 apr |
| Hotel Capsa | Factură | Cazare personală (Iris) | 1.840 Lei | Nu | 19 apr |
| Regus București | eFactura | Chirie birou · aprilie | 3.200 Lei | 100% | 3 apr |
Carcasa și raza · .tbl-wrap
Raza tabelului e --r-sm (10px), fixată 2026-09-21. Ea stă pe .tbl-wrap, nu pe .tbl — elementul de tabel nu declară rază deloc.
table.json era un <table class="tbl"> gol, fără carcasă — iar pagina asta își desena propriul container cu style="…border-radius:var(--r-md);overflow:hidden". Deci ce copiai n-avea rază, iar ce vedeai în preview avea --r-md: în producție același tabel a ieșit și pe --r-md, și pe --r-lg, fiindcă nu exista un singur număr de citit. Ambele sunt reparate: markup-ul canonic vine cu .tbl-wrap, iar demourile de mai sus îl folosesc..tbl-wrap border 1px --c-rule-card · border-radius --r-sm (10px)
background --c-white · overflow-x: auto → scroll ȘI clip de colțuri
.tbl fără rază proprie · min-width 560px în interiorul carcasei
Un .tbl pus direct în pagină are colțuri drepte, fiindcă n-are ce să i le dea — tabelul vine cu rază, carcasa e cea care o duce. Nu compensa punând rază pe .tbl sau pe celule: ai rotunji cutia greșită și banda de antet ar rămâne dreaptă.
De ce nu la treapta de card. --r-xl (24px) e raza suprafețelor de conținut, cu padding lat, unde colțul are loc să respire. Corpul unui tabel e o grilă lipită de marginea carcasei — primul th începe la 1px de contur — deci un colț de 24px taie vizibil în banda de antet. Iar overflow-x: auto nu e doar pentru scroll: el e și ce clipuiește colțurile, fiindcă fundalul thead și hairline-urile rândurilor sunt dreptunghiuri.
Tabelul filtrat · .tbl-filters + .tbl-scroll
O listă pe care o filtrezi e un singur obiect. Antetul listei și bara de filtre (Filter bar) intră în .tbl-wrap, deasupra antetului de coloane, iar tabelul e .tbl.compact. Liniile punctate sunt regula: un singur gutter de 14px, pe ambele părți.
Facturi emise
4 rezultate| Client | Seria | Emisă | e-Factura | Sumă |
|---|---|---|---|---|
| OMV Petrom SA Carburant flotă, septembrie |
S1-0050 | 27 septembrie | Trimisă | 4.149,00 Lei |
| Dedeman SRL Materiale amenajare birou |
S1-0049 | 21 septembrie | Trimisă | 3.015,32 Lei |
| Studio Dedal SRL Abonament suport lunar |
S1-0048 | 16 septembrie | Trimisă | 1.341,89 Lei |
| Banca Transilvania SA Pachet design |
S1-0047 | 10 septembrie | Netrimisă | 4.704,48 Lei |
.tbl-wrap O carcasă pentru toată lista: contur, --r-sm, bej-1
├─ .tbl-filters padding 14px · fără fundal propriu, fără linie dedesubt
│ ├─ .filter-hd titlul + numărul (filter-bar.json)
│ └─ .filter-bar 16px sub titlu · ✕-ul general la capătul rândului
└─ .tbl-scroll alb · derulează pe orizontală, taie colțurile de jos
└─ .tbl.compact thead 8/14 (bej-1, capătul benzii) · celule 9/14 la 13px
+ .tbl-empty stările goale stau tot aici, sub tabel
aliniere |← 14px 14px →|
titlul ✕-ul general
primul filtru textul ultimei
textul primei coloane coloane (suma)
De ce bej-1. Filtrele sunt inputuri, iar un câmp alb se citește drept câmp doar pe bej-1 — aceeași regulă ca la cardul cu inputs. Pe carcasa albă, selecturile erau cutii albe pe alb. Antetul, bara și thead sunt o singură bandă bej-1; corpul (.tbl-scroll) rămâne alb. Controalele rămân albe, nu trec pe .tonal: ✕-ul general (secondary) trece pe alb, iar șina segmentului își desenează conturul în --c-input-border. Un tabel fără filtre rămâne alb.
De ce în carcasă. Un card cu o carcasă de tabel în el are două contururi, deci două margini, și fiecare piesă se aliniază la a ei. Șablonul vechi le-a măsurat: titlul și filtrele la 25px, coloanele la 48px. Cu filtrele în .tbl-wrap, totul începe la același 14px.
De ce compact. Gutter-ul carcasei este padding-ul inline al lui .tbl.compact. Un .tbl implicit ar pune coloanele la 22px, iar filtrele n-ar mai sta deasupra lor. În plus, titlul și bara ocupă deja vreo 100px deasupra rândurilor, iar rândurile dense îi dau înapoi.
Unde derulează. Carcasa filtrată e overflow: visible: lista unui filtru e un .popover absolut, iar un overflow pe carcasă l-ar tăia chiar sub bară. Derularea și clipul colțurilor se mută pe .tbl-scroll, în jurul tabelului. Clipul nu dispare, doar se mută.