Basic Datatable
Default datatables. Add datatables class in root
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Name | Position | Office | Age | Start date | Salary |
<div class="table-responsive">
<table id="example" class="display table" style="min-width: 845px">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr> v-for="(
{ name, Position, Office, Age, Start_date, Salary }, ind
) in paginatedData"
:key="ind"
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
Datatable
datatables with border. Add class datatables-bordered with the class datatables
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Name | Position | Office | Age | Start date | Salary |
<div class="table-responsive">
<table id="table_example" class="display table" style="min-width: 845px">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr> v-for="(
{ name, Position, Office, Age, Start_date, Salary }, ind
) in paginatedData"
:key="ind"
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>Profile Datatable
Add profile class with datatables
| Name | Department | Gender | Education | Mobile | Joining Date | Action | ||
|---|---|---|---|---|---|---|---|---|
 | Tiger Nixon | Architect | Male | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Garrett Winters | Accountant | Female | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Ashton Cox | Junior Technical | Male | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Cedric Kelly | Developer | Male | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Airi Satou | Accountant | Female | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Brielle Williamson | Specialist | Male | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Herrod Chandler | Sales Assistant | Female | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Rhona Davidson | Integration | Male | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Colleen Hurst | Javascript Developer | Female | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 | |
 | Sonya Frost | Software Engineer | Male | M.COM., P.H.D. | 123 456 7890 | info@example.com | 2011/04/25 |
<div class="table-responsive">
<table id="example" class="display table" style="min-width: 845px">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr> v-for="(
{ img, name, Department, Gender }, ind
) in paginatedData"
:key="ind"
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>Fees Collection
Add fees class with datatables
| Roll No | Student Name | Invoice number | Fees Type | Payment Type | Status | Date | Amount |
|---|---|---|---|---|---|---|---|
| 22 | Yuri Berry | #98756 | Tuition | Credit | Card | 2009/06/25 | 120$ |
| 01 | Tiger Nixon | #54605 | Library | Cash | Paid | 2011/04/25, | 120$ |
| 15 | Tatyana Fitzpatrick | #65248 | Annual | Cheque | Udpaid | 2010/03/17 | 120$ |
| 10 | Sonya Frost | #98734 | Tuition | Credit | Card | 2008/12/13 | 120$ |
| 30 | Shou Itou | #54605 | Annual | Credit | Card | 2011/08/14 | 120$ |
| 08 | Rhona Davidson | #98721 | Library | Cheque | Udpaid | 2010/10/14 | 120$ |
| 12 | Quinn Flynn | #36987 | Library | Cheque | Panding | 2013/03/03 | 120$ |
| 17 | Paul Byrd | #87954 | Library | Cheque | Panding | 2010/06/09 | 120$ |
| 16 | Michael Silva | #75943 | Tuition | Credit | Card | 2012/11/27 | 120$ |
| 27 | Jennifer Chang | #54605 | Tuition | Cheque | Panding | 2010/11/14, | 120$ |
<div class="table-responsive">
<table id="example" class="display table" style="min-width: 845px">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr> v-for="(
{ rollno, name, invoicnumber, feetype,paytype,status,date,badgeColor }, ind
) in paginatedData"
:key="ind"
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>Patient
Add Patient class with datatables
| Patient ID | Date Check in | Patient Name | Doctor Assgined | Disease | Status | Room no | Action | |
|---|---|---|---|---|---|---|---|---|
| #P-0000#1 | 26/02/2020, 12:42 AM | Tiger Nixon | Dr.Cedric | Cold & Flu | New Patient | AB-001 | ||
| #P-0000#2 | 26/02/2020, 12:42 AM | Garrett Winters | Dr.Cedric | Sleep Problem | In Treatment | AB-002 | ||
| #P-0000#3 | 26/02/2020, 12:42 AM | Ashton Cox | Dr.Rhona | Cold & Flu | Flu Recovered | AB-003 | ||
| #P-0000#4 | 26/02/2020, 12:42 AM | Ashton Cox | Dr.Cedric | Cold & Flu | In Treatment | AB-004 | ||
| #P-0000#5 | 26/02/2020, 12:42 AM | Ashton Cox | Dr.Cedric | Cold & Flu | In Treatment | AB-005 | ||
| #P-0000#6 | 26/02/2020, 12:42 AM | Ashton Cox | Dr.Rhona | Sleep Problem | In Treatment | AB-006 | ||
| #P-0000#7 | 26/02/2020, 12:42 AM | Airi Satou | Dr.Rhona | Cold & Flu | New Patient | AB-007 | ||
| #P-0000#8 | 26/02/2020, 12:42 AM | Airi Satou | Dr.Garrett | Sleep Problem | In Treatment | AB-008 | ||
| #P-0000#9 | 26/02/2020, 12:42 AM | Airi Satou | Dr.Rhona | Cold & Flu | New Patient | AB-009 | ||
| #P-0000#10 | 26/02/2020, 12:42 AM | Airi Satou | Dr.Rhona | Sleep Problem | New Patient | AB-010 | ||
| #P-0000#11 | 26/02/2020, 12:42 AM | Airi Satou | Dr.Rhona | Cold & Flu | In Treatment | AB-011 | ||
| #P-0000#12 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Garrett | Sleep Problem | New Patient | AB-012 | ||
| #P-0000#13 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Rhona | Cold & Flu | New Patient | AB-013 | ||
| #P-0000#14 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Garrett | Sleep Problem | In Treatment | AB-014 | ||
| #P-0000#15 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Rhona | Cold & Flu | New Patient | AB-015 | ||
| #P-0000#16 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Garrett | Sleep Problem | New Patient | AB-016 | ||
| #P-0000#17 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Rhona | Cold & Flu | In Treatment | AB-017 | ||
| #P-0000#18 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Rhona | Sleep Problem | New Patient | AB-018 | ||
| #P-0000#19 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Rhona | Cold & Flu | New Patient | AB-019 | ||
| #P-0000#20 | 26/02/2020, 12:42 AM | Sonya Frost | Dr.Garrett | Sleep Problem | In Treatment | AB-020 |
<div class="table-responsive">
<table id="example5" class="display table" style="min-width: 845px">
<thead>
<tr>
<th>
<div class="custom-control d-inline custom-checkbox">
<input type="checkbox" class="form-check-input" id="checkAll" required>
<label class="form-check-label" for="checkAll"></label>
</div>
</th>
<th>Patient ID</th>
<th>Date Check in</th>
<th>Patient Name</th>
<th>Doctor Assgined</th>
<th>Disease</th>
<th>Status</th>
<th>Room no</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox2" required>
<label class="form-check-label" for="customCheckBox2"></label>
</div>
</td>
<td>#P-00001</td>
<td>26/02/2020, 12:42 AM</td>
<td>Tiger Nixon</td>
<td>Dr. Cedric</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-001</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox3" required>
<label class="form-check-label" for="customCheckBox3"></label>
</div>
</td>
<td>#P-00002</td>
<td>28/02/2020, 12:42 AM</td>
<td>Garrett Winters</td>
<td>Dr. Cedric</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-002</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox4" required>
<label class="form-check-label" for="customCheckBox4"></label>
</div>
</td>
<td>#P-00003</td>
<td>26/02/2020, 12:42 AM</td>
<td>Ashton Cox</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-success">
<i class="fa fa-circle text-success me-1"></i>
Recovered
</span>
</td>
<td>AB-003</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox5" required>
<label class="form-check-label" for="customCheckBox5"></label>
</div>
</td>
<td>#P-00004</td>
<td>29/02/2020, 12:42 AM</td>
<td>Ashton Cox</td>
<td>Dr. Cedric</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-004</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox6" required>
<label class="form-check-label" for="customCheckBox6"></label>
</div>
</td>
<td>#P-00005</td>
<td>28/02/2020, 12:42 AM</td>
<td>Ashton Cox</td>
<td>Dr. Cedric</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-005</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox7" required>
<label class="form-check-label" for="customCheckBox7"></label>
</div>
</td>
<td>#P-00006</td>
<td>28/02/2020, 12:42 AM</td>
<td>Ashton Cox</td>
<td>Dr. Rhona</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-006</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox8" required>
<label class="form-check-label" for="customCheckBox8"></label>
</div>
</td>
<td>#P-00007</td>
<td>26/02/2020, 12:42 AM</td>
<td>Airi Satou</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-007</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox9" required>
<label class="form-check-label" for="customCheckBox9"></label>
</div>
</td>
<td>#P-00008</td>
<td>29/02/2020, 12:42 AM</td>
<td>Airi Satou</td>
<td>Dr. Garrett </td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-008</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox10" required>
<label class="form-check-label" for="customCheckBox10"></label>
</div>
</td>
<td>#P-00009</td>
<td>25/02/2020, 12:42 AM</td>
<td>Airi Satou</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-009</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox11" required>
<label class="form-check-label" for="customCheckBox11"></label>
</div>
</td>
<td>#P-00010</td>
<td>26/02/2020, 12:42 AM</td>
<td>Airi Satou</td>
<td>Dr. Rhona</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-010</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox12" required>
<label class="form-check-label" for="customCheckBox12"></label>
</div>
</td>
<td>#P-00011</td>
<td>28/02/2020, 12:42 AM</td>
<td>Airi Satou</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-011</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox13" required>
<label class="form-check-label" for="customCheckBox13"></label>
</div>
</td>
<td>#P-00012</td>
<td>29/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Garrett</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-012</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox14" required>
<label class="form-check-label" for="customCheckBox14"></label>
</div>
</td>
<td>#P-00013</td>
<td>25/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-013</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox15" required>
<label class="form-check-label" for="customCheckBox15"></label>
</div>
</td>
<td>#P-00014</td>
<td>26/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Garrett</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-014</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox16" required>
<label class="form-check-label" for="customCheckBox16"></label>
</div>
</td>
<td>#P-00015</td>
<td>28/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-015</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox17" required>
<label class="form-check-label" for="customCheckBox17"></label>
</div>
</td>
<td>#P-00016</td>
<td>29/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Garrett</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-016</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox18" required>
<label class="form-check-label" for="customCheckBox18"></label>
</div>
</td>
<td>#P-00017</td>
<td>25/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-017</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox19" required>
<label class="form-check-label" for="customCheckBox19"></label>
</div>
</td>
<td>#P-00018</td>
<td>26/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Rhona</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-018</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox20" required>
<label class="form-check-label" for="customCheckBox20"></label>
</div>
</td>
<td>#P-00019</td>
<td>28/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Rhona</td>
<td>Cold & Flu</td>
<td>
<span class="badge light badge-danger">
<i class="fa fa-circle text-danger me-1"></i>
New Patient
</span>
</td>
<td>AB-019</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check custom-checkbox ms-2">
<input type="checkbox" class="form-check-input" id="customCheckBox21" required>
<label class="form-check-label" for="customCheckBox21"></label>
</div>
</td>
<td>#P-00020</td>
<td>25/02/2020, 12:42 AM</td>
<td>Sonya Frost</td>
<td>Dr. Garrett</td>
<td>Sleep Problem</td>
<td>
<span class="badge light badge-warning">
<i class="fa fa-circle text-warning me-1"></i>
In Treatment
</span>
</td>
<td>AB-020</td>
<td>
<div class="dropdown ms-auto text-end">
<div class="btn-link" data-bs-toggle="dropdown">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"></rect><circle fill="#000000" cx="5" cy="12" r="2"></circle><circle fill="#000000" cx="12" cy="12" r="2"></circle><circle fill="#000000" cx="19" cy="12" r="2"></circle></g></svg>
</div>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Accept Patient</a>
<a class="dropdown-item" href="#">Reject Order</a>
<a class="dropdown-item" href="#">View Details</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>