Display tables in Dash

[snowde]

Thanks @roman , it worked

[Ola]

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

[Kaushy]

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

[vakker]

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

[sanjayagp]

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?

[bucricket]

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

Mitch

[syntaxError]

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?

[qqm]

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?

[serlucov]

Has anyone looked into creating a dropdown feature for the table?

For example, ‘type’ column there are only 3 options [strain, distance, accelerometer]

[chriddyp]

@serlucov

Has anyone looked into creating a dropdown feature for the table?

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

[Vince]

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)