Need help with itables?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mwouts
140 Stars 14 Forks MIT License 85 Commits 9 Opened issues

Description

Interactive Tables in Jupyter

Services available

!
?

Need anything else?

Contributors list

# 9,557
rmarkdo...
jupyter...
Jupyter...
q
80 commits
# 100,702
HTML
JavaScr...
jupyter
altair
2 commits
# 175,704
HTML
JavaScr...
1 commit

Pandas DataFrames and Series as Interactive Tables in Jupyter

Pypi CI codecov.io Language grade: Python Code style: black Binder Star

Turn pandas DataFrames and Series into interactive datatables in both your notebooks and their HTML representation with

import itables.interactive
:

Quick start

Install the package with

pip install itables

Activate the interactive mode for all series and dataframes with

from itables import init_notebook_mode
init_notebook_mode(all_interactive=True)
import world_bank_data as wb

df = wb.get_countries() df

You don't see any table above? Please either open the HTML export of this notebook, or run this README on Binder!

Or display just one series or dataframe as an interactive table with the

show
function.
from itables import show

x = wb.get_series("SP.POP.TOTL", mrv=1, simplify_index=True) show(x)

Advanced usage

Pagination

How many rows per page

Select how many entries should appear at once in the table with either the

lengthMenu
argument of the
show
function, or with the global option
itables.options.lengthMenu
:
import itables.options as opt

opt.lengthMenu = [2, 5, 10, 20, 50, 100, 200, 500] df

Show the table in full

Show the table in full with the

paging
argument, either in the

show
method, or in the options:
show(df.head(), paging=False)

Scroll

If you prefer to replace the pagination with a vertical scroll, use for instance

show(df, scrollY="200px", scrollCollapse=True, paging=False)

Table and cell style

Select how your table should look like with the

classes
argument of the
show
function, or by changing
itables.options.classes
. For the list of possible values, see datatables' default style and the style examples.
opt.classes = ["display", "nowrap"]
df
opt.classes = ["display", "cell-border"]
df

Float precision

Floats are rounded using

pd.options.display.float_format
. Please change that format according to your preference.
import math
import pandas as pd

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

You may also choose to convert floating numbers to strings:

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

Advanced cell formatting

Datatables allows to set the cell or row style depending on the cell content, with either the createdRow or createdCell callback. For instance, if we want the cells with negative numbers to be colored in red, we can use the

columnDefs.createdCell
argument as follows:
show(
    pd.DataFrame([[-1, 2, -3, 4, -5], [6, -7, 8, -9, 10]], columns=list("abcde")),
    columnDefs=[
        {
            "targets": "_all",
            "createdCell": """function (td, cellData, rowData, row, col) {
      if ( cellData < 0 ) {
        $(td).css('color', 'red')
      }
    }""",
        }
    ],
)

Column width

For tables that are larger than the notebook, the

columnDefs
argument allows to specify the desired width. If you wish you can also change the default in
itables.options
.
show(x.to_frame().T, columnDefs=[{"width": "120px", "targets": "_all"}])

Cell alignment

You can use the datatables.net 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
show(df, columnDefs=[{"className":"dt-center",  "targets": "_all"}])

or globally by setting

opt.columnDefs
:
opt.columnDefs = [{"className":"dt-center", "targets": "_all"}]
df
del opt.columnDefs

HTML in cells

import pandas as pd

show( pd.Series( [ "bold", "italic", 'link', ], name="HTML", ), paging=False, )

Select rows

Not currently implemented. May be made available at a later stage using the select extension for datatables.

Copy, CSV, PDF and Excel buttons

Not currently implemented. May be made available at a later stage thanks to the buttons extension for datatable.

Downsampling

When the data in a table is larger than

maxBytes
, which is equal to 64KB by default,
itables
will display only a subset of the table - one that fits into
maxBytes
. If you wish, you can deactivate the limit with
maxBytes=0
, change the value of
maxBytes
, or similarly set a limit on the number of rows (
maxRows
, defaults to 0) or columns (
maxColumns
, defaults to
pd.get_option('display.max_columns')
).

Note that datatables support server-side processing. At a later stage we may implement support for larger tables using this feature.

df = wb.get_indicators().head(500)
opt.maxBytes = 10000
df.values.nbytes
df

To show the table in full, we can modify the value of

maxBytes
either locally:
show(df, maxBytes=0)

or globally:

opt.maxBytes = 2**20
df

References

DataTables

  • DataTables is a plug-in for the jQuery Javascript library. It has a great documentation, and a large set of examples.
  • The R package DT uses datatables.net as the underlying library for both R notebooks and Shiny applications. In addition to the standard functionalities of the library (display, sort, filtering and row selection), RStudio seems to have implemented cell edition.
  • Marek Cermak has an interesting tutorial on how to use datatables within Jupyter. He also published jupyter-datatables, with a focus on numerical data and distribution plots.

Alternatives

ITables uses basic Javascript, and because of this it will only work in Jupyter Notebook, not in JupyterLab. It is not a Jupyter widget, which means that it does not allows you to edit the content of the dataframe.

If you are looking for Jupyter widgets, have a look at - QGrid by Quantopian - IPyaggrid by Louis Raison and Olivier Borderies - IPySheet by QuantStack.

If you are looking for a table component that will fit in Dash applications, see datatable by Dash.

Contributing

I think it would be very helpful to have an identical table component for both Jupyter and Dash. Please let us know if you are interested in drafting a new table component based on an existing Javascript library for Dash.

Also, if you happen to prefer another Javascript table library (say, ag-grid), and you would like to see it supported in

itables
, please open either an issue or a PR, and let us know what is the minimal code to display a table in Jupyter using your library.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.