{ "cells": [ { "cell_type": "markdown", "id": "76b9a628", "metadata": {}, "source": [ "# Column Definitions\n", "\n", "The [`columnDefs.width`](https://datatables.net/reference/option/columns.width) argument let you adjust the column widths.\n", "\n", "Note that the default value of `style`, or of `autoWidth` (defaults to `True`), might override custom column widths,\n", "so you might have to change their values as in the examples below.\n", "\n", "You can set a fixed width for all the columns with `\"targets\": \"_all\"`:" ] }, { "cell_type": "code", "execution_count": 1, "id": "d60e1244", "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", " df,\n", " columnDefs=[{\"width\": \"120px\", \"targets\": \"_all\"}],\n", " style=\"width:1200px\",\n", " autoWidth=False,\n", ")" ] }, { "cell_type": "markdown", "id": "96d0f01f", "metadata": {}, "source": [ "You can also adjust the width of selected columns only:" ] }, { "cell_type": "code", "execution_count": 2, "id": "a2dc85bd", "metadata": { "tags": [ "full-width" ] }, "outputs": [ { "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": [ "itables.show(\n", " df,\n", " columnDefs=[{\"width\": \"30%\", \"targets\": [2, 3]}],\n", " style=\"width:100%;margin:auto\",\n", ")" ] }, { "cell_type": "markdown", "id": "6c47bf20", "metadata": {}, "source": [ "If you wish you can also set a value for `columnDefs` permanently in `itables.options` as demonstrated in the cell alignment example below.\n", "\n", "You can use the DataTables [cell classes](https://datatables.net/manual/styling/classes#Cell-classes) like `dt-left`, `dt-center`, `dt-right` etc. to set the cell alignment. Specify it for one table by using the `columnDefs` argument of `show`" ] }, { "cell_type": "code", "execution_count": 3, "id": "5bc64058", "metadata": { "tags": [ "full-width" ] }, "outputs": [ { "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": [ "itables.show(df, columnDefs=[{\"className\": \"dt-center\", \"targets\": \"_all\"}])" ] }, { "cell_type": "markdown", "id": "a540fb80", "metadata": {}, "source": [ "or globally by setting `itables.options.columnDefs`:" ] }, { "cell_type": "code", "execution_count": 4, "id": "d0d13a05", "metadata": { "tags": [ "full-width" ] }, "outputs": [ { "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": [ " region country capital longitude \\\n", "code \n", "AW Latin America & Caribbean Aruba Oranjestad -70.0167 \n", "AF South Asia Afghanistan Kabul 69.1761 \n", "AO Sub-Saharan Africa Angola Luanda 13.2420 \n", "AL Europe & Central Asia Albania Tirane 19.8172 \n", "AD Europe & Central Asia Andorra Andorra la Vella 1.5218 \n", "... ... ... ... ... \n", "XK Europe & Central Asia Kosovo Pristina 20.9260 \n", "YE Middle East & North Africa Yemen, Rep. Sana'a 44.2075 \n", "ZA Sub-Saharan Africa South Africa Pretoria 28.1871 \n", "ZM Sub-Saharan Africa Zambia Lusaka 28.2937 \n", "ZW Sub-Saharan Africa Zimbabwe Harare 31.0672 \n", "\n", " latitude \n", "code \n", "AW 12.51670 \n", "AF 34.52280 \n", "AO -8.81155 \n", "AL 41.33170 \n", "AD 42.50750 \n", "... ... \n", "XK 42.56500 \n", "YE 15.35200 \n", "ZA -25.74600 \n", "ZM -15.39820 \n", "ZW -17.83120 \n", "\n", "[208 rows x 5 columns]" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "itables.options.columnDefs = [{\"className\": \"dt-center\", \"targets\": \"_all\"}]\n", "\n", "df" ] } ], "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, 24, 39, 43, 51, 57, 61, 65 ] }, "nbformat": 4, "nbformat_minor": 5 }