Tables
Questo componente permette agli utenti di visualizzare i contenuti in forma tabellare organizzando gli elementi in righe e colonne, con la possibilità di inserire link, bottoni, icone e select.
Documentazione ed esempi per lo stile delle tabelle
Tabella dati generica
| N° | Nome | Cognome | Username |
|---|---|---|---|
| 1 | Mario | Verdi | mario.verdi |
| 2 | Francesco | Bianchi | francesco.bianchi |
| 3 | Alessandro | Rossi | alessandro.rossi |
| 4 | Simone | Rocchi | simone.rocchi |
| 5 | Francesco | Carducci | francesco.carducci |
N°
Nome
Cognome
Username
1
Mario
Verdi
mario.verdi
2
Francesco
Bianchi
francesco.bianchi
5
Francesco
Carducci
francesco.carducci
Tabella dati con Select e Pulsante CTA
| N° | Nome | Cognome | Username | Seleziona e Aziona |
|---|---|---|---|---|
| 1 | Mario | Verdi | mario.verdi |
|
| 2 | Francesco | Bianchi | francesco.bianchi |
|
| 3 | Alessandro | Rossi | alessandro.rossi |
|
| 4 | Simone | Rocchi | simone.rocchi |
|
| 5 | Francesco | Carducci | francesco.carducci |
|
N°
Nome
Cognome
Username
Seleziona e Aziona
1
Mario
Verdi
mario.verdi
2
Francesco
Bianchi
francesco.bianchi
5
Francesco
Carducci
francesco.carducci
Tabella dati / Variante "Suggerimenti"
| Letto | ID | Data | Suggerimento | Valutazione | Stato | Azioni |
|---|---|---|---|---|---|---|
| Si | 1 | 04-05-21 | Si | Pertinente |
|
|
| No | 2 | 04-05-23 | Si | Non pertinente |
|
|
| Si | 3 | 04-05-23 | No | Pertinente |
|
|
| No | 4 | 04-05-23 | No | Non pertinente |
|
|
| Si | 5 | 04-05-23 | Si | Pertinente |
|
Letto
ID
Data
Suggerimento
Valutazione
Stato
Azioni
Si
1
04-05-23
Si
Pertinente
No
2
04-05-23
Si
Non pertinente
Si
3
04-05-23
No
Pertinente
No
4
04-05-23
No
Non pertinente
Si
5
04-05-23
Si
Pertinente
Tabella dati con filtro e paginazione, con preferiti
Si attiva passando un JSON all'attributo data-sil-datatable
(guardare Snippet JSON)
All'attributo data-sil-datatable-itemspage
è possibile passare il numero di elementi visibili per pagina
(10 di default, 6 nell'esempio qui sotto)
{
"columns": [
{
"title": "Colonna 1",
"sortable": true
},
{
"title": "Colonna 2",
"sortable": false
},
{
"title": "Azioni",
"sort": "desc",
"hide": true,
"width": "50px"
}
],
"rows": [
["Col 1a", "Col 2a", ""],
["Col 1b", "Col 2b", ""],
["Col 1c", "Col 2c", ""],
["Col 1d", "Col 2d", ""],
["Col 1e", "Col 2e", ""],
["Col 1f", "Col 2f", ""],
["Col 1g", "Col 2g", ""],
["Col 1h", "Col 2h", ""],
["Col 1i", "Col 2i", ""],
["Col 1l", "Col 2l", ""],
["Col 1m", "Col 2m", ""],
["Col 1n", "Col 2n", ""],
["Col 1o", "Col 2o", ""],
["Col 1p", "Col 2p", ""],
["Col 1q", "Col 2q", ""],
["Col 1r", "Col 2r", ""],
["Col 1s", "Col 2s", ""],
["Col 1t", "Col 2t", ""],
["Col 1u", "Col 2u", ""],
["Col 1v", "Col 2v", ""],
["Col 1z", "Col 2z", ""],
["Col UNIQUE", "Col UNIQUE", ""]
]
}
function addToFav(e) {
alert(`Hai cliccato sul bottone della riga "${e.closest('tr').querySelector('td:first-child').innerText}"`)
// Fai cose qui...
}
Tabella con le righe a espansione
Label Indefinito
Label DESC
Label ASC
Label
Label
Label
Label lunga e che va su due righe
Label
Label
Labellunga echeva suduerighe
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Vestibulum hendrerit ultrices nibh, sed
pharetra lacus ultrices eget. Morbi et ipsum et
sapien dapibus facilisis. Integer eget semper nibh.
Proin enim nulla, egestas ac rutrum eget,
ullamcorper nec turpis.
Label Indefinito
Label DESC
Label ASC
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.