Table
Modalità d'uso
Le tabelle vengono inizializzate automaticamente al termine del caricamento della pagina. Per le tabelle generate dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.
Letture correlate
Linee guida di design Material Design: Componenti - Data Table
Stile
Tabella di base
Aggiungi la classe .mdui-table al tag table per assegnare gli stili di base alla tabella.
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Responsiva
Se la tabella è troppo larga, potrebbe causare la comparsa di barre di scorrimento orizzontali nella pagina. Avvolgi l'elemento .mdui-table all'interno di un elemento .mdui-table-fluid per supportare lo scorrimento orizzontale quando la larghezza della tabella supera quella della pagina.
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div>Passaggi del mouse
Aggiungendo la classe .mdui-table-hoverable all'elemento .mdui-table, ogni riga in tbody risponderà allo stato di passaggio del mouse.
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-hoverable">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Allineamento della colonna
Secondo le linee guida Material Design, le colonne di testo nelle tabelle dovrebbero essere allineate a sinistra e le colonne numeriche a destra.
In mdui, le colonne della tabella sono allineate a sinistra per impostazione predefinita. Aggiungi la classe .mdui-table-col-numeric al tag <th> delle colonne numeriche per allinearle a destra.
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th class="mdui-table-col-numeric">age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>Selezione della colonna
Aggiungi la classe .mdui-table-selectable all'elemento .mdui-table per aggiungere una casella di controllo davanti a ogni riga.
Dopo aver selezionato la casella di controllo, la classe .mdui-table-row-selected verrà aggiunta all'elemento <tr> di quella riga.
Puoi anche aggiungere preventivamente la classe .mdui-table-row-selected all'elemento <tr> per rendere la riga selezionata per impostazione predefinita.
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-selectable">
<thead>
<tr>
<th>Dessert (100g serving)</th>
<th
class="mdui-table-col-numeric"
mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}"
>
Calories
</th>
<th class="mdui-table-col-numeric">Fat (g)</th>
<th class="mdui-table-col-numeric">Carbs (g)</th>
<th class="mdui-table-col-numeric">Protein (g)</th>
<th class="mdui-table-col-numeric">Sodium (mg)</th>
<th
class="mdui-table-col-numeric"
mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}"
>
Calcium (%)
</th>
<th class="mdui-table-col-numeric">Iron (%)</th>
</tr>
</thead>
<tbody>
<tr class="mdui-table-row-selected">
<td>Frozen yogurt</td>
<td>159</td>
<td>6.0</td>
<td>24</td>
<td>4.0</td>
<td>87</td>
<td>14%</td>
<td>1%</td>
</tr>
<tr>
<td>Ice cream sandwich</td>
<td>237</td>
<td>9.0</td>
<td>37</td>
<td>4.3</td>
<td>129</td>
<td>8%</td>
<td>1%</td>
</tr>
<tr>
<td>Eclair</td>
<td>262</td>
<td>16.0</td>
<td>24</td>
<td>6.0</td>
<td>337</td>
<td>6%</td>
<td>7%</td>
</tr>
</tbody>
</table>
</div>Tabelle generate dinamicamente
Se la tua tabella è generata dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.
Se modifichi dinamicamente le proprietà della tabella, devi chiamare il metodo mdui.updateTables() per reinizializzarla. Questo metodo può accettare come parametro un selettore CSS (per selezionare l'elemento <table class="mdui-table">), un elemento DOM o un array di elementi DOM, indicando che verranno reinizializzate solo le tabelle specificate. Se non viene passato alcun parametro, verranno reinizializzate tutte le tabelle nella pagina.
Elenco classi CSS
| Nome classe | Descrizione |
|---|---|
.mdui-table | Definisce il componente Tabella. |
.mdui-table-fluid | Definisce una tabella responsiva. |
.mdui-table-hoverable | Fa sì che le righe della tabella rispondano al passaggio del mouse. |
.mdui-table-col-numeric | Allinea le colonne a destra. |
.mdui-table-selectable | Aggiunge una casella di controllo davanti a ogni riga. |
.mdui-table-row-selected | Le righe selezionate avranno questa classe. |