Smarty - Multipurpose + Admin

MATERIAL COMPONENTS

MATERIAL : TABLES

TThe Material Design Lite (MDL) data-table component is an enhanced version of the standard HTML <table>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.

Tables are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience.

HOW TO ENABLE MATERIAL

1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official

Material	Quantity	Unit price
Acrylic (Transparent)	25	$2.90
Plywood (Birch)	50	$1.25
Laminate (Gold on Blue)	10	$2.35

Show Code

<!-- Data Tables -->
<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">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

Name	Nickname	Age	Living?
John Lennon	The smart one	40	No
Paul McCartney	The cute one	73	Yes
George Harrison	The shy one	58	No
Ringo Starr	The funny one	74	Yes

Show Code

<!-- Tables - no checkboxes -->
<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th class="mdl-data-table__cell--non-numeric">Nickname</th>
      <th>Age</th>
      <th class="mdl-data-table__cell--non-numeric">Living?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">John Lennon</td>
      <td class="mdl-data-table__cell--non-numeric">The smart one</td>
      <td>40</td>
      <td class="mdl-data-table__cell--non-numeric">No</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
      <td class="mdl-data-table__cell--non-numeric">The cute one</td>
      <td>73</td>
      <td class="mdl-data-table__cell--non-numeric">Yes</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">George Harrison</td>
      <td class="mdl-data-table__cell--non-numeric">The shy one</td>
      <td>58</td>
      <td class="mdl-data-table__cell--non-numeric">No</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
      <td class="mdl-data-table__cell--non-numeric">The funny one</td>
      <td>74</td>
      <td class="mdl-data-table__cell--non-numeric">Yes</td>
    </tr>
  </tbody>
</table>

MDL class	Effect	Remarks
`mdl-data-table`	Defines table as an MDL component	Required on table element
`mdl-js-data-table`	Assigns basic MDL behavior to table	Required on table element
`mdl-data-table--selectable`	Applies all/individual selectable behavior (checkboxes)	Optional; goes on table element
`mdl-data-table__header--sorted-ascending`	Applies visual styling to indicate the column is sorted in ascending order	Optional; goes on table header (`th`)
`mdl-data-table__header--sorted-descending`	Applies visual styling to indicate the column is sorted in descending order	Optional; goes on table header (`th`)
`mdl-data-table__cell--non-numeric`	Applies text formatting to data cell	Optional; goes on both table header and table data cells
(none)	Applies numeric formatting to header or data cell (default)

WHY SMARTY?

RECENTLY VISITED

CONTACT INFO

Smarty Material Design

MATERIAL COMPONENTS

MATERIAL : TABLES