Material Design Drawer and Datatables.

Material Design is new generation art for front-end technologies. As a UI Developer, I’m in love with Material Design Components.  It is like a parent for Bootstrap and Foundation.

More about Material Design:

The design is the art of continuous problem-solving—an active cycle of investigating and validating needs, crafting and developing ideas, and creating solutions.

Over the course of its life, a digital product is shaped by many hands. The effects of this collaboration can be seen in the quality of a product’s identity and implementation, as well as in the strength of the community it builds.

template
Material Design Template

Speaking further about material Design, I like to show a sample template I created with includes Datatables, Drawer, Material Icons and ripple buttons of Material design.

tables
MDC-data tables

 

Code:

 


<!doctype html>
<html lang=”en-US”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Light Theme</title>
<link href=”css/singlePageTemplate.css” rel=”stylesheet” type=”text/css”>
<linkrel=”stylesheet”href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500,700″>
<linkrel=”stylesheet”href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
<link rel=”stylesheet” href=”https://code.getmdl.io/1.3.0/material.indigo-pink.min.css”>
<linkrel=”stylesheet”href=”https://cdn.datatables.net/1.10.15/css/dataTables.material.min.css”>
<link
rel=”stylesheet”
href=”https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css”>
<!–The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.–>
<script>var __adobewebfontsappname__=”dreamweaver”</script>
    <style>
    .demo-body {
display: flex;
flex-direction: row;
margin: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
}
        .demo-content {
display: inline-flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
}
        .demo-main{
            padding: 20px;
        }
    </style>
<script src=”http://use.edgefonts.net/source-sans-pro:n2:default.js” type=”text/javascript”></script>
<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<scriptsrc=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<scriptsrc=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>
</head>
<body class=”demo-body mdc-typography”>
<!–aside drawer–>
    <aside class=”mdc-persistent-drawer mdc-persistent-drawer–open”>
        <nav class=”mdc-persistent-drawer__drawer”>
<divclass=”mdc-persistent-drawer__toolbar-spacer”></div>
<divclass=”mdc-list-group”>
<navclass=”mdc-list”>
<aclass=”mdc-list-item mdc-persistent-drawer–selected”href=”#”>
<iclass=”material-icons mdc-list-item__start-detail”aria-hidden=”true”>inbox</i>Inbox
</a>
<aclass=”mdc-list-item”href=”#”>
<iclass=”material-icons mdc-list-item__start-detail”aria-hidden=”true”>star</i>Star
</a>
<aclass=”mdc-list-item”href=”#”>
<iclass=”material-icons mdc-list-item__start-detail”aria-hidden=”true”>send</i>Sent Mail
</a>
<aclass=”mdc-list-item”href=”#”>
<iclass=”material-icons mdc-list-item__start-detail”aria-hidden=”true”>drafts</i>Drafts
</a>
</nav>
<hrclass=”mdc-list-divider”>
<navclass=”mdc-list”>
<aclass=”mdc-list-item”href=”#”>
<iclass=”material-icons mdc-list-item__start-detail”aria-hidden=”true”>email</i>All Mail
</a>
<aclass=”mdc-list-item”href=”#”>
<iclass=”material-icons mdc-list-item__start-detail”aria-hidden=”true”>delete</i>Trash
</a>
<aclass=”mdc-list-item”href=”#”>
<iclass=”material-icons mdc-list-item__start-detail”aria-hidden=”true”>report</i>Spam
</a>
</nav>
</div>
</nav>
    </aside>
    <div class=”demo-content”>
        <header class=”mdc-toolbar mdc-toolbar__section–shrink-to-fit mdc-elevation–z4″ style=”background-color: #2C3E50″>
            <div class=”mdc-toolbar__row”>
<sectionclass=”mdc-toolbar__section mdc-toolbar__section–align-start”>
<buttonclass=”demo-menu material-icons mdc-toolbar__icon–menu”>menu</button>
<spanclass=”mdc-toolbar__title catalog-title”>Persistent Drawer</span>
</section>
                <section>
                 <nav class=”mdc-toolbar__section–align-end”>
                    <a class=”mdc-toolbar–flexible-default-behavior color-white” >
                    <i class=”material-icons align-end”>home</i>
                    Home</a>
                    <a class=”mdc-toolbar–flexible-default-behavior color-white” >
                    <i class=”material-icons align-end”>event</i>
                    Event</a>
                    <a class=”mdc-toolbar–flexible-default-behavior color-white”>
                    <i class=”material-icons align-end”>assessment</i>
                    Link</a>
                 </nav>
                </section>
</div>
        </header>
<!–
         <button class=”mdc-fab material-icons” aria-label=”add” style=”float: left”>
<spanclass=”mdc-fab__add”>
add
</span>
</button>
–>
        <main class=”demo-main”>
            <div class=”mdc-card my-card-container”>
                <div class=”mdc-card__title–large” style=”color: #18BC9C”>Reports Heading</div>
                <hr>
                <div class=”mdc-card__subtitle”>
                    <p>* description*</p>
                </div>
                <select class=”mdc-select”>
                 <option value=”” default selected>Department</option>
                 <option value=”grains”>Bread, Cereal, Rice, and Pasta</option>
                 <option value=”vegetables”>Vegetables</option>
                 <optgroup label=”Fruits”>
                    <option value=”apple”>Apple</option>
                    <option value=”oranges”>Orange</option>
                    <option value=”banana”>Banana</option>
                 </optgroup>
                 <option value=”dairy”>Milk, Yogurt, and Cheese</option>
                 <option value=”meat”>Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts</option>
                 <option value=”fats”>Fats, Oils, and Sweets</option>
                </select>
                <div class=”mdc-layout-grid__inner”>
                            <div class=”mdc-layout-grid__cell”>
                             <div class=”mdl-textfield mdl-js-textfield mdl-textfield–floating-label”>
                                <input class=”mdl-textfield__input datepicker” type=”datepicker” id=”sample3″>
<!–                                    <i class=”material-icons”>perm_contact_calendar</i>–>
                                <label class=”mdl-textfield__label” for=”startDate”>Start Date</label>
                             </div>
                            </div>
                    <div class=”mdc-layout-grid__cell”>
                         <div class=”mdl-textfield mdl-js-textfield mdl-textfield–floating-label”>
                            <input class=”mdl-textfield__input” id=”sample4″>
                            <label class=”mdl-textfield__label” for=”endDate”>End Date</label>
                         </div>
                    </div>
                </div>
                <div class=”mdc-layout-grid__cell”>
                     <button class=”mdc-button mdc-button–raised mdc-button–primary” ripple>
                         Go
                        </button>
                        <button class=”mdc-button mdc-button–raised mdc-button–primary” ripple>
                         Excel
                        </button>
                        <button class=”mdc-button mdc-button–raised mdc-button–primary” ripple>
                         Print
                        </button>
                </div>
            </div>
            <div class=”card-shrink”>
<tableid=”example”class=”mdl-data-table “cellspacing=”0″width=”100%”>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
            </div>
</main>
<!– Main Container –>
<!– jQuery first, then tether, then Bootstrap Material Design JS. –>
<scriptsrc=”https://code.jquery.com/jquery-3.1.0.min.js”></script>
<scriptsrc=”https://cdn.rawgit.com/HubSpot/tether/v1.3.4/dist/js/tether.min.js”></script>
    <script src=”https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js”></script>
    <script src=”https://cdn.datatables.net/1.10.15/js/dataTables.material.min.js”></script>
<script defer src=”https://code.getmdl.io/1.3.0/material.min.js”></script>
<scriptsrc=”https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js”></script>
<script>window.mdc.autoInit();</script>
<script>
    $(document).ready(function() {
$(‘#example’).DataTable( {
columnDefs: [
{
targets: [ 0, 1, 2 ],
className: ‘mdl-data-table__cell–non-numeric’
}
]
} );
} );

var drawerEl = document.querySelector(‘.mdc-persistent-drawer’);
var MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
var drawer = new MDCPersistentDrawer(drawerEl);
document.querySelector(‘.demo-menu’).addEventListener(‘click’, function() {
drawer.open = !drawer.open;
});
drawerEl.addEventListener(‘MDCPersistentDrawer:open’, function() {
console.log(‘Received MDCPersistentDrawer:open’);
});
drawerEl.addEventListener(‘MDCPersistentDrawer:close’, function() {
console.log(‘Received MDCPersistentDrawer:close’);
});
</script>
</body>
</html>

 


Conclusion

Please leave a comment if you need any help in front-end development or any doubts regarding this page.

Share This: