Komponenty

Tabele

Rejestr urządzeń to serce aplikacji i najgęstszy ekran, jaki mamy. Tabela ma pokazać dużo i nie zmęczyć.

Stan rozdziału:: gotowe
Aplikacja dziś:: zgodna

Przykład

Rejestr urządzeń, dane przykładowe
Urządzenie	Jednostka	Nr fabryczny	Ostatnie zdarzenie	Następny termin
Analizator laboratoryjny`MP-0241`	Pracownia analityki	`AL-77310-0O1`	24.09.2025	24.09.2026za 12 dni
Defibrylator`MP-0118`	Gabinet zabiegowy	`DF-20481-Il7`	02.08.2025	02.08.2026po terminie o 41 dni
Aparat USG`MP-0305`	Pracownia obrazowa	`US-91002-3B`	15.03.2026	15.03.2027
Autoklaw`MP-0077`	Sterylizatornia	`AK-33019`	brak wpisów	01.12.2026
Kardiomonitor`MP-0190`	Gabinet zabiegowy	`KM-55512`	11.01.2026	wycofane

Rejestr urządzeń. Nazwa w wadze SemiBold, identyfikator w kroju o stałej szerokości, termin z pastylką tylko wtedy, gdy wymaga uwagi. Wiersz „w porządku” nie dostaje odznaki: brak odznaki sam niesie informację.

Budowa

Część	Zasada
Element	Zwykła tabela HTML: `table`, `thead`, `th scope="col"`, `tbody`. Renderowana na serwerze, bez stanu i bez JavaScriptu. Sortowanie i filtry idą przez adres strony.
Nagłówek	Tło neutralne, 44 px wysokości, tekst pomocniczy 12 px wielkimi literami. Bez pogrubienia całej komórki.
Wiersz	Wysokość zadana tokenem (56 px domyślnie), nie wynikająca z wypełnienia. Linia między wierszami. Podświetlenie przy najechaniu na tło neutralne, bez zmiany koloru tekstu.
Pierwsza kolumna	Nazwa w wadze 600 w atramencie, pod nią identyfikator w kroju o stałej szerokości w tekście pomocniczym. To jest to, czego szuka wzrok.
Pozostałe kolumny	Tekst pomocniczy, 14 px. Identyfikatory i numery fabryczne w kroju o stałej szerokości.
Daty	`DD.MM.RRRR`, cyfry tabelaryczne, bez zawijania.
Statusy	Pastylka tylko tam, gdzie termin wymaga uwagi. Wiersz „w porządku” pokazuje samą datę w tekście pomocniczym.
Pojemnik	Tabela przewija się w poziomie w swoim pojemniku (`overflow-x: auto`), a strona nigdy. Pojemnik ma narożnik 16 px i linię, jak karta.

Kiedy używać

Gdy wierszy jest więcej niż kilka i mają te same kolumny: rejestr urządzeń, lista zgłoszeń, lista użytkowników.
Gdy użytkownik porównuje wiersze między sobą (który termin najbliżej).

Kiedy nie

Do dwóch albo trzech pozycji. Wtedy lista albo karty.
Do treści z długimi opisami. Historia wpisów to lista, nie tabela, bo wpis ma opis w kilku zdaniach.
Na telefonie jako jedyny widok, gdy kolumn jest więcej niż trzy. Wtedy tabela zostaje w pojemniku z przewijaniem, a najważniejsze kolumny (nazwa, termin) stoją pierwsze, żeby były widoczne bez przewijania.

Gęstość

Aplikacja ma trzy gęstości przełączane na html: kompaktowa (44 px wiersz), domyślna (56 px), komfortowa (64 px) i prezentacyjna (76 px) dla rzutnika na spotkaniu. Kanon to zatwierdza. Gęstość zmienia wysokość wiersza i nic więcej: rozmiar kroju zostaje.

Klawiatura i czytnik ekranu

Tabela ma caption (może być ukryty wizualnie), żeby czytnik wiedział, czym jest.
Nagłówki kolumn mają scope="col". Czytnik czyta „Następny termin: 24.09.2026, za 12 dni”.
Wiersz nie jest klikalny w całości. Odnośnik jest na nazwie urządzenia, i to on dostaje ognisko. Klik w resztę wiersza nic nie robi, bo niewidoczny obszar klikania jest pułapką.
Duża tabela pokazuje pierwsze N wierszy i mówi wprost: „Widoczne pierwsze 200 z 480 urządzeń. Zawęź listę wyszukiwaniem albo filtrem”. Bez nieskończonego przewijania.

Zgodność aplikacji

Zgodna co do układu i budowy (tabela.tsx, --row-h, scope="col", przewijanie w pojemniku, tabular-nums na elemencie table). Kolory nagłówka i linii przejdą na wartości brandbooka razem z podmianą tokenów semantycznych. Wypełnienie komórek 20 px (px-5) można zostawić: w gęstej tabeli 24 px to za dużo.