{ "cells": [ { "cell_type": "markdown", "id": "8e55dc75", "metadata": {}, "source": [ "# Pandas Style examples\n", "\n", "Starting with `itables>=1.6.0`, ITables provides support for\n", "[Pandas Style](https://pandas.pydata.org/docs/user_guide/style.html)." ] }, { "cell_type": "code", "execution_count": 1, "id": "df85e3ce", "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": [ "import numpy as np\n", "import pandas as pd\n", "\n", "from itables import init_notebook_mode\n", "\n", "init_notebook_mode(all_interactive=True)" ] }, { "cell_type": "code", "execution_count": 2, "id": "66febe34", "metadata": { "tags": [ "remove-input" ] }, "outputs": [], "source": [ "import itables.options as opt\n", "\n", "opt.lengthMenu = [5, 10, 20, 50, 100, 200, 500]" ] }, { "cell_type": "markdown", "id": "d954121f", "metadata": {}, "source": [ "This is the DataFrame that we are going to style:" ] }, { "cell_type": "code", "execution_count": 3, "id": "f964d3cd", "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", "\n", "
sincos
alpha
\n", "\n", "
\n", "Loading ITables v2.0.1 from the init_notebook_mode cell...\n", "(need help?)
\n", "\n" ], "text/plain": [ " sin cos\n", "alpha \n", "0.000000 0.000000e+00 1.000000e+00\n", "0.157080 1.564345e-01 9.876883e-01\n", "0.314159 3.090170e-01 9.510565e-01\n", "0.471239 4.539905e-01 8.910065e-01\n", "0.628319 5.877853e-01 8.090170e-01\n", "0.785398 7.071068e-01 7.071068e-01\n", "0.942478 8.090170e-01 5.877853e-01\n", "1.099557 8.910065e-01 4.539905e-01\n", "1.256637 9.510565e-01 3.090170e-01\n", "1.413717 9.876883e-01 1.564345e-01\n", "1.570796 1.000000e+00 6.123234e-17\n", "1.727876 9.876883e-01 -1.564345e-01\n", "1.884956 9.510565e-01 -3.090170e-01\n", "2.042035 8.910065e-01 -4.539905e-01\n", "2.199115 8.090170e-01 -5.877853e-01\n", "2.356194 7.071068e-01 -7.071068e-01\n", "2.513274 5.877853e-01 -8.090170e-01\n", "2.670354 4.539905e-01 -8.910065e-01\n", "2.827433 3.090170e-01 -9.510565e-01\n", "2.984513 1.564345e-01 -9.876883e-01\n", "3.141593 1.224647e-16 -1.000000e+00" ] }, "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ "x = np.linspace(0, np.pi, 21)\n", "df = pd.DataFrame({\"sin\": np.sin(x), \"cos\": np.cos(x)}, index=pd.Index(x, name=\"alpha\"))\n", "\n", "df" ] }, { "cell_type": "markdown", "id": "3ea3ef40", "metadata": {}, "source": [ "## Color\n", "\n", "From now on we will display `df.style`\n", "(a Pandas `Styler` object) rather than our DataFrame `df`.\n", "\n", "Let's start with a background gradient:" ] }, { "cell_type": "code", "execution_count": 4, "id": "6e009ddf", "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", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
 sincos
alpha  
0.0000000.0000001.000000
0.1570800.1564340.987688
0.3141590.3090170.951057
0.4712390.4539900.891007
0.6283190.5877850.809017
0.7853980.7071070.707107
0.9424780.8090170.587785
1.0995570.8910070.453990
1.2566370.9510570.309017
1.4137170.9876880.156434
1.5707961.0000000.000000
1.7278760.987688-0.156434
1.8849560.951057-0.309017
2.0420350.891007-0.453990
2.1991150.809017-0.587785
2.3561940.707107-0.707107
2.5132740.587785-0.809017
2.6703540.453990-0.891007
2.8274330.309017-0.951057
2.9845130.156434-0.987688
3.1415930.000000-1.000000
\n", "\n", "\n" ], "text/plain": [ "" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "s = df.style\n", "s.background_gradient(axis=None, cmap=\"YlOrRd\")" ] }, { "cell_type": "markdown", "id": "b974a4d7", "metadata": {}, "source": [ "## Format\n", "\n", "We can also choose how the data is formatted:" ] }, { "cell_type": "code", "execution_count": 5, "id": "1d76c0e5", "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", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
 sincos
alpha  
0.0000.0001.000
0.1570.1560.988
0.3140.3090.951
0.4710.4540.891
0.6280.5880.809
0.7850.7070.707
0.9420.8090.588
1.1000.8910.454
1.2570.9510.309
1.4140.9880.156
1.5711.0000.000
1.7280.988-0.156
1.8850.951-0.309
2.0420.891-0.454
2.1990.809-0.588
2.3560.707-0.707
2.5130.588-0.809
2.6700.454-0.891
2.8270.309-0.951
2.9850.156-0.988
3.1420.000-1.000
\n", "\n", "\n" ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "s.format(\"{:.3f}\").format_index(\"{:.3f}\")" ] }, { "cell_type": "markdown", "id": "ab1d1430", "metadata": {}, "source": [ "## Caption" ] }, { "cell_type": "code", "execution_count": 6, "id": "ca7b20d2", "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", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
A Pandas Styler object with background colors
 sincos
alpha  
0.0000.0001.000
0.1570.1560.988
0.3140.3090.951
0.4710.4540.891
0.6280.5880.809
0.7850.7070.707
0.9420.8090.588
1.1000.8910.454
1.2570.9510.309
1.4140.9880.156
1.5711.0000.000
1.7280.988-0.156
1.8850.951-0.309
2.0420.891-0.454
2.1990.809-0.588
2.3560.707-0.707
2.5130.588-0.809
2.6700.454-0.891
2.8270.309-0.951
2.9850.156-0.988
3.1420.000-1.000
\n", "\n", "\n" ], "text/plain": [ "" ] }, "execution_count": 6, "metadata": {}, "output_type": "execute_result" } ], "source": [ "s.set_caption(\"A Pandas Styler object with background colors\").set_table_styles(\n", " [{\"selector\": \"caption\", \"props\": \"caption-side: bottom; font-size:1em;\"}]\n", ")" ] }, { "cell_type": "markdown", "id": "28ecfdf3", "metadata": {}, "source": [ "## Tooltips" ] }, { "cell_type": "code", "execution_count": 7, "id": "7608af0e", "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", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
With tooltips
 sincos
alpha  
0.0000.0001.000
0.1570.1560.988
0.3140.3090.951
0.4710.4540.891
0.6280.5880.809
0.7850.7070.707
0.9420.8090.588
1.1000.8910.454
1.2570.9510.309
1.4140.9880.156
1.5711.0000.000
1.7280.988-0.156
1.8850.951-0.309
2.0420.891-0.454
2.1990.809-0.588
2.3560.707-0.707
2.5130.588-0.809
2.6700.454-0.891
2.8270.309-0.951
2.9850.156-0.988
3.1420.000-1.000
\n", "\n", "\n" ], "text/plain": [ "" ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "ttips = pd.DataFrame(\n", " {\n", " \"sin\": [\"The sinus of {:.6f} is {:.6f}\".format(t, np.sin(t)) for t in x],\n", " \"cos\": [\"The cosinus of {:.6f} is {:.6f}\".format(t, np.cos(t)) for t in x],\n", " },\n", " index=df.index,\n", ")\n", "s.set_tooltips(ttips).set_caption(\"With tooltips\")" ] }, { "cell_type": "markdown", "id": "a42fe136", "metadata": {}, "source": [ "```{note}\n", "Unlike Pandas or Polar DataFrames, `Styler` objects are rendered directly using their\n", "`to_html` method, rather than passing the underlying table data to the DataTables\n", "library.\n", "\n", "Because of this, the rendering of the table might differ slightly from the rendering of the\n", "corresponding DataFrame. In particular,\n", "- The downsampling is not available - please pay attention to the size of the table being rendered\n", "- Sorting of numbers will not work if the column contains NaNs.\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, 20, 29, 35, 39, 44, 53, 56, 62, 64, 68, 72, 76, 85 ] }, "nbformat": 4, "nbformat_minor": 5 }