How to display iTables in panel?

[jpedrick]

I'd like to embed an itable in panel, however I'm not quite sure how to do it.

I've tried the following:

pn.Column(pn.pane.HTML(to_html_datatable( df )))

I just get the following:

[mwouts]

Hey @jpedrick , at this stage (v2.2.3) I would recommend to use our Jupyter Widget in Panel, see the example below.

Let me know how it works for you!

NB: Please leave the issue open - I will at least add this to the documentation, and maybe later on develop a specific Panel component.

# app.py, run with 'panel serve app.py --show'
import panel as pn
from world_bank_data import get_regions
from itables.widget import ITable

df = get_regions()

# Initialize Panel extension
pn.extension('itables')

# Create an ITable widget
itable_widget = ITable(df)

# Create a Panel layout
layout = pn.Column(
    "# Sample Panel Application with ITable",
    itable_widget
)

# Serve the application
layout.servable()

[jpedrick]

Hi @mwouts , thanks for the quick reply. I'm running into a couple of issues:

1. the panel extension can't be loaded

2. the ITable widget is missing all of the functionality that I'm using ITables for. Namely, javascript column formatting (e.g. columnDefs and column_filters=True.

I want to export this notebook as a static HTML document as well, so to_html_datatable is what I think I really need.

[mwouts]

I see. Re 1. I am still experimenting with panel, so yes that line might well be superfluous. Re 2. yes the ITable widget is recent and does come with a few limitations, which will hopefully go away on the long term.

Re using HTML in a more or less direct way, I see that Panel's documentation on the HTML pane says:

The HTML pane is designed to display basic HTML content. It is not suitable for rendering full HTML documents that include JavaScript or other dynamic elements.

That might explain why we can't use to_html_datatable directly in an HTML pane. However, the panel documentation also includes an example of integrating an iframe within the app, which does work with ITables - see this example:

import html
import panel as pn
from itables import to_html_datatable
from itables.sample_dfs import get_countries

# Inspired from https://panel.holoviz.org/reference/panes/HTML.html#html-documents

# 1. Generate and escape the HTML datatable
df = get_countries(html=False)
escaped_html = html.escape(to_html_datatable(df))

layout = pn.Column(
    # 2. Display the table within an iframe
    pn.pane.HTML(
        f'<iframe srcdoc="{escaped_html}" style="height:100%; width:100%" frameborder="0"></iframe>',
        # 3. It is unfortunate that we need to hardcode the height
        height=500,
        sizing_mode="stretch_width",
    )
)

layout.servable()

Still I think that either the ITable widget, or a potential future Panel component, would be a safer bet. May I ask what kind of formatting you need to use with columnDefs?