Table
Table
Un semplice <table> stilizzato — markup statico, nessuna logica di ordinamento/filtro/paginazione. Per quello, vedi DataTable.
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, TableCaption } from "@pompeitech/vesuvius-ui";Default
| Fattura | Stato | Importo |
|---|---|---|
| INV001 | Pagata | 250,00 € |
| INV002 | In sospeso | 150,00 € |
API
| Componente | Renderizza | Note |
|---|---|---|
Table | <table> | Si avvolge automaticamente in un contenitore di scroll overflow-x-auto — nessun wrapper manuale necessario per una tabella più larga della sua colonna. |
TableHeader | <thead> | |
TableBody | <tbody> | |
TableFooter | <tfoot> | Stilizzato con uno sfondo tenue per distinguerlo da TableBody. |
TableRow | <tr> | Riceve automaticamente uno sfondo hover e un bordo inferiore. |
TableHead | <th> | |
TableCell | <td> | |
TableCaption | <caption> | Renderizzato sotto la tabella per default, testo attenuato. |
Tutti accettano ogni prop nativa del loro elemento sottostante, più className.
Accessibilità
Un vero <table> semantico — TableHead/TableCaption danno gratuitamente agli screen reader la struttura di cui hanno bisogno. Usa TableCaption (invece di un <h2>/<p> adiacente) per descrivere lo scopo della tabella, dato che è associato programmaticamente alla tabella stessa.