テーブル
使用方法
テーブルはページ読み込み後に自動的に初期化されます。動的に生成されたテーブルの場合は、初期化のために mdui.mutation() を呼び出す必要があります。
<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>レスポンシブ
テーブルの幅が広すぎるとページに横スクロールバーが表示されることがあります。.mdui-table 要素を .mdui-table-fluid 要素で囲むことで、テーブルの幅がページの幅を超えたときに水平スクロールが可能になります。
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div><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>列の配置
Material Design ガイドラインに従って、テーブル内のテキスト列は左揃え、数値列は右揃えにする必要があります。
mdui のテーブル列はデフォルトで左揃えです。数値列の <th> タグに .mdui-table-col-numeric クラスを追加することで、その列を右揃えにできます。
<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>列の選択
.mdui-table 要素に .mdui-table-selectable クラスを追加すると、各行の前にチェックボックスが追加されます。
チェックボックスを選択すると、その行の <tr> 要素に .mdui-table-row-selected クラスが追加されます。
あらかじめ <tr> 要素に .mdui-table-row-selected クラスを追加しておくことで、その行をデフォルトで選択状態にできます。
<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>動的に生成されたテーブル
テーブルが動的に生成される場合は、初期化のために mdui.mutation() を呼び出す必要があります。
テーブルの属性を動的に変更した場合は、テーブルを再初期化するために mdui.updateTables() メソッドを呼び出す必要があります。このメソッドは、引数として CSS セレクター（<table class="mdui-table"> 要素を選択するため）、DOM 要素、または DOM 要素の配列を受け取り、指定されたテーブルのみを再初期化できます。引数を渡さない場合は、ページ内のすべてのテーブルが再初期化されます。