Table

Tabela tylko do odczytu na natywnym znaczniku tabeli, z podpisem, nagłówkami wierszy i opcjonalnym sortowaniem. Wybierz ją dla raportów i podsumowań; na telefonie albo przewija się we własnym polu, albo układa każdy wiersz w kartę z etykietami.

Table

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Table

Team members

Ada Lovelace	Owner	12
Alan Turing	Viewer	1
Grace Hopper	Editor	4

Team members, stacked on narrow screens

Ada Lovelace	Owner	12
Alan Turing	Viewer	1
Grace Hopper	Editor	4

Empty
Name	Role
Nobody has joined yet.

Loading
Name	Role
Loading members

Error
Name	Role
Could not load members. Try again.

Noc, podgląd: Table

Team members

Ada Lovelace	Owner	12
Alan Turing	Viewer	1
Grace Hopper	Editor	4

Team members, stacked on narrow screens

Ada Lovelace	Owner	12
Alan Turing	Viewer	1
Grace Hopper	Editor	4

Empty
Name	Role
Nobody has joined yet.

Loading
Name	Role
Loading members

Error
Name	Role
Could not load members. Try again.

Wysoki kontrast, podgląd: Table

Team members

Ada Lovelace	Owner	12
Alan Turing	Viewer	1
Grace Hopper	Editor	4

Team members, stacked on narrow screens

Ada Lovelace	Owner	12
Alan Turing	Viewer	1
Grace Hopper	Editor	4

Empty
Name	Role
Nobody has joined yet.

Loading
Name	Role
Loading members

Error
Name	Role
Could not load members. Try again.

UżycieLink do sekcji Użycie

tsx

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

tsx

<Table
  caption="Team members"
  columns={[
    { id: 'name', header: 'Name', isRowHeader: true, allowsSorting: true, cell: (m) => m.name },
    { id: 'seats', header: 'Seats', kind: 'numeric', cell: (m) => m.seats }
  ]}
  rows={members}
  rowKey={(m) => m.id}
  layout="stack"
  sort={sort}
  onSortChange={setSort}
  emptyState="Nobody has joined yet."
/>

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ść

Natywna semantyka tabeli: podpis ją nazywa, sortowalne nagłówki mają aria-sort i zawierają prawdziwy przycisk, a nagłówki wierszy są odczytywane podczas schodzenia w dół kolumny.
Układ w stosie zachowuje jawne role tabeli i pokazuje nazwę każdej kolumny obok jej wartości.
Pole, które się przepełnia, staje się nazwanym regionem z fokusem, więc przewija się z klawiatury.
Ładowanie jest statusem typu polite z aria-busy na tabeli; błąd jest komunikatem typu assertive.

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