Black Lives Matter. Please consider donating to Black Girls Code today.

DataTable drop-down one row

I am using a DataTable in my app and am wondering if it is possible to only have dropdowns on the first row, not all rows in the columns? I am updating the filter_query based on the selected item from the drop-down and load times are drastically longer when all rows are returned as dropdowns.

I figured it out. Using dropdown_data instead of drop-down. Then return a list of dicts instead of dict.

Is there any way to have the header be the dropdowns instead of the rows?

yes possible. use your dataframe variable mentions its column like

dd = df.columns
Here the dd have the header name…so use the dd in the dropdown.

I mean only have the dropdowns on the headers, not the rows.

Not have the dropdowns include the header names.

Is this possible? Surely I’m not the only one requesting this…

I can’t understand what’s your need… Can you please say clearly, so i could help you and also i will try with my knowledge… Or mention some examples or photo of the dropdown

Try this example program, this can give you an idea or be a model for you.

import random
import pandas as pd
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go
app = dash.Dash(name)

#load the csv in dataframe
names = [‘sepal-length’, ‘sepal-width’, ‘petal-length’, ‘petal-width’, ‘class’]
data = pd.read_csv(‘https://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data’, names=names)

#Define the layout of app

app.layout = html.Div(
[
html.Div([
dcc.Dropdown(
id=‘ddl_x’,
options=[{‘label’: i, ‘value’: i} for i in names],
value=‘Price’,
style={‘width’: ‘50%’}
),
dcc.Dropdown(
id=‘ddl_y’,
options=[{‘label’: i, ‘value’: i} for i in names],
value=‘Market Cap’,
style={‘width’: ‘50%’}
),
], style={‘width’: ‘100%’, ‘display’: ‘inline-block’}),
html.Div([
dcc.Graph(id=‘graph1’)
], style={‘width’: ‘100%’, ‘display’: ‘inline-block’})
]
)

#Now callback function

@app.callback(
Output(component_id=‘graph1’, component_property=‘figure’),
[
Input(component_id=‘ddl_x’, component_property=‘value’),
Input(component_id=‘ddl_y’, component_property=‘value’)
]
)
def update_output(ddl_x_value, ddl_y_value):
figure = {
‘data’: [
go.Scatter(
x=data[data[‘class’] == cls][ddl_x_value],
y=data[data[‘class’] == cls][ddl_y_value],
mode=‘markers’,
marker={ ‘size’: 15 },
name=cls
) for cls in data[‘class’].unique()
],
‘layout’:
go.Layout(
height=350,
hovermode=‘closest’,
title=go.layout.Title(text=‘Dash Interactive Data Visualization’, xref=‘paper’, x=0)
)

}
return figure

if name == ‘main’:
app.run_server(debug=True, port=8080)

Thanks for the example, but I don’t see how this can help. I am talking about a DataTable, not dropdowns and not a graph.
Using dropdown_data DataTable properties, you can have dropdowns on the rows of the DataTable.

I would like the dropdowns to be on the Header of the DataTable, not the rows. The closest I have got is dropdowns on the first row.

Does that help clarify what I am looking for?

As you see in the picture, I have dropdown_data on the first row of the DataTable. I would like the dropdown to be on the Header (circled in blue). Is this possible?
image

Hey, did you solve this issue with having dropdown only for column header?

Not directly. I ended up hiding the header then using the first row to populate the column names and appending to the dataframe from there. Then will conditional drop-down I specified on row 0. Probably not the best way, but it worked for me.

Ohh, okay. I got it, clever idea! Thank you so much for reply, I will try to implement this in my case :slight_smile:

Can you give a short example on how you impletment it? I didn’t find any helpful information how to use the dropdown_data function. Thank you.

Let me apology in advance, I have not posted code here before and it may not be formatted correctly. Basically create a new dataframe with only the columns from you current dataframe:

df = pd.DataFrame(dg.columns)
do whatever your plans on with your data and then append it to the new DataFrame:
df = df.append(**, ignore_index=True).reset_index(drop=True)

Create the dropdown data list of what to display, there may be a better way, but I just created a dictionary to send back:
e = {}
for c in dg.columns:
e[c] = {}
e[c][‘clearable’] = True
e[c][‘options’] = [{‘label’: i if i != c else ’ ’ + i, ‘value’: i} for i in sorted(g[c].unique())] (you don’t have to sort here)

Then with style_data_conditional I specified to only do it for row 0.

I also set style_header style to {‘fontSize’: 0, ‘height’: 0}, be careful here, if you use filtering do not set to {‘display’: ‘none’}

In my use case, I always wanted to display the headers on row 0 regardless if they selected something from the dropdown. To display what they selected, I used tooltips and tooltip_conditional to display what was selected.

There may be a better way to do this since I haven’t been using Dash for very long, but this works for me.

Hello Croll12,

thank you for your description. However I am very new into Dash and I am struggling at lot to make this thing work. It is maybe possible for you to make a simple example that I can run?

Are you looking for help with dropdown_data or help on the original post of using it on the header row?

Hmm, I’m trying to implement dropdown_data for filtering in my own program, but I can’t seem to figure it out.

I’ve tried manually declaring dropdown_data and setting it via callback, but the dropdown never appears in the table.

For reference, I set it as follows:

dropdown_data = [{j: {'clearable': True, 'options': [{'label': i, 'value': i} for i in list_of_options]} for j in col_ids}]

I’m not sure what I’m doing wrong here…

I suspect that it might be related to what you mentioned here:

But I’m not really sure what you’re doing with style_data_conditional

Did you set ‘presentation’:‘dropdown’ on the columns?