Facts Design System

Name	Position	Office	Extn.	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011-04-25	$320,800	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Garrett Winters	Accountant	Tokyo	63	2011-07-25	$170,750	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Ashton Cox	Junior Technical Author	San Francisco	66	2009-01-12	$86,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012-03-29	$433,060	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Airi Satou	Accountant	Tokyo	33	2008-11-28	$162,700	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Brielle Williamson	Integration Specialist	New York	61	2012-12-02	$372,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Herrod Chandler	Sales Assistant	San Francisco	59	2012-08-06	$137,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Rhona Davidson	Integration Specialist	Tokyo	55	2010-10-14	$327,900	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Colleen Hurst	Javascript Developer	San Francisco	39	2009-09-15	$205,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Sonya Frost	Software Engineer	Edinburgh	23	2008-12-13	$103,600	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Jena Gaines	Office Manager	London	30	2008-12-19	$90,560	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Quinn Flynn	Support Lead	Edinburgh	22	2013-03-03	$342,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Charde Marshall	Regional Director	San Francisco	36	2008-10-16	$470,600	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Haley Kennedy	Senior Marketing Designer	London	43	2012-12-18	$313,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Tatyana Fitzpatrick	Regional Director	London	19	2010-03-17	$385,750	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Michael Silva	Marketing Designer	London	66	2012-11-27	$198,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010-06-09	$725,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Gloria Little	Systems Administrator	New York	59	2009-04-10	$237,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Bradley Greer	Software Engineer	London	41	2012-10-13	$132,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Dai Rios	Personnel Lead	Edinburgh	35	2012-09-26	$217,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Jenette Caldwell	Development Lead	New York	30	2011-09-03	$345,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009-06-25	$675,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Caesar Vance	Pre-Sales Support	New York	21	2011-12-12	$106,450	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Doris Wilder	Sales Assistant	Sydney	23	2010-09-20	$85,600	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009-10-09	$1,200,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Gavin Joyce	Developer	Edinburgh	42	2010-12-22	$92,575	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Jennifer Chang	Regional Director	Singapore	28	2010-11-14	$357,650	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Brenden Wagner	Software Engineer	San Francisco	28	2011-06-07	$206,850	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010-03-11	$850,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Shou Itou	Regional Marketing	Tokyo	20	2011-08-14	$163,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Michelle House	Integration Specialist	Sydney	37	2011-06-02	$95,400	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Suki Burks	Developer	London	53	2009-10-22	$114,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Prescott Bartlett	Technical Author	London	27	2011-05-07	$145,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Gavin Cortez	Team Leader	San Francisco	22	2008-10-26	$235,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Martena Mccray	Post-Sales support	Edinburgh	46	2011-03-09	$324,050	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Unity Butler	Marketing Designer	San Francisco	47	2009-12-09	$85,675	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Howard Hatfield	Office Manager	San Francisco	51	2008-12-16	$164,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Hope Fuentes	Secretary	San Francisco	41	2010-02-12	$109,850	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Vivian Harrell	Financial Controller	San Francisco	62	2009-02-14	$452,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Timothy Mooney	Office Manager	London	37	2008-12-11	$136,200	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Jackson Bradshaw	Director	New York	65	2008-09-26	$645,750	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Olivia Liang	Support Engineer	Singapore	64	2011-02-03	$234,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Bruno Nash	Software Engineer	London	38	2011-05-03	$163,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Sakura Yamamoto	Support Engineer	Tokyo	37	2009-08-19	$139,575	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Thor Walton	Developer	New York	61	2013-08-11	$98,540	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Finn Camacho	Support Engineer	San Francisco	47	2009-07-07	$87,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Serge Baldwin	Data Coordinator	Singapore	64	2012-04-09	$138,575	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Zenaida Frank	Software Engineer	New York	63	2010-01-04	$125,250	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Zorita Serrano	Software Engineer	San Francisco	56	2012-06-01	$115,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013-02-01	$75,650	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Cara Stevens	Sales Assistant	New York	46	2011-12-06	$145,600	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Hermione Butler	Regional Director	London	47	2011-03-21	$356,250	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Lael Greer	Systems Administrator	London	21	2009-02-27	$103,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Jonas Alexander	Developer	San Francisco	30	2010-07-14	$86,500	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Shad Decker	Regional Director	Edinburgh	51	2008-11-13	$183,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Michael Bruce	Javascript Developer	Singapore	29	2011-06-27	$183,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4
Donna Snider	Customer Support	New York	27	2011-01-25	$112,000	Action Item 1 Action Item 2 Action Item 3 Action Item 4

<!-- Data Table -->
<div class="col-12 mb-4">
  <div class="card">
    <div class="card-body p-0">
      <table id="data" class="table table-striped table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Position</th>
                <th scope="col">Office</th>
                <th scope="col">Extn.</th>
                <th scope="col">Start date</th>
                <th scope="col">Salary</th>
                <th scope="col">&nbsp;</th>
            </tr>
        </thead>
        <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>
        <td class="p-0 align-middle text-end">
          <div class="dropdown">
              <button class="btn btn-more dropdown-toggle" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
              </button>
              <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                  <li><a class="dropdown-item" href="#">Action Item 1</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 2</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 3</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Action Item 4</a></li>
              </ul>
          </div>
        </td>
    </tr>
    <tr>
        ...
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Datatable JS -->
  <script>
  $(document).ready(function () {
    $('#data').DataTable({
      dom: '<"table-responsive"t><"d-flex align-items-center px-3 pb-3"li<"ms-auto"p>>',
      language: {
        "autoWidth": false,
        "lengthMenu": "_MENU_",
        "info": "Showing _START_ to _END_ of _TOTAL_ records",
        "paginate": {
                "first": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-left"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>',
                "last": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-right"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>',
                "previous": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>',
                "next": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>'
                    }
      },
      pagingType: "full_numbers",
      columnDefs: [
          { orderable: false, targets: -1 }
        ]
    });
  });
</script>