Tables
Component #1
Your team
| Name | Status | Access | |
|---|---|---|---|
Amanda Harvey
amanda@example.com
|
|||
Anne Richardanne@example.com |
|||
|
FH
Finch Hootfinch@example.com |
|||
David Harrison Newdavid@example.com |
|||
|
SD
Sean Deanbob@example.com |
|||
Sam Kart
sam@example.com
|
|||
Ella Marleyella@example.com |
|||
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">
<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="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<a class="d-inline-block text-dark" href="#">
<h6 class="text-hover-primary mb-0">Amanda Harvey <img class="avatar avatar-xss ml-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Verified user"></h6>
</a>
<small class="d-block">amanda@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive1" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Locked">
<i class="fas fa-lock"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img2.jpg" alt="Image Description">
<div class="media-body">
<a class="d-inline-block text-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-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive2" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<span class="avatar avatar-sm avatar-dark avatar-circle mr-3">
<span class="avatar-initials">FH</span>
</span>
<div class="media-body">
<a class="d-inline-block text-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-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive4" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<div class="media-body">
<a class="d-inline-block text-dark" href="#">
<h6 class="text-hover-primary mb-0">David Harrison <span class="badge badge-soft-info badge-pill ml-1">New</span></h6>
</a>
<small class="d-block">david@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive3" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<span class="avatar avatar-sm avatar-danger avatar-circle mr-3">
<span class="avatar-initials">SD</span>
</span>
<div class="media-body">
<a class="d-inline-block text-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-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive5" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img9.jpg" alt="Image Description">
<div class="media-body">
<a class="d-inline-block text-dark" href="#">
<h6 class="text-hover-primary mb-0">Sam Kart <img class="avatar avatar-xss ml-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Verified user"></h6>
</a>
<small class="d-block">sam@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive6" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img10.jpg" alt="Image Description">
<div class="media-body">
<a class="d-inline-block text-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-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive7" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/100x100/img11.jpg" alt="Image Description">
<div class="media-body">
<a class="d-inline-block text-dark" href="#">
<h6 class="text-hover-primary mb-0">Rachel Doe <span class="badge badge-soft-info badge-pill ml-1">New</span></h6>
</a>
<small class="d-block">rachel@example.com</small>
</div>
</div>
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive8" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<span class="avatar avatar-sm avatar-primary avatar-circle mr-3">
<span class="avatar-initials">BH</span>
</span>
<div class="media-body">
<a class="d-inline-block text-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-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="memberStatusLabelActive9" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success mr-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 mr-2"></span> Inactive</span>'>Inactive</option>
</select>
<!-- End Select -->
</td>
<td>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<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-toggle="tooltip" data-placement="top" title="Remove member">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
<!-- Footer -->
<div class="card-footer d-flex justify-content-end">
<a class="btn btn-white" href="javascript:;">Cancel</a>
<span class="mx-2"></span>
<a class="btn btn-primary" href="javascript:;">Save Changes</a>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="./node_modules/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<script src="./assets/js/hs.select2.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF SELECT2
// =======================================================
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>
Component #2
Order history
| Reference | Status | Amount | Updated | Invoice | |
|---|---|---|---|---|---|
| #3682303 | Pending | $264 | 22/04/2020 | Quick view | |
| #2333234 | Successful | $264 | 22/04/2019 | Quick view | |
| #9834283 | Successful | $264 | 22/04/2018 | Quick view |
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">Order history</h5>
</div>
<!-- End Header -->
<!-- Table -->
<div class="table-responsive">
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Reference</th>
<th>Status</th>
<th>Amount</th>
<th>Updated</th>
<th>Invoice</th>
<th style="width: 5%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">#3682303</a></td>
<td><span class="badge badge-soft-warning">Pending</span></td>
<td>$264</td>
<td>22/04/2020</td>
<td><a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a></td>
<td><a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#invoiceReceiptModal"><i class="fas fa-eye mr-1"></i> Quick view</a></td>
</tr>
<tr>
<td><a href="#">#2333234</a></td>
<td><span class="badge badge-soft-success">Successful</span></td>
<td>$264</td>
<td>22/04/2019</td>
<td><a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a></td>
<td><a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#invoiceReceiptModal"><i class="fas fa-eye mr-1"></i> Quick view</a></td>
</tr>
<tr>
<td><a href="#">#9834283</a></td>
<td><span class="badge badge-soft-success">Successful</span></td>
<td>$264</td>
<td>22/04/2018</td>
<td><a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a></td>
<td><a class="btn btn-xs btn-white" href="javascript:;" data-toggle="modal" data-target="#invoiceReceiptModal"><i class="fas fa-eye mr-1"></i> Quick view</a></td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
<!-- Invoice Modal -->
<div class="modal fade" id="invoiceReceiptModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-top-cover bg-primary text-center">
<figure class="position-absolute right-0 bottom-0 left-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
</svg>
</figure>
<div class="modal-close">
<button type="button" class="btn btn-icon btn-sm btn-ghost-light" data-dismiss="modal" aria-label="Close">
<svg width="16" height="16" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
</div>
<!-- End Header -->
<div class="modal-top-cover-avatar">
<img class="avatar avatar-lg avatar-circle avatar-border-lg avatar-centered shadow-soft" src="../assets/svg/brands/front.svg" alt="Logo">
</div>
<!-- Body -->
<div class="modal-body pt-3 pb-sm-5 px-sm-5">
<div class="text-center mb-5">
<h3 class="mb-1">Invoice from Front</h3>
<span class="d-block">Invoice #3682303</span>
</div>
<div class="row mb-6">
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap">Amount paid:</small>
<span class="text-dark">$316.8</span>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap">Date paid:</small>
<span class="text-dark">April 22, 2020</span>
</div>
<div class="col-md-4">
<small class="text-cap">Payment method:</small>
<div class="d-flex align-items-center">
<img class="avatar avatar-xss mr-2" src="../assets/svg/brands/mastercard.svg" alt="Image Description">
<span class="text-dark">•••• 4242</span>
</div>
</div>
</div>
<small class="text-cap mb-2">Summary</small>
<ul class="list-group mb-4">
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Payment to Front</span>
<span>$264.00</span>
</div>
</li>
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Tax fee</span>
<span>$52.8</span>
</div>
</li>
<li class="list-group-item list-group-item-light text-dark">
<div class="d-flex justify-content-between align-items-center">
<strong>Amount paid</strong>
<strong>$316.8</strong>
</div>
</li>
</ul>
<div class="d-flex justify-content-end">
<a class="btn btn-xs btn-white" href="#"><i class="fas fa-file-download mr-1"></i> PDF</a>
<span class="mx-1"></span>
<a class="btn btn-xs btn-white" href="#"><i class="fas fa-print mr-1"></i> Print Details</a>
</div>
<hr class="my-5">
<p class="modal-footer-text">If you have any questions, please contact us at <a href="mailto:example@gmail.com">example@gmail.com</a> or call at <a class="text-nowrap" href="#">+1 898 34-5492</a></p>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Invoice Modal -->