MATERIAL : TABLES
TThe Material Design Lite (MDL) data-table component is an enhanced version of the standard HTML <table>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.
Tables are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience.
1. Add to html head, BEFORE essentials.css: <link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 2. Add .enable-materialdesign class to body: <body class="smoothscroll enable-animation enable-materialdesign"> NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 (.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/) COLOR SCHEME: We use blue as default color scheme. You can create your own material design color: Click to create your material design color Credits: MDL official
| Material | Quantity | Unit price |
|---|---|---|
| Acrylic (Transparent) | 25 | $2.90 |
| Plywood (Birch) | 50 | $1.25 |
| Laminate (Gold on Blue) | 10 | $2.35 |
<!-- Data Tables -->
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
| Name | Nickname | Age | Living? |
|---|---|---|---|
| John Lennon | The smart one | 40 | No |
| Paul McCartney | The cute one | 73 | Yes |
| George Harrison | The shy one | 58 | No |
| Ringo Starr | The funny one | 74 | Yes |
<!-- Tables - no checkboxes -->
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Nickname</th>
<th>Age</th>
<th class="mdl-data-table__cell--non-numeric">Living?</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">John Lennon</td>
<td class="mdl-data-table__cell--non-numeric">The smart one</td>
<td>40</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
<td class="mdl-data-table__cell--non-numeric">The cute one</td>
<td>73</td>
<td class="mdl-data-table__cell--non-numeric">Yes</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">George Harrison</td>
<td class="mdl-data-table__cell--non-numeric">The shy one</td>
<td>58</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
<td class="mdl-data-table__cell--non-numeric">The funny one</td>
<td>74</td>
<td class="mdl-data-table__cell--non-numeric">Yes</td>
</tr>
</tbody>
</table>
| MDL class | Effect | Remarks |
|---|---|---|
mdl-data-table |
Defines table as an MDL component | Required on table element |
mdl-js-data-table |
Assigns basic MDL behavior to table | Required on table element |
mdl-data-table--selectable |
Applies all/individual selectable behavior (checkboxes) | Optional; goes on table element |
mdl-data-table__header--sorted-ascending |
Applies visual styling to indicate the column is sorted in ascending order | Optional; goes on table header (th) |
mdl-data-table__header--sorted-descending |
Applies visual styling to indicate the column is sorted in descending order | Optional; goes on table header (th) |
mdl-data-table__cell--non-numeric |
Applies text formatting to data cell | Optional; goes on both table header and table data cells |
| (none) | Applies numeric formatting to header or data cell (default) |