A blog about Salesforce CRM Configuration and development

Saturday, 23 March 2019

Material Designed DataTable In Visualforce Page.

Q. What is material design?

Ans:- Material design is a design technique/language. It uses a grid-based layout, responsive animation, and transition, padding, depth effects show as lightning and shadow. It is designed to optimize user experience with natural motions, 3D effects, and realistic lighting.

DataTable: It is a plug-in for the jQuery Javascript library. It will add features like fast search in the table, paginations, column sorting, etc with the minimum code.

In this example code, I have used DataTable (Jquery plug-in javascript library) in the visualforce page. Find the full code below.

 <apex:page controller="DatatableCntrl" sidebar="false">  
   <apex:includescript value="https://code.jquery.com/jquery-3.3.1.js"/>  
   <apex:includescript value="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"/>  
   <apex:includescript value="https://cdn.datatables.net/1.10.19/js/dataTables.material.min.js"/>  
   <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css"/>  
   <apex:stylesheet value="https://cdn.datatables.net/1.10.19/css/dataTables.material.min.css"/>  
   j$ = jQuery.noConflict();  
   j$(document).ready( function () {  
     var accTable = j$('[id$="accTable"]').DataTable({  //datatable 
        columnDefs: [  
       targets: [ 0, 1, 2 ],  
       className: 'mdl-data-table__cell--non-numeric'  
     div.dataTables_wrapper div.dataTables_filter {  
     text-align: right;  
     margin-right: 2%;  
     /* border-radius: 2px; */  
     /* height: 51px; */  
   <table id="accTable" class="mdl-data-table" style="width:100%">  
         <th>Billing State</th>  
       <apex:repeat value="{!accList}" var="acc">  
           <td>{!acc.Website }</td>  

 public class DatatableCntrl{  
   public List<Account> accList {get; set;}  
   public DatatableCntrl(){  
     accList = [SELECT Name, BillingState,Website FROM Account where BillingState!='' and Website !='' order by name ];  


Location: Noida, Uttar Pradesh, India


  1. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website development

  2. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.

    Billing Software

  3. This comment has been removed by the author.


Trailhead Profile

Follow by Email

Total Pageviews


Popular Posts

Powered by Blogger.

Contact form


Email *

Message *