Implement a Jupyter Widget for ITables

[turokg]

Hi,

itables is a great library! Idea to use jquery datatables is great.

Somehow it's not renedered well when using ipywidgets.HTML. Could you help me to debug it? The notebook is trusted, I've tried all the combinations of connected = False, True. No luck

from IPython.core.display import HTML
import pandas as pd
import itables

df = pd.DataFrame({'col1': [1, 2], 'col2': [3, 4]})

HTML(itables.to_html_datatable(df, paging=False,connected=True))

^^ proper sortable itable

from ipywidgets import widgets

widgets.HTML(itables.to_html_datatable(df, paging=False,connected=True))

loading forever. Sometimes (sic!) it does load but i haven't figured out why and how to reproduce it

---

itables==2.0.1 ipywidgets==8.1.2

tried Chrome and Safari Macbook Pro M1

[mwouts]

Thanks @turokg ! Interesting question... Well, possibly the HTML widget is meant to display pure HTML (e.g. no Javascript)?

I just made this experiment to confirm:

from ipywidgets import widgets
from IPython import display

def hide_me_html(id):
    return f"""
<div id="{id}">This is '{id}'. If you see this then JS is turned off</div>
<script>
document.querySelectorAll("#{id}").forEach(e => e.remove());
</script>
"""

display.display(display.HTML(hide_me_html("display")))
widgets.HTML(hide_me_html("widgets"))

By the way, may I ask what you are looking to achieve when you place an interactive table in a widget? You want to make it depend on another input possibly?

If so, the only similar framework that is supported at the moment is Shiny for Python. But when time permits I would be interested to provide support for Dash and Streamlit apps, and why not, for ipywidgets...

[turokg]

Yeah. I have huge dataframes and I need to prefilter them before displaying as itable. Nice way to do it is with ipywidgets, since its a standard tool to bring some interactivity.

Shiny is a great tool and it can render ipywidgets. Also viola can render ipywidgets enabling python callbacks in rendered notebooks.

In the end I'm focusing to provide some interactive building blocks which work great in notebook as well as some standalone application. It seems like i'll go with ipywidgets for notebook and ipywidgets + voila or ipywidgets + shiny for standalone app. This works great for plots with plotly. Would be great to bring some intercativity to rendered tables

I will as well try to dive deeper into this.

[turokg]

ok. after some digging turns out that javascript doesn't really allowed to run in the widgets.HTML, but you can inject it with IPython.core.display.HTML

so. you could use

from IPython.core.display import HTML
from ipywidgets import widgets
import itables

html = itables.to_html_datatable(df)
static, script = split(html) # here we extract <table> and some js tags like <link> and <script>

display(widgets.HTML(static)) 
display(HTML(script)) # we inject js code to the notebook's html in the browser

Not a pretty workaround, though all the issues like this seem abandoned :(

[mwouts]

I think the proper approach would be to provide a custom ipywidget.

There are instructions at https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html, I will have a look at some point, and keep you posted if I can get it to work.