“Zebra Tables” in IPython Notebook?

https://stackoverflow.com/questions/10760364

11-06-2021
|

Question

I'm building some interactive workflows in IPython using the fantastic Notebook for interactive analysis and Pandas.

Some of the tables I'm displaying would be much easier to read with a little bit of formatting. I'd really like something like "zebra tables" where every other row is shaded. I read here about how this formatting can be implemented via css. Is there a really straight forward way to apply a css to an IPython Notebook and then have tables rendered using the style sheet?

Solution

You can run arbitrary javascript (with jQuery) either in markdown cells inside <script> tags, or via IPython's IPython.core.display.Javascript class. With these, you can manipulate (or ruin) the document to your heart's content, including adding stylesheets.

For instance, the following will stripe appropriately classed tables:

<script type="text/javascript">
    $('head').append(
        "<style type='text/css'>tr.odd{background-color: #def}</style>"
    );
</script>

If you just stick that in one of your markdown cells, then it will apply to everything on the page.

Or, you might run the same code (minus <script> tags) from Python in a code cell:

from IPython.core.display import Javascript, display
display(Javascript("""
    $('head').append(
        "<style type='text/css'>tr.odd{background-color: #def}</style>"
    );
"""))

But doing this will only affect your tables that are appropriately classed, which is up to the code that is writing the HTML (e.g. in Pandas).

OTHER TIPS

I just released a project called ipy_table to provide an easy mechanism for creating richly formatted data tables in IPython notebooks (colors, borders, alignment, float formatting, zebra shading, etc.). The project is at https://github.com/epmoyer/ipy_table, and you can get a good idea of it's capabilities from https://github.com/epmoyer/ipy_table/blob/master/ipy_table-Reference.pdf.

if you are interested in building grids/tables using slickgrid, but in python, then you maybe be interested in qgrid. This works from ipython notebooks using pandas.

https://github.com/quantopian/qgrid

Another option is using handsontable like this:

http://nbviewer.ipython.org/gist/bollwyvl/6ad208084744c60dda65

Yet another, 3rd option using pandas only is here:

Pandas Dataframes to_html: Highlighting table rows

Fourth option is to use template engine such as jinja2 like this:

Pandas Dataframe display on a webpage

http://nbviewer.ipython.org/github/pydata/pandas/blob/8c4f9571c08d5122f1d9e40c43dadab8b6f10bf5/pandas_HTML_styling.ipynb

Finally there is an open issue in pandas to render based on templates:

https://github.com/pydata/pandas/issues/3190

P.S. Python guru from Google suggests this minimal solution (avoid any third-party dependency):

https://stackoverflow.com/a/1475453/2230844