.table-wrapper {
overflow-x: auto;
width: 100%;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.dashboard-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
/* Prima coloana ramane fixa la scroll */
.dashboard-table th:first-child,
.dashboard-table td:first-child {
position: sticky;
left: 0;
background-color: #ffffff;
z-index: 2;
box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) {
.dashboard-table th,
.dashboard-table td {
padding: 8px 10px;
font-size: 0.75rem;
}
}Când ai un dashboard plin de date, clientul sau managerul vine mereu cu aceeași cerință: „să meargă impecabil și pe telefon”. Am avut provocarea asta pe o platformă B2B cu peste 15k utilizatori zilnici, unde aveam de înghesuit un grafic complex, un sidebar stufos și un tabel cu 12 coloane pe un ecran de 375px.
Sidebar-ul: Nu reinventa roata, folosește starea corectă
La desktop, toată lumea vrea sidebar-ul extins. La laptopuri mici, îl vrei restrâns doar la pictograme (icon-only), iar pe mobil (sub 768px), sidebar-ul trebuie să devină un off-canvas drawer.
Păcatul cel mai mare pe care l-am văzut des în cod e randarea a două meniuri separate în DOM: unul pentru desktop și unul pentru mobil, mascate cu display: none. Pe lângă că încarci DOM-ul inutil, creezi probleme severe de accesibilitate și stare dublată.
În schimb, folosește un singur markup HTML și gestionează vizibilitatea din CSS. Dacă ai state local în React sau Vue pentru toggle, asigură-te că deschiderea sidebar-ului nu declanșează re-render pe tot layout-ul de dashboard. Am salvat vreo 150ms de lag la click doar mutând starea aia într-un context izolat.
Tabelul: Horizontal Scroll vs. Card Stack
Aici apare cea mai mare dilemă de UX. Ce faci când tabelul are mai mult de 5 coloane?
- Card Stack: Transformi fiecare rând dintr-un tabel într-un card individual. Funcționează excelent când utilizatorul consumă datele izolat (ex: o listă de facturi unde vezi statusul și suma).
- Horizontal Scroll cu coloană fixă: Lași tabelul intact, dar îl pui într-un wrapper cu
overflow-x: autoși faci prima coloană (de obicei Numele sau ID-ul)position: sticky.
Am testat ambele variante într-un A/B test cu 800 de useri din zona de operațiuni. Rezultatul? Card-urile au eșuat lamentabil la task-uri de comparație. Oamenii voiau să scaneze rapid datele pe verticală, lucru imposibil când un singur rând devenea un card lung cât tot ecranul.
Soluția câștigătoare pentru dashboard-uri analitice a fost scroll-ul orizontal cu prima coloană fixată și o umbră discretă pe margine ca să sugereze că mai există conținut în dreapta.
Micro-interacțiuni care salvează spatiul
O chestie măruntă care face diferența: setarea touch-action: pan-x pe wrapper-ul tabelului. Fără proprietatea asta, pe iOS Safari riscați ca gestul de swipe orizontal să fie interceptat greșit ca navigare înapoi în browser.
De asemenea, reducerea fontului pe mobil de la 14px la 12px împreună cu ajustarea padding-ului de la 16px la 8px pe celulele din tabel salvează până la 35% din spațiul util fără să afecteze lizibilitatea.
Responsive-ul pe dashboard-uri nu înseamnă să ascunzi informația, ci să prioritizezi modul în care este analizată. Voi ce abordare folosiți de obicei la tabelele late pe mobil?