Vertical Scroll#
The scrollY parameter is an interesting alternative to the pagination:
import itables
itables.init_notebook_mode()
df = itables.sample_dfs.get_countries()
itables.show(df, scrollY="350px", scrollCollapse=True, paging=False)
Scroller#
Added in version 2.8.1.
When scrollY is set, DataTables still renders every row of the current page into the
page (and with paging=False, every row of the table). That is fine for small tables,
but for large ones it is more efficient to render only the rows that are actually
visible. This is what the Scroller
extension does: it implements virtual scrolling, so only the rows in (or near) the
viewport exist in the DOM at any given time, while the scrollbar still represents the
full table.
To enable it, set scroller=True together with scrollY:
itables.show(df, scroller=True, scrollY="350px")
Loading ITables v2.8.1 from the init_notebook_mode cell...
(need help?)
|
Defer Render#
The deferRender option tells DataTables to only create the HTML for a row when it is
first displayed. It pairs naturally with Scroller and further reduces the initial
rendering cost for large tables:
itables.show(df, scroller=True, scrollY="350px", deferRender=True)
Loading ITables v2.8.1 from the init_notebook_mode cell...
(need help?)
|
Scroller options#
You can pass a dictionary to scroller to configure it further. For example,
loadingIndicator=True shows a message while rows are being rendered:
itables.show(df, scroller={"loadingIndicator": True}, scrollY="350px", deferRender=True)
Loading ITables v2.8.1 from the init_notebook_mode cell...
(need help?)
|
As always, you can set these options globally with:
itables.options.scroller = True
itables.options.deferRender = True
or by adding
scroller = true
deferRender = true
to your itables.toml configuration file.