Insert checkbox in panda dataframe

Question

I want to display a pandas dataframe in which at the begining of each row there is a Checkbox (ipywidget) to know which row the user is selecting.

I have made a frist trial with a Button using the following code

import pandas as pd
from IPython.display import display, HTML
from ipywidgets import Button, HBox, VBox,widgets
import ipywidgets
from ipyleaflet import Map

mS2 = Map(center=(40.4, -3.7), zoom=6)

offlineS2 = ['true', 'false']
nameS2 = ['a','b']

df = pd.DataFrame({'Name': nameS2,'Offile': offlineS2})

# ideally I would need Checkbox not Button
button0 = widgets.Button(description='Click to display')
button1 = widgets.Button()         
button2 = widgets.Button(description='Select')
dfW = ipywidgets.HTML(df.style.set_table_attributes('class="table"').render())

testup = HBox([VBox([button0,button1,button2]),dfW])
display(VBox([testup,mS2]))

The output looks like this:

However, when I change in the code widgets.Button by widgets.Checkbox, although it is displayed, the distance between the checkbox and the dataframe is too large. Why is this hapenning?

EDIT

Using

`button1 = widgets.Button(indent=False)`

Been a while since the last time I used widgets, but I'm pretty sure there's an option to move the checkbox in any direction — Juan C, Jan 14 '20 at 14:21
Take a look at: https://github.com/quantopian/qgrid if you continue to have problems. Otherwise, just remove margin-right with indent. I'll post an example solution. — Joel, Jan 14 '20 at 14:22

Joel · Answer 1 · 2020-01-14T14:51:49.120

1

By default: indent is set to True. Change it to False and Voilà.

Try this:

button0 = widgets.Checkbox(
    description="Click to display", 
    value=True,
    indent=False
)
button1 = widgets.Checkbox(
    description="", 
    value=True,
    indent=False
)
button2 = widgets.Checkbox(
    description="Select", 
    value=True,
    indent=False
)

Edit:

Try setting the margin and padding manually for your HBox.

verticalItems = VBox([button0,button1,button2], layout=Layout(margin='0 0 0 0', padding='0 0 0 0'))
fullLayout = HBox([verticalItems, dfW], layout=Layout(margin='0 0 0 0', padding='0 0 0 0'))

display(VBox([fullLayout ,mS2]))

edited Jan 14 '20 at 14:51

answered Jan 14 '20 at 14:23

Joel

5,732
4
37
65

I have added a new picture to show the display in this case. It moves the checkbox to the left, but I would like to have it close to the `dataframe`. I was checking this post https://github.com/jupyter-widgets/ipywidgets/issues/2221 but not sure if it applies @Joel – GCGM Jan 14 '20 at 14:39
https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#Checkbox I'm assuming that you only added indent=False on the first one in your latest picture. Also, try `to_html()` instead of `render()` EDIT: I see your comment now. – Joel Jan 14 '20 at 14:44
with `to_html` I get `AttributeError: 'Styler' object has no attribute 'to_html'` – GCGM Jan 14 '20 at 14:51
see my updated answer and see if that makes any difference. – Joel Jan 14 '20 at 14:53
getting the same display as in my second picture – GCGM Jan 14 '20 at 14:53
Add indent=False to all checkboxes. The API doesn't provide any other alternative than this for moving your checkboxes. Oherwise, your best bet is to move the entire VBox, or the table. – Joel Jan 14 '20 at 15:01
changing all the `indent` does not approach the checkbox enough to my `df`. Any idea on how to move the `VBox` or the `table` – GCGM Jan 14 '20 at 15:06
Try setting `widgets.Checkbox(description="Select", layout=Layout(width='30px')), indent=False`. Here's the docs for styling widgets.https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html Here's the docs for styling boxes: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html#Natural-sizes,-and-arrangements-using-HBox-and-VBox – Joel Jan 14 '20 at 16:18
Thanks for the help. I ended up using a `Select` ipywidget to solve my problem as this allows to select an element and retrieve its index. – GCGM Jan 16 '20 at 09:44
No problem! Unfortunate that my answer couldn't help you using checkboxes. – Joel Jan 16 '20 at 09:46
Actually I think I was having a wrong approach. The idea behind is to let the user select a row. For that, I originally thought about a checkbox to retrive its index. Howver a `Select` widget and its `.index` key makes the job for me. Anyways, thank you :) – GCGM Jan 16 '20 at 10:11

Insert checkbox in panda dataframe

EDIT

1 Answers1