Place ipywidgets into HTML into Jupyter notebook

Question

With the following minimal example, I can create buttons which interact with the Jupyter notebook and an HTML table, which is displayed in the notebook.

import ipywidgets
from IPython.display import display

from IPython.core.display import HTML

def func(btn):
    print('Hi!')

btn1 = ipywidgets.Button(description="Click me!")
btn1.on_click(func)
btn2 = ipywidgets.Button(description="Click me!")
btn2.on_click(func)
display(btn1)
display(btn2)

display(HTML(
        '<table>' +
        '<tr><td>Something here</td><td>Button 1 here</td></tr>' +
        '<tr><td>Something here</td><td>Button 2 here</td></tr>' +
        '</table>'
    ))

The produced result is:

I now would like to place the buttons in the html table. I tried investigating the method Widget._ipython_display_() but this does not allow me to use the button inside my own html table.

(Please see the small table as an example. I want to place the buttons in a large table and use the buttons to delete rows from a database.)

In this question, the wanted to know, how to place widgets relative to each other. Here, I want to place the widgets inside other HTML code.

Answer 1

There doesn't seem to be an easy way to achieve this. You will either have to build a custom ipywidget to display a table, or manually write the code for an HTML button of which you'll have full control.

The best I could find was a way to emulate a table using an array of VBoxes inside an HBox:

import ipywidgets as widgets
from IPython.display import display

def func(btn):
    print('Hi!')

btn1 = widgets.Button(description="Click me!")
btn1.on_click(func)
btn2 = widgets.Button(description="Click me!")
btn2.on_click(func)

# This is where you fill your table
cols = [
    # Each tuple contains a column header and a list of items/widgets
    ('Col1', ['hello', 'goodbye']),
    ('Col2', ['world', 'universe']),
    ('Buttons', [btn1, btn2]),
]

vboxes = []
for header, data in cols:
    vboxes.append(widgets.VBox([widgets.HTML('<b>%s</b>' % header)] + [
        d if isinstance(d, widgets.Widget) else widgets.HTML(str(d)) for d in data],
    layout=widgets.Layout(border='1px solid')))

hbox = widgets.HBox(vboxes)

display(hbox)

Result: