Scroller
Scroller is a virtual rendering plug-in for DataTables which allows large datasets to be drawn on screen very 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.
It is important to note that for Scroller to work correctly, all rows in the table must be the same height. Any differences in row height will cause the virtual calculations it uses to fail.
Features
Scroller provides the following features to enhance a DataTable:
- 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
As with all DataTables extensions it can of course have all language strings localised, has complete documentation, and has styling integration with all of the DataTables supported styling libraries (e.g. Bootstrap, Bulma, Fomantic UI and others).
Demo
The table below is an example of how Scroller can be used in a DataTable.
| ID | First name | Last name | ZIP / Post code | Country |
|---|
Specifically, note that as you scroll the table, only the part you see (plus a buffer region for smooth scrolling) is actually drawn - you might need to scroll quickly to see the data loading!
Check out the full set of examples to explore more of Scroller's capabilities.
Next
Continue with Scroller by learning: