Materialize Datatables Example – Material DataTables

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

Example

Materialize Design Data Tables Example

index.html




  Bootstrap live-datatable-example
	
	
	
	
	
	
	
  




Table data...........
........................
....................


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

Client Name Post Shop Work Time Start date Pfunddata
Mayur Dhameliya System Architect Ahemdabad 61 2018/04/25 $320,800
Hitsh Dhameliya Devloper Jammnagar 63 2018/07/25 $170,555
Dr Ravi Dhameliya Junior Technical Author Ram park 66 2019/01/12 $86,989
Dr Bhavana Ramanai Senior Javascript Developer Ahemdabad 22 2017/03/29 $433,060
Ms Sejal Ramanai Devloper Jammnagar 33 2025/11/28 $162,989
Mss Kajal Pipaliya Integration Specialist Surat 61 2017/12/02 $372,989
mr. Dhrvik Shah Sales Assistant Ram park 59 2017/08/06 $137,414
Mr. prtaik shah Integration Specialist Jammnagar 55 2019/10/14 $327,900
mr jigar shah Javascript Developer Ram park 39 2019/09/15 $205,414
mr Bhoomi savalyia Hardware Devloper Ahemdabad 23 2025/12/13 $103,600
mr jignasha Gaines Shop ManWork Timer Gondal 30 2025/12/19 $90,560
ms ketan Flynn Support Lead Ahemdabad 22 2022/03/03 $342,989
divya Marshall Regional Director Ram park 36 2025/10/16 $470,600
chandni Kennedy Senior Management Designer Gondal 43 2017/12/18 $313,414
rimple Fitzpatrick Regional Director Gondal 19 2019/03/17 $385,555
kavya Silva Management Designer Gondal 66 2017/11/27 $198,414
parul Byrd Chief Head depart Shopr (HOD) Surat 64 2019/06/09 $725,989
Ram Little Systems Administrator Surat 59 2019/04/10 $237,414
Ramesh Greer Hardware Devloper Gondal 41 2017/10/13 $132,989
krishna Rios Personnel Lead Ahemdabad 35 2017/09/26 $217,414
vidhi Caldwell Development Lead Surat 31 2018/09/03 $345,989
Client Name Post Shop Work Time Start date Pfunddata

Example

Leave a Comment