Basic form
for table Tag Adding Class .mdui-table You can give a basic style to the table.
Example
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
|
@twitter |
<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 horizontal scroll bars on the page. will .mdui-table Element wrapped in .mdui-table-fluid Within the element, you can make the table support horizontal scrolling when the table width exceeds the page width.
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div>
Mouse hover
in .mdui-table Add on element .mdui-table-hoverable Class can make tbody Each row in responds to the hovering state of the mouse.
Example
| # |
First Name |
Last Name |
Username |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
|
@twitter |
<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 Material Design specifications, the text column in the table should be aligned to the left and the numeric column to the right.
The table columns in MDUI are left-aligned by default. <th> Add a class to the label .mdui-table-col-numeric This will align the column to the right.
Example
| # |
First Name |
Last Name |
age |
| 1 |
Mark |
Otto |
18 |
| 2 |
Jacob |
Thornton |
21 |
| 3 |
Larry the Bird |
|
9 |
<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
in .mdui-table Add a class to the element .mdui-table-selectable You can add a check box in front of each row.
After the check box is selected, the <tr> Add a class to the element .mdui-table-row-selected。
You can also pre-install <tr> Add a class to the element .mdui-table-row-selectedTo make the row in the default selected state.
Example
| Dessert (100g serving) |
Calories |
Fat (g) |
Carbs (g) |
Protein (g) |
Sodium (mg) |
Calclum (%) |
Lron (%) |
| Frozen yogurt |
159 |
6.0 |
24 |
4.0 |
87 |
14% |
1% |
| Ice cream sandwich |
237 |
9.0 |
37 |
4.3 |
129 |
8% |
1% |
| Eclair |
262 |
16.0 |
24 |
6.0 |
337 |
6% |
7% |
<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.'}">Calclum (%)</th>
<th class="mdui-table-col-numeric">Lron (%)</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 form
If your form is dynamically generated, you need to call mdui.mutation() Initialize.
If you dynamically modify the table properties, you need to call mdui.updateTables() Method to reinitialize the table. This method can accept a <table class="mdui-table"> The CSS selector of the element, or DOM element, or an array of DOM elements as a parameter, indicates that only the specified table is reinitialized. If no parameters are passed in, all tables in the page will be reinitialized.
List of CSS class names
| Class name |
effect |
.mdui-table |
Define table components. |
.mdui-table-fluid |
Define a responsive form. |
.mdui-table-hoverable |
Make the rows of the table respond when the mouse is hovered. |
.mdui-table-col-numeric |
Align the column to the right. |
.mdui-table-selectable |
Add checkboxes in front of each row. |
.mdui-table-row-selected |
The selected line will have this category. |