Display tables in Dash

A post was split to a new topic: Dash DataTable - sortColumn and sortDirection

A post was split to a new topic: Dash DataTable - usage-selected-rows not working

A post was split to a new topic: Dash DataTable - Need help adapting usage.py with my own data

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).

A post was split to a new topic: Dash DataTable - Export as CSV

A post was split to a new topic: Dash DataTable - Display Filter on Load

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

A post was split to a new topic: Dash Table - Dropdowns Inside Table?

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.

  1. 120 & <200

  2. Africa & Americal

Is there a way?

What is the status of dash-tables? has been implemented into the Dash API yet?

Mitch

3 Likes

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]

See Dash Table - Dropdowns Inside Table? - #2 by chriddyp

1 Like

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!

2 Likes

We have incorporated the community’s feedback and published a first-class DataTable component :tada:

:point_right: Community Thread: Introducing Dash DataTable :tada:
:point_right: Documentation: https://dash.plot.ly/datatable
:point_right: GitHub: https://github.com/plotly/dash-table

Many thanks to everyone for their feedback, can’t wait to see what you build with it :hearts:

2 Likes