Hello there!
Are you looking for an efficient way to rearrange columns in your table UI? Our team has developed a table column reorder UI using Bootstrap that simplifies the process and enhances the user experience.
Our Bootstrap-based column reorder UI is highly responsive and works seamlessly across different devices and screen sizes. It is also highly customizable, allowing you to style it to match your branding and design preferences.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table column reorder UI using bootstrap</title>
<!-- bootstrap 5 stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css"
integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fontawesome 6 stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.border-light-subtle {
border-color: #e9ecef !important;
}
.form-check-input:checked {
background-color: var(--bs-green) !important;
border-color: var(--bs-green) !important;
}
.list-group-item{
cursor: grab;
}
.list-group-item:active{
cursor: grabbing;
}
</style>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="modal position-static d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content rounded shadow-sm">
<div class="modal-header border-0">
<h5 class="modal-title">Toggle Columns</h5>
<a class="h5 text-muted" data-bs-dismiss="modal" aria-label="Close"><i
class="fa-solid fa-xmark"></i></a>
</div>
<div class="modal-body">
<ul class="list-group border-0" id="sortable">
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Name
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Role
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Email
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Phonenumber
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
City
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
State
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Zip code
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Country
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
<li class="list-group-item border-0 border-bottom border-light-subtle">
<div class="d-flex justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked
id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Status
</label>
</div>
<div>
<span><i class="fa-solid fa-grip text-muted"></i></span>
</div>
</div>
</li>
</ul>
</div>
<div class="modal-footer border-0 d-block">
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-secondary">Restore Defaults</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
(function () {
$("#sortable").sortable({
axis: 'y',
update: function (event, ui) {
var index = ui.item.index();
var start_pos = $(ui.item).find('input[name="order"]').val();
$('#sortable li:nth-child(' + (index + 1) + ')').find('input[name="order"]').val(index + 1);
if (start_pos <= index) {
for (var i = index; i > 0; i--) {
$('#sortable li:nth-child(' + i + ')').find('input[name="order"]').val(i);
}
} else {
for (var x = index + 2; x <= $("#sortable li").length; x++) {
$('#sortable li:nth-child(' + x + ')').find('input[name="order"]').val(x);
}
}
}
});
})();
</script>
</body>
</html>
