Add or Remove Components from Panels#

This guide addresses how to add or remove components from Panels, starting with the most common: Row and Column.

Row & Column Panels#

To start, we will declare a Column and populate it with some text and a widget:

import panel as pn
pn.extension() # for notebook

column = pn.Column('some text', pn.widgets.FloatSlider())

column

As we can manipulate a Row or Column object just like a Python list, we’ll use .append to add some markdown:

column.append('* Item 1\n* Item 2')

column

Next, we add a few more widgets:

column.extend([pn.widgets.TextInput(), pn.widgets.Checkbox(name='Tick this!')])

column

Now, we change our mind and replace the Checkbox with a button:

column[4] = pn.widgets.Button(name='Click here')

column

Finally, we decide to remove the FloatSlider widget, but we forget its index. We can use print to see the index of the components:

print(column)

Column
    [0] Markdown(str)
    [1] FloatSlider()
    [2] Markdown(str)
    [3] TextInput()
    [4] Button(name='Click here')

and then .pop to remove the FloatSlider:

column.pop(1)

column

Here is the complete code for this subsection in case you want to easily copy it:

import panel as pn
pn.extension() # for notebook

column = pn.Column('some text', pn.widgets.FloatSlider())
column.append('* Item 1\n* Item 2')
column.extend([pn.widgets.TextInput(), pn.widgets.Checkbox(name='Tick this!')])
column[4] = pn.widgets.Button(name='Click here')
column.pop(1)

column

Tabs Panel#

Tabs can also be changed like a Python list. However, when adding or replacing tab items, it is also possible to pass a tuple providing a custom title for the tab. First, create a Tabs panel that contains a plot:

from bokeh.plotting import figure

p1 = figure(width=300, height=300)
p1.line([1, 2, 3], [1, 2, 3])

tabs = pn.Tabs(p1)

tabs

Then, add a new tab for a slider widget and include a title for this new tab:

tabs.append(('Slider', pn.widgets.FloatSlider()))

tabs

Finally, add multiple additional tabs at once using .extend, passing titles for each:

tabs.extend([
    ('Text', pn.widgets.TextInput()),
    ('Color', pn.widgets.ColorPicker())
])

tabs

Here is the complete code for this subsection in case you want to easily copy it:

import panel as pn
pn.extension() # for notebook
from bokeh.plotting import figure

p1 = figure(width=300, height=300)
p1.line([1, 2, 3], [1, 2, 3])

tabs = pn.Tabs(p1)
tabs.append(('Slider', pn.widgets.FloatSlider()))
tabs.extend([
    ('Text', pn.widgets.TextInput()),
    ('Color', pn.widgets.ColorPicker())
])

tabs

GridSpec Panel#

A GridSpec behaves like a 2D array. The indexing is zero-based and specifies the rows first and the columns second.

First, declare a GridSpec and add red and blue blocks. The red block goes in the first row and spans 3 columns. The blue block spans from the second to fourth row, but only occupies the first column:

gridspec = pn.GridSpec(sizing_mode='stretch_both', min_height=600)

gridspec[0, :3] = pn.Spacer(styles={'background': '#FF0000'})
gridspec[1:3, 0] = pn.Spacer(styles={'background': '#0000FF'})

gridspec

Next, add our previously created bokeh figure to the remaining slots of the second row:

gridspec[1:3, 1:3] = p1

gridspec

Then, place an image and a Column of widgets under the plot:

gridspec[3, 2] = pn.Column(
    pn.widgets.FloatSlider(),
    pn.widgets.ColorPicker(),
    pn.widgets.Toggle(name='Toggle Me!'))
gridspec[3, 1] = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png'

gridspec

Finally, remove the Spacers:

del gridspec[0, :3]
del gridspec[1:3, 0]

gridspec

Here is the complete code for this subsection in case you want to easily copy it:

import panel as pn
pn.extension() # for notebook

gridspec = pn.GridSpec(sizing_mode='stretch_both', max_height=400)

gridspec[0, :3] = pn.Spacer(styles={'background': '#FF0000'})
gridspec[1:3, 0] = pn.Spacer(styles={'background': '#0000FF'})

gridspec[1:3, 1:3] = p1

gridspec[3, 2] = pn.Column(
    pn.widgets.FloatSlider(),
    pn.widgets.ColorPicker(),
    pn.widgets.Toggle(name='Toggle Me!'))
gridspec[3, 1] = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png'

del gridspec[0, :3]
del gridspec[1:3, 0]

gridspec

Add or Remove Components from Panels#

Row & Column Panels#

Tabs Panel#

GridSpec Panel#

Related Resources#