Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Dropdown usage examples #120

Merged
chriddyp merged 2 commits into from
Oct 11, 2018
Merged

Dropdown usage examples #120

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4652253
:arrow_down: dropdown usage examples
chriddyp Oct 2, 2018
db6f5e5
add conditional dropdown example
chriddyp Oct 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 189 additions & 0 deletions tests/dash/app_dropdown.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
from collections import OrderedDict
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from textwrap import dedent

import dash_table
from index import app
from .utils import section_title


ID_PREFIX = "app_dropdown"
IDS = {
"dropdown": ID_PREFIX,
"dropdown-by-cell": '{}-row-by-cell'.format(ID_PREFIX)
}


df = pd.DataFrame(OrderedDict([
('climate',
['Sunny', 'Snowy', 'Sunny', 'Rainy']),
('temperature',
[13, 43, 50, 30]),
('city',
['NYC', 'Montreal', 'Miami', 'NYC'])
]))

df_per_row_dropdown = pd.DataFrame(OrderedDict([
('City',
['NYC', 'Montreal', 'Los Angeles']),
('Neighborhood',
['Brooklyn', 'Mile End', 'Venice']),
('Temperature (F)',
[70, 60, 90]),
]))


def layout():
return html.Div([

dcc.Markdown(dedent('''
The Dash table includes support for per-column and
per-cell dropdowns. In future releases, this will
be tightly integrated with a more formal typing system.

For now, use the dropdown renderer as a way to limit the
options available when editing the values with an editable table.

''')),

section_title('Dash Table with Per-Column Dropdowns'),

dash_table.Table(
id=IDS['dropdown'],
dataframe=df.to_dict('rows'),
columns=[
{'id': 'climate', 'name': 'climate'},
{'id': 'temperature', 'name': 'temperature'},
{'id': 'city', 'name': 'city'},
],

editable=True,
column_static_dropdown=[
{
'id': 'climate',
'dropdown': [
{'label': i, 'value': i}
for i in df['climate'].unique()
]
},
{
'id': 'city',
'dropdown': [
{'label': i, 'value': i}
for i in df['city'].unique()
]
},
]
),

section_title('Dash Table with Per-Cell Dropdowns via Filtering UI'),

dash_table.Table(
id=IDS['dropdown-by-cell'],
dataframe=df_per_row_dropdown.to_dict('rows'),
columns=[
{'id': c, 'name': c}
for c in df_per_row_dropdown.columns
],

editable=True,
column_conditional_dropdowns=[
{
'id': 'Neighborhood',
'dropdowns': [

{
'condition': 'City eq "NYC"',
'dropdown': [
{'label': i, 'value': i}
for i in [
'Brooklyn',
'Queens',
'Staten Island'
]
]
},

{
'condition': 'City eq "Montreal"',
'dropdown': [
{'label': i, 'value': i}
for i in [
'Mile End',
'Plateau',
'Hochelaga'
]
]
},

{
'condition': 'City eq "Los Angeles"',
'dropdown': [
{'label': i, 'value': i}
for i in [
'Venice',
'Hollywood',
'Los Feliz'
]
]
}

]
}
]
),

section_title('Dash Table with Per-Cell Dropdowns'),

html.Div('This example uses a deprecated API, `dropdown_properties`.'),

dash_table.Table(
id=IDS['dropdown-by-cell'],
dataframe=df_per_row_dropdown.to_dict('rows'),
columns=[
{'id': c, 'name': c}
for c in df_per_row_dropdown.columns
],

editable=True,
dropdown_properties=[
{
'options': [
{'label': i, 'value': i}
for i in [
'Brooklyn',
'Queens',
'Staten Island'
]
]
},

{
'options': [
{'label': i, 'value': i}
for i in [
'Mile End',
'Plateau',
'Hochelaga'
]
]
},

{
'options': [
{'label': i, 'value': i}
for i in [
'Venice',
'Hollywood',
'Los Feliz'
]
]
},
]

),

])