Using Pandas Style

Using Pandas Style#

Starting with itables>=1.6.0, ITables provides support for Pandas Style.

Note

Unlike Pandas or Polar DataFrames, Styler objects are rendered directly using their to_html method, rather than passing the underlying table data to the DataTables library.

Because of this, the rendering of the table might differ slightly from the rendering of the corresponding DataFrame. In particular,

  • The downsampling is not available - please pay attention to the size of the table being rendered

  • Sorting of numbers will not work if the column contains NaNs.

Warning

Pandas Style objects can’t be used with the Streamlit extension for ITables.

import numpy as np
import pandas as pd

from itables import init_notebook_mode

init_notebook_mode(all_interactive=True)

This is the DataFrame that we are going to style:

x = np.linspace(0, np.pi, 21)
df = pd.DataFrame({"sin": np.sin(x), "cos": np.cos(x)}, index=pd.Index(x, name="alpha"))

df
sin cos
alpha
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

Color#

From now on we will display df.style (a Pandas Styler object) rather than our DataFrame df.

Let’s start with a background gradient:

s = df.style
s.background_gradient(axis=None, cmap="YlOrRd")
  sin cos
alpha    
0.000000 0.000000 1.000000
0.157080 0.156434 0.987688
0.314159 0.309017 0.951057
0.471239 0.453990 0.891007
0.628319 0.587785 0.809017
0.785398 0.707107 0.707107
0.942478 0.809017 0.587785
1.099557 0.891007 0.453990
1.256637 0.951057 0.309017
1.413717 0.987688 0.156434
1.570796 1.000000 0.000000
1.727876 0.987688 -0.156434
1.884956 0.951057 -0.309017
2.042035 0.891007 -0.453990
2.199115 0.809017 -0.587785
2.356194 0.707107 -0.707107
2.513274 0.587785 -0.809017
2.670354 0.453990 -0.891007
2.827433 0.309017 -0.951057
2.984513 0.156434 -0.987688
3.141593 0.000000 -1.000000

Format#

We can also choose how the data is formatted:

s.format("{:.3f}").format_index("{:.3f}")
  sin cos
alpha    
0.000 0.000 1.000
0.157 0.156 0.988
0.314 0.309 0.951
0.471 0.454 0.891
0.628 0.588 0.809
0.785 0.707 0.707
0.942 0.809 0.588
1.100 0.891 0.454
1.257 0.951 0.309
1.414 0.988 0.156
1.571 1.000 0.000
1.728 0.988 -0.156
1.885 0.951 -0.309
2.042 0.891 -0.454
2.199 0.809 -0.588
2.356 0.707 -0.707
2.513 0.588 -0.809
2.670 0.454 -0.891
2.827 0.309 -0.951
2.985 0.156 -0.988
3.142 0.000 -1.000

Caption#

s.set_caption("A Pandas Styler object with background colors").set_table_styles(
    [{"selector": "caption", "props": "caption-side: bottom; font-size:1em;"}]
)
A Pandas Styler object with background colors
  sin cos
alpha    
0.000 0.000 1.000
0.157 0.156 0.988
0.314 0.309 0.951
0.471 0.454 0.891
0.628 0.588 0.809
0.785 0.707 0.707
0.942 0.809 0.588
1.100 0.891 0.454
1.257 0.951 0.309
1.414 0.988 0.156
1.571 1.000 0.000
1.728 0.988 -0.156
1.885 0.951 -0.309
2.042 0.891 -0.454
2.199 0.809 -0.588
2.356 0.707 -0.707
2.513 0.588 -0.809
2.670 0.454 -0.891
2.827 0.309 -0.951
2.985 0.156 -0.988
3.142 0.000 -1.000

Tooltips#

ttips = pd.DataFrame(
    {
        "sin": ["The sinus of {:.6f} is {:.6f}".format(t, np.sin(t)) for t in x],
        "cos": ["The cosinus of {:.6f} is {:.6f}".format(t, np.cos(t)) for t in x],
    },
    index=df.index,
)
s.set_tooltips(ttips).set_caption("With tooltips")
With tooltips
  sin cos
alpha    
0.000 0.000 1.000
0.157 0.156 0.988
0.314 0.309 0.951
0.471 0.454 0.891
0.628 0.588 0.809
0.785 0.707 0.707
0.942 0.809 0.588
1.100 0.891 0.454
1.257 0.951 0.309
1.414 0.988 0.156
1.571 1.000 0.000
1.728 0.988 -0.156
1.885 0.951 -0.309
2.042 0.891 -0.454
2.199 0.809 -0.588
2.356 0.707 -0.707
2.513 0.588 -0.809
2.670 0.454 -0.891
2.827 0.309 -0.951
2.985 0.156 -0.988
3.142 0.000 -1.000