{ "cells": [ { "cell_type": "markdown", "id": "01408c0a", "metadata": {}, "source": [ "# Styling\n", "\n", "As usual, we initialize ITables with `init_notebook_mode`, and we create two sample DataFrames:" ] }, { "cell_type": "code", "execution_count": 1, "id": "cd632fff", "metadata": { "tags": [ "hide-input" ] }, "outputs": [ { "data": { "text/html": [ "\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", "
\n", "This is the init_notebook_mode cell from ITables v2.0.1
\n", "(you should not see this message - is your notebook trusted?)\n", "
\n", "
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import pandas as pd\n", "\n", "import itables.options as opt\n", "from itables import init_notebook_mode, show\n", "from itables.sample_dfs import get_countries\n", "\n", "df = get_countries(html=False)\n", "df_small = pd.DataFrame({\"a\": [2, 1]})\n", "\n", "init_notebook_mode(all_interactive=True)" ] }, { "cell_type": "markdown", "id": "7014a7d5", "metadata": {}, "source": [ "## Classes\n", "\n", "Select how your table looks like with the `classes` argument (defaults to `\"display nowrap\"`) of the `show` function, or by changing `itables.options.classes`.\n", "\n", "Add `\"compact\"` if you want a denser table:" ] }, { "cell_type": "code", "execution_count": 2, "id": "8e17c049", "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(df, classes=\"display nowrap compact\")" ] }, { "cell_type": "markdown", "id": "300d1688", "metadata": {}, "source": [ "Remove `\"nowrap\"` if you want the cell content to be wrapped:" ] }, { "cell_type": "code", "execution_count": 3, "id": "f9a4845d", "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(df, classes=\"display\")" ] }, { "cell_type": "markdown", "id": "adaed868", "metadata": {}, "source": [ "[More options](https://datatables.net/manual/styling/classes#Table-classes) like `\"cell-border\"` are available:" ] }, { "cell_type": "code", "execution_count": 4, "id": "32d2d0d5", "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(df, classes=\"display nowrap cell-border\")" ] }, { "cell_type": "markdown", "id": "fe647fad", "metadata": {}, "source": [ "## CSS\n", "\n", "You can use CSS to alter how the interactive DataTables are rendered.\n", "\n", "For instance, we change the\n", "[font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)\n", "for all the tables in the document with this code:" ] }, { "cell_type": "code", "execution_count": 5, "id": "123ee7e7", "metadata": {}, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "from IPython.display import HTML, display\n", "\n", "css = \"\"\"\n", ".dt-container {\n", " font-size: small;\n", "}\n", "\"\"\"\n", "display(HTML(f\"\" \"\"))" ] }, { "cell_type": "markdown", "id": "87f9e011", "metadata": {}, "source": [ "This is helpful for instance in the context of\n", "[Quarto presentations](quarto.md).\n", "\n", "With this over CSS, we change _every datatable_ table header\n", "in the notebook to bold/italic." ] }, { "cell_type": "code", "execution_count": 6, "id": "16e9a860", "metadata": {}, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "css = \"\"\"\n", ".dataTable th {\n", " font-weight: bolder;\n", " font-style: italic;\n", "}\n", "\"\"\"\n", "display(HTML(f\"\" \"\"))" ] }, { "cell_type": "markdown", "id": "2acbda91", "metadata": {}, "source": [ "You might also want to alter the style of specific tables only.\n", "To do this, add a new class to the target tables, as\n", "in the example below:" ] }, { "cell_type": "code", "execution_count": 7, "id": "82023182", "metadata": {}, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "class_specific_css = \".table_with_monospace_font { font-family: courier, monospace }\"\n", "display(HTML(f\"\" \"\"))" ] }, { "cell_type": "code", "execution_count": 8, "id": "402ed7d2", "metadata": {}, "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(df, classes=\"display nowrap table_with_monospace_font\")" ] }, { "cell_type": "markdown", "id": "c4f09183", "metadata": {}, "source": [ "(style)=\n", "## The style argument\n", "\n", "The `show` function has a `style` argument that determines the\n", "style for that particular table.\n", "\n", "The default value for `style` is `table-layout:auto;width:auto;margin:auto;caption-side:bottom`.\n", "Without `width:auto`, tables with few columns still take the full notebook width in Jupyter.\n", "Using `margin:auto` makes non-wide tables centered in Jupyter.\n", "\n", "## Position and width\n", "\n", "You can set a specific width or position for a table using with the `style` argument of the show function:" ] }, { "cell_type": "code", "execution_count": 9, "id": "877090a2", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
a
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(df_small, style=\"table-layout:auto;width:50%;float:right\")" ] }, { "cell_type": "markdown", "id": "407b31bf", "metadata": {}, "source": [ "or you can also change it for all tables by changing `itables.options.style`:\n", "\n", "```python\n", "import itables.options as opt\n", "\n", "opt.style = \"table-layout:auto;width:auto\"\n", "```\n", "\n", "```{tip}\n", "For ajusting the height of a table, see the section on [pagination](advanced_parameters.md#pagination).\n", "```\n", "\n", "## Column width\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": 10, "id": "95131b11", "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(\n", " df,\n", " columnDefs=[{\"width\": \"120px\", \"targets\": \"_all\"}],\n", " scrollX=True,\n", " style=\"width:1200px\",\n", " autoWidth=False,\n", ")" ] }, { "cell_type": "markdown", "id": "d42ad3bd", "metadata": {}, "source": [ "You can also adjust the width of selected columns only:" ] }, { "cell_type": "code", "execution_count": 11, "id": "ceefac23", "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(\n", " df,\n", " columnDefs=[{\"width\": \"30%\", \"targets\": [2, 3]}],\n", " style=\"width:100%;margin:auto\",\n", ")" ] }, { "cell_type": "markdown", "id": "53b895b2", "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", "## Cell alignment\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": 12, "id": "23e032e9", "metadata": {}, "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "show(df, columnDefs=[{\"className\": \"dt-center\", \"targets\": \"_all\"}])" ] }, { "cell_type": "markdown", "id": "fda26dfe", "metadata": {}, "source": [ "or globally by setting `opt.columnDefs`:" ] }, { "cell_type": "code", "execution_count": 13, "id": "ce859289", "metadata": {}, "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", "
regioncountrycapitallongitudelatitude
code
\n", "\n", "
\n", "Loading ITables v2.0.1 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": 13, "metadata": {}, "output_type": "execute_result" } ], "source": [ "opt.columnDefs = [{\"className\": \"dt-center\", \"targets\": \"_all\"}]\n", "df" ] } ], "metadata": { "jupytext": { "formats": "md:myst", "text_representation": { "extension": ".md", "format_name": "myst", "format_version": 0.13, "jupytext_version": "1.14.5" } }, "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.9" }, "source_map": [ 13, 19, 32, 40, 44, 48, 52, 56, 60, 70, 79, 87, 95, 101, 106, 108, 124, 126, 149, 159, 163, 171, 179, 181, 185 ] }, "nbformat": 4, "nbformat_minor": 5 }