<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/2019</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/2019</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/2019</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/2019</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>

<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/90x90.jpg"></div><p class="align-self-center mb-0">Shaun</p></div></td><td>10/08/2019</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/90x90.jpg"></div><p class="align-self-center mb-0">Alma</p></div></td><td>11/08/2019</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/90x90.jpg"></div><p class="align-self-center mb-0">Kelly</p></div></td><td>12/08/2019</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/90x90.jpg"></div><p class="align-self-center mb-0">Vincent</p></div></td><td>13/08/2019</td><td>260</td><td class="text-center"><svg>... </svg></td></tr></tbody></table></div>

<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>

<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>

<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>

<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>

<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/2019</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/2019</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/2019</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/2019</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/2019</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/2019</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/2019</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>

<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>

<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/2019</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/2019</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/2019</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/2019</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/2019</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>