Materialize Datatables Example – Material DataTables
Material DataTables Config Add Class Example
The MDL provides List of CSS classes to apply List of predefined Show Content of data and behavioral simple enhancements to the show data a table view as data-table.Materialize Datatables Example – Material DataTables
Class Name & Description
- 1.mdl-data-table using material
- 2.mdl-js-data-table using material
- 3.mdl-data-table–selectable using material
- 4.mdl-data-table__cell–non-numeric using material
Materialize Design Data Tables Example
index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap live-datatable-example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery.js"></script> <link rel="stylesheet" href="js/datatables.min.css"> <link rel="stylesheet" href="js/materialize.min.css"> <script src="js/datatables.min.js"></script> <script src="js/materialize.min.js"></script> </head> <body> Table data........... ........................ .................... <body> </html>
Script.js
$(document).ready(function (){
var table = $('#live-datatable-example').DataTable({
"order": [],
"dom": 'Bfrtip',
// Button class
"buttons": {
"dom": {
"button": {
"tag": "button",
"className": "waves-effect waves-light btn mrm"
}
},
// like csv Buttons,print buttons,pdfHtml5 button
"buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ]
}
});
});
Table Data
<table id="live-datatable-example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Client Name</th>
<th>Post</th>
<th>Shop</th>
<th>Work Time</th>
<th>Start date</th>
<th>Pfunddata</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mayur Dhameliya</td>
<td>System Architect</td>
<td>Ahemdabad</td>
<td>61</td>
<td>2018/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Hitsh Dhameliya</td>
<td>Devloper</td>
<td>Jammnagar</td>
<td>63</td>
<td>2018/07/25</td>
<td>$170,555</td>
</tr>
<tr>
<td>Dr Ravi Dhameliya</td>
<td>Junior Technical Author</td>
<td>Ram park</td>
<td>66</td>
<td>2019/01/12</td>
<td>$86,989</td>
</tr>
<tr>
<td>Dr Bhavana Ramanai</td>
<td>Senior Javascript Developer</td>
<td>Ahemdabad</td>
<td>22</td>
<td>2017/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Ms Sejal Ramanai</td>
<td>Devloper</td>
<td>Jammnagar</td>
<td>33</td>
<td>2025/11/28</td>
<td>$162,989</td>
</tr>
<tr>
<td>Mss Kajal Pipaliya</td>
<td>Integration Specialist</td>
<td>Surat</td>
<td>61</td>
<td>2017/12/02</td>
<td>$372,989</td>
</tr>
<tr>
<td>mr. Dhrvik Shah</td>
<td>Sales Assistant</td>
<td>Ram park</td>
<td>59</td>
<td>2017/08/06</td>
<td>$137,414</td>
</tr>
<tr>
<td>Mr. prtaik shah</td>
<td>Integration Specialist</td>
<td>Jammnagar</td>
<td>55</td>
<td>2019/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>mr jigar shah</td>
<td>Javascript Developer</td>
<td>Ram park</td>
<td>39</td>
<td>2019/09/15</td>
<td>$205,414</td>
</tr>
<tr>
<td>mr Bhoomi savalyia</td>
<td>Hardware Devloper</td>
<td>Ahemdabad</td>
<td>23</td>
<td>2025/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>mr jignasha Gaines</td>
<td>Shop ManWork Timer</td>
<td>Gondal</td>
<td>30</td>
<td>2025/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>ms ketan Flynn</td>
<td>Support Lead</td>
<td>Ahemdabad</td>
<td>22</td>
<td>2022/03/03</td>
<td>$342,989</td>
</tr>
<tr>
<td>divya Marshall</td>
<td>Regional Director</td>
<td>Ram park</td>
<td>36</td>
<td>2025/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>chandni Kennedy</td>
<td>Senior Management Designer</td>
<td>Gondal</td>
<td>43</td>
<td>2017/12/18</td>
<td>$313,414</td>
</tr>
<tr>
<td>rimple Fitzpatrick</td>
<td>Regional Director</td>
<td>Gondal</td>
<td>19</td>
<td>2019/03/17</td>
<td>$385,555</td>
</tr>
<tr>
<td>kavya Silva</td>
<td>Management Designer</td>
<td>Gondal</td>
<td>66</td>
<td>2017/11/27</td>
<td>$198,414</td>
</tr>
<tr>
<td>parul Byrd</td>
<td>Chief Head depart Shopr (HOD)</td>
<td>Surat</td>
<td>64</td>
<td>2019/06/09</td>
<td>$725,989</td>
</tr>
<tr>
<td>Ram Little</td>
<td>Systems Administrator</td>
<td>Surat</td>
<td>59</td>
<td>2019/04/10</td>
<td>$237,414</td>
</tr>
<tr>
<td>Ramesh Greer</td>
<td>Hardware Devloper</td>
<td>Gondal</td>
<td>41</td>
<td>2017/10/13</td>
<td>$132,989</td>
</tr>
<tr>
<td>krishna Rios</td>
<td>Personnel Lead</td>
<td>Ahemdabad</td>
<td>35</td>
<td>2017/09/26</td>
<td>$217,414</td>
</tr>
<tr>
<td>vidhi Caldwell</td>
<td>Development Lead</td>
<td>Surat</td>
<td>31</td>
<td>2018/09/03</td>
<td>$345,989</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Client Name</th>
<th>Post</th>
<th>Shop</th>
<th>Work Time</th>
<th>Start date</th>
<th>Pfunddata</th>
</tr>
</tfoot>
</table>