Vertical Scroll

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)

init_notebook_modetrusted

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
AU	East Asia & Pacific	Australia	Canberra	149.129000	-35.282000
AT	Europe & Central Asia	Austria	Vienna	16.379800	48.220100
AZ	Europe & Central Asia	Azerbaijan	Baku	49.893200	40.383400
BI	Sub-Saharan Africa	Burundi	Bujumbura	29.363900	-3.378400
BE	Europe & Central Asia	Belgium	Brussels	4.367610	50.837100
BJ	Sub-Saharan Africa	Benin	Porto-Novo	2.632300	6.477900
BF	Sub-Saharan Africa	Burkina Faso	Ouagadougou	-1.533950	12.360500
BD	South Asia	Bangladesh	Dhaka	90.411300	23.705500
BG	Europe & Central Asia	Bulgaria	Sofia	23.323800	42.710500
BH	Middle East & North Africa	Bahrain	Manama	50.535400	26.192100
BS	Latin America & Caribbean	Bahamas, The	Nassau	-77.339000	25.066100
BA	Europe & Central Asia	Bosnia and Herzegovina	Sarajevo	18.421400	43.860700
BY	Europe & Central Asia	Belarus	Minsk	27.576600	53.967800
BZ	Latin America & Caribbean	Belize	Belmopan	-88.771300	17.253400
BM	North America	Bermuda	Hamilton	-64.706000	32.329300
BO	Latin America & Caribbean	Bolivia	La Paz	-66.193600	-13.990800
BR	Latin America & Caribbean	Brazil	Brasilia	-47.929200	-15.780100
BB	Latin America & Caribbean	Barbados	Bridgetown	-59.610500	13.093500
BN	East Asia & Pacific	Brunei Darussalam	Bandar Seri Begawan	114.946000	4.941990
BT	South Asia	Bhutan	Thimphu	89.617700	27.576800
BW	Sub-Saharan Africa	Botswana	Gaborone	25.920100	-24.654400
CF	Sub-Saharan Africa	Central African Republic	Bangui	21.640700	5.630560
CA	North America	Canada	Ottawa	-75.691900	45.421500
CH	Europe & Central Asia	Switzerland	Bern	7.448210	46.948000
CL	Latin America & Caribbean	Chile	Santiago	-70.647500	-33.475000
CN	East Asia & Pacific	China	Beijing	116.286000	40.049500
CI	Sub-Saharan Africa	Cote d'Ivoire	Yamoussoukro	-4.030500	5.332000
CM	Sub-Saharan Africa	Cameroon	Yaounde	11.517400	3.872100
CD	Sub-Saharan Africa	Congo, Dem. Rep.	Kinshasa	15.322200	-4.325000
CG	Sub-Saharan Africa	Congo, Rep.	Brazzaville	15.266200	-4.276700
CO	Latin America & Caribbean	Colombia	Bogota	-74.082000	4.609870
KM	Sub-Saharan Africa	Comoros	Moroni	43.241800	-11.698600
CV	Sub-Saharan Africa	Cabo Verde	Praia	-23.508700	14.921800
CR	Latin America & Caribbean	Costa Rica	San Jose	-84.008900	9.637010
CU	Latin America & Caribbean	Cuba	Havana	-82.366700	23.133300
KY	Latin America & Caribbean	Cayman Islands	George Town	-81.385700	19.302200
CY	Europe & Central Asia	Cyprus	Nicosia	33.373600	35.167600
CZ	Europe & Central Asia	Czech Republic	Prague	14.420500	50.087800
DE	Europe & Central Asia	Germany	Berlin	13.411500	52.523500
DJ	Middle East & North Africa	Djibouti	Djibouti	43.142500	11.580600
DM	Latin America & Caribbean	Dominica	Roseau	-61.390000	15.297600
DK	Europe & Central Asia	Denmark	Copenhagen	12.568100	55.676300
DO	Latin America & Caribbean	Dominican Republic	Santo Domingo	-69.890800	18.479000
DZ	Middle East & North Africa	Algeria	Algiers	3.050970	36.739700
EC	Latin America & Caribbean	Ecuador	Quito	-78.524300	-0.229498
EG	Middle East & North Africa	Egypt, Arab Rep.	Cairo	31.246100	30.098200
ER	Sub-Saharan Africa	Eritrea	Asmara	38.918300	15.331500
ES	Europe & Central Asia	Spain	Madrid	-3.703270	40.416700
EE	Europe & Central Asia	Estonia	Tallinn	24.758600	59.439200
ET	Sub-Saharan Africa	Ethiopia	Addis Ababa	38.746800	9.022740
FI	Europe & Central Asia	Finland	Helsinki	24.952500	60.160800
FJ	East Asia & Pacific	Fiji	Suva	178.399000	-18.114900
FR	Europe & Central Asia	France	Paris	2.350970	48.856600
FO	Europe & Central Asia	Faroe Islands	Torshavn	-6.911810	61.892600
FM	East Asia & Pacific	Micronesia, Fed. Sts.	Palikir	158.185000	6.917710
GA	Sub-Saharan Africa	Gabon	Libreville	9.451620	0.388320
GB	Europe & Central Asia	United Kingdom	London	-0.126236	51.500200
GE	Europe & Central Asia	Georgia	Tbilisi	44.793000	41.710000
GH	Sub-Saharan Africa	Ghana	Accra	-0.207950	5.570450
GN	Sub-Saharan Africa	Guinea	Conakry	-13.700000	9.516670
GM	Sub-Saharan Africa	Gambia, The	Banjul	-16.588500	13.449500
GW	Sub-Saharan Africa	Guinea-Bissau	Bissau	-15.180400	11.803700
GQ	Sub-Saharan Africa	Equatorial Guinea	Malabo	8.774100	3.752300
GR	Europe & Central Asia	Greece	Athens	23.716600	37.979200
GD	Latin America & Caribbean	Grenada	Saint George's	-61.744900	12.065300
GL	Europe & Central Asia	Greenland	Nuuk	-51.721400	64.183600
GT	Latin America & Caribbean	Guatemala	Guatemala City	-90.532800	14.624800
GU	East Asia & Pacific	Guam	Agana	144.794000	13.444300
GY	Latin America & Caribbean	Guyana	Georgetown	-58.154800	6.804610
HN	Latin America & Caribbean	Honduras	Tegucigalpa	-87.466700	15.133300
HR	Europe & Central Asia	Croatia	Zagreb	15.961400	45.806900
HT	Latin America & Caribbean	Haiti	Port-au-Prince	-72.328800	18.539200
HU	Europe & Central Asia	Hungary	Budapest	19.040800	47.498400
ID	East Asia & Pacific	Indonesia	Jakarta	106.830000	-6.197520
IM	Europe & Central Asia	Isle of Man	Douglas	-4.479280	54.150900
IN	South Asia	India	New Delhi	77.225000	28.635300
IE	Europe & Central Asia	Ireland	Dublin	-6.267490	53.344100
IR	Middle East & North Africa	Iran, Islamic Rep.	Tehran	51.444700	35.687800
IQ	Middle East & North Africa	Iraq	Baghdad	44.394000	33.330200
IS	Europe & Central Asia	Iceland	Reykjavik	-21.895200	64.135300
IT	Europe & Central Asia	Italy	Rome	12.482300	41.895500
JM	Latin America & Caribbean	Jamaica	Kingston	-76.792000	17.992700
JO	Middle East & North Africa	Jordan	Amman	35.926300	31.949700
JP	East Asia & Pacific	Japan	Tokyo	139.770000	35.670000
KZ	Europe & Central Asia	Kazakhstan	Astana	71.438200	51.187900
KE	Sub-Saharan Africa	Kenya	Nairobi	36.812600	-1.279750
KG	Europe & Central Asia	Kyrgyz Republic	Bishkek	74.605700	42.885100
KH	East Asia & Pacific	Cambodia	Phnom Penh	104.874000	11.555600
KI	East Asia & Pacific	Kiribati	Tarawa	172.979000	1.329050
KN	Latin America & Caribbean	St. Kitts and Nevis	Basseterre	-62.730900	17.300000
KR	East Asia & Pacific	Korea, Rep.	Seoul	126.957000	37.532300
KW	Middle East & North Africa	Kuwait	Kuwait City	47.982400	29.372100
LA	East Asia & Pacific	Lao PDR	Vientiane	102.177000	18.582600
LB	Middle East & North Africa	Lebanon	Beirut	35.513400	33.887200
LR	Sub-Saharan Africa	Liberia	Monrovia	-10.795700	6.300390
LY	Middle East & North Africa	Libya	Tripoli	13.107200	32.857800
LC	Latin America & Caribbean	St. Lucia	Castries	-60.983200	14.000000
LI	Europe & Central Asia	Liechtenstein	Vaduz	9.521480	47.141100
LK	South Asia	Sri Lanka	Colombo	79.852800	6.921480
LS	Sub-Saharan Africa	Lesotho	Maseru	27.716700	-29.520800
LT	Europe & Central Asia	Lithuania	Vilnius	25.279900	54.689600
LU	Europe & Central Asia	Luxembourg	Luxembourg	6.129600	49.610000
LV	Europe & Central Asia	Latvia	Riga	24.104800	56.946500
MA	Middle East & North Africa	Morocco	Rabat	-6.870400	33.990500
MC	Europe & Central Asia	Monaco	Monaco	7.418910	43.732500
MD	Europe & Central Asia	Moldova	Chisinau	28.849700	47.016700
MG	Sub-Saharan Africa	Madagascar	Antananarivo	45.716700	-20.466700
MV	South Asia	Maldives	Male	73.510900	4.174200
MX	Latin America & Caribbean	Mexico	Mexico City	-99.127600	19.427000
MH	East Asia & Pacific	Marshall Islands	Majuro	171.135000	7.110460
MK	Europe & Central Asia	North Macedonia	Skopje	21.436100	42.002400
ML	Sub-Saharan Africa	Mali	Bamako	-7.500340	13.566700
MT	Middle East & North Africa	Malta	Valletta	14.518900	35.904200
MM	East Asia & Pacific	Myanmar	Naypyidaw	95.956200	21.914000
ME	Europe & Central Asia	Montenegro	Podgorica	19.259500	42.460200
MN	East Asia & Pacific	Mongolia	Ulaanbaatar	106.937000	47.912900
MP	East Asia & Pacific	Northern Mariana Islands	Saipan	145.765000	15.193500
MZ	Sub-Saharan Africa	Mozambique	Maputo	32.571300	-25.966400
MR	Sub-Saharan Africa	Mauritania	Nouakchott	-15.982400	18.236700
MU	Sub-Saharan Africa	Mauritius	Port Louis	57.497700	-20.160500
MW	Sub-Saharan Africa	Malawi	Lilongwe	33.770300	-13.989900
MY	East Asia & Pacific	Malaysia	Kuala Lumpur	101.684000	3.124330
NA	Sub-Saharan Africa	Namibia	Windhoek	17.093100	-22.564800
NC	East Asia & Pacific	New Caledonia	Noum'ea	166.464000	-22.267700
NE	Sub-Saharan Africa	Niger	Niamey	2.107300	13.514000
NG	Sub-Saharan Africa	Nigeria	Abuja	7.489060	9.058040
NI	Latin America & Caribbean	Nicaragua	Managua	-86.273400	12.147500
NL	Europe & Central Asia	Netherlands	Amsterdam	4.890950	52.373800
NO	Europe & Central Asia	Norway	Oslo	10.738700	59.913800
NP	South Asia	Nepal	Kathmandu	85.315700	27.693900
NR	East Asia & Pacific	Nauru	Yaren District	166.920867	-0.547700
NZ	East Asia & Pacific	New Zealand	Wellington	174.776000	-41.286500
OM	Middle East & North Africa	Oman	Muscat	58.587400	23.610500
PK	South Asia	Pakistan	Islamabad	72.800000	30.516700
PA	Latin America & Caribbean	Panama	Panama City	-79.518800	8.994270
PE	Latin America & Caribbean	Peru	Lima	-77.046500	-12.093100
PH	East Asia & Pacific	Philippines	Manila	121.035000	14.551500
PW	East Asia & Pacific	Palau	Koror	134.479000	7.341940
PG	East Asia & Pacific	Papua New Guinea	Port Moresby	147.194000	-9.473570
PL	Europe & Central Asia	Poland	Warsaw	21.020000	52.260000
PR	Latin America & Caribbean	Puerto Rico	San Juan	-66.000000	18.230000
KP	East Asia & Pacific	Korea, Dem. People's Rep.	Pyongyang	125.754000	39.031900
PT	Europe & Central Asia	Portugal	Lisbon	-9.135520	38.707200
PY	Latin America & Caribbean	Paraguay	Asuncion	-57.636200	-25.300500
PF	East Asia & Pacific	French Polynesia	Papeete	-149.570000	-17.535000
QA	Middle East & North Africa	Qatar	Doha	51.508200	25.294800
RO	Europe & Central Asia	Romania	Bucharest	26.097900	44.447900
RU	Europe & Central Asia	Russian Federation	Moscow	37.617600	55.755800
RW	Sub-Saharan Africa	Rwanda	Kigali	30.058700	-1.953250
SA	Middle East & North Africa	Saudi Arabia	Riyadh	46.697700	24.674800
SD	Sub-Saharan Africa	Sudan	Khartoum	32.536300	15.593200
SN	Sub-Saharan Africa	Senegal	Dakar	-17.473400	14.724700
SG	East Asia & Pacific	Singapore	Singapore	103.850000	1.289410
SB	East Asia & Pacific	Solomon Islands	Honiara	159.949000	-9.426760
SL	Sub-Saharan Africa	Sierra Leone	Freetown	-13.213400	8.482100
SV	Latin America & Caribbean	El Salvador	San Salvador	-89.207300	13.703400
SM	Europe & Central Asia	San Marino	San Marino	12.448600	43.932200
SO	Sub-Saharan Africa	Somalia	Mogadishu	45.325400	2.075150
RS	Europe & Central Asia	Serbia	Belgrade	20.465600	44.802400
SS	Sub-Saharan Africa	South Sudan	Juba	31.600000	4.850000
ST	Sub-Saharan Africa	Sao Tome and Principe	Sao Tome	6.607100	0.206180
SR	Latin America & Caribbean	Suriname	Paramaribo	-55.167900	5.823200
SK	Europe & Central Asia	Slovak Republic	Bratislava	17.107300	48.148400
SI	Europe & Central Asia	Slovenia	Ljubljana	14.504400	46.054600
SE	Europe & Central Asia	Sweden	Stockholm	18.064500	59.332700
SZ	Sub-Saharan Africa	Eswatini	Mbabane	31.465900	-26.522500
SC	Sub-Saharan Africa	Seychelles	Victoria	55.446600	-4.630900
SY	Middle East & North Africa	Syrian Arab Republic	Damascus	36.311900	33.514600
TC	Latin America & Caribbean	Turks and Caicos Islands	Grand Turk	-71.141389	21.460278
TD	Sub-Saharan Africa	Chad	N'Djamena	15.044500	12.104800
TG	Sub-Saharan Africa	Togo	Lome	1.225500	6.122800
TH	East Asia & Pacific	Thailand	Bangkok	100.521000	13.730800
TJ	Europe & Central Asia	Tajikistan	Dushanbe	68.786400	38.587800
TM	Europe & Central Asia	Turkmenistan	Ashgabat	58.379400	37.950900
TL	East Asia & Pacific	Timor-Leste	Dili	125.567000	-8.566670
TO	East Asia & Pacific	Tonga	Nuku'alofa	-175.216000	-21.136000
TT	Latin America & Caribbean	Trinidad and Tobago	Port-of-Spain	-61.478900	10.659600
TN	Middle East & North Africa	Tunisia	Tunis	10.210000	36.789900
TR	Europe & Central Asia	Turkey	Ankara	32.360600	39.715300
TV	East Asia & Pacific	Tuvalu	Funafuti	179.089567	-8.631488
TZ	Sub-Saharan Africa	Tanzania	Dodoma	35.738200	-6.174860
UG	Sub-Saharan Africa	Uganda	Kampala	32.572900	0.314269
UA	Europe & Central Asia	Ukraine	Kiev	30.503800	50.453600
UY	Latin America & Caribbean	Uruguay	Montevideo	-56.067500	-34.894100
US	North America	United States	Washington D.C.	-77.032000	38.889500
UZ	Europe & Central Asia	Uzbekistan	Tashkent	69.269000	41.305200
VC	Latin America & Caribbean	St. Vincent and the Grenadines	Kingstown	-61.265300	13.203500
VE	Latin America & Caribbean	Venezuela, RB	Caracas	-69.837100	9.081650
VG	Latin America & Caribbean	British Virgin Islands	Road Town	-64.623056	18.431389
VI	Latin America & Caribbean	Virgin Islands (U.S.)	Charlotte Amalie	-64.896300	18.335800
VN	East Asia & Pacific	Vietnam	Hanoi	105.825000	21.006900
VU	East Asia & Pacific	Vanuatu	Port-Vila	168.321000	-17.740400
WS	East Asia & Pacific	Samoa	Apia	-171.752000	-13.831400
XK	Europe & Central Asia	Kosovo	Pristina	20.926000	42.565000
YE	Middle East & North Africa	Yemen, Rep.	Sana'a	44.207500	15.352000
ZA	Sub-Saharan Africa	South Africa	Pretoria	28.187100	-25.746000
ZM	Sub-Saharan Africa	Zambia	Lusaka	28.293700	-15.398200
ZW	Sub-Saharan Africa	Zimbabwe	Harare	31.067200	-17.831200

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")

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
(198 more rows not shown)

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)

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
(198 more rows not shown)

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)

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
(198 more rows not shown)

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.

Vertical Scroll

Contents

Vertical Scroll#

Scroller#

Defer Render#

Scroller options#