Column Control

Column Control#

The columnControl option lets you add column specific controls.

The examples should give you a quick sense of how to use columnControl. You are invited to consult the datatables documentation for many more column control examples - see also Allan’s post in which the extension was introduced.

import itables

itables.init_notebook_mode()

df = itables.sample_dfs.get_countries()

init_notebook_modetrusted

Getting started#

The columnControl option can take as value the list of controls that should be added to the table columns.

itables.show(
    df,
    columnControl=["order", "colVisDropdown", "searchDropdown"],
    ordering={"indicators": False, "handler": False},
)

^ⓘ	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)

Tip

When an ordering option is provided through the columnControl option, you probably want to deactivate the default ordering icons - that’s the purpose of ordering={"indicators": False, "handler": False} used in the example above.

Drop-downs#

Nested lists are mapped to dropdowns:

itables.show(
    df,
    columnControl=["order", ["orderAsc", "orderDesc", "search"]],
    ordering={"indicators": False, "handler": False},
)

^ⓘ	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)

Controls and table footers#

The column controls can also be added to a table footer:

itables.show(
    df,
    columnControl=[
        {"target": 0, "content": ["order"]},
        {"target": "tfoot", "content": ["search"]},
    ],
    ordering={"indicators": False, "handler": False},
)

^ⓘ	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 usual, you can make this the default by either setting itables.options.columnControl in your notebook or application, or by adding this to your itables.toml configuration file:

[[columnControl]]
target = 0
content = ["order"]
[[columnControl]]
target = "tfoot"
content = ["search"]

[ordering]
indicators = false
handler = false