AdminLTE integrates over 60 popular third-party libraries to provide comprehensive functionality for modern admin interfaces. These plugins are pre-styled with AdminLTE's theme and ready to use with minimal configuration.
Complete data table solution with Bootstrap 4 integration and 14 specialized extensions.
// DataTables with AdminLTE Bootstrap 4 theme
$('#example').DataTable({
responsive: true,
lengthChange: false,
autoWidth: false,
buttons: ["copy", "csv", "excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)');Included Extensions:
Responsive charts and graphs with AdminLTE color schemes.
// Chart.js integration
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(60, 141, 188, 0.9)',
borderColor: 'rgba(60, 141, 188, 0.8)'
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});Event calendar with drag-and-drop functionality.
// FullCalendar initialization
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: '#f56954',
borderColor: '#f56954'
}
]
});// Other visualization plugins
interface VisualizationPlugins {
flot: 'jQuery plotting library for charts';
sparklines: 'Inline mini charts';
'jquery-knob': 'Circular progress indicators';
'jquery-mapael': 'Interactive vector maps';
uplot: 'High-performance plotting library';
}Enhanced select boxes with search, tagging, and Bootstrap 4 theme.
// Select2 with Bootstrap 4 theme
$('.select2').select2({
theme: 'bootstrap4',
placeholder: 'Select an option',
allowClear: true
});
// Select2 with AJAX data source
$('.select2-ajax').select2({
theme: 'bootstrap4',
ajax: {
url: '/api/search',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data.items
};
}
}
});// DateRangePicker
$('#daterange').daterangepicker({
startDate: moment().subtract(29, 'days'),
endDate: moment(),
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
});
// Tempus Dominus Bootstrap 4 date/time picker
$('#datetimepicker').datetimepicker({
format: 'L',
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down'
}
});// InputMask for formatted inputs
$('#phone').inputmask('(999) 999-9999');
$('#ssn').inputmask('999-99-9999');
// Ion Range Slider
$('#range').ionRangeSlider({
min: 0,
max: 1000,
from: 200,
to: 800,
type: 'double',
step: 1,
prefix: '$',
prettify: false,
hasGrid: true
});
// Bootstrap ColorPicker
$('#colorpicker').colorpicker({
format: 'hex'
});// Summernote WYSIWYG editor
$('#summernote').summernote({
height: 300,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'help']]
]
});
// CodeMirror for code editing
const editor = CodeMirror.fromTextArea(document.getElementById('code'), {
lineNumbers: true,
mode: 'javascript',
theme: 'default'
});// Dropzone.js for file uploads
Dropzone.options.myDropzone = {
paramName: 'file',
maxFilesize: 2,
acceptedFiles: '.jpeg,.jpg,.png,.gif',
addRemoveLinks: true,
dictRemoveFile: 'Remove file',
init: function() {
this.on('success', function(file, response) {
console.log('File uploaded successfully');
});
}
};
// bs-custom-file-input for Bootstrap file inputs
$(document).ready(function () {
bsCustomFileInput.init();
});// Ekko Lightbox for image galleries
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({
alwaysShowClose: true
});
});
// Filterizr for portfolio filtering
$('.filter-container').filterizr({
layout: 'sameSize',
selector: '.filter-item'
});// SweetAlert2 with Bootstrap 4 theme
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
}
});
// Toastr notifications
toastr.success('Data saved successfully!');
toastr.error('An error occurred while saving.');
toastr.info('Please review your changes.');
toastr.warning('This action cannot be undone.');// Pace.js progress indicator
Pace.options = {
ajax: true,
document: true,
eventLag: true
};
// OverlayScrollbars
$('body').overlayScrollbars({
className: 'os-theme-dark',
scrollbars: {
autoHide: 'leave'
}
});// Bootstrap Switch
$('[data-bootstrap-switch]').each(function(){
$(this).bootstrapSwitch('state', $(this).prop('checked'));
});
// Bootstrap Slider
$('#slider').bootstrapSlider({
min: 0,
max: 100,
value: 50,
orientation: 'horizontal',
selection: 'before',
tooltip: 'show'
});
// Dual Listbox
$('.duallistbox').bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false
});// JSGrid for data grids
$('#jsGrid').jsGrid({
height: '400px',
width: '100%',
sorting: true,
paging: true,
data: customers,
fields: [
{ name: 'Name', type: 'text', width: 150 },
{ name: 'Age', type: 'number', width: 50 },
{ name: 'Address', type: 'textarea', width: 200 },
{ name: 'Country', type: 'select', items: countries, valueField: 'Id', textField: 'Name' },
{ name: 'Married', type: 'checkbox', title: 'Is Married' },
{ type: 'control' }
]
});// BS Stepper for multi-step forms
const stepper = new Stepper(document.querySelector('.bs-stepper'));
// Navigate steps
stepper.next();
stepper.previous();
stepper.to(3);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE with Plugins</title>
<!-- AdminLTE CSS -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Content with plugin integration -->
<div class="content-wrapper">
<section class="content">
<div class="container-fluid">
<!-- DataTable -->
<div class="card">
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<!-- Table content -->
</table>
</div>
</div>
<!-- Chart -->
<div class="card">
<div class="card-body">
<canvas id="salesChart" style="height:230px; min-height:230px"></canvas>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<!-- Chart.js -->
<script src="plugins/chart.js/Chart.min.js"></script>
<script>
// Initialize DataTables
$('#example1').DataTable({
responsive: true,
lengthChange: false,
autoWidth: false
});
// Initialize Chart
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: chartData,
options: chartOptions
});
</script>
</body>
</html>All plugins are: