Add the columnControl extension

Author: mwouts

apps/dash/3_update_table.py

@@ -39,7 +39,7 @@
                         html.H2("Controls"),
                         html.Label("Table Options:"),
                         dcc.Checklist(
-                            ["Select", "Buttons", "HTML"],
+                            ["Select", "Buttons", "HTML", "ColumnControl"],
                             ["Select"],
                             id="checklist",
                             style={"marginBottom": "20px"},
@@ -99,6 +99,13 @@ def update_table(
     if "Buttons" in checklist:
         kwargs["buttons"] = ["copyHtml5", "csvHtml5", "excelHtml5"]
 
+    if "HTML" in checklist:
+        kwargs["allow_html"] = True
+
+    if "ColumnControl" in checklist:
+        kwargs["columnControl"] = ["order", "colVisDropdown", "searchDropdown"]
+        kwargs["ordering"] = {"indicators": False, "handler": False}
+
     if selected_rows is not None:
         kwargs["selected_rows"] = selected_rows
 

docs/_toc.yml

@@ -24,6 +24,7 @@ parts:
       - file: options/paging
       - file: options/scroll_y
       - file: options/scroll_x
+      - file: options/column_control
       - file: options/footer
       - file: options/column_filters
       - file: options/order

docs/apps/notebook.md

@@ -48,7 +48,7 @@ In some contexts (Jupyter Book, Google Colab, etc...) you might
 prefer to load the libraries dynamically from the internet.
 To do so, add the argument `connected=True` when you
 execute `init_notebook_mode`. This will also make your notebook lighter by
-about [700kB](https://github.com/mwouts/itables/blob/main/tests/test_connected_notebook_is_small.py). Note that, in Google Colab, `connected=True` is the only working option.
+about [900kB](https://github.com/mwouts/itables/blob/main/tests/test_connected_notebook_is_small.py). Note that, in Google Colab, `connected=True` is the only working option.
 
 ## Show
 

docs/changelog.md

@@ -7,6 +7,9 @@ ITables ChangeLog
 **Fixed**
 - The offline mode now allows the init cell to be rendered after the table cells. It should work more reliably in VS Code ([#424](https://github.com/mwouts/itables/issues/424))
 
+**Added**
+- We have added the `columnControl` extension that was recently added to DataTables ([blog post](https://datatables.net/blog/2025/columncontrol)) ([#403](https://github.com/mwouts/itables/issues/403))
+
 
 2.4.5 (2025-08-23)
 ------------------

docs/options/column_control.md

@@ -0,0 +1,74 @@
+---
+jupytext:
+  formats: docs///md:myst,docs/py///py:percent
+  notebook_metadata_filter: -jupytext.text_representation.jupytext_version
+  text_representation:
+    extension: .md
+    format_name: myst
+    format_version: 0.13
+kernelspec:
+  display_name: itables
+  language: python
+  name: itables
+---
+
+# Column Control
+
+The [`columnControl`](https://datatables.net/extensions/columncontrol/config) 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](https://datatables.net/extensions/columncontrol/examples/) - see also Allan's [post](https://datatables.net/blog/2025/columncontrol) in which the extension was introduced.
+
+```{code-cell} ipython3
+:tags: [full-width]
+
+import itables
+
+itables.init_notebook_mode()
+
+df = itables.sample_dfs.get_countries(html=False)
+```
+
+## Getting started
+
+The `columnControl` option can take as value the list of controls that should be added to the table columns.
+
+```{code-cell} ipython3
+itables.show(
+    df,
+    columnControl=["order", "colVisDropdown", "searchDropdown"],
+    ordering={"indicators": False, "handler": False},
+)
+```
+
+```{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:
+
+```{code-cell} ipython3
+itables.show(
+    df,
+    columnControl=["order", ["orderAsc", "orderDesc", "search"]],
+    ordering={"indicators": False, "handler": False},
+)
+```
+
+## Controls and table footers
+
+The column controls can also be added to a table footer:
+
+```{code-cell} ipython3
+itables.show(
+    df,
+    columnControl=[
+        {"target": 0, "content": ["order"]},
+        {"target": "tfoot", "content": ["search"]},
+    ],
+    ordering={"indicators": False, "handler": False},
+)
+```

docs/options/column_filters.md

@@ -14,6 +14,11 @@ kernelspec:
 
 # Column Filters
 
+```{tip}
+Since v2.5.0, ITables include the [ColumnControl](column_control.md) extension, which provide the same functionality as the column filters,
+and much more!
+```
+
 Use `column_filters = "header"` or `"footer"` if you wish to display individual column filters
 (remove the global search box with a [`layout`](layout) modifier if desired).
 

docs/py/apps/notebook.py

@@ -46,7 +46,7 @@
 # prefer to load the libraries dynamically from the internet.
 # To do so, add the argument `connected=True` when you
 # execute `init_notebook_mode`. This will also make your notebook lighter by
-# about [700kB](https://github.com/mwouts/itables/blob/main/tests/test_connected_notebook_is_small.py). Note that, in Google Colab, `connected=True` is the only working option.
+# about [900kB](https://github.com/mwouts/itables/blob/main/tests/test_connected_notebook_is_small.py). Note that, in Google Colab, `connected=True` is the only working option.
 #
 # ## Show
 #

docs/py/options/column_control.py

@@ -0,0 +1,74 @@
+# ---
+# jupyter:
+#   jupytext:
+#     default_lexer: ipython3
+#     formats: docs///md:myst,docs/py///py:percent
+#     notebook_metadata_filter: -jupytext.text_representation.jupytext_version
+#     text_representation:
+#       extension: .py
+#       format_name: percent
+#       format_version: '1.3'
+#   kernelspec:
+#     display_name: itables
+#     language: python
+#     name: itables
+# ---
+
+# %% [markdown]
+# # Column Control
+#
+# The [`columnControl`](https://datatables.net/extensions/columncontrol/config) 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](https://datatables.net/extensions/columncontrol/examples/) - see also Allan's [post](https://datatables.net/blog/2025/columncontrol) in which the extension was introduced.
+
+# %% tags=["full-width"]
+import itables
+
+itables.init_notebook_mode()
+
+df = itables.sample_dfs.get_countries(html=False)
+
+# %% [markdown]
+# ## 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},
+)
+
+# %% [markdown]
+# ```{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},
+)
+
+# %% [markdown]
+# ## 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},
+)

docs/py/options/column_filters.py

@@ -17,6 +17,11 @@
 # %% [markdown]
 # # Column Filters
 #
+# ```{tip}
+# Since v2.5.0, ITables include the [ColumnControl](column_control.md) extension, which provide the same functionality as the column filters,
+# and much more!
+# ```
+#
 # Use `column_filters = "header"` or `"footer"` if you wish to display individual column filters
 # (remove the global search box with a [`layout`](layout) modifier if desired).
 

packages/dt_for_itables/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2.4.0 (2025-08-23)
+
+- We have added the ColumnControl extension of DataTables to the `dt_for_itables` package ([#403](https://github.com/mwouts/itables/issues/403))
+
+
 # 2.3.3 (2025-06-10)
 
 - We have made sure that the ordering icons on empty headers do not reappear when ordering a column