Search within TutorialsPark

MDL : Tables


How to use MDL - Material Design Lite to create Tables


Material Design Lite (MDL) : Tables

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.

Example: Material Design Lite (MDL) Tables : Numerical Values

Give it a TRY! » 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.

Example: Material Design Lite (MDL) Tables : Non-Numerical Values

Give it a TRY! » Note: The Data-table cells are formatted as numeric by default.


Material Design Lite(MDL) Tables : Numerical and Non Numerical Hybrid

In the Demo, we create a table which has a combination of both Numeric and Non Numeric Values, notice the difference between the alignment of values within table cells.

Example: Material Design Lite (MDL) Tables : Numerical and Non Numeric Values

Give it a TRY! » 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.

Example: Material Design Lite (MDL) Tables : Selectable Tables

Give it a TRY! » 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