Table component - 2
COPY
<section class="p-2 p-md-5">
<div class="table-responsive">
<div class="row mb-2">
<div class="col-md-6">
<h4 class="fs-5">Employee list</h4>
</div>
<div class="col-md-6 text-end position-relative">
<i class="bi bi-search position-absolute sr-icon"></i>
<input type="search" class="form-control form-control-sm ps-5" placeholder="Search employee">
</div>
</div>
<table class="table table-hover">
<thead>
<tr class="tbl-head">
<th scope="col">Contact Info</th>
<th scope="col">Status</th>
<th scope="col">Position</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex py-1">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m1.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
<span class="badge bg-light
text-success border rounded-5">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
</td>
<td>
<span class="btn btn-sm btn-outline-success
rounded-5">Available</span>
</td>
<td>
<div class="fw-medium">Director of Product</div>
<div class="text-muted">Permanent</div>
</td>
<td>@NY</td>
</tr>
<tr>
<td>
<div class="d-flex py-1">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m2.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
<span class="badge bg-light
text-success border rounded-5">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
</td>
<td>
<span class="btn btn-sm btn-outline-success
rounded-5">Available</span>
</td>
<td>
<div class="fw-medium">Designer</div>
<div class="text-muted">Permanent</div>
</td>
<td>@NY</td>
</tr>
<tr>
<td>
<div class="d-flex py-1">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m3.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
<span class="badge bg-light
text-success border rounded-5">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
</td>
<td> <span class="btn btn-sm btn-outline-success
rounded-5">Available</span></td>
<td>
<div class="fw-medium">Lead Business</div>
<div class="text-muted">Permanent</div>
</td>
<td>@NY</td>
</tr>
<tr>
<td>
<div class="d-flex py-1">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m4.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
<span class="badge bg-light
text-success border rounded-5">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
</td>
<td> <span class="btn btn-sm btn-outline-success
rounded-5">Available</span></td>
<td>
<div class="fw-medium">Lead Business</div>
<div class="text-muted">Permanent</div>
</td>
<td>@NY</td>
</tr>
<tr>
<td>
<div class="d-flex py-1">
<img class="me-3 rounded-circle" width="40" src="/component/images/avatar/m5.jpg" alt="">
<div class="">
<div class="text-primary fw-medium">Michael
Richard
<span class="badge bg-light
text-success border rounded-5">New</span>
</div>
<div class="text-muted">richard@example.com</div>
</div>
</div>
</td>
<td> <span class="btn btn-sm btn-outline-success
rounded-5">Available</span></td>
<td>
<div class="fw-medium">Lead Business</div>
<div class="text-muted">Permanent</div>
</td>
<td>@NY</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #0035e4;
--bs-secondary: #000000;
--bs-white: #ffffff;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary);
}
.tbl-head {
background-color: #eff1f9 !important;
}
.table>:not(caption)>*>* {
padding: .5rem 0.5rem;
}
.sr-icon {
top: 6px;
left: 22px;
}
Table component - 1
COPY
<section class="p-2 p-md-5">
<div class="table-responsive">
<table id="infoTabl" class="table table-striped table-hover
pt-2">
<thead>
<tr class="tbl-head">
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex">
<img class="me-3 rounded-circle" width="28" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
Michael Richard <span class="ms-2 badge
bg-light text-success border
rounded-5">New</span>
</div>
</div>
</td>
<td class="align-middle">
Lead
</td>
<td class="align-middle">
<div class="text-success">Available</div>
</td>
<td>
richard@example.com
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<img class="me-3 rounded-circle" width="28" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
Richard Michael <span class="ms-2 badge
bg-light text-success border
rounded-5">New</span>
</div>
</div>
</td>
<td class="align-middle">
Designer
</td>
<td class="align-middle">
<div class="text-success">Available</div>
</td>
<td>
richard@example.com
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<img class="me-3 rounded-circle" width="28" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
Michael Richard <span class="ms-2 badge
bg-light text-success border
rounded-5">New</span>
</div>
</div>
</td>
<td class="align-middle">
Programmer
</td>
<td class="align-middle">
<div class="text-success">Not available</div>
</td>
<td>
richard@example.com
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<img class="me-3 rounded-circle" width="28" src="/component/images/avatar/m1.jpg" alt="">
<div class="mt-1">
Michael Richard <span class="ms-2 badge
bg-light text-success border
rounded-5">New</span>
</div>
</div>
</td>
<td class="align-middle">
Programmer
</td>
<td class="align-middle">
<div class="text-success">Available</div>
</td>
<td>
richard@example.com
</td>
</tr>
</tbody>
</table>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.js"></script>
<!-- Bootstrap JavaScript library -->
<script>
$(document).ready(function() {
$('#infoTabl').DataTable({
paging: true,
ordering: true,
info: true,
//order: [[3, 'desc']],
"oLanguage": {
"oPaginate": {
"sPrevious": "<",
"sNext": ">"
}
}
});
});
</script>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
@import url('https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.css');
:root {
--bs-primary: #0035e4;
--bs-secondary: #000000;
--bs-white: #ffffff;
--bs-primary-rgb: 59, 125, 221;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary);
}
.table {
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #495057;
--bs-table-striped-bg: #6fc2fa;
--bs-table-active-color: #495057;
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: #495057;
--bs-table-hover-bg: rgba(0, 0, 0, 0.038);
border-color: #dee2e6;
color: #495057;
margin-bottom: 1rem;
vertical-align: top;
width: 100%
}
.tbl-head {
background-color: #343746 !important;
color: #dee2e6;
}
table.dataTable.table-striped>tbody>tr.odd>* {
box-shadow: inset 0 0 0 9999px rgb(52 55 70 / 5%);
}
.table>:not(caption)>*>* {
padding: 0.5rem 0.5rem;
}
More coming soon