Ipywidgets: table_beautifier in widget

Created on 28 Apr 2017  路  14Comments  路  Source: jupyter-widgets/ipywidgets

Hi,

in jupyter I am using the table_beautifier extension to provide some nice display of dataframes, and I would now like to put one of such tables into a container widget.

How do I do it?

Using widgets.HTML as a wrapper and setting its value to the to_html version of the dataframe gives back the plain table layout. I tried adding the dataframe directly as child to the container, without wrapping it into anything, but this resulted in a "Can't clean for JSON" error.

Thanks for your help,

Andrea.

needs info resolved-locked

Most helpful comment

screen shot 2017-04-28 at 1 50 59 pm

All 14 comments

Maybe use an output widget?

from ipywidgets import Output, HBox
out = Output()
with out:
    ... do whatever you do to display the data frame ...
display(HBox([out, out]))

Thanks for the suggestion. In a normal notebook with the extension enabled, display(myDataFrame) is enough to get the interactive table in the output cell.

My attempt with ipywidgets is:

out=widgets.Output()
display(myDataFrame)
thewidget=widgets.VBox([                   
 out,
 something_else])

"thewidget" is then added to a tab, so I guess there is no need to explicitely call display(out). This runs without problems, but still gives the normal static table layout. I am stuck with python 2.7, btw.

Any more suggestions?

Thanks for your help,

Andrea.

You need to follow the example I posted in order to have the output widget capture the display:

with out:
    display(myDataFrame)

(I don't know what the table_beautifier extension does - if the above doesn't work, the problem may be in getting the extension to recognize that there is a table in an output widget?)

Thanks Jason. your last recipe is not working either. Interesting enough, now instead of the "plain" table I have nothing. Just a white area. AFAICT as a js-ignorant, under the hood the extension is feeding the table to tablesorter:

http://tablesorter.com/docs/

could it be that the problem is that the widget does not call tablesorter and handles the display itself? is this happening (to your knowledge) with other js-based display extensions?

I did find this message in the browser console, though:

manager.js:313 Uncaught (in promise) Error: Could not determine where the display message was from. Widget will not be displayed
at WidgetManager.display_model (manager.js:313)
at widget.js:161

Here is the code that works for me (on basically the latest alpha of ipywidgets)

import pandas as pd
from ipywidgets import *
from IPython.display import display
import numpy as np

out = Output()
with out:
    display(pd.DataFrame(np.random.randn(10,5)))
display(HBox([out, out]))

If that doesn't work with the table beautifier extension, can you confirm it works without the extension?

screen shot 2017-04-28 at 1 50 59 pm

Hi Jason,

thanks for your replies. I am happy to report that things are working perfectly now, using the Output widget as you suggested and the table_beautifier. All I did to make it work was to upgrade ipywidgets, so I guess it must have been something related to the older version.

Thanks for your help,
Andrea.

Great!

Hi Jason,

I am back to having problems with this. Display in jupyter now works smoothly, but I am now trying to use the "Embed widgets" functionality. I just paste the code into an empty html page and load it into a browser.

Things work nicely, exceptfor the tables created through the table_beautifier. Instead of the table, I get this text

image

I am guessing the javascript table that went into the Output widget is not being correctly dumped by the embedding function. Is this a bug, or you do it by design?

Related to this: is there a way to create the embeddable code with a python command, possibly passing specifically the widgets I want to be embedded? I typically have a lot of widgets in a notebook, and want to export just one of them.

Thanks for your help,

Andrea.

The output widget is not implemented yet for the embedded widgets. See https://github.com/jupyter-widgets/ipywidgets/pull/1380 for progress.

Also, you might be able to get code for embedding specific widgets with https://github.com/jupyter-widgets/ipywidgets/pull/1387.

@jasongrout: I cannot see the scroll bar when I use your example (on a windows machine both in notebook and jupterlab). Any Idea how to solve that?

So:

import pandas as pd
from ipywidgets import *
from IPython.display import display
import numpy as np

w_dims = IntSlider()

out = Output()
with out:
    display(pd.DataFrame(np.random.randn(10,300)))

display(HBox([out]))

gives
image

whereas

import pandas as pd
from ipywidgets import *
from IPython.display import display
import numpy as np
display(pd.DataFrame(np.random.randn(5,300)))

yields what I expect:
image

(I need it for a more involved example, but I thought to start easy)

Can you open a new issue for this? I have some investigations that show what is happening, but it should be on a new issue we can pursue, and is not really relevant to this issue.

Was this page helpful?
0 / 5 - 0 ratings