<!DOCTYPE html> <html lang="en"> <head> <!-- Title --> <title>Alpha | Responsive Admin Dashboard Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta charset="UTF-8"> <meta name="description" content="Responsive Admin Dashboard Template" /> <meta name="keywords" content="admin,dashboard" /> <meta name="author" content="Steelcoders" /> <!-- Styles --> <link type="text/css" rel="stylesheet" href="assets/plugins/materialize/css/materialize.min.css"/> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="assets/plugins/material-preloader/css/materialPreloader.min.css" rel="stylesheet"> <link href="assets/plugins/datatables/css/jquery.dataTables.min.css" rel="stylesheet"> <!-- Theme Styles --> <link href="assets/css/alpha.min.css" rel="stylesheet" type="text/css"/> <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/> <!-- 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]> <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="loader-bg"></div> <div class="loader"> <div class="preloader-wrapper big active"> <div class="spinner-layer spinner-blue"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> <div class="spinner-layer spinner-spinner-teal lighten-1"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> <div class="spinner-layer spinner-yellow"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> <div class="spinner-layer spinner-green"> <div class="circle-clipper left"> <div class="circle"></div> </div><div class="gap-patch"> <div class="circle"></div> </div><div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div> </div> <div class="mn-content fixed-sidebar"> <header class="mn-header navbar-fixed"> <nav class="cyan darken-1"> <div class="nav-wrapper row"> <section class="material-design-hamburger navigation-toggle"> <a href="#" data-activates="slide-out" class="button-collapse show-on-large material-design-hamburger__icon"> <span class="material-design-hamburger__layer"></span> </a> </section> <div class="header-title col s3"> <span class="chapter-title">Alpha</span> </div> <form class="left search col s6 hide-on-small-and-down"> <div class="input-field"> <input id="search" type="search" placeholder="Search" autocomplete="off"> <label for="search"><i class="material-icons search-icon">search</i></label> </div> <a href="javascript: void(0)" class="close-search"><i class="material-icons">close</i></a> </form> <ul class="right col s9 m3 nav-right-menu"> <li><a href="javascript:void(0)" data-activates="chat-sidebar" class="chat-button show-on-large"><i class="material-icons">more_vert</i></a></li> <li class="hide-on-small-and-down"><a href="javascript:void(0)" data-activates="dropdown1" class="dropdown-button dropdown-right show-on-large"><i class="material-icons">notifications_none</i><span class="badge">4</span></a></li> <li class="hide-on-med-and-up"><a href="javascript:void(0)" class="search-toggle"><i class="material-icons">search</i></a></li> </ul> <ul id="dropdown1" class="dropdown-content notifications-dropdown"> <li class="notificatoins-dropdown-container"> <ul> <li class="notification-drop-title">Today</li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle cyan"><i class="material-icons">done</i></div> <div class="notification-text"><p><b>Alan Grey</b> uploaded new theme</p><span>7 min ago</span></div> </div> </a> </li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle deep-purple"><i class="material-icons">cached</i></div> <div class="notification-text"><p><b>Tom</b> updated status</p><span>14 min ago</span></div> </div> </a> </li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle red"><i class="material-icons">delete</i></div> <div class="notification-text"><p><b>Amily Lee</b> deleted account</p><span>28 min ago</span></div> </div> </a> </li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle cyan"><i class="material-icons">person_add</i></div> <div class="notification-text"><p><b>Tom Simpson</b> registered</p><span>2 hrs ago</span></div> </div> </a> </li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle green"><i class="material-icons">file_upload</i></div> <div class="notification-text"><p>Finished uploading files</p><span>4 hrs ago</span></div> </div> </a> </li> <li class="notification-drop-title">Yestarday</li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle green"><i class="material-icons">security</i></div> <div class="notification-text"><p>Security issues fixed</p><span>16 hrs ago</span></div> </div> </a> </li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle indigo"><i class="material-icons">file_download</i></div> <div class="notification-text"><p>Finished downloading files</p><span>22 hrs ago</span></div> </div> </a> </li> <li> <a href="#!"> <div class="notification"> <div class="notification-icon circle cyan"><i class="material-icons">code</i></div> <div class="notification-text"><p>Code changes were saved</p><span>1 day ago</span></div> </div> </a> </li> </ul> </li> </ul> </div> </nav> </header> <div class="search-results"> <div class="container search-container"> <div class="row"> <div class="col s12 search-head"> <div class="row"> <div class="col s12"> <div class="left"> <p class="search-results-title">Quick search results</p> <p class="search-filter left"> <input type="checkbox" class="filled-in" id="filled-in-box" checked/> <label for="filled-in-box">Google search</label> </p> </div> </div> </div> <div class="res-not-found">No results found</div> </div> <div class="col s12 m4 search-result-container"> <div class="card card-transparent"> <div class="row valign-wrapper"> <div class="col s3"> <img src="assets/images/profile-image-1.png" alt="" class="circle responsive-img z-depth-1"> </div> <div class="col s9"> <span class="search-result-text"> Search <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text">Last active 2 days ago</span> </span> </div> </div> </div> <div class="card card-transparent"> <div class="row valign-wrapper"> <div class="col s3"> <img src="assets/images/profile-image-3.jpg" alt="" class="circle responsive-img z-depth-1"> </div> <div class="col s9"> <span class="search-result-text"> News about <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text">23 Blogs</span> </span> </div> </div> </div> <div class="card card-transparent"> <div class="row valign-wrapper"> <div class="col s3"> <img src="assets/images/profile-image.png" alt="" class="circle responsive-img z-depth-1"> </div> <div class="col s9"> <span class="search-result-text"> Tom King (Works at <span class="search-text search-result-highlight"></span>)<br><span class="secondary-search-text">Avaible for freelance work</span> </span> </div> </div> </div> </div> <div class="col s12 m4 search-result-container"> <div class="card card-transparent "> <div class="row valign-wrapper"> <div class="col s3"> <span class="z-depth-1 circle search-circle indigo lighten-1">F</span> </div> <div class="col s9"> <span class="search-result-text"> <span class="search-text search-result-highlight"></span> on Facebook<br><span class="secondary-search-text"><a href="#">View website</a></span> </span> </div> </div> </div> <div class="card card-transparent"> <div class="row valign-wrapper"> <div class="col s3"> <span class="z-depth-1 circle search-circle light-blue lighten-1">T</span> </div> <div class="col s9"> <span class="search-result-text"> <span class="search-text search-result-highlight"></span> on Twitter<br><span class="secondary-search-text"><a href="#">View website</a></span> </span> </div> </div> </div> <div class="card card-transparent"> <div class="row valign-wrapper"> <div class="col s3"> <span class="z-depth-1 circle search-circle red darken-1">G</span> </div> <div class="col s9"> <span class="search-result-text"> Google+ <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text"><a href="#">View website</a></span> </span> </div> </div> </div> </div> <div class="col s12 m4 search-result-container"> <div class="card card-transparent"> <div class="card-content first"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sunt in culpa qui<span class="search-text search-result-highlight"></span> quis.</p> </div> <div class="card-action"> <span class="grey-text">Yesterday, 4:56 PM</span> </div> </div> <div class="card card-transparent"> <div class="card-content"> <p>Sunt in culpa qui <span class="search-text search-result-highlight"></span> officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum officia deserunt mollit anim</p> </div> <div class="card-action"> <span class="grey-text">27 January 2016</span> </div> </div> </div> </div> </div> </div> <aside id="chat-sidebar" class="side-nav white"> <div class="side-nav-wrapper"> <div class="col s12"> <ul class="tabs tab-demo" style="width: 100%;"> <li class="tab col s3"><a href="#sidebar-chat-tab" class="active">chat</a></li> <li class="tab col s3"><a href="#sidebar-more-tab">settings</a></li> </ul> </div> <div id="sidebar-chat-tab" class="col s12 sidebar-messages right-sidebar-panel"> <p class="right-sidebar-heading">CHAT LIST</p> <div class="chat-list"> <a href="javascript:void(0)" class="chat-message"> <div class="chat-item"> <div class="chat-item-image"> <img src="assets/images/profile-image.png" class="circle" alt=""> </div> <div class="chat-item-info"> <p class="chat-name">John Doe</p> <span class="chat-message">Hello</span> </div> </div> </a> <a href="javascript:void(0)" class="chat-message"> <div class="chat-item"> <div class="chat-item-image"> <img src="assets/images/profile-image-1.png" class="circle" alt=""> </div> <div class="chat-item-info"> <p class="chat-name">Tom Simpson</p> <span class="chat-message">How are you?</span> </div> </div> </a> <a href="javascript:void(0)" class="chat-message"> <div class="chat-item"> <div class="chat-item-image"> <img src="assets/images/profile-image-3.jpg" class="circle" alt=""> </div> <div class="chat-item-info"> <p class="chat-name">Alan Grey</p> <span class="chat-message">Call me later</span></div> </div> </a> <a href="javascript:void(0)" class="chat-message"> <div class="chat-item"> <div class="chat-item-image"> <img src="assets/images/profile-image.png" class="circle" alt=""> </div> <div class="chat-item-info"> <p class="chat-name">Michael Fisher</p> <span class="chat-message">How's it going?</span> </div> </div> </a> <a href="javascript:void(0)" class="chat-message"> <div class="chat-item"> <div class="chat-item-image"> <img src="assets/images/profile-image-1.png" class="circle" alt=""> </div> <div class="chat-item-info"> <p class="chat-name">Amily Lee</p> <span class="chat-message">We're good</span> </div> </div> </a> <a href="javascript:void(0)" class="chat-message"> <div class="chat-item"> <div class="chat-item-image"> <img src="assets/images/profile-image.png" class="circle" alt=""> </div> <div class="chat-item-info"> <p class="chat-name">Sandra Smith</p> <span class="chat-message">See you later!</span> </div> </div> </a> <a href="javascript:void(0)" class="chat-message"> <div class="chat-item"> <div class="chat-item-image"> <img src="assets/images/profile-image-3.jpg" class="circle" alt=""> </div> <div class="chat-item-info"> <p class="chat-name">Sandra Smith</p> <span class="chat-message">Can we meet?</span> </div> </div> </a> </div> <div class="chat-sidebar-options"> <a href="#" class="left"><i class="material-icons">edit</i></a> <a href="#" class="right"><i class="material-icons">settings</i></a> </div> </div> <div id="sidebar-more-tab" class="col s12 sidebar-more right-sidebar-panel"> <p class="right-sidebar-heading">SYSTEM</p> <div class="settings-list"> <div class="setting-item"> <div class="setting-text">Notifications</div> <div class="setting-set"> <div class="switch"> <label> <input type="checkbox" checked> <span class="lever"></span> </label> </div> </div> </div> <div class="setting-item"> <div class="setting-text">Quick Results</div> <div class="setting-set"> <div class="switch"> <label> <input type="checkbox" checked> <span class="lever"></span> </label> </div> </div> </div> <div class="setting-item"> <div class="setting-text">Auto Updates</div> <div class="setting-set"> <div class="switch"> <label> <input type="checkbox"> <span class="lever"></span> </label> </div> </div> </div> </div> <p class="right-sidebar-heading">ACCOUNT</p> <div class="settings-list"> <div class="setting-item"> <div class="setting-text">Offline Mode</div> <div class="setting-set"> <div class="switch"> <label> <input type="checkbox"> <span class="lever"></span> </label> </div> </div> </div> <div class="setting-item"> <div class="setting-text">Location</div> <div class="setting-set"> <div class="switch"> <label> <input type="checkbox"> <span class="lever"></span> </label> </div> </div> </div> <div class="setting-item"> <div class="setting-text">Show Offline Users</div> <div class="setting-set"> <div class="switch"> <label> <input type="checkbox"> <span class="lever"></span> </label> </div> </div> </div> <div class="setting-item"> <div class="setting-text">Save History</div> <div class="setting-set"> <div class="switch"> <label> <input type="checkbox"> <span class="lever"></span> </label> </div> </div> </div> </div> </div> </div> </aside> <aside id="chat-messages" class="side-nav white"> <p class="sidebar-chat-name">Tom Simpson<a href="#" data-activates="chat-messages" class="chat-message-link"><i class="material-icons">keyboard_arrow_right</i></a></p> <div class="messages-container"> <div class="message-wrapper them"> <div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div> <div class="text-wrapper">Lorem Ipsum</div> </div> <div class="message-wrapper me"> <div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div> <div class="text-wrapper">Integer in faucibus diam?</div> </div> <div class="message-wrapper them"> <div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div> <div class="text-wrapper">Vivamus quis neque volutpat, hendrerit justo vitae, suscipit dui</div> </div> <div class="message-wrapper me"> <div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div> <div class="text-wrapper">Suspendisse condimentum tortor et lorem pretium</div> </div> <div class="message-wrapper them"> <div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div> <div class="text-wrapper">dolore eu fugiat nulla pariatur</div> </div> <div class="message-wrapper me"> <div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div> <div class="text-wrapper">Duis maximus leo eget massa porta</div> </div> </div> <div class="message-compose-box"> <div class="input-field"> <input placeholder="Write message" id="message_compose" type="text"> </div> </div> </aside> <aside id="slide-out" class="side-nav white fixed"> <div class="side-nav-wrapper"> <div class="sidebar-profile"> <div class="sidebar-profile-image"> <img src="assets/images/profile-image.png" class="circle" alt=""> </div> <div class="sidebar-profile-info"> <a href="javascript:void(0);" class="account-settings-link"> <p>David Doe</p> <span>david@gmail.com<i class="material-icons right">arrow_drop_down</i></span> </a> </div> </div> <div class="sidebar-account-settings"> <ul> <li class="no-padding"> <a class="waves-effect waves-grey"><i class="material-icons">mail_outline</i>Inbox</a> </li> <li class="no-padding"> <a class="waves-effect waves-grey"><i class="material-icons">star_border</i>Starred<span class="new badge">18</span></a> </li> <li class="no-padding"> <a class="waves-effect waves-grey"><i class="material-icons">done</i>Sent Mail</a> </li> <li class="no-padding"> <a class="waves-effect waves-grey"><i class="material-icons">history</i>History<span class="new grey lighten-1 badge">3 new</span></a> </li> <li class="divider"></li> <li class="no-padding"> <a class="waves-effect waves-grey"><i class="material-icons">exit_to_app</i>Sign Out</a> </li> </ul> </div> <ul class="sidebar-menu collapsible collapsible-accordion" data-collapsible="accordion"> <li class="no-padding"><a class="waves-effect waves-grey" href="index.html"><i class="material-icons">settings_input_svideo</i>Dashboard</a></li> <li class="no-padding"> <a class="collapsible-header waves-effect waves-grey"><i class="material-icons">apps</i>Apps<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a> <div class="collapsible-body"> <ul> <li><a href="mailbox.html">Mailbox</a></li> <li><a href="search.html">Search</a></li> <li><a href="todo.html">Todo</a></li> </ul> </div> </li> <li class="no-padding"> <a class="collapsible-header waves-effect waves-grey"><i class="material-icons">code</i>Components<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a> <div class="collapsible-body"> <ul> <li><a href="ui-accordions.html">Accordion</a></li> <li><a href="ui-badges.html">Badges</a></li> <li><a href="ui-buttons.html">Buttons</a></li> <li><a href="ui-typography.html">Typography</a></li> <li><a href="ui-cards.html">Cards</a></li> <li><a href="ui-carousel.html">Carousel</a></li> <li><a href="ui-chips.html">Chips</a></li> <li><a href="ui-color.html">Color</a></li> <li><a href="ui-collections.html">Collections</a></li> <li><a href="ui-dropdown.html">Dropdown</a></li> <li><a href="ui-dialogs.html">Dialogs</a></li> <li><a href="ui-grid.html">Grid</a></li> <li><a href="ui-helpers.html">Helpers</a></li> <li><a href="ui-modals.html">Modals</a></li> <li><a href="ui-media.html">Media</a></li> <li><a href="ui-icons.html">Icons</a></li> <li><a href="ui-parallax.html">Parallax</a></li> <li><a href="ui-preloader.html">Preloader</a></li> <li><a href="ui-shadow.html">Shadow</a></li> <li><a href="ui-tabs.html">Tabs</a></li> <li><a href="ui-waves.html">Waves</a></li> </ul> </div> </li> <li class="no-padding"> <a class="collapsible-header waves-effect waves-grey"><i class="material-icons">desktop_windows</i>Layouts<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a> <div class="collapsible-body"> <ul> <li><a href="layout-blank.html">Blank Page</a></li> <li><a href="layout-boxed.html">Boxed Layout</a></li> <li><a href="layout-hidden-sidebar.html">Hidden Sidebar</a></li> <li><a href="layout-right-sidebar.html">Right Sidebar</a></li> </ul> </div> </li> <li class="no-padding"> <a class="collapsible-header waves-effect waves-grey"><i class="material-icons">mode_edit</i>Forms<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a> <div class="collapsible-body"> <ul> <li><a href="form-elements.html">Form Elements</a></li> <li><a href="form-wizard.html">Form Wizard</a></li> <li><a href="form-upload.html">File Upload</a></li> <li><a href="form-image-crop.html">Image Crop</a></li> <li><a href="form-image-zoom.html">Image Zoom</a></li> <li><a href="form-select2.html">Select2</a></li> </ul> </div> </li> <li class="no-padding active"> <a class="collapsible-header waves-effect waves-grey active"><i class="material-icons">grid_on</i>Tables<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a> <div class="collapsible-body"> <ul> <li><a href="table-static.html">Static Tables</a></li> <li><a href="table-responsive.html">Responsive Tables</a></li> <li><a href="table-data.html" class="active-page">Data Tables</a></li> </ul> </div> </li> <li class="no-padding"><a class="waves-effect waves-grey" href="charts.html"><i class="material-icons">trending_up</i>Charts</a></li> <li class="no-padding"> <a class="collapsible-header waves-effect waves-grey"><i class="material-icons">my_location</i>Maps<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a> <div class="collapsible-body"> <ul> <li><a href="maps-google.html">Google Maps</a></li> <li><a href="maps-vector.html">Vector Maps</a></li> </ul> </div> </li> <li class="no-padding"> <a class="collapsible-header waves-effect waves-grey"><i class="material-icons">tag_faces</i>Extra Pages<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a> <div class="collapsible-body"> <ul> <li><a href="404.html">404 Page</a></li> <li><a href="500.html">500 Page</a></li> <li><a href="invoice.html">Invoice</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="sign-in.html">Sign In</a></li> <li><a href="sign-up.html">Sign Up</a></li> <li><a href="lock-screen.html">Lock Screen</a></li> <li><a href="pattern-lock-screen.html">Pattern Lock Screen</a></li> <li><a href="forgot.html">Forgot Password</a></li> <li><a href="pricing-tables.html">Pricing Tables</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="calendar.html">Calendar</a></li> <li><a href="coming-soon.html">Coming Soon</a></li> </ul> </div> </li> </ul> <div class="footer"> <p class="copyright">Steelcoders ©</p> <a href="#!">Privacy</a> & <a href="#!">Terms</a> </div> </div> </aside> <main class="mn-inner"> <div class="row"> <div class="col s12"> <div class="page-title">Data Tables</div> </div> <div class="col s12 m12 l12"> <div class="card"> <div class="card-content"> <span class="card-title">Basic</span> <p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code></p><br> <table id="example" class="display responsive-table datatable-example"> <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>Lael Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> </tr> <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</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> </div> </div> </div> </main> <div class="page-footer"> <div class="footer-grid container"> <div class="footer-l white"> </div> <div class="footer-grid-l white"> <a class="footer-text" href="table-responsive.html"> <i class="material-icons arrow-l">arrow_back</i> <span class="direction">Previous</span> <div> Responsive Tables </div> </a> </div> <div class="footer-r white"> </div> <div class="footer-grid-r white"> <a class="footer-text" href="charts.html"> <i class="material-icons arrow-r">arrow_forward</i> <span class="direction">Next</span> <div> Charts </div> </a> </div> </div> </div> </div> <div class="left-sidebar-hover"></div> <!-- Javascripts --> <script src="assets/plugins/jquery/jquery-2.2.0.min.js"></script> <script src="assets/plugins/materialize/js/materialize.min.js"></script> <script src="assets/plugins/material-preloader/js/materialPreloader.min.js"></script> <script src="assets/plugins/jquery-blockui/jquery.blockui.js"></script> <script src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script> <script src="assets/js/alpha.min.js"></script> <script src="assets/js/pages/table-data.js"></script> </body> </html>