Table Plugins page header description goes here...

Datatable

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. Please read the official documentation for the full list of options.

<!-- required css -->
<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" />

<!-- required js -->
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>

<!-- html -->
<table id="datatableDefault" class="table text-nowrap w-100">
  ...
</table>

<!-- script -->
<script>
  $('#datatableDefault').DataTable({
    dom: "<'row mb-3'<'col-sm-4'l><'col-sm-8 text-end'<'d-flex justify-content-end'fB>>>t<'d-flex align-items-center'<'me-auto'i><'mb-0'p>>",
    lengthMenu: [ 10, 20, 30, 40, 50 ],
    responsive: true,
    buttons: [ 
      { extend: 'print', className: 'btn btn-default' },
      { extend: 'csv', className: 'btn btn-default' }
    ]
  });
</script>

Basic Table

Bootstrap table is an extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation). Please read the official documentation for the full list of options.

Item ID
Item Name
Item Price
Loading, please wait
Item ID
Item Name
Item Price
1Item 1$1
2Item 2$2
3Item 3$3
4Item 4$4
5Item 5$5
6Item 6$6
7Item 7$7
8Item 8$8
9Item 9$9
10Item 10$10
Showing 1 to 10 of 20 rows
1025
rows per page
<!-- required css / js -->
<link href="/assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-table/dist/bootstrap-table.min.js"></script>

<!-- html -->
<table class="table" data-toggle="table"
  data-sort-class="table-active"
  data-sortable="true"
  data-search="true"
  data-pagination="true"
  data-show-refresh="true"
  data-show-columns="true"
  data-show-fullscreen="true"
  data-height="460">
...
</table>
Theme Color
 
 
 
 
 
 
 
 
 
 
 
 
Theme Cover