A post was split to a new topic: Dash DataTable - sortColumn and sortDirection
If the table is a result of a multi-select dropdown, is there a way to ensure that the changes in the table are not changed when the dropdown is changed?
because right now, if the data in the table is edited, and another value is selected in the dropdown, the original dataframe is called again.
i tried to work around this by having an intermediate component as in https://dash.plot.ly/sharing-data-between-callbacks , but then the table would be the input of the component and the component would be the input of the table, which leads to error loading dependencies (naturally).
Hi All,
I am trying to filter on rows that have alphanumeric character strings. So 6A7D. I can only filter by 6 cannot filter the rest. Is this something that can be supported as well?
Thanks,
Kaushy
Hi
It’s really nice, I’m relying on the repo a lot.
I run into a problem when I tried to update the underlying data of the datatable (I described it in a separate post). Do you have any thoughts on it?
Thanks
Hi @chriddyp
Is there any option for multiple filter?
I want to select all the Asia and Africa in the above example.
Also while filtering I want to give as below.
-
120 & <200
- Africa & Americal
Is there a way?
What is the status of dash-tables? has been implemented into the Dash API yet?
Mitch
I copy pasted the same code just to see what happens. But it threw some error
TypeError: Unexpected keyword argument `dataframe`
and it suggested me to use
Allowed arguments: column_widths, columns, editable, enable_drag_and_drop, filterable, filters, header_row_height, id, max_rows_in_viewport, min_height, min_width, resizable, row_height, row_scroll_timeout, row_selectable, row_update, rows, selected_row_indices, sortColumn, sortDirection, sortable, tab_index
Is dataframe
removed?
Is there a way to make one column dependent on other columns? Where can I read up on how to do this if it is possible?
Has anyone looked into creating a dropdown feature for the table?
For example, ‘type’ column there are only 3 options [strain, distance, accelerometer]
Hi Roman, I see you have provided a solution to the problem but it is still not working for me, actually I try to create 3 tabs for the GRAPMINDER data table each tab has the same datatable to make it easier for instance, however it displays only tabs and nothing inside also the tabs stick in the initial value (they are not reactive).
You said we have to add html.Div(dt.DataTable(rows=[{}]), style={‘display’: ‘none’})
but where exactly in thge code?
That will be very appreciated if anyone can help me, thank you!
Here my code:
-- coding: utf-8 --
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
from loremipsum import get_sentences
import pandas as pd
import plotly
app = dash.Dash()
vertical = False
app.scripts.config.serve_locally = False
app.config.supress_callback_exceptions = True
DF_GAPMINDER = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv’)
DF_GAPMINDER = DF_GAPMINDER[DF_GAPMINDER[‘year’] == 2007]
DF_GAPMINDER.loc[0:20]
test_layout = html.Div([
html.H4(‘Gapminder DataTable’),
dt.DataTable(
rows=DF_GAPMINDER.to_dict(‘records’),
# optional - sets the order of columns
columns=sorted(DF_GAPMINDER.columns),
row_selectable=True,
filterable=True,
sortable=True,
selected_row_indices=[],
id='datatable-gapminder'
),
html.Div(id='selected-indexes'),
dcc.Graph(
id='graph-gapminder'
),
], className=“container”)
if not vertical:
app.layout = html.Div([
dcc.Tabs(
tabs=[
{‘label’: ‘Market Value’, ‘value’: 1},
{‘label’: ‘Usage Over Time’, ‘value’: 2},
{‘label’: ‘Predictions’, ‘value’: 3},
{‘label’: ‘Target Pricing’, ‘value’: 4},
],
value=1,
id=‘tabs’,
#vertical=vertical
),
html.Div(id=‘tab-output’)
], style={
‘width’: ‘80%’,
‘fontFamily’: ‘Sans-Serif’,
‘margin-left’: ‘auto’,
‘margin-right’: ‘auto’
})
else:
app.layout = html.Div([
html.Div(
dcc.Tabs(
tabs=[
{‘label’: ‘Market Value’, ‘value’: 1},
{‘label’: ‘Usage Over Time’, ‘value’: 2},
{‘label’: ‘Predictions’, ‘value’: 3},
{‘label’: ‘Target Pricing’, ‘value’: 4},
],
value=3,
id=‘tabs’,
vertical=vertical,
style={
‘height’: ‘100vh’,
‘borderRight’:‘thin lightgrey solid’,
‘textAlign’:‘left’
}
),
style={‘width’: ‘20%’, ‘float’: ‘left’}
),
html.Div(
html.Div(id=‘tab-output’),
style={‘width’: ‘80%’, ‘float’: ‘right’}
)
], style={
‘fontFamily’: ‘Sans-Serif’,
‘margin-left’: ‘auto’,
‘margin-right’: ‘auto’,
})
@app.callback(
dash.dependencies.Output(‘tab-output’, ‘children’),
[dash.dependencies.Input(‘overall-tabs’, ‘value’)])
def display_content(overall_tab):
if overall_tab == 1:
return html.Div([])
elif overall_tab == 2:
return html.Div([])
elif overall_tab == 3:
return test_layout
@app.callback(
Output(‘datatable-gapminder’, ‘selected_row_indices’),
[Input(‘graph-gapminder’, ‘clickData’)],
[State(‘datatable-gapminder’, ‘selected_row_indices’)])
def update_selected_row_indices(clickData, selected_row_indices):
if clickData:
for point in clickData[‘points’]:
if point[‘pointNumber’] in selected_row_indices:
selected_row_indices.remove(point[‘pointNumber’])
else:
selected_row_indices.append(point[‘pointNumber’])
return selected_row_indices
@app.callback(
Output(‘graph-gapminder’, ‘figure’),
[Input(‘datatable-gapminder’, ‘rows’),
Input(‘datatable-gapminder’, ‘selected_row_indices’)])
def update_figure(rows, selected_row_indices):
dff = pd.DataFrame(rows)
fig = plotly.tools.make_subplots(
rows=3, cols=1,
subplot_titles=(‘Life Expectancy’, ‘GDP Per Capita’, ‘Population’,),
shared_xaxes=True)
marker = {‘color’: [’#0074D9’]*len(dff)}
for i in (selected_row_indices or []):
marker[‘color’][i] = ‘#FF851B’
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘lifeExp’],
‘type’: ‘bar’,
‘marker’: marker
}, 1, 1)
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘gdpPercap’],
‘type’: ‘bar’,
‘marker’: marker
}, 2, 1)
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘pop’],
‘type’: ‘bar’,
‘marker’: marker
}, 3, 1)
fig[‘layout’][‘showlegend’] = False
fig[‘layout’][‘height’] = 800
fig[‘layout’][‘margin’] = {
‘l’: 40,
‘r’: 10,
‘t’: 60,
‘b’: 200
}
fig[‘layout’][‘yaxis3’][‘type’] = ‘log’
return fig
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})
if name == ‘main’:
app.run_server(debug=True)
Hi Chris, I used the same code as you but nothing displays, could you tell me how did you resolve your issue, thanks in advance, here my code:
-- coding: utf-8 --
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
from loremipsum import get_sentences
import pandas as pd
import plotly
app = dash.Dash()
vertical = False
app.scripts.config.serve_locally = False
app.config.supress_callback_exceptions = True
DF_GAPMINDER = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv’)
DF_GAPMINDER = DF_GAPMINDER[DF_GAPMINDER[‘year’] == 2007]
DF_GAPMINDER.loc[0:20]
test_layout = html.Div([
html.H4(‘Gapminder DataTable’),
dt.DataTable(
rows=DF_GAPMINDER.to_dict(‘records’),
# optional - sets the order of columns
columns=sorted(DF_GAPMINDER.columns),
row_selectable=True,
filterable=True,
sortable=True,
selected_row_indices=[],
id='datatable-gapminder'
),
html.Div(id='selected-indexes'),
dcc.Graph(
id='graph-gapminder'
),
], className=“container”)
if not vertical:
app.layout = html.Div([
dcc.Tabs(
tabs=[
{‘label’: ‘Market Value’, ‘value’: 1},
{‘label’: ‘Usage Over Time’, ‘value’: 2},
{‘label’: ‘Predictions’, ‘value’: 3},
{‘label’: ‘Target Pricing’, ‘value’: 4},
],
value=1,
id=‘tabs’,
#vertical=vertical
),
html.Div(id=‘tab-output’)
], style={
‘width’: ‘80%’,
‘fontFamily’: ‘Sans-Serif’,
‘margin-left’: ‘auto’,
‘margin-right’: ‘auto’
})
else:
app.layout = html.Div([
html.Div([
html.Div(
dcc.Tabs(
tabs=[
{‘label’: ‘Market Value’, ‘value’: 1},
{‘label’: ‘Usage Over Time’, ‘value’: 2},
{‘label’: ‘Predictions’, ‘value’: 3},
{‘label’: ‘Target Pricing’, ‘value’: 4},
],
value=3,
id=‘tabs’,
vertical=vertical,
style={
‘height’: ‘100vh’,
‘borderRight’:‘thin lightgrey solid’,
‘textAlign’:‘left’
}
),
style={‘width’: ‘20%’, ‘float’: ‘left’}
),
html.Div(
html.Div(id=‘tab-output’),
style={‘width’: ‘80%’, ‘float’: ‘right’}
)
], style={
‘fontFamily’: ‘Sans-Serif’,
‘margin-left’: ‘auto’,
‘margin-right’: ‘auto’,
}),
test_layout
])
@app.callback(
dash.dependencies.Output(‘tab-output’, ‘children’),
[dash.dependencies.Input(‘overall-tabs’, ‘value’)])
def display_content(overall_tab):
if overall_tab == 1:
return html.Div([])
elif overall_tab == 2:
return html.Div([])
elif overall_tab == 3:
return test_layout
@app.callback(
Output(‘datatable-gapminder’, ‘selected_row_indices’),
[Input(‘graph-gapminder’, ‘clickData’)],
[State(‘datatable-gapminder’, ‘selected_row_indices’)])
def update_selected_row_indices(clickData, selected_row_indices):
if clickData:
for point in clickData[‘points’]:
if point[‘pointNumber’] in selected_row_indices:
selected_row_indices.remove(point[‘pointNumber’])
else:
selected_row_indices.append(point[‘pointNumber’])
return selected_row_indices
@app.callback(
Output(‘graph-gapminder’, ‘figure’),
[Input(‘datatable-gapminder’, ‘rows’),
Input(‘datatable-gapminder’, ‘selected_row_indices’)])
def update_figure(rows, selected_row_indices):
dff = pd.DataFrame(rows)
fig = plotly.tools.make_subplots(
rows=3, cols=1,
subplot_titles=(‘Life Expectancy’, ‘GDP Per Capita’, ‘Population’,),
shared_xaxes=True)
marker = {‘color’: [’#0074D9’]*len(dff)}
for i in (selected_row_indices or []):
marker[‘color’][i] = ‘#FF851B’
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘lifeExp’],
‘type’: ‘bar’,
‘marker’: marker
}, 1, 1)
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘gdpPercap’],
‘type’: ‘bar’,
‘marker’: marker
}, 2, 1)
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘pop’],
‘type’: ‘bar’,
‘marker’: marker
}, 3, 1)
fig[‘layout’][‘showlegend’] = False
fig[‘layout’][‘height’] = 800
fig[‘layout’][‘margin’] = {
‘l’: 40,
‘r’: 10,
‘t’: 60,
‘b’: 200
}
fig[‘layout’][‘yaxis3’][‘type’] = ‘log’
return fig
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})
if name == ‘main’:
app.run_server(debug=True)
Hi folks – I’m closing this thread for now. Please ask new questions about tables in dash in new topics. Thank you!
We have incorporated the community’s feedback and published a first-class DataTable
component
Community Thread: Introducing Dash DataTable
Documentation: https://dash.plot.ly/datatable
GitHub: https://github.com/plotly/dash-table
Many thanks to everyone for their feedback, can’t wait to see what you build with it