Tabelle
Verwendung
Tabellen werden nach dem Laden der Seite automatisch initialisiert. Bei dynamisch generierten Tabellen muss mdui.mutation() zur Initialisierung aufgerufen werden.
Verwandte Themen
Stil
Basis-Tabelle
Fügen Sie dem table-Tag die Klasse .mdui-table hinzu, um der Tabelle grundlegende Stile zu verleihen.
<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>Responsiv
Wenn eine Tabelle zu breit ist, kann dies zu horizontalen Scrollbalken auf der Seite führen. Umschließen Sie das .mdui-table-Element mit einem .mdui-table-fluid-Element, um horizontales Scrollen zu ermöglichen, wenn die Tabellenbreite die Seitenbreite überschreitet.
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div>Hover-Zustand
Durch Hinzufügen der Klasse .mdui-table-hoverable zum .mdui-table-Element reagiert jede Zeile im tbody auf den Maus-Hover-Zustand.
<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>Spaltenausrichtung
Gemäß den Material Design Richtlinien sollten Textspalten linksbündig und numerische Spalten rechtsbündig ausgerichtet werden.
In mdui sind Tabellenspalten standardmäßig linksbündig ausgerichtet. Fügen Sie dem <th>-Tag der numerischen Spalte die Klasse .mdui-table-col-numeric hinzu, um diese Spalte rechtsbündig auszurichten.
<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>Zeilenauswahl
Durch Hinzufügen der Klasse .mdui-table-selectable zum .mdui-table-Element wird am Anfang jeder Zeile eine Checkbox hinzugefügt.
Nach dem Auswählen der Checkbox wird dem <tr>-Element dieser Zeile die Klasse .mdui-table-row-selected hinzugefügt.
Sie können auch vorab die Klasse .mdui-table-row-selected zum <tr>-Element hinzufügen, um diese Zeile standardmäßig auszuwählen.
<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>Dynamisch generierte Tabellen
Wenn Ihre Tabelle dynamisch generiert wird, muss mdui.mutation() zur Initialisierung aufgerufen werden.
Wenn Sie Tabelleneigenschaften dynamisch ändern, müssen Sie die Methode mdui.updateTables() aufrufen, um die Tabelle neu zu initialisieren. Diese Methode akzeptiert einen CSS-Selektor (um das <table class="mdui-table">-Element auszuwählen), ein DOM-Element oder ein Array von DOM-Elementen als Parameter, um nur die angegebene Tabelle neu zu initialisieren. Wenn kein Parameter übergeben wird, werden alle Tabellen auf der Seite neu initialisiert.
CSS-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-table | Definiert eine Tabellen-Komponente. |
.mdui-table-fluid | Definiert eine responsive Tabelle. |
.mdui-table-hoverable | Lässt die Tabellenzeilen auf den Maus-Hover-Zustand reagieren. |
.mdui-table-col-numeric | Richtet eine Spalte rechtsbündig aus. |
.mdui-table-selectable | Fügt jeder Zeile eine Checkbox hinzu. |
.mdui-table-row-selected | Ausgewählte Zeilen erhalten diese Klasse. |