Table
Usage
Tables are automatically initialized after the page is loaded. For dynamically generated tables, you need to call mdui.mutation() for initialization.
Related Reading
<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>Responsive
If the table width is too large, it may cause a horizontal scroll bar to appear on the page. Wrap the .mdui-table element in a .mdui-table-fluid element to enable horizontal scrolling when the table width exceeds the page width.
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div>Hover
Add the .mdui-table-hoverable class to the .mdui-table element to make each row in the tbody respond to mouse hover.
<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>Column alignment
According to the Material Design specification, text columns in a table should be left-aligned and numeric columns should be right-aligned.
By default, table columns in mdui use left alignment. Add the class .mdui-table-col-numeric to the <th> tag of a numeric column to right-align it.
<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>Column selection
Add the class .mdui-table-selectable to the .mdui-table element to add a checkbox in front of each row.
After checking the checkbox, the class .mdui-table-row-selected will be added to the <tr> element of that row.
You can also pre-add the class .mdui-table-row-selected to the <tr> element to have the row selected by default.
<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>Dynamically generated table
If your table is dynamically generated, you need to call mdui.mutation() for initialization.
If you dynamically modify table attributes, you need to call the mdui.updateTables() method to reinitialize the table. This method can accept a CSS selector (to select the <table class="mdui-table"> element), a DOM element, or a DOM element array as a parameter, indicating that only the specified tables will be reinitialized. If no parameter is passed, all tables on the page will be reinitialized.
CSS Classes
| Class Name | Description |
|---|---|
.mdui-table | Define a table component. |
.mdui-table-fluid | Define a responsive table. |
.mdui-table-hoverable | Make table rows respond to mouse hover. |
.mdui-table-col-numeric | Make the column right-aligned. |
.mdui-table-selectable | Add a checkbox in front of each row. |
.mdui-table-row-selected | Selected rows will have this class. |