The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the display a table as data-table.
The below table mentions the available classes and their effects.
mdl_data_tables.htm
| S.N. | Class Name & Description |
|---|---|
| 1 | mdl-data-table Identifies table as an MDL component and is required on table element. |
| 2 | mdl-js-data-table Sets basic MDL behavior to table and is required on table element. |
| 3 | mdl-data-table--selectable Sets all/individual selectable behavior (checkboxes) and is optional; goes on table element. |
| 4 | mdl-data-table__cell--non-numeric Sets text formatting to data cell and is optional; goes on both table header and table data cells. |
| 5 | (none) By default, sets the numeric formatting to header or data cell. |
Example
The following example showcases the use of mdl-data-table classes to show a data table.mdl_data_tables.htm
<html> <head> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <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">Student</th><th>Class</th><th>Grade</th></tr> </thead> <tbody> <tr><td class="mdl-data-table__cell--non-numeric">Mahesh Parashar</td><td>VI</td><td>A</td></tr> <tr><td class="mdl-data-table__cell--non-numeric">Rahul Sharma</td><td>VI</td><td>B</td></tr> <tr><td class="mdl-data-table__cell--non-numeric">Mohan Sood</td><td>VI</td><td>A</td></tr> </tbody> </table> </body> </html>
No comments:
Post a Comment