Tables
Le tabelle di dati sono utilizzate per organizzare e visualizzare i dati in modo razionale
ComponentiMetadati e link per approfondire
Quando usarlo
Il componente table è ideale quando si desidera presentare dati strutturati in modo chiaro e organizzato. Una tabella consente di organizzare in modo logico le informazioni, raggruppando elementi simili e facilitando la comprensione di contenuti complessi. È particolarmente utile in contesti come:
- Gestione di inventari o elenchi di elementi, dove ogni voce può essere dettagliata attraverso colonne specifiche.
- Visualizzazione di dati comparativi, come tabelle di confronto tra prodotti o servizi.
- Presentazione di dati statistici, dove l'organizzazione in righe e colonne facilita l'analisi.
- Creazione di report o documenti che richiedono la suddivisione dei dati in categorie distinte.
Alternative
Come usarlo
- Definisci in modo chiaro come presentare i dati, limitando il numero delle colonne.
- Usa sempre le intestazioni delle colonne.
- Crea tabelle facili da consultare, applicando gli stili di formattazione del testo per evidenziare i punti chiave.
- Permetti di ordinare i contenuti di una colonna solo quando è necessario, utilizzando l’ordinamento alfabetico o numerico a seconda dei casi.
Accessibilità
Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia
| Caratteristica | Stato | Descrizione |
|---|---|---|
Visivamente accessibile | Da verificare | Uso e contrasto dei colori, leggibilità |
Amichevole con lettori di schermo | Da verificare | Struttura titolazioni, etichette e testi alternativi |
Navigabile | Da verificare | Focus, struttura, navigazione da tastiera o altri device |
Comprensibile | Da verificare | Comprensibile, prevedibile, gestione semplice dell’errore |
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
| Libreria | Stato componente | Link |
|---|---|---|
UI Kit Italia (design) | Da verificare | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Da verificare | Scheda documentazione (si apre in una nuova finestra) |
React | Da verificare | Scheda Storybook (si apre in una nuova finestra) |
Angular | Da verificare | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
In stesura
Comportamento
Non sono presenti indicazioni particolari.
Specifiche di design
In stesura
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici