Cell Formatting

Formatting with Pandas

By default, ITables format floats using Pandas itself, so you can use Pandas’ formatting options.

For instance, you can change the precision used to display floating numbers:

import math

import itables

itables.init_notebook_mode()

import pandas as pd

with pd.option_context("display.float_format", "{:,.2f}".format):
    itables.show(pd.Series([i * math.pi for i in range(1, 6)]))

ⓘ0
3.14
6.28
9.42
12.57
15.71

Or you can use a custom formatter:

with pd.option_context("display.float_format", "${:,.2f}".format):
    itables.show(pd.Series([i * math.pi for i in range(1, 6)]))

ⓘ0
$3.14
$6.28
$9.42
$12.57
$15.71

Formatting with Polars

By default, ITables v2.7.0 and above formats floats in Polars DataFrames according to the Polars configuration:

import polars as pl

with pl.Config(float_precision=2):
    itables.show(pl.Series([i * math.pi for i in range(1, 6)]))

ⓘ
f64
3.14
6.28
9.42
12.57
15.71

Formatting with Javascript

If you pass a columnDefs argument, the columns that appear in the targets are not formatted - instead they are passed verbatim to datatables.net. Therefore, to achieve a particular formatting you can resort to the columns.render option of DataTables.

For instance, this example can be ported like this:

itables.show(
    pd.DataFrame(
        {"int": range(1, 6), "float": [i * math.pi * 1e4 for i in range(1, 6)]}
    ),
    columnDefs=[
        {
            "targets": [1],
            "render": itables.JavascriptCode(
                "$.fn.dataTable.render.number(',', '.', 3, '$')"
            ),
        }
    ],
)

ⓘint	float
1	31415.926535897932
2	62831.853071795864
3	94247.7796076938
4	125663.70614359173
5	157079.63267948964

Colors based on cell values

You can use Javascript callbacks to set the cell or row style depending on the cell content.

The example below, in which we color in red the cells with negative numbers, is directly inspired by the corresponding DataTables example.

Note how the Javascript callback is declared as JavascriptFunction object below.

itables.show(
    pd.DataFrame([[-1, 2, -3, 4.0, -5], [6, -7.0, 8, -9.0, 10]], columns=list("abcde")),
    columnDefs=[
        {
            "targets": "_all",
            "createdCell": itables.JavascriptFunction(
                """
function (td, cellData, rowData, row, col) {
    // cellData for floats contains their display (=formatted) value,
    // we need the rawValue from the sort field instead.
    const rawValue = this.api()
        .cell(row, col)
        .render('sort');
    if (rawValue < 0) {
        $(td).css('color', 'red')
    }
}
"""
            ),
        }
    ],
)

ⓘa	b	c	d	e
-1	2.0	-3	4.0	-5
6	-7.0	8	-9.0	10

Formatting with Pandas style

ITables in version 1.6 and above can render Pandas Style objects as interactive DataTables.

This way, you can easily add background color, and even tooltips to your dataframes, and still get them displayed using DataTables - see our examples.

Warning

Please note that Pandas Style objects are rendered using their .to_html() method, which is less efficient that the default JS data export used by ITables.