German
Japanese
French
Simple Table
| Name | Date | Sale | Status | |
|---|---|---|---|---|
| Shaun Park | 10/08/2020 | 320 | Complete | |
| Alma Clarke | 11/08/2020 | 420 | Pending | |
| Xavier | 12/08/2020 | 130 | In progress | |
| Vincent Carpenter | 13/08/2020 | 260 | Canceled |
<div class="table-responsive">
<table class="table table-bordered mb-4">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Sale</th>
<th class="text-center">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Shaun Park</td>
<td>10/08/2020</td>
<td>320</td>
<td class="text-center"><span class="text-success">Complete</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>Alma Clarke</td>
<td>11/08/2020</td>
<td>420</td>
<td class="text-center"><span class="text-secondary">Pending</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>Xavier</td>
<td>12/08/2020</td>
<td>130</td>
<td class="text-center"><span class="text-info">In progress</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>Vincent Carpenter</td>
<td>13/08/2020</td>
<td>260</td>
<td class="text-center"><span class="text-danger">Canceled</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
</tbody>
</table>
</div>
Hover Table
| Name | Date | Sale | Status | |
|---|---|---|---|---|
| Shaun Park | 10/08/2020 | 320 | Complete | |
| Alma Clarke | 11/08/2020 | 420 | Pending | |
| Xavier | 12/08/2020 | 130 | In progress | |
| Vincent Carpenter | 13/08/2020 | 260 | Canceled |
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped mb-4">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Sale</th>
<th class="text-center">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Shaun Park</td>
<td>10/08/2020</td>
<td>320</td>
<td class="text-center"><span class="text-success">Complete</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td> Alma Clarke</td>
<td>11/08/2020</td>
<td>420</td>
<td class="text-center"><span class="text-secondary">Pending</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>Xavier</td>
<td>12/08/2020</td>
<td>130</td>
<td class="text-center"><span class="text-info">In progress</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>Vincent Carpenter</td>
<td>13/08/2020</td>
<td>260</td>
<td class="text-center"><span class="text-danger">Canceled</span></td>
<td class="text-center"><svg> ... </svg></td>
</tr>
</tbody>
</table>
</div>
Striped Table
| Name | Date | Sale | Action |
|---|---|---|---|
Shaun |
10/08/2020 | 320 | |
Alma |
11/08/2020 | 420 | |
Kelly |
12/08/2020 | 130 | |
Vincent |
13/08/2020 | 260 |
<div class="table-responsive">
<table class="table table-bordered table-striped mb-4">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Sale</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="usr-img-frame mr-2 rounded-circle">
<img alt="avatar" class="img-fluid rounded-circle" src="assets/img/boy.png">
</div>
<p class="align-self-center mb-0">Shaun</p>
</div>
</td>
<td>10/08/2020</td>
<td>320</td>
<td class=" text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="usr-img-frame mr-2 rounded-circle">
<img alt="avatar" class="img-fluid rounded-circle" src="assets/img/girl-1.png">
</div>
<p class="align-self-center mb-0">Alma</p>
</div>
</td>
<td>11/08/2020</td>
<td>420</td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="usr-img-frame mr-2 rounded-circle">
<img alt="avatar" class="img-fluid rounded-circle" src="assets/img/girl-2.png">
</div>
<p class="align-self-center mb-0">Kelly</p>
</div>
</td>
<td>12/08/2020</td>
<td>130</td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="usr-img-frame mr-2 rounded-circle">
<img alt="avatar" class="img-fluid rounded-circle" src="assets/img/boy-2.png">
</div>
<p class="align-self-center mb-0">Vincent</p>
</div>
</td>
<td>13/08/2020</td>
<td>260</td>
<td class="text-center"><svg> ... </svg></td>
</tr>
</tbody>
</table>
</div>
Table Light
| # | First Name | Last Name | ||
|---|---|---|---|---|
| 1 | John | Doe | johndoe@yahoo.com | |
| 2 | Andy | King | andyking@gmail.com | |
| 3 | Lisa | Doe | lisadoe@live.com | |
| 4 | Vincent | Carpenter | vinnyc@outlook.com |
<div class="table-responsive">
<table class="table table-hover table-dark mb-4">
<thead>
<tr>
<th class="text-center">#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>John</td>
<td>Doe</td>
<td>johndoe@yahoo.com</td>
<td class=" text-center"><svg> ... </svg></td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Andy</td>
<td>King</td>
<td>andyking@gmail.com</td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Lisa</td>
<td>Doe</td>
<td>lisadoe@live.com</td>
<td class="text-center"><svg> ... </svg></td>
</tr>
<tr>
<td class="text-center">4</td>
<td>Vincent</td>
<td>Carpenter</td>
<td>vinnyc@outlook.com</td>
<td class="text-center"><svg> ... </svg></td>
</tr>
</tbody>
</table>
</div>
Captions
| # | Name | Status | Register | |
|---|---|---|---|---|
| 1 | Shaun Park | johndoe@yahoo.com | Complete | 5 min ago |
| 2 | Andy King | andyking@gmail.com | Pending | 10 min ago |
| 3 | Mary McDonald | lisadoe@live.com | In Progress | 1 hour ago |
| 4 | Vincent Carpenter | vinnyc@outlook.com | Cancel | 1 day ago |
<div class="table-responsive">
<table class="table mb-4">
<caption>List of all users</caption>
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Email</th>
<th class="">Status</th>
<th>Register</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td class="text-primary">Shaun Park</td>
<td>johndoe@yahoo.com</td>
<td class=""><span class=" shadow-none badge outline-badge-primary">Complete</span></td>
<td>5 min ago</td>
</tr>
<tr>
<td class="text-center">2</td>
<td class="text-primary">Andy King</td>
<td>andyking@gmail.com</td>
<td class=""><span class="badge outline-badge-secondary shadow-none">Pending</span></td>
<td>10 min ago</td>
</tr>
<tr>
<td class="text-center">3</td>
<td class="text-primary">Mary McDonald</td>
<td>lisadoe@live.com</td>
<td class=""><span class="badge outline-badge-info shadow-none">In Progress</span></td>
<td>1 hour ago</td>
</tr>
<tr>
<td class="text-center">4</td>
<td class="text-primary">Vincent Carpenter</td>
<td>vinnyc@outlook.com</td>
<td class=""><span class="badge outline-badge-danger shadow-none">Cancel</span></td>
<td>1 day ago</td>
</tr>
</tbody>
</table>
</div>
Progress Table
| # | Name | Progress | Sales | Action |
|---|---|---|---|---|
| 1 | John Doe |
|
29.56% |
|
| 2 | Andy King |
|
19.15% |
|
| 3 | Lisa Doe |
|
39.00% |
|
| 4 | Vincent Carpenter |
|
88.03% |
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Progress</th>
<th>Sales</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>John Doe</td>
<td>
<div class="progress br-30">
<div class="progress-bar br-30 bg-primary" role="progressbar" style="width: 29.56%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><p class="text-danger">29.56%</p></td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Andy King</td>
<td>
<div class="progress br-30">
<div class="progress-bar br-30 bg-warning" role="progressbar" style="width: 19.15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><p class="text-danger">19.15%</p></td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Lisa Doe</td>
<td>
<div class="progress br-30">
<div class="progress-bar br-30 bg-success" role="progressbar" style="width: 39.00%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><p class="text-danger">39.00%</p></td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td class="text-center">4</td>
<td>Vincent Carpenter</td>
<td>
<div class="progress br-30">
<div class="progress-bar br-30 bg-secondary" role="progressbar" style="width: 88.03%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td><p class="text-success">88.03%</p></td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
Contextual
| # | First Name | Last Name | |
|---|---|---|---|
| 1 | John | Doe | johndoe@yahoo.com |
| 2 | Andy | King | andyking@gmail.com |
| 3 | Lisa | Doe | lisadoe@live.com |
| 4 | Vincent | Carpenter | vinnyc@outlook.com |
| 5 | Shaun | Park | spark@adobe.com |
| 6 | Nia | Hillyer | niahill@gmail.com |
| 7 | Marry | McDonald | marryMcD@gmail.com |
| 8 | Amy | Diaz | amydiaz@gmail.com |
<div class="table-responsive">
<table class="table mb-4 contextual-table">
<thead>
<tr class="">
<th class="text-center">#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="table-default">
<td class="text-center">1</td>
<td>John</td>
<td>Doe</td>
<td>johndoe@yahoo.com</td>
</tr>
<tr class="table-primary">
<td class="text-center">2</td>
<td>Andy</td>
<td>King</td>
<td>andyking@gmail.com</td>
</tr>
<tr class="table-secondary">
<td class="text-center">3</td>
<td>Lisa</td>
<td>Doe</td>
<td>lisadoe@live.com</td>
</tr>
<tr class="table-success">
<td class="text-center">4</td>
<td>Vincent</td>
<td>Carpenter</td>
<td>vinnyc@outlook.com</td>
</tr>
<tr class="table-warning">
<td class="text-center">5</td>
<td>Shaun</td>
<td>Park</td>
<td>spark@adobe.com</td>
</tr>
<tr class="table-danger">
<td class="text-center">6</td>
<td>Nia</td>
<td>Hillyer</td>
<td>niahill@gmail.com</td>
</tr>
<tr class="table-info">
<td class="text-center">7</td>
<td>Marry</td>
<td>McDonald</td>
<td>marryMcD@gmail.com</td>
</tr>
<tr class="table-dark">
<td class="text-center">8</td>
<td>Amy</td>
<td>Diaz</td>
<td>amydiaz@gmail.com</td>
</tr>
</tbody>
</table>
</div>
Dropdown
| Name | Date | Sale | Status | Action |
|---|---|---|---|---|
| Shaun | 10/08/2020 | 320 | Approved | |
| Alma | 11/08/2020 | 420 | In Progress | |
| Kelly | 12/08/2020 | 130 | Suspended | |
| Xavier | 13/08/2020 | 260 | Blocked | |
| Andy | 14/08/2020 | 99 | On leave | |
| Justin | 15/08/2020 | 555 | Pending | |
| Amy | 16/08/2020 | 300 | Deleted |
<div class="table-responsive">
<table class="table table-bordered mb-4">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Sale</th>
<th class="text-center">Status</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shaun</td>
<td>10/08/2020</td>
<td>320</td>
<td class="text-center"><span class="badge badge-success">Approved</span></td>
<td class="text-center">
<div class="dropdown custom-dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg> ... </svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Alma</td>
<td>11/08/2020</td>
<td>420</td>
<td class="text-center"><span class="badge badge-primary">In Progress</span></td>
<td class="text-center">
<div class="dropdown custom-dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg> ... </svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Kelly</td>
<td>12/08/2020</td>
<td>130</td>
<td class="text-center"><span class="badge badge-warning">Suspended</span></td>
<td class="text-center">
<div class="dropdown custom-dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg> ... </svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Xavier</td>
<td>13/08/2020</td>
<td>260</td>
<td class="text-center"><span class="badge badge-danger">Blocked</span></td>
<td class="text-center">
<div class="dropdown custom-dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg> ... </svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Andy</td>
<td>14/08/2020</td>
<td>99</td>
<td class="text-center"><span class="badge badge-secondary">On leave</span></td>
<td class="text-center">
<div class="dropdown custom-dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg> ... </svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Justin</td>
<td>15/08/2020</td>
<td>555</td>
<td class="text-center"><span class="badge badge-info">Pending</span></td>
<td class="text-center">
<div class="dropdown custom-dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg> ... </svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>Amy</td>
<td>16/08/2020</td>
<td>300</td>
<td class="text-center"><span class="badge badge-dark">Deleted</span></td>
<td class="text-center">
<div class="dropdown custom-dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg> ... </svg>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
<a class="dropdown-item" href="javascript:void(0);">Edit</a>
<a class="dropdown-item" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Table with Footer
| Name | Position | Office | Action |
|---|---|---|---|
| Xavier | Developer | London | |
| Andy King | Designer | New York | |
| Mary McDonald | Accountant | Amazon | |
| Vincent Carpenter | Data Scientist | Canada | |
| Name | Position | Office | Action |
<div class="table-responsive">
<table class="table table-bordered table-hover table-condensed mb-4">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xavier</td>
<td>Developer</td>
<td>London</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td>Andy King</td>
<td>Designer</td>
<td>New York</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td>Mary McDonald</td>
<td>Accountant</td>
<td>Amazon</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td>Vincent Carpenter</td>
<td>Data Scientist</td>
<td>Canada</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="text-center">Action</th>
</tr>
</tfoot>
</table>
</div>
Checkboxes
| Name | Date | Sales | Icons | |
|---|---|---|---|---|
|
Shaun Park |
10/08/2020 | 320 | ||
|
Alma Clarke |
11/08/2020 | 420 | ||
|
Kelly Young |
12/08/2020 | 130 | ||
|
Vincent Carpenter |
13/08/2020 | 260 | ||
|
Andy King |
14/08/2020 | 180 |
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-checkable table-highlight-head mb-4">
<thead>
<tr>
<th class="checkbox-column">
<div class="custom-control custom-checkbox checkbox-primary">
<input type="checkbox" class="custom-control-input todochkbox" id="todoAll">
<label class="custom-control-label" for="todoAll"></label>
</div>
</th>
<th class="">Name</th>
<th class="">Date</th>
<th class="">Sales</th>
<th class="text-center">Icons</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox-column">
<div class="custom-control custom-checkbox checkbox-primary">
<input type="checkbox" class="custom-control-input todochkbox" id="todo-1">
<label class="custom-control-label" for="todo-1"></label>
</div>
</td>
<td>
<p class="mb-0">Shaun Park</p>
</td>
<td>10/08/2020</td>
<td>320</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td class="checkbox-column">
<div class="custom-control custom-checkbox checkbox-primary">
<input type="checkbox" class="custom-control-input todochkbox" id="todo-2">
<label class="custom-control-label" for="todo-2"></label>
</div>
</td>
<td>
<p class="mb-0">Alma Clarke</p>
</td>
<td>11/08/2020</td>
<td>420</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td class="checkbox-column">
<div class="custom-control custom-checkbox checkbox-primary">
<input type="checkbox" class="custom-control-input todochkbox" id="todo-3">
<label class="custom-control-label" for="todo-3"></label>
</div>
</td>
<td>
<p class="mb-0">Kelly Young</p>
</td>
<td>12/08/2020</td>
<td>130</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td class="checkbox-column">
<div class="custom-control custom-checkbox checkbox-primary">
<input type="checkbox" class="custom-control-input todochkbox" id="todo-4">
<label class="custom-control-label" for="todo-4"></label>
</div>
</td>
<td>
<p class="mb-0">Vincent Carpenter</p>
</td>
<td>13/08/2020</td>
<td>260</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
<tr>
<td class="checkbox-column">
<div class="custom-control custom-checkbox checkbox-primary">
<input type="checkbox" class="custom-control-input todochkbox" id="todo-5">
<label class="custom-control-label" for="todo-5"></label>
</div>
</td>
<td>
<p class="mb-0">Andy King</p>
</td>
<td>14/08/2020</td>
<td>180</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
Copyright © 2020 DesignReset, All rights reserved.
Coded with