Material Design Lite Table
what is Tables in (MDL) ?
- Material Design Lite(MDL) component data-table is used to create an table which is an enhanced version of HTML5 Table
- A Data Table comprises of a rows and columns of well formatted data, displayed with typical MDL user interaction capabilities.
- Tables find usage in almost all types of webpages to display structured data, hence the design and placement of tables has a huge impact on user experience.
- The individual cells of the table are self-formatting, with minimal attention required to format them.
- The Date-table Component automatically applies shadow and other effects on mouseover and selection, user can format cells by using specific classes for non-numbered values, selectable values within the table.
Material Design Lite(MDL) Tables : Numerical Values
- A MDL Data Table is created by using class mdl-data-table within the element table
- The Data-Table is by default formatted for holding numeric values, i.e the displayed values are aligned to the right-side of the table cell.
Sample Code for Numerical Values
<!-- MDL table container "mdl-data-table", shadow--4dp -->
<table class="mdl-data-table mdl-js-data-table mdl-shadow--4dp">
<thead>
<tr>
<th>Value</th>
<th>Multiplier</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td>10</td>
<td>5</td>
<td>50</td>
</tr>
<!-- Row 2 -->
<tr>
<td>40</td>
<td>10</td>
<td>400</td>
</tr>
<!-- Row 3 -->
<tr>
<td>30</td>
<td>5</td>
<td>150</td>
</tr>
</tbody>
</table>
- Note: The Data-table cells are formatted as numeric by default.
Material Design Lite(MDL) Tables : Non-Numerical Values
- A MDL Data Table for non numeric values can be created using class mdl-data-table__cell--non-numeric
- This Class displays the text content within table cells aligned to the left corner.
Sample Code for Non-numerical Values
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<th class="mdl-data-table__cell--non-numeric">Country</th>
<th class="mdl-data-table__cell--non-numeric">Capital</th>
<th class="mdl-data-table__cell--non-numeric">Currency</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<td class="mdl-data-table__cell--non-numeric">USA</td>
<td class="mdl-data-table__cell--non-numeric">Washington DC</td>
<td class="mdl-data-table__cell--non-numeric">US Dollar</td>
</tr>
<!-- Row 2 -->
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<td class="mdl-data-table__cell--non-numeric">CHINA</td>
<td class="mdl-data-table__cell--non-numeric">Beijing</td>
<td class="mdl-data-table__cell--non-numeric">Yuan</td>
</tr>
<!-- Row 3 -->
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<td class="mdl-data-table__cell--non-numeric">INDIA</td>
<td class="mdl-data-table__cell--non-numeric">New Delhi</td>
<td class="mdl-data-table__cell--non-numeric">Rupees</td>
</tr>
</tbody>
</table>
- Note: The Data-table cells are formatted as numeric by default.
Material Design Lite(MDL) Tables : Numerical and Non Numerical Hybrid
Sample Code for Numerical and Non Numeric Values
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<th class="mdl-data-table__cell--non-numeric">Component</th>
<th>Quantity</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<td class="mdl-data-table__cell--non-numeric">Keyboard(backlit)</td>
<td>10</td>
<td>$50</td>
</tr>
<!-- Row 2 -->
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<td class="mdl-data-table__cell--non-numeric">Mouse(wireless)</td>
<td>22</td>
<td>$25</td>
</tr>
<!-- Row 3 -->
<tr>
<!-- class "mdl-data-table__cell--non-numeric", align values to left -->
<td class="mdl-data-table__cell--non-numeric">LED Display(1080p)</td>
<td>56</td>
<td>$113</td>
</tr>
</tbody>
</table>
- Note: The Data-table cells are formatted as numeric by default.
Material Design Lite(MDL) Tables : Selectable Tables
- A MDL Data Table with selectable table rows is created using class mdl-data-table--selectable.
- The Selection checkbox have both the visual appearance and functionality same as that of a checkbox.
Sample Code for Selectable Tables
<!-- Class "mdl-data-table-selectable" -->
<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">Component</th>
<th>Quantity</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td class="mdl-data-table__cell--non-numeric">Keyboard(backlit)</td>
<td>10</td>
<td>$50</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="mdl-data-table__cell--non-numeric">Mouse(wireless)</td>
<td>22</td>
<td>$25</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="mdl-data-table__cell--non-numeric">LED Display(1080p)</td>
<td>56</td>
<td>$113</td>
</tr>
</tbody>
</table>
- Note: The Data-table cells are formatted as numeric by default.
Material Design Lite : Data-Table Classes
| MDL Class | Description |
|---|---|
| mdl-data-table | To create a MDL Table container |
| mdl-js-data-table | To Assign MDL behaviour to Tables |
| mdl-data-table--selectable | To create table with individual selectable rows |
| mdl-data-table__cell--non-numeric | To apply text formatting to data cell |
| none | The default table cell formatting for numeric values |