/* CSS trick: Transformare tabel în cards stack pe mobil fără markup duplicat */
@media (max-width: 640px) {
.responsive-table table,
.responsive-table tbody,
.responsive-table tr,
.responsive-table td {
display: block;
width: 100%;
}
.responsive-table thead {
display: none; /* Ascundem capul de tabel */
}
.responsive-table tr {
margin-bottom: 1rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem;
background: #ffffff;
}
.responsive-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #f1f5f9;
}
.responsive-table td:last-child {
border-bottom: none;
}
/* Injectăm label-ul din atributul data-label */
.responsive-table td::before {
content: attr(data-label);
font-weight: 600;
color: #64748b;
font-size: 0.875rem;
}
}Am refăcut anul trecut interfața la un dashboard intern pentru o platformă B2B cu peste 14.000 de utilizatori lunari. Interfața veche arăta excelent pe un monitor 4K, dar pe laptopul de 13 inchi al managerilor de vânzări sau pe telefon era o comedie tragică. Tabelele ieșeau din ecran, sidebar-ul ocupa o treime din lățime, iar userii făceau pinch-to-zoom ca în 2010.
Să faci un responsive design bun pe o aplicație de tip SaaS cu sute de date pe ecran nu înseamnă doar să pui max-width: 100%. Înseamnă să regândești complet comportamentul componentelor de bază.
Sidebar collapsible: Overlay pe mobil, minified pe desktop
Prima greșeală pe care o văd des este ascunderea completă a meniului pe desktop sub un buton de burger. În B2B, vrei navigare rapidă. Dacă userul face 500 de click-uri pe zi, fiecare click în plus la burger menu înseamnă frustrare.
Soluția pe care o folosesc mereu este o stare intermediară:
- Desktop (> 1024px): Sidebar extins (260px) cu opțiune de colapsare la mod icon-only (64px). Trecerea o fac prin CSS Variables direct pe container, ca să nu recalculeze browserul tot layout-ul.
- Tabletă și Mobil (< 768px): Sidebar-ul părăsește fluxul documentului și devine un off-canvas drawer (fix, peste conținut) declanșat de burger menu.
E un trade-off simplu: pierzi puțin spațiu pe mobil când e deschis, dar câștigi 100% din ecran pentru conținutul critic când navighezi.
Coșmarul tabelelor: Horizontal scroll vs. Cards stack
Ce faci când ai un tabel cu 12 coloane și 500 de rânduri? În principiu, ai două opțiuni reale.
Soluția 1: Horizontal Scroll cu sticky column
E cea mai ieftină metodă de implementat. Pui un wrapper cu overflow-x: auto și ai terminat treaba în două minute. Totuși, UX-ul e mediocru dacă userul pierde din vedere despre ce entitate e vorba pe rândul respectiv. Trucul aici e să faci prima coloană (de obicei Numele sau ID-ul) position: sticky; left: 0. Așa, când se dă scroll orizontal, utilizatorul știe permanent pe ce rând se uită.
Soluția 2: Cards Stack (Tabelul devine listă de carduri)
Pentru ecrane sub 640px, scroll-ul orizontal devine obositor. Soluția curată este să transformi fiecare rând de tabel într-un card individual. Nu trebuie să duplici markup-ul în React sau HTML, poți face totul direct din CSS schimbând display-ul tabelului în block și folosind atribute data-label pentru fiecare celulă.
După ce am trecut tabelele de comenzi la sistemul de Cards Stack pe mobil, am înregistrat o scădere cu 35% a tichetelor de suport tehnice care raportau "butoanele de acțiune nu se pot apăsa pe telefon".
Când alegi un pattern în defavoarea celuilalt?
Horizontal scroll-ul cu coloană fixă merge excelent când utilizatorii fac comparații directe între rânduri pe coloane specifice (de exemplu, un raport financiar). Cards stack-ul câștigă detașat pe mobil când fiecare rând reprezintă un obiect de sine stătător (un produs, un ticket, o comandă) și acțiunile principale sunt de tip Vizualizare / Editare / Ștergere.
Voi cum abordați tabelele masive pe ecrane mici? Mergeți pe scroll orizontal sau transformați totul în carduri?