Managed Tables - Scroller header small text goes here...

Key features include:
  • Speed! The aim of Scroller for DataTables is to make rendering large data sets fast
  • Full compatibility with DataTables' deferred rendering for maximum speed
  • Display millions of rows in a scrollable table
  • Integration with state saving in DataTables (scrolling position is saved)
  • Easy to use

View Official Website

DataTable - Scroller

Scroller is a virtual rendering plug-in for DataTables which allows large datasets to be drawn on screen every quickly. What the virtual rendering means is that only the visible portion of the table (and a bit to either side to make the scrolling smooth) is drawn, while the scrolling container gives the visual impression that the whole table is visible. This is done by making use of the pagination abilities of DataTables and moving the table around in the scrolling container DataTables adds to the page. The scrolling container is forced to the height it would be for the full table display using an extra element.
ID First name Last name ZIP / Post code Country
<!-- required files -->
<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-scroller-bs5/css/scroller.bootstrap5.min.css" rel="stylesheet" />
<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-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="../assets/plugins/datatables.net-scroller-bs5/js/scroller.bootstrap5.min.js"></script>

<!-- html -->
<table id="data-table-scroller" class="table table-striped table-bordered align-middle">
      <th>First name</th>
      <th>Last name</th>
      <th>ZIP / Post code</th>

<!-- script -->
    ajax:           "../assets/js/demo/json/scroller_demo.json",
    deferRender:    true,
    scrollY:        300,
    scrollCollapse: true,
    scroller:       true,
    responsive: true
App Settings
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
Header Fixed
Header Inverse
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage