DataTable states

Te same trzy stany, które pokazuje każda kolekcja z tej grupy zamiast wierszy: brak czegokolwiek do pokazania, ładowanie i błąd blokujący.

DataTable

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: DataTable states

Version	Project
No releases match these filters.

Version	Project
Loading releases

Version	Project
Could not load releases. Check the connection and try again.

Noc, podgląd: DataTable states

Version	Project
No releases match these filters.

Version	Project
Loading releases

Version	Project
Could not load releases. Check the connection and try again.

Wysoki kontrast, podgląd: DataTable states

Version	Project
No releases match these filters.

Version	Project
Loading releases

Version	Project
Could not load releases. Check the connection and try again.

UżycieLink do sekcji Użycie

tsx

import { DataTable } from '@skribly/ui/data'

tsx

<DataTable aria-label="Releases" columns={columns} items={[]} rowKey={(i) => i.id}
  isLoading={isLoading} loadingLabel="Loading releases"
  error={failed ? 'Could not load releases.' : undefined}
  emptyState="No releases match these filters." />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Ładowanie jest statusem typu polite ze wskaźnikiem, który zatrzymuje się przy ograniczonym ruchu.
Błąd jest komunikatem typu assertive z ikoną i własnymi słowami, nigdy samym kolorem.
Pusty stan może zawierać przycisk, który pozostaje osiągalny wewnątrz siatki.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.