{ "cells": [ { "cell_type": "markdown", "id": "5e20ff04", "metadata": {}, "source": [ "# Column Visibility\n", "\n", "The [column visibility](https://datatables.net/extensions/buttons/examples/column_visibility/index.html) buttons of DataTables let you select which columns are visible." ] }, { "cell_type": "code", "execution_count": 1, "id": "8428f3e9", "metadata": { "tags": [ "full-width" ] }, "outputs": [ { "data": { "text/html": [ "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", "\n", "\n", "
\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "\n", " \n", "
\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", " Loading ITables v2.4.0rc1 from the init_notebook_mode cell...\n", " (need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import itables\n", "\n", "itables.init_notebook_mode()\n", "\n", "df = itables.sample_dfs.get_countries(html=False)\n", "\n", "itables.show(\n", " # column visibility works best with a flat header\n", " df.reset_index(),\n", " buttons=[\"columnsToggle\"],\n", ")" ] }, { "cell_type": "markdown", "id": "285e62ee", "metadata": {}, "source": [ "```{tip}\n", "The column visibility button is available under many forms.\n", "\n", "Check-out `buttons=[\"colvis\"]` for a [single](https://datatables.net/extensions/buttons/examples/column_visibility/simple.html) button.\n", "\n", "Extend the `colvis` button with the [collection layout](https://datatables.net/extensions/buttons/examples/column_visibility/layout.html).\n", "\n", "As always, when porting examples from DataTables to ITables, you will\n", "have to convert the JavaScript notation (left) to Python (right) as in the below:\n", "::::{grid}\n", "\n", ":::{grid-item}\n", ":outline:\n", ":columns: 6\n", "~~~javascript\n", "buttons: [\n", " {\n", " extend: 'colvis',\n", " collectionLayout: 'fixed columns',\n", " popoverTitle: 'Column visibility control'\n", " }\n", "]\n", "~~~\n", ":::\n", ":::{grid-item}\n", ":outline:\n", ":columns: 6\n", "~~~python\n", "buttons = [\n", " {\n", " \"extend\": \"colvis\",\n", " \"collectionLayout\": \"fixed columns\",\n", " \"popoverTitle\": \"Column visibility control\"\n", " }\n", "]\n", "~~~\n", ":::\n", "\n", "::::\n", "\n", "```" ] } ], "metadata": { "jupytext": { "formats": "md:myst", "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" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.11.12" }, "source_map": [ 13, 19, 33 ] }, "nbformat": 4, "nbformat_minor": 5 }