Tables
Component #1
Your team
Name | Status | Access | |
---|---|---|---|
Amanda Harveyamanda@example.com |
|||
Anne Richardanne@example.com |
|||
FH
Finch Hootfinch@example.com |
|||
David Harrison Newdavid@example.com |
|||
SD
Sean Deanbob@example.com |
|||
Sam Kartsam@example.com |
|||
Ella Marleyella@example.com |
|||
RD
Rachel Doe Newrachel@example.com |
|||
BH
Brian Halliganbrian@example.com |
<!-- Card -->
<div class="card">
<div class="card-header">
<h5 class="card-header-title">Your team</h5>
</div>
<!-- Table -->
<div class="table-responsive">
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
<thead class="thead-light">
<tr>
<th>Name</th>
<th>Status</th>
<th>Access</th>
<th style="width: 5%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Amanda Harvey <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user"></h6>
</a>
<small class="d-block">amanda@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive1" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive1" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin1" selected>Admin</option>
<option value="memberStatusLabelCanEdit1">Can edit</option>
<option value="memberStatusLabelCanView1">Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Locked">
<i class="bi-lock-fill"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img7.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Anne Richard</h6>
</a>
<small class="d-block">anne@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive2" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive2" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin2">Admin</option>
<option value="memberStatusLabelCanEdit2" selected>Can edit</option>
<option value="memberStatusLabelCanView2">Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="avatar avatar-sm avatar-warning avatar-circle">
<span class="avatar-initials">FH</span>
</span>
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Finch Hoot</h6>
</a>
<small class="d-block">finch@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive4" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive4" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin4">Admin</option>
<option value="memberStatusLabelCanEdit4">Can edit</option>
<option value="memberStatusLabelCanView4" selected>Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">David Harrison <span class="badge badge-soft-info badge-pill ms-1">New</span></h6>
</a>
<small class="d-block">david@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive3" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive3" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin3">Admin</option>
<option value="memberStatusLabelCanEdit3" selected>Can edit</option>
<option value="memberStatusLabelCanView3">Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="avatar avatar-sm avatar-danger avatar-circle">
<span class="avatar-initials">SD</span>
</span>
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Sean Dean</h6>
</a>
<small class="d-block">bob@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive5" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive5" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin5">Admin</option>
<option value="memberStatusLabelCanEdit5" selected>Can edit</option>
<option value="memberStatusLabelCanView5">Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img6.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Sam Kart <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user"></h6>
</a>
<small class="d-block">sam@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive6" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive6" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin6">Admin</option>
<option value="memberStatusLabelCanEdit6">Can edit</option>
<option value="memberStatusLabelCanView6" selected>Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Ella Marley</h6>
</a>
<small class="d-block">ella@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive7" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive7" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin7">Admin</option>
<option value="memberStatusLabelCanEdit7" selected>Can edit</option>
<option value="memberStatusLabelCanView7">Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="avatar avatar-sm avatar-dark avatar-circle">
<span class="avatar-initials">RD</span>
</span>
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Rachel Doe <span class="badge badge-soft-info badge-pill ms-1">New</span></h6>
</a>
<small class="d-block">rachel@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive8" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive8" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin8">Admin</option>
<option value="memberStatusLabelCanEdit8" selected>Can edit</option>
<option value="memberStatusLabelCanView8">Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="avatar avatar-sm avatar-primary avatar-circle">
<span class="avatar-initials">BH</span>
</span>
</div>
<div class="flex-grow-1 ms-3">
<a class="d-inline-block link-dark" href="#">
<h6 class="text-hover-primary mb-0">Brian Halligan</h6>
</a>
<small class="d-block">brian@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelActive9" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
<option value="memberStatusLabelInactive9" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-select form-select form-select-sm">
<option value="memberStatusLabelAdmin9">Admin</option>
<option value="memberStatusLabelCanEdit9">Can edit</option>
<option value="memberStatusLabelCanView9" selected>Can view</option>
</select>
<!-- End Select -->
</td>
<td>
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
<i class="bi-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
<!-- Footer -->
<div class="card-footer border-top">
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white" href="javascript:;">Cancel</a>
<a class="btn btn-primary" href="javascript:;">Save changes</a>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../assets/vendor/tom-select/dist/css/tom-select.bootstrap5.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/tom-select/dist/js/tom-select.complete.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select', {
render: {
'option': function(data, escape) {
return data.optionTemplate
},
'item': function(data, escape) {
return data.optionTemplate
}
}
})
})()
</script>