Placer les ipywidgets en HTML dans le carnet Jupyter

Question

Avec l'exemple minimal suivant, je peux créer des boutons qui interagissent avec le carnet de notes Jupyter et un tableau HTML, qui est affiché dans le carnet de notes.

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>'
    ))

Le résultat produit est :

Je voudrais maintenant placer les boutons dans le tableau html. J'ai essayé d'étudier la méthode Widget._ipython_display_() mais cela ne me permet pas d'utiliser le bouton dans ma propre table html.

(Veuillez consulter la petite table à titre d'exemple. Je veux placer les boutons dans un grand tableau et utiliser les boutons pour supprimer des lignes d'une base de données).

En cette question Les utilisateurs voulaient savoir comment placer les widgets les uns par rapport aux autres. Ici, je veux placer les widgets à l'intérieur d'un autre code HTML.

Answer 1

Il ne semble pas y avoir de moyen facile d'y parvenir. Vous devrez soit construire un ipywidget personnalisé pour afficher un tableau, soit écrire manuellement le code d'un bouton HTML dont vous aurez le contrôle total.

Le mieux que j'ai pu trouver est un moyen d'émuler un tableau en utilisant un tableau de VBox à l'intérieur d'un 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)

Résultat :