DataTable Dropdowns
The DataTable 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.
DataTable with Per-Column Dropdowns
from dash import Dash, dash_table, html
import pandas as pd
from collections import OrderedDict
app = Dash(__name__)
df = pd.DataFrame(OrderedDict([
('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
('temperature', [13, 43, 50, 30]),
('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))
app.layout = html.Div([
dash_table.DataTable(
id='table-dropdown',
data=df.to_dict('records'),
columns=[
{'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},
{'id': 'temperature', 'name': 'temperature'},
{'id': 'city', 'name': 'city', 'presentation': 'dropdown'},
],
editable=True,
dropdown={
'climate': {
'options': [
{'label': i, 'value': i}
for i in df['climate'].unique()
]
},
'city': {
'options': [
{'label': i, 'value': i}
for i in df['city'].unique()
]
}
}
),
html.Div(id='table-dropdown-container')
])
if __name__ == '__main__':
app.run(debug=True)
DataTable with Per-Row Dropdowns
from dash import Dash, dash_table, html
import pandas as pd
from collections import OrderedDict
app = Dash(__name__)
df_per_row_dropdown = pd.DataFrame(OrderedDict([
('City', ['NYC', 'Montreal', 'Los Angeles']),
('Neighborhood', ['Brooklyn', 'Mile End', 'Venice']),
('Temperature (F)', [70, 60, 90]),
]))
app.layout = html.Div([
dash_table.DataTable(
id='dropdown_per_row',
data=df_per_row_dropdown.to_dict('records'),
columns=[
{'id': 'City', 'name': 'City'},
{'id': 'Neighborhood', 'name': 'Neighborhood', 'presentation': 'dropdown'},
{'id': 'Temperature (F)', 'name': 'Temperature (F)'}
],
editable=True,
dropdown_conditional=[{
'if': {
'column_id': 'Neighborhood', # skip-id-check
'filter_query': '{City} eq "NYC"'
},
'options': [
{'label': i, 'value': i}
for i in [
'Brooklyn',
'Queens',
'Staten Island'
]
]
}, {
'if': {
'column_id': 'Neighborhood',
'filter_query': '{City} eq "Montreal"'
},
'options': [
{'label': i, 'value': i}
for i in [
'Mile End',
'Plateau',
'Hochelaga'
]
]
},
{
'if': {
'column_id': 'Neighborhood',
'filter_query': '{City} eq "Los Angeles"'
},
'options': [
{'label': i, 'value': i}
for i in [
'Venice',
'Hollywood',
'Los Feliz'
]
]
}]
),
html.Div(id='dropdown_per_row_container')
])
if __name__ == '__main__':
app.run(debug=True)