Skip to content

Selects and Tabs

Select

Selects act as a container that holds a list of nested Blocks objects, such as Tables, Plots, etc.. - but only one may be visible, or "selected", at once.

The user can choose which nested object to view dynamically using either tabs or a dropdown.

Note

Select expects a list of Blocks, e.g. a Plot or Table, but also includes Select or Groups themselves, but if a Python object is passed, e.g. a Dataframe, Datapane will attempt to convert it automatically.

Parameters:

Name Type Description Default
*arg_blocks BlockOrPrimitive

Page to add to report

 ()
blocks List[BlockOrPrimitive]

Allows providing the report blocks as a single list

 None
type SelectType

An instance of SelectType that indicates if the select should use tabs or a dropdown (default: Tabs)

 TABS
name BlockId

A unique id for the blocks to aid querying (optional)

 None
label str

A label used when displaying the block (optional)

 None

Tip

Select can be passed using either arg parameters or the blocks kwarg, e.g. dp.Select(table, plot, type=dp.SelectType.TABS) or dp.Select(blocks=[table, plot])

report_minimum_blocks = 2 class-attribute instance-attribute

The dp.Select block has two modes:

  • Tabs are used for less than 5 options - you can override this default by passing in the parameter type=dp.SelectType.TABS
  • Drop downs are used for 5 or more options - you can override this default by passing in the parametertype = dp.SelectType.DROPDOWN. In addition, a search bar will appear if the block contains more than 10 options.

To set the option names, make sure each block contained inside your dp.Select has a label.

Simple Tabs

import seaborn as sns
import altair as alt

code = """
titanic = sns.load_dataset("titanic")

app = dp.App(
    "# Titanic overview",
    dp.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    dp.Select(
        blocks=[
            dp.Table(titanic.describe(), label="Data Description"),
            dp.DataTable(titanic, label="Whole Dataset"),
            dp.Code(code, label="Source code"),
        ]
    ),
)

app.save(path="select.html")
"""

titanic = sns.load_dataset("titanic")

dp.Blocks(
    "# Titanic overview",
    dp.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    dp.Select(
        blocks=[
            dp.Table(titanic.describe(), label="Data Description"),
            dp.DataTable(titanic, label="Whole Dataset"),
            dp.Code(code, label="Source code"),
        ]
    ),
)

Simple Dropdown

import seaborn as sns
import altair as alt

code = """
titanic = sns.load_dataset("titanic")

app = dp.App(
    "# Titanic overview",
    dp.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    dp.Select(
        blocks=[
            dp.Table(titanic.describe(), label="Data Description"),
            dp.DataTable(titanic, label="Whole Dataset"),
            dp.Code(code, label="Source code"),
        ]
    ),
)

app.save(path="select.html")
"""

titanic = sns.load_dataset("titanic")

dp.Blocks(
    "# Titanic overview",
    dp.HTML(
        '<html><img alt="No description has been provided for this image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/RMS_Titanic_3.jpg/1599px-RMS_Titanic_3.jpg" style="height:400px;display:flex;margin:auto"/></html>'
    ),
    dp.Select(
        blocks=[
            dp.Table(titanic.describe(), label="Data Description"),
            dp.DataTable(titanic, label="Whole Dataset"),
            dp.Code(code, label="Source code"),
        ],
        type=dp.SelectType.DROPDOWN,
    ),
)