{ "cells": [ { "cell_type": "markdown", "id": "365710fb", "metadata": {}, "source": [ "# Formatting\n", "\n", "## Formatting with Pandas\n", "\n", "`itables` builds the HTML representation of your Pandas dataframes using Pandas itself, so\n", "you can use [Pandas' formatting options](https://pandas.pydata.org/pandas-docs/stable/user_guide/options.html).\n", "For instance, you can change the precision used to display floating numbers:" ] }, { "cell_type": "code", "execution_count": 1, "id": "ce8c103e", "metadata": {}, "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": [ "from itables import init_notebook_mode, show\n", "from itables.sample_dfs import get_countries\n", "\n", "init_notebook_mode(all_interactive=True)" ] }, { "cell_type": "code", "execution_count": 2, "id": "46ee9a59", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
0
\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": [ "import math\n", "\n", "import pandas as pd\n", "\n", "with pd.option_context(\"display.float_format\", \"{:,.2f}\".format):\n", " show(pd.Series([i * math.pi for i in range(1, 6)]))" ] }, { "cell_type": "markdown", "id": "33861ee9", "metadata": {}, "source": [ "Or you can use a custom formatter:" ] }, { "cell_type": "code", "execution_count": 3, "id": "b490e886", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
0
\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": [ "with pd.option_context(\"display.float_format\", \"${:,.2f}\".format):\n", " show(pd.Series([i * math.pi for i in range(1, 6)]))" ] }, { "cell_type": "markdown", "id": "e64e7e1f", "metadata": {}, "source": [ "## Formatting with Javascript\n", "\n", "Numbers are formatted using Pandas, then are converted back to float to ensure they come in the right order when sorted.\n", "Therefore, to achieve a particular formatting you might have to resort to the\n", "[`columns.render` option](https://datatables.net/examples/advanced_init/column_render.html)\n", "of DataTables.\n", "\n", "For instance, this [example](https://datatables.net/forums/discussion/61407/how-to-apply-a-numeric-format-to-a-column)\n", "can be ported like this:" ] }, { "cell_type": "code", "execution_count": 4, "id": "f7dd20cb", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
0
\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": [ "from itables import JavascriptCode\n", "\n", "show(\n", " pd.Series([i * math.pi * 1e4 for i in range(1, 6)]),\n", " columnDefs=[\n", " {\n", " \"targets\": \"_all\",\n", " \"render\": JavascriptCode(\"$.fn.dataTable.render.number(',', '.', 3, '$')\"),\n", " }\n", " ],\n", ")" ] }, { "cell_type": "markdown", "id": "7cfd6b92", "metadata": {}, "source": [ "## Colors based on cell values\n", "\n", "You can use Javascript callbacks to set the cell or row style depending on the cell content.\n", "\n", "The example below, in which we color in red the cells with negative numbers, is directly inspired by the corresponding DataTables [example](https://datatables.net/reference/option/columns.createdCell).\n", "\n", "Note how the Javascript callback is declared as `JavascriptFunction` object below." ] }, { "cell_type": "code", "execution_count": 5, "id": "2bbef7ec", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
abcde
\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": [ "from itables import JavascriptFunction\n", "\n", "show(\n", " pd.DataFrame([[-1, 2, -3, 4, -5], [6, -7, 8, -9, 10]], columns=list(\"abcde\")),\n", " columnDefs=[\n", " {\n", " \"targets\": \"_all\",\n", " \"createdCell\": JavascriptFunction(\n", " \"\"\"\n", "function (td, cellData, rowData, row, col) {\n", " if (cellData < 0) {\n", " $(td).css('color', 'red')\n", " }\n", "}\n", "\"\"\"\n", " ),\n", " }\n", " ],\n", ")" ] }, { "cell_type": "markdown", "id": "696b137e", "metadata": {}, "source": [ "## Formatting with Pandas style\n", "\n", "ITables in version 1.6 and above can render\n", "[Pandas Style](https://pandas.pydata.org/docs/user_guide/style.html)\n", "objects as interactive DataTables.\n", "\n", "This way, you can easily add background color, and even\n", "tooltips to your dataframes, and still get them\n", "displayed using DataTables - see our [examples](pandas_style.md).\n", "\n", "```{warning}\n", "Please note that Pandas Style objects are rendered using\n", "their `.to_html()` method, which is less efficient that\n", "the default JS data export used by ITables.\n", "```\n", "\n", "## HTML in cells\n", "\n", "### A simple example\n", "\n", "HTML content is supported, which means that you can have formatted text,\n", "links or even images in your tables:" ] }, { "cell_type": "code", "execution_count": 6, "id": "26d47182", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
HTML
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "0 bold\n", "1 italic\n", "2 li...\n", "Name: HTML, dtype: object" ] }, "execution_count": 6, "metadata": {}, "output_type": "execute_result" } ], "source": [ "pd.Series(\n", " [\n", " \"bold\",\n", " \"italic\",\n", " 'link',\n", " ],\n", " name=\"HTML\",\n", ")" ] }, { "cell_type": "markdown", "id": "5436129d", "metadata": {}, "source": [ "### Images in a table" ] }, { "cell_type": "code", "execution_count": 7, "id": "ac66b896", "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", "
regioncountrycapitallongitudelatitudeflag
code
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ " region \\\n", "code \n", "AW Latin America & Caribbean \n", "AF South Asia \n", "AO Sub-Saharan Africa \n", "AL Europe & Central Asia \n", "AD Europe & Central Asia \n", "... ... \n", "XK Europe & Central Asia \n", "YE Middle East & North Africa \n", "ZA Sub-Saharan Africa \n", "ZM Sub-Saharan Africa \n", "ZW Sub-Saharan Africa \n", "\n", " country \\\n", "code \n", "AW ... \n", "AF ... 69.1761 34.52280 \n", "AO '\n", " ''.format(code=code.lower(), country=country)\n", " for code, country in zip(df.index, df[\"country\"])\n", "]\n", "df[\"country\"] = [\n", " '{}'.format(country, country)\n", " for country in df[\"country\"]\n", "]\n", "df[\"capital\"] = [\n", " '{}'.format(capital, capital)\n", " for capital in df[\"capital\"]\n", "]\n", "df" ] }, { "cell_type": "markdown", "id": "6cbfc302", "metadata": {}, "source": [ "### Base64 images\n", "\n", "[Base64 encoded image](https://stackoverflow.com/a/8499716/9817073) are supported, too:" ] }, { "cell_type": "code", "execution_count": 8, "id": "392f3b62", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
Images
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ "url \"MNIST\"',\n", " \"base64\": '\"Red',\n", " },\n", " name=\"Images\",\n", ")" ] } ], "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, 23, 30, 37, 41, 44, 56, 68, 78, 98, 123, 132, 136, 156, 162 ] }, "nbformat": 4, "nbformat_minor": 5 }