- var datatable = true; - var page_datatable = true; - var theme_customizer = true; - var tooltip = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Plugin DataTable ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Tables li.breadcrumb-item Data Tables li.breadcrumb-item.active Plug in .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row // DOM / jQuery Starts .col-sm-12 .card .card-header h5 API plug-in methods span | The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is: .card-body .dt-plugin-buttons .table-responsive table#dt-plugin-method.display.datatables thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // DOM / jQuery Ends // Column rendering Starts .col-sm-12 .card .card-header h5 Ordering plug-ins (with type detection) span This example shows ordering with using an enumerated type. .card-body .table-responsive table#datatable-ordering.table.table-striped.table-bordered.nowrap thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td Low tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td Low tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td Low tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td Medium tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td Low tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td Medium tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td Low tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td Low tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td Low tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td Low tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td Low tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td Low tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td Medium tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td Low tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td Medium tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td Low tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td High tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td Low tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td Low tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td Low tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td Low tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td High tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td Low tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td Low tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td High tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td Low tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td Medium tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td Low tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td High tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td Low tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td Low tr td Suki Burks td Developer td London td 53 td 2009/10/22 td Low tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td Low tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td Low tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td Low tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td Low tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td Low tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td Low tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td Medium tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td Low tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td Medium tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td Low tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td Low tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td Low tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td Low tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td Low tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td Low tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td Low tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td Low tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td Low tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td Low tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td Medium tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td Low tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td Low tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td Low tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td Low tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td Low tfoot tr th Name th Position th Office th Age th Start date th Salary // Column rendering Ends // Multiple table control elements Starts .col-sm-12 .card .card-header h5 Custom filtering - range search span | This example shows a search being performed on the age column in the data, based upon two inputs. .card-body .table-responsive.dataTables_wrapper.me-0 table tbody.dataTables_filter tr td Minimum age: td input#min.form-control(type='search', name='min') tr td Maximum age: td input#max.form-control(type='search', name='max') .table-responsive table#datatable-range.display thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // Multiple table control elements Ends // Complex headers with column visibility Starts .col-sm-12 .card .card-header h5 Live DOM ordering span | This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered. .card-body .table-responsive table#datatable-livedom.table.table-striped.table-bordered.nowrap thead tr th Name th Age th Position th Office tbody tr td Tiger Nixon td input#row-1-age.form-control(type='text', name='row-1-age', value='61') td input#row-1-position.form-control(type='text', name='row-1-position', value='System Architect') td select#row-1-office.form-control(size='1', name='row-1-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Garrett Winters td input#row-2-age.form-control(type='text', name='row-2-age', value='63') td input#row-2-position.form-control(type='text', name='row-2-position', value='Accountant') td select#row-2-office.form-control(size='1', name='row-2-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Ashton Cox td input#row-3-age.form-control(type='text', name='row-3-age', value='66') td input#row-3-position.form-control(type='text', name='row-3-position', value='Junior Technical Author') td select#row-3-office.form-control(size='1', name='row-3-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Cedric Kelly td input#row-4-age.form-control(type='text', name='row-4-age', value='22 ') td input#row-4-position.form-control(type='text', name='row-4-position', value='Senior Javascript Developer') td select#row-4-office.form-control(size='1', name='row-4-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Airi Satou td input#row-5-age.form-control(type='text', name='row-5-age', value='33 ') td input#row-5-position.form-control(type='text', name='row-5-position', value='Accountant') td select#row-5-office.form-control(size='1', name='row-5-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Brielle Williamson td input#row-6-age.form-control(type='text', name='row-6-age', value='61') td input#row-6-position.form-control(type='text', name='row-6-position', value='Integration Specialist') td select#row-6-office.form-control(size='1', name='row-6-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Herrod Chandler td input#row-7-age.form-control(type='text', name='row-7-age', value='59 ') td input#row-7-position.form-control(type='text', name='row-7-position', value='Sales Assistant') td select#row-7-office.form-control(size='1', name='row-7-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Rhona Davidson td input#row-8-age.form-control(type='text', name='row-8-age', value='55 ') td input#row-8-position.form-control(type='text', name='row-8-position', value='Integration Specialist') td select#row-8-office.form-control(size='1', name='row-8-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Colleen Hurst td input#row-9-age.form-control(type='text', name='row-9-age', value='39 ') td input#row-9-position.form-control(type='text', name='row-9-position', value='Javascript Developer') td select#row-9-office.form-control(size='1', name='row-9-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Sonya Frost td input#row-10-age.form-control(type='text', name='row-10-age', value='23 ') td input#row-10-position.form-control(type='text', name='row-10-position', value='Software Engineer') td select#row-10-office.form-control(size='1', name='row-10-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jena Gaines td input#row-11-age.form-control(type='text', name='row-11-age', value='30 ') td input#row-11-position.form-control(type='text', name='row-11-position', value='Office Manager') td select#row-11-office.form-control(size='1', name='row-11-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Quinn Flynn td input#row-12-age.form-control(type='text', name='row-12-age', value='22 ') td input#row-12-position.form-control(type='text', name='row-12-position', value='Support Lead') td select#row-12-office.form-control(size='1', name='row-12-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Charde Marshall td input#row-13-age.form-control(type='text', name='row-13-age', value='36 ') td input#row-13-position.form-control(type='text', name='row-13-position', value='Regional Director') td select#row-13-office.form-control(size='1', name='row-13-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Haley Kennedy td input#row-14-age.form-control(type='text', name='row-14-age', value='43 ') td input#row-14-position.form-control(type='text', name='row-14-position', value='Senior Marketing Designer') td select#row-14-office.form-control(size='1', name='row-14-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Tatyana Fitzpatrick td input#row-15-age.form-control(type='text', name='row-15-age', value='19 ') td input#row-15-position.form-control(type='text', name='row-15-position', value='Regional Director') td select#row-15-office.form-control(size='1', name='row-15-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Michael Silva td input#row-16-age.form-control(type='text', name='row-16-age', value='66 ') td input#row-16-position.form-control(type='text', name='row-16-position', value='Marketing Designer') td select#row-16-office.form-control(size='1', name='row-16-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Paul Byrd td input#row-17-age.form-control(type='text', name='row-17-age', value='64 ') td input#row-17-position.form-control(type='text', name='row-17-position', value='Chief Financial Officer (CFO)') td select#row-17-office.form-control(size='1', name='row-17-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Gloria Little td input#row-18-age.form-control(type='text', name='row-18-age', value='59 ') td input#row-18-position.form-control(type='text', name='row-18-position', value='Systems Administrator') td select#row-18-office.form-control(size='1', name='row-18-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Bradley Greer td input#row-19-age.form-control(type='text', name='row-19-age', value='41 ') td input#row-19-position.form-control(type='text', name='row-19-position', value='Software Engineer') td select#row-19-office.form-control(size='1', name='row-19-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Dai Rios td input#row-20-age.form-control(type='text', name='row-20-age', value='35 ') td input#row-20-position.form-control(type='text', name='row-20-position', value='Personnel Lead') td select#row-20-office.form-control(size='1', name='row-20-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jenette Caldwell td input#row-21-age.form-control(type='text', name='row-21-age', value='30 ') td input#row-21-position.form-control(type='text', name='row-21-position', value='Development Lead') td select#row-21-office.form-control(size='1', name='row-21-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Yuri Berry td input#row-22-age.form-control(type='text', name='row-22-age', value='40 ') td input#row-22-position.form-control(type='text', name='row-22-position', value='Chief Marketing Officer (CMO)') td select#row-22-office.form-control(size='1', name='row-22-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Caesar Vance td input#row-23-age.form-control(type='text', name='row-23-age', value='21 ') td input#row-23-position.form-control(type='text', name='row-23-position', value='Pre-Sales Support') td select#row-23-office.form-control(size='1', name='row-23-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Doris Wilder td input#row-24-age.form-control(type='text', name='row-24-age', value='23 ') td input#row-24-position.form-control(type='text', name='row-24-position', value='Sales Assistant') td select#row-24-office.form-control(size='1', name='row-24-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Angelica Ramos td input#row-25-age.form-control(type='text', name='row-25-age', value='47 ') td input#row-25-position.form-control(type='text', name='row-25-position', value='Chief Executive Officer (CEO)') td select#row-25-office.form-control(size='1', name='row-25-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Gavin Joyce td input#row-26-age.form-control(type='text', name='row-26-age', value='42 ') td input#row-26-position.form-control(type='text', name='row-26-position', value='Developer') td select#row-26-office.form-control(size='1', name='row-26-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jennifer Chang td input#row-27-age.form-control(type='text', name='row-27-age', value='28 ') td input#row-27-position.form-control(type='text', name='row-27-position', value='Regional Director') td select#row-27-office.form-control(size='1', name='row-27-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Brenden Wagner td input#row-28-age.form-control(type='text', name='row-28-age', value='28 ') td input#row-28-position.form-control(type='text', name='row-28-position', value='Software Engineer') td select#row-28-office.form-control(size='1', name='row-28-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Fiona Green td input#row-29-age.form-control(type='text', name='row-29-age', value='48 ') td input#row-29-position.form-control(type='text', name='row-29-position', value='Chief Operating Officer (COO)') td select#row-29-office.form-control(size='1', name='row-29-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Shou Itou td input#row-30-age.form-control(type='text', name='row-30-age', value='20 ') td input#row-30-position.form-control(type='text', name='row-30-position', value='Regional Marketing') td select#row-30-office.form-control(size='1', name='row-30-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Michelle House td input#row-31-age.form-control(type='text', name='row-31-age', value='37 ') td input#row-31-position.form-control(type='text', name='row-31-position', value='Integration Specialist') td select#row-31-office.form-control(size='1', name='row-31-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Suki Burks td input#row-32-age.form-control(type='text', name='row-32-age', value='53 ') td input#row-32-position.form-control(type='text', name='row-32-position', value='Developer') td select#row-32-office.form-control(size='1', name='row-32-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Prescott Bartlett td input#row-33-age.form-control(type='text', name='row-33-age', value='27 ') td input#row-33-position.form-control(type='text', name='row-33-position', value='Technical Author') td select#row-33-office.form-control(size='1', name='row-33-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Gavin Cortez td input#row-34-age.form-control(type='text', name='row-34-age', value='22 ') td input#row-34-position.form-control(type='text', name='row-34-position', value='Team Leader') td select#row-34-office.form-control(size='1', name='row-34-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Martena Mccray td input#row-35-age.form-control(type='text', name='row-35-age', value='46 ') td input#row-35-position.form-control(type='text', name='row-35-position', value='Post-Sales support') td select#row-35-office.form-control(size='1', name='row-35-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Unity Butler td input#row-36-age.form-control(type='text', name='row-36-age', value='47 ') td input#row-36-position.form-control(type='text', name='row-36-position', value='Marketing Designer') td select#row-36-office.form-control(size='1', name='row-36-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Howard Hatfield td input#row-37-age.form-control(type='text', name='row-37-age', value='51 ') td input#row-37-position.form-control(type='text', name='row-37-position', value='Office Manager') td select#row-37-office.form-control(size='1', name='row-37-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Hope Fuentes td input#row-38-age.form-control(type='text', name='row-38-age', value='41 ') td input#row-38-position.form-control(type='text', name='row-38-position', value='Secretary') td select#row-38-office.form-control(size='1', name='row-38-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Vivian Harrell td input#row-39-age.form-control(type='text', name='row-39-age', value='62 ') td input#row-39-position.form-control(type='text', name='row-39-position', value='Financial Controller') td select#row-39-office.form-control(size='1', name='row-39-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Timothy Mooney td input#row-40-age.form-control(type='text', name='row-40-age', value='37 ') td input#row-40-position.form-control(type='text', name='row-40-position', value='Office Manager') td select#row-40-office.form-control(size='1', name='row-40-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jackson Bradshaw td input#row-41-age.form-control(type='text', name='row-41-age', value='65 ') td input#row-41-position.form-control(type='text', name='row-41-position', value='Director') td select#row-41-office.form-control(size='1', name='row-41-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Olivia Liang td input#row-42-age.form-control(type='text', name='row-42-age', value='64 ') td input#row-42-position.form-control(type='text', name='row-42-position', value='Support Engineer') td select#row-42-office.form-control(size='1', name='row-42-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Bruno Nash td input#row-43-age.form-control(type='text', name='row-43-age', value='38 ') td input#row-43-position.form-control(type='text', name='row-43-position', value='Software Engineer') td select#row-43-office.form-control(size='1', name='row-43-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Sakura Yamamoto td input#row-44-age.form-control(type='text', name='row-44-age', value='37 ') td input#row-44-position.form-control(type='text', name='row-44-position', value='Support Engineer') td select#row-44-office.form-control(size='1', name='row-44-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Thor Walton td input#row-45-age.form-control(type='text', name='row-45-age', value='61 ') td input#row-45-position.form-control(type='text', name='row-45-position', value='Developer') td select#row-45-office.form-control(size='1', name='row-45-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Finn Camacho td input#row-46-age.form-control(type='text', name='row-46-age', value='47 ') td input#row-46-position.form-control(type='text', name='row-46-position', value='Support Engineer') td select#row-46-office.form-control(size='1', name='row-46-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Serge Baldwin td input#row-47-age.form-control(type='text', name='row-47-age', value='64 ') td input#row-47-position.form-control(type='text', name='row-47-position', value='Data Coordinator') td select#row-47-office.form-control(size='1', name='row-47-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Zenaida Frank td input#row-48-age.form-control(type='text', name='row-48-age', value='63 ') td input#row-48-position.form-control(type='text', name='row-48-position', value='Software Engineer') td select#row-48-office.form-control(size='1', name='row-48-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Zorita Serrano td input#row-49-age.form-control(type='text', name='row-49-age', value='56 ') td input#row-49-position.form-control(type='text', name='row-49-position', value='Software Engineer') td select#row-49-office.form-control(size='1', name='row-49-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Jennifer Acosta td input#row-50-age.form-control(type='text', name='row-50-age', value='43 ') td input#row-50-position.form-control(type='text', name='row-50-position', value='Junior Javascript Developer') td select#row-50-office.form-control(size='1', name='row-50-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Cara Stevens td input#row-51-age.form-control(type='text', name='row-51-age', value='46 ') td input#row-51-position.form-control(type='text', name='row-51-position', value='Sales Assistant') td select#row-51-office.form-control(size='1', name='row-51-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Hermione Butler td input#row-52-age.form-control(type='text', name='row-52-age', value='47 ') td input#row-52-position.form-control(type='text', name='row-52-position', value='Regional Director') td select#row-52-office.form-control(size='1', name='row-52-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Lael Greer td input#row-53-age.form-control(type='text', name='row-53-age', value='21 ') td input#row-53-position.form-control(type='text', name='row-53-position', value='Systems Administrator') td select#row-53-office.form-control(size='1', name='row-53-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jonas Alexander td input#row-54-age.form-control(type='text', name='row-54-age', value='30 ') td input#row-54-position.form-control(type='text', name='row-54-position', value='Developer') td select#row-54-office.form-control(size='1', name='row-54-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Shad Decker td input#row-55-age.form-control(type='text', name='row-55-age', value='51 ') td input#row-55-position.form-control(type='text', name='row-55-position', value='Regional Director') td select#row-55-office.form-control(size='1', name='row-55-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Michael Bruce td input#row-56-age.form-control(type='text', name='row-56-age', value='29 ') td input#row-56-position.form-control(type='text', name='row-56-position', value='Javascript Developer') td select#row-56-office.form-control(size='1', name='row-56-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Donna Snider td input#row-57-age.form-control(type='text', name='row-57-age', value='27 ') td input#row-57-position.form-control(type='text', name='row-57-position', value='Customer Support') td select#row-57-office.form-control(size='1', name='row-57-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tfoot tr th Name th Age th Position th Office // Container-fluid Ends include ../../components/footer include ../../components/footer-files