DataTable with bulk actions
Interaktywna siatka dla rekordów, które ludzie zaznaczają, sortują i otwierają: przyklejony nagłówek, kolumny liczbowe i akcji oraz zaznaczony wiersz oznaczony podbarwieniem i linią z przodu. BulkActionBar leży nad nią i działa na zaznaczeniu.
- DataTable
- BulkActionBar
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: DataTable with bulk actions
1 release selected
| Version | Project | Status | Downloads | Actions | |
|---|---|---|---|---|---|
| v1.4.2 | Release notes site | Shipped | 1,240 | ||
| v1.5.0 | Command line tools for validating accessibility and design tokens | Planned | 86 | ||
| v1.4.3 | Docs | Delayed | 4,310 | ||
| v1.4.1 | Design tokens | Shipped | 512 | ||
| v1.6.0 | Component gallery | Planned | 2,075 |
Noc, podgląd: DataTable with bulk actions
1 release selected
| Version | Project | Status | Downloads | Actions | |
|---|---|---|---|---|---|
| v1.4.2 | Release notes site | Shipped | 1,240 | ||
| v1.5.0 | Command line tools for validating accessibility and design tokens | Planned | 86 | ||
| v1.4.3 | Docs | Delayed | 4,310 | ||
| v1.4.1 | Design tokens | Shipped | 512 | ||
| v1.6.0 | Component gallery | Planned | 2,075 |
Wysoki kontrast, podgląd: DataTable with bulk actions
1 release selected
| Version | Project | Status | Downloads | Actions | |
|---|---|---|---|---|---|
| v1.4.2 | Release notes site | Shipped | 1,240 | ||
| v1.5.0 | Command line tools for validating accessibility and design tokens | Planned | 86 | ||
| v1.4.3 | Docs | Delayed | 4,310 | ||
| v1.4.1 | Design tokens | Shipped | 512 | ||
| v1.6.0 | Component gallery | Planned | 2,075 |
UżycieLink do sekcji Użycie
import { DataTable, BulkActionBar } from '@skribly/ui/data'<BulkActionBar aria-label="Actions for selected releases" count={count}
countLabel={(n) => `${n} selected`} onClear={clear} clearLabel="Clear selection">
<Button variant="danger" size="sm" onPress={remove}>Delete</Button>
</BulkActionBar>
<DataTable
aria-label="Releases"
className="max-h-72"
columns={columns}
items={releases}
rowKey={(i) => i.id}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
sortDescriptor={sort}
onSortChange={setSort}
/>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ść
- Tab wchodzi do siatki raz; klawisze strzałek przechodzą między komórkami, Spacja przełącza wiersz, Enter go otwiera, gdy ustawiono onRowAction, a wpisywanie przeskakuje do wiersza.
- Nagłówki kolumn sortują klawiszem Enter, a React Aria ogłasza nową kolejność.
- Pola wyboru wierszy są nazwane nagłówkiem wiersza.
- Pasek akcji zbiorczych jest paskiem narzędzi z jednym przystankiem Tab i klawiszami strzałek między akcjami; jego przyciski są wyłączone, gdy nic nie jest zaznaczone, a fokus przechodzi na licznik, gdy akcja opróżnia zaznaczenie.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.