Pop-out / expand jupyter cell to new browser window

Question

I have a jupyter notebook cell that looks like this:

Is there any way to pop / expand out this to a new browser window (not see the output inline)?

Basically, I want to replicate the View() function from R/RStudio... is this possible?

Answer 1

You could use Javascript to open a new window, executed by HTML from IPython.display.

import pandas as pd
import numpy as np
df = pd.DataFrame(np.random.randn(6,4),columns=list('ABCD'))
# Show in Jupyter
df

from IPython.display import HTML
s  = '<script type="text/Javascript">'
s += 'var win = window.open("", "Title", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780, height=200, top="+(screen.height-400)+", left="+(screen.width-840));'
s += 'win.document.body.innerHTML = \'' + df.to_html().replace("\n",'\\') + '\';'
s += '</script>'

# Show in new Window
HTML(s)

Here, df.to_HTML() creates a HTML string from the data frame which contains lots of newlines. Those are problematic for Javascript. Multi-line strings in Javascript require a backslash at the EOL, that's why python has to modify the HTML string with the .replace() method.

What's really cool with JavaScript's .innerHTML (instead of document.write()) is that you can update your table any time without the need to create a new window:

df /= 2
s  = '<script type="text/Javascript">'
s += 'win.document.body.innerHTML = \'' + df.to_html().replace("\n",'\\') + '\';'
s += '</script>'
HTML(s)

This will have instant effect on your table in the opened window.

Here is a simple suggestion of an View() emulator from R for python:

def View(df):
    css = """<style>
    table { border-collapse: collapse; border: 3px solid #eee; }
    table tr th:first-child { background-color: #eeeeee; color: #333; font-weight: bold }
    table thead th { background-color: #eee; color: #000; }
    tr, th, td { border: 1px solid #ccc; border-width: 1px 0 0 1px; border-collapse: collapse;
    padding: 3px; font-family: monospace; font-size: 10px }</style>
    """
    s  = '<script type="text/Javascript">'
    s += 'var win = window.open("", "Title", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780, height=200, top="+(screen.height-400)+", left="+(screen.width-840));'
    s += 'win.document.body.innerHTML = \'' + (df.to_html() + css).replace("\n",'\\') + '\';'
    s += '</script>'

    return(HTML(s+css))

This works in jupyter simply by typing:

View(df)

As a fancy topping, it also styles your opened table using some CSS, such that it looks much nicer and comparable to what you know from the RStudio.