Tabele danych

Tabele służą do porównywania. Każda z poniższych decyzji ma jeden cel: pozwolić ludziom przebiec wzrokiem kolumnę, porównać wiersze i wykonać na nich akcje, nie tracąc orientacji.

Wyrównanie#

• Tekst do lewej, liczby do prawej. Liczby wyrównane do prawej i złożone cyframi tabelarycznymi układają się cyfra pod cyfrą. Tabele prfct domyślnie używają cyfr tabelarycznych.
• Nagłówki wyrównane tak jak zawartość kolumny.
• Jednostki w nagłówku, a nie powtarzane w każdej komórce — jeśli cała kolumna ma wspólną jednostkę.

Gęstość#

Domyślna wysokość wiersza to 48 px — wygodna przy mieszanej treści. W gęstych tabelach operacyjnych używaj wierszy 40 px z kontrolkami sm; nie schodź poniżej 32 px. W obrębie jednej tabeli trzymaj się jednej gęstości.

Sortowanie i filtrowanie#

• Nagłówki sortowalnych kolumn zrób przyciskami z ikoną pokazującą kierunek sortowania i ustaw aria-sort na komórce nagłówka.
• Wyszukiwanie i filtry umieść nad tabelą, a liczbę wyników pokaż pod nią.
• Gdy filtry wykluczą wszystkie wiersze, zostaw nagłówki i pokaż w tabeli stan pusty z możliwością wyczyszczenia filtrów.

Zaznaczanie i akcje zbiorcze#

• Kolumna pól wyboru, a w nagłówku pole wyboru, które przechodzi w stan pośredni, gdy zaznaczono część wierszy — ale nie wszystkie.
• Gdy wiersze są zaznaczone, pasek akcji zbiorczych zastępuje pasek narzędzi, podaje liczbę zaznaczonych pozycji i udostępnia akcje. Niebezpieczne akcje zbiorcze projektuj według wzorca Akcje nieodwracalne.
• Zaznaczone wiersze mają data-state="selected" i są podbarwione kolorem brand-2.

Paginacja#

Stosuj paginację, gdy liczy się pozycja — ktoś będzie chciał znów znaleźć fakturę z zeszłego marca. Nieskończonego przewijania używaj tylko w strumieniach treści, które się przegląda, a nie przeszukuje. Zawsze pokazuj łączną liczbę pozycji.

Dostępność#

• Używaj prawdziwych znaczników table: thead, th z atrybutem scope oraz caption (w razie potrzeby ukryty wizualnie).
• Każde pole wyboru w wierszu ma etykietę, która nazywa ten wiersz: Zaznacz INV-2043.
• Akcje w wierszach są osiągalne z klawiatury; unikaj akcji, które pojawiają się dopiero po najechaniu kursorem.