Bootstrap Tables
Bootstrap Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.
Keep reading some Bootstrap Tables examples to see how these tables work.
Examples
Basic Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Fira | Marson | @mar |
| 3 | Andy | Frila | @and |
<table class="table">
<thead class="bg-gray-100">
<tr>
<th scope="col" class="text-secondary text-xs font-weight-semibold opacity-7 border-light">#</th>
<th scope="col" class="text-secondary text-xs font-weight-semibold opacity-7 border-light ps-2">First</th>
<th scope="col" class="text-secondary text-xs font-weight-semibold opacity-7 border-light ps-2">Last</th>
<th scope="col" class="text-secondary text-xs font-weight-semibold opacity-7
border-light ps-2">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-sm text-secondary mb-0">1</th>
<td class="text-sm text-secondary mb-0">Mark</td>
<td class="text-sm text-secondary mb-0">Otto</td>
<td class="text-sm text-secondary mb-0">@mdo</td>
</tr>
<tr>
<th scope="row" class="text-sm text-secondary mb-0">2</th>
<td class="text-sm text-secondary mb-0">Fira</td>
<td class="text-sm text-secondary mb-0">Marson</td>
<td class="text-sm text-secondary mb-0">@mar</td>
</tr>
<tr>
<th scope="row" class="text-sm text-secondary mb-0">3</th>
<td class="text-sm text-secondary mb-0">Andy</td>
<td class="text-sm text-secondary mb-0">Frila</td>
<td class="text-sm text-secondary mb-0">@and</td>
</tr>
</tbody>
</table>Transactions Table
Recent transactions
These are details about the last transactions
<div class="card border shadow-xs mb-4">
<div class="card-header border-bottom pb-0">
<div class="d-sm-flex align-items-center mb-3">
<div>
<h6 class="font-weight-semibold text-lg mb-0">Recent transactions</h6>
<p class="text-sm mb-sm-0">These are details about the last transactions</p>
</div>
<div class="ms-auto d-flex">
<div class="input-group input-group-sm ms-auto me-2">
<span class="input-group-text text-body">
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</span>
<input type="text" class="form-control form-control-sm" placeholder="Search">
</div>
<button type="button" class="btn btn-sm btn-dark btn-icon d-flex align-items-center mb-0 me-2">
<span class="btn-inner--icon">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="d-block me-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
</svg>
</span>
<span class="btn-inner--text">Download</span>
</button>
</div>
</div>
</div>
<div class="card-body px-0 py-0">
<div class="table-responsive p-0">
<table class="table align-items-center justify-content-center mb-0">
<thead class="bg-gray-100">
<tr>
<th class="text-secondary text-xs font-weight-semibold opacity-7">Transaction</th>
<th class="text-secondary text-xs font-weight-semibold opacity-7 ps-2">Amount</th>
<th class="text-secondary text-xs font-weight-semibold opacity-7 ps-2">Date</th>
<th class="text-secondary text-xs font-weight-semibold opacity-7 ps-2">Status</th>
<th class="text-secondary text-xs font-weight-semibold opacity-7 ps-2">Account</th>
<th class="text-center text-secondary text-xs font-weight-semibold opacity-7"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex px-2">
<div class="avatar avatar-sm rounded-circle bg-gray-100 me-2 my-2">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/small-logos/logo-spotify.svg" class="w-80" alt="spotify">
</div>
<div class="my-auto">
<h6 class="mb-0 text-sm">Spotify</h6>
</div>
</div>
</td>
<td>
<p class="text-sm font-weight-normal mb-0">$2,500</p>
</td>
<td>
<span class="text-sm font-weight-normal">Wed 3:00pm</span>
</td>
<td>
<span class="badge badge-sm border border-success text-success bg-success">
<svg width="9" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="me-1">
<path d="M1 4.42857L3.28571 6.71429L9 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Paid </span>
</td>
<td class="align-middle">
<div class="d-flex">
<div class="border px-1 py-1 text-center d-flex align-items-center border-radius-sm my-auto">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png" class="w-90 mx-auto" alt="visa">
</div>
<div class="ms-2">
<p class="text-dark text-sm mb-0">Visa 1234</p>
<p class="text-secondary text-sm mb-0">Expiry 06/2026</p>
</div>
</div>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2">
<div class="avatar avatar-sm rounded-circle bg-gray-100 me-2 my-2">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/small-logos/logo-invision.svg" class="w-80" alt="invision">
</div>
<div class="my-auto">
<h6 class="mb-0 text-sm">Invision</h6>
</div>
</div>
</td>
<td>
<p class="text-sm font-weight-normal mb-0">$5,000</p>
</td>
<td>
<span class="text-sm font-weight-normal">Wed 1:00pm</span>
</td>
<td>
<span class="badge badge-sm border border-success text-success bg-success">
<svg width="9" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="me-1">
<path d="M1 4.42857L3.28571 6.71429L9 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Paid </span>
</td>
<td class="align-middle">
<div class="d-flex">
<div class="border px-1 py-1 text-center d-flex align-items-center border-radius-sm my-auto">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/mastercard.png" class="w-90 mx-auto" alt="mastercard">
</div>
<div class="ms-2">
<p class="text-dark text-sm mb-0">Mastercard 1234</p>
<p class="text-secondary text-sm mb-0">Expiry 06/2026</p>
</div>
</div>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2">
<div class="avatar avatar-sm rounded-circle bg-gray-100 me-2 my-2">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/small-logos/logo-jira.svg" class="w-80" alt="jira">
</div>
<div class="my-auto">
<h6 class="mb-0 text-sm">Jira</h6>
</div>
</div>
</td>
<td>
<p class="text-sm font-weight-normal mb-0">$3,400</p>
</td>
<td>
<span class="text-sm font-weight-normal">Mon 7:40pm</span>
</td>
<td>
<span class="badge badge-sm border border-warning text-warning bg-warning">
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="me-1ca">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z" clip-rule="evenodd"></path>
</svg> Pending </span>
</td>
<td class="align-middle">
<div class="d-flex">
<div class="border px-1 py-1 text-center d-flex align-items-center border-radius-sm my-auto">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/mastercard.png" class="w-90 mx-auto" alt="mastercard">
</div>
<div class="ms-2">
<p class="text-dark text-sm mb-0">Mastercard 1234</p>
<p class="text-secondary text-sm mb-0">Expiry 06/2026</p>
</div>
</div>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2">
<div class="avatar avatar-sm rounded-circle bg-gray-100 me-2 my-2">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/small-logos/logo-slack.svg" class="w-80" alt="slack">
</div>
<div class="my-auto">
<h6 class="mb-0 text-sm">Slack</h6>
</div>
</div>
</td>
<td>
<p class="text-sm font-weight-normal mb-0">$1,000</p>
</td>
<td>
<span class="text-sm font-weight-normal">Wed 5:00pm</span>
</td>
<td>
<span class="badge badge-sm border border-success text-success bg-success">
<svg width="9" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="me-1">
<path d="M1 4.42857L3.28571 6.71429L9 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Paid </span>
</td>
<td class="align-middle">
<div class="d-flex">
<div class="border px-1 py-1 text-center d-flex align-items-center border-radius-sm my-auto">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png" class="w-90 mx-auto" alt="visa">
</div>
<div class="ms-2">
<p class="text-dark text-sm mb-0">Visa 1234</p>
<p class="text-secondary text-sm mb-0">Expiry 06/2026</p>
</div>
</div>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2">
<div class="avatar avatar-sm rounded-circle bg-gray-100 me-2 my-2">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/small-logos/logo-webdev.svg" class="w-80" alt="webdev">
</div>
<div class="my-auto">
<h6 class="mb-0 text-sm">Webdev</h6>
</div>
</div>
</td>
<td>
<p class="text-sm font-weight-normal mb-0">$14,000</p>
</td>
<td>
<span class="text-sm font-weight-normal">Wed 3:30am</span>
</td>
<td>
<span class="badge badge-sm border border-success text-success bg-success">
<svg width="9" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="me-1">
<path d="M1 4.42857L3.28571 6.71429L9 1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Paid </span>
</td>
<td class="align-middle">
<div class="d-flex">
<div class="border px-1 py-1 text-center d-flex align-items-center border-radius-sm my-auto">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png" class="w-90 mx-auto" alt="visa">
</div>
<div class="ms-2">
<p class="text-dark text-sm mb-0">Visa 1234</p>
<p class="text-secondary text-sm mb-0">Expiry 06/2026</p>
</div>
</div>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2">
<div class="avatar avatar-sm rounded-circle bg-gray-100 me-2 my-2">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/small-logos/logo-xd.svg" class="w-80" alt="xd">
</div>
<div class="my-auto">
<h6 class="mb-0 text-sm">Adobe XD</h6>
</div>
</div>
</td>
<td>
<p class="text-sm font-weight-normal mb-0">$2,300</p>
</td>
<td>
<span class="text-sm font-weight-normal">Tue 3:30pm</span>
</td>
<td>
<span class="badge badge-sm border border-danger text-danger bg-danger">
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg> Canceled </span>
</td>
<td class="align-middle">
<div class="d-flex">
<div class="border px-1 py-1 text-center d-flex align-items-center border-radius-sm my-auto">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/mastercard.png" class="w-90 mx-auto" alt="mastercard">
</div>
<div class="ms-2">
<p class="text-dark text-sm mb-0">Mastercard 1234</p>
<p class="text-secondary text-sm mb-0">Expiry 06/2026</p>
</div>
</div>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="border-top py-3 px-3 d-flex align-items-center">
<button class="btn btn-sm btn-white d-sm-block d-none mb-0">Previous</button>
<nav aria-label="..." class="ms-auto">
<ul class="pagination pagination-light mb-0">
<li class="page-item active" aria-current="page">
<span class="page-link font-weight-bold">1</span>
</li>
<li class="page-item">
<a class="page-link border-0 font-weight-bold" href="javascript:;">2</a>
</li>
<li class="page-item">
<a class="page-link border-0 font-weight-bold d-sm-inline-flex d-none" href="javascript:;">3</a>
</li>
<li class="page-item">
<a class="page-link border-0 font-weight-bold" href="javascript:;">...</a>
</li>
<li class="page-item">
<a class="page-link border-0 font-weight-bold d-sm-inline-flex d-none" href="javascript:;">8</a>
</li>
<li class="page-item">
<a class="page-link border-0 font-weight-bold" href="javascript:;">9</a>
</li>
<li class="page-item">
<a class="page-link border-0 font-weight-bold" href="javascript:;">10</a>
</li>
</ul>
</nav>
<button class="btn btn-sm btn-white d-sm-block d-none mb-0 ms-auto">Next</button>
</div>
</div>
</div>Members Table
Members list
See information about all members
Page 1 of 10
<div class="card border shadow-xs mb-4">
<div class="card-header border-bottom pb-0">
<div class="d-sm-flex align-items-center">
<div>
<h6 class="font-weight-semibold text-lg mb-0">Members list</h6>
<p class="text-sm">See information about all members</p>
</div>
<div class="ms-auto d-flex">
<button type="button" class="btn btn-sm btn-white me-2"> View all </button>
<button type="button" class="btn btn-sm btn-dark btn-icon d-flex align-items-center me-2">
<span class="btn-inner--icon">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="d-block me-2">
<path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
</svg>
</span>
<span class="btn-inner--text">Add member</span>
</button>
</div>
</div>
</div>
<div class="card-body px-0 py-0">
<div class="border-bottom py-3 px-3 d-sm-flex align-items-center">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradiotable" id="btnradiotable1" autocomplete="off" checked="">
<label class="btn btn-white px-3 mb-0" for="btnradiotable1">All</label>
<input type="radio" class="btn-check" name="btnradiotable" id="btnradiotable2" autocomplete="off">
<label class="btn btn-white px-3 mb-0" for="btnradiotable2">Monitored</label>
<input type="radio" class="btn-check" name="btnradiotable" id="btnradiotable3" autocomplete="off">
<label class="btn btn-white px-3 mb-0" for="btnradiotable3">Unmonitored</label>
</div>
<div class="input-group w-sm-25 ms-auto">
<span class="input-group-text text-body">
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<div class="table-responsive p-0">
<table class="table align-items-center mb-0">
<thead class="bg-gray-100">
<tr>
<th class="text-secondary text-xs font-weight-semibold opacity-7">Member</th>
<th class="text-secondary text-xs font-weight-semibold opacity-7 ps-2">Function</th>
<th class="text-center text-secondary text-xs font-weight-semibold opacity-7">Status</th>
<th class="text-center text-secondary text-xs font-weight-semibold opacity-7">Employed</th>
<th class="text-secondary opacity-7"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex align-items-center">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg" class="avatar avatar-sm rounded-circle me-2" alt="user1">
</div>
<div class="d-flex flex-column justify-content-center ms-1">
<h6 class="mb-0 text-sm font-weight-semibold">John Michael</h6>
<p class="text-sm text-secondary mb-0">[email protected]</p>
</div>
</div>
</td>
<td>
<p class="text-sm text-dark font-weight-semibold mb-0">Manager</p>
<p class="text-sm text-secondary mb-0">Organization</p>
</td>
<td class="align-middle text-center text-sm">
<span class="badge badge-sm border border-success text-success bg-success">Online</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-sm font-weight-normal">23/04/18</span>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex align-items-center">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg" class="avatar avatar-sm rounded-circle me-2" alt="user2">
</div>
<div class="d-flex flex-column justify-content-center ms-1">
<h6 class="mb-0 text-sm font-weight-semibold">Alexa Liras</h6>
<p class="text-sm text-secondary mb-0">[email protected]</p>
</div>
</div>
</td>
<td>
<p class="text-sm text-dark font-weight-semibold mb-0">Programator</p>
<p class="text-sm text-secondary mb-0">Developer</p>
</td>
<td class="align-middle text-center text-sm">
<span class="badge badge-sm border border-secondary text-secondary bg-secondary">Offline</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-sm font-weight-normal">11/01/19</span>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex align-items-center">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg" class="avatar avatar-sm rounded-circle me-2" alt="user3">
</div>
<div class="d-flex flex-column justify-content-center ms-1">
<h6 class="mb-0 text-sm font-weight-semibold">Laurent Perrier</h6>
<p class="text-sm text-secondary mb-0">[email protected]</p>
</div>
</div>
</td>
<td>
<p class="text-sm text-dark font-weight-semibold mb-0">Executive</p>
<p class="text-sm text-secondary mb-0">Projects</p>
</td>
<td class="align-middle text-center text-sm">
<span class="badge badge-sm border border-success text-success bg-success">Online</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-sm font-weight-normal">19/09/17</span>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex align-items-center">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/marie.jpg" class="avatar avatar-sm rounded-circle me-2" alt="user4">
</div>
<div class="d-flex flex-column justify-content-center ms-1">
<h6 class="mb-0 text-sm font-weight-semibold">Michael Levi</h6>
<p class="text-sm text-secondary mb-0">[email protected]</p>
</div>
</div>
</td>
<td>
<p class="text-sm text-dark font-weight-semibold mb-0">Programator</p>
<p class="text-sm text-secondary mb-0">Developer</p>
</td>
<td class="align-middle text-center text-sm">
<span class="badge badge-sm border border-success text-success bg-success">Online</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-sm font-weight-normal">24/12/08</span>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex align-items-center">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg" class="avatar avatar-sm rounded-circle me-2" alt="user5">
</div>
<div class="d-flex flex-column justify-content-center ms-1">
<h6 class="mb-0 text-sm font-weight-semibold">Richard Gran</h6>
<p class="text-sm text-secondary mb-0">[email protected]</p>
</div>
</div>
</td>
<td>
<p class="text-sm text-dark font-weight-semibold mb-0">Manager</p>
<p class="text-sm text-secondary mb-0">Executive</p>
</td>
<td class="align-middle text-center text-sm">
<span class="badge badge-sm border border-secondary text-secondary bg-secondary">Offline</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-sm font-weight-normal">04/10/21</span>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex align-items-center">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-6.jpg" class="avatar avatar-sm rounded-circle me-2" alt="user6">
</div>
<div class="d-flex flex-column justify-content-center ms-1">
<h6 class="mb-0 text-sm font-weight-semibold">Miriam Eric</h6>
<p class="text-sm text-secondary mb-0">[email protected]</p>
</div>
</div>
</td>
<td>
<p class="text-sm text-dark font-weight-semibold mb-0">Programtor</p>
<p class="text-sm text-secondary mb-0">Developer</p>
</td>
<td class="align-middle text-center text-sm">
<span class="badge badge-sm border border-secondary text-secondary bg-secondary">Offline</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-sm font-weight-normal">14/09/20</span>
</td>
<td class="align-middle">
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-bs-toggle="tooltip" data-bs-title="Edit user">
<svg width="14" height="14" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2201 2.02495C10.8292 1.63482 10.196 1.63545 9.80585 2.02636C9.41572 2.41727 9.41635 3.05044 9.80726 3.44057L11.2201 2.02495ZM12.5572 6.18502C12.9481 6.57516 13.5813 6.57453 13.9714 6.18362C14.3615 5.79271 14.3609 5.15954 13.97 4.7694L12.5572 6.18502ZM11.6803 1.56839L12.3867 2.2762L12.3867 2.27619L11.6803 1.56839ZM14.4302 4.31284L15.1367 5.02065L15.1367 5.02064L14.4302 4.31284ZM3.72198 15V16C3.98686 16 4.24091 15.8949 4.42839 15.7078L3.72198 15ZM0.999756 15H-0.000244141C-0.000244141 15.5523 0.447471 16 0.999756 16L0.999756 15ZM0.999756 12.2279L0.293346 11.5201C0.105383 11.7077 -0.000244141 11.9624 -0.000244141 12.2279H0.999756ZM9.80726 3.44057L12.5572 6.18502L13.97 4.7694L11.2201 2.02495L9.80726 3.44057ZM12.3867 2.27619C12.7557 1.90794 13.3549 1.90794 13.7238 2.27619L15.1367 0.860593C13.9869 -0.286864 12.1236 -0.286864 10.9739 0.860593L12.3867 2.27619ZM13.7238 2.27619C14.0917 2.64337 14.0917 3.23787 13.7238 3.60504L15.1367 5.02064C16.2875 3.8721 16.2875 2.00913 15.1367 0.860593L13.7238 2.27619ZM13.7238 3.60504L3.01557 14.2922L4.42839 15.7078L15.1367 5.02065L13.7238 3.60504ZM3.72198 14H0.999756V16H3.72198V14ZM1.99976 15V12.2279H-0.000244141V15H1.99976ZM1.70617 12.9357L12.3867 2.2762L10.9739 0.86059L0.293346 11.5201L1.70617 12.9357Z" fill="#64748B"></path>
</svg>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="border-top py-3 px-3 d-flex align-items-center">
<p class="font-weight-semibold mb-0 text-dark text-sm">Page 1 of 10</p>
<div class="ms-auto">
<button class="btn btn-sm btn-white mb-0">Previous</button>
<button class="btn btn-sm btn-white mb-0">Next</button>
</div>
</div>
</div>
</div>