# Display tables in Dash

**URL:** <https://community.plotly.com/t/display-tables-in-dash/4707>\
**Category:** Dash Python\
**Created:** [June 29, 2017, 7:49pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707 "2017-06-29T19:49:23Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 22, 2018, 4:51pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/83 "2018-01-22T16:51:05Z")

</div>

Split this topic on January 22, 2018, 4:51pm UTC

A post was split to a new topic: [Dash DataTable - Support for Click Events](https://community.plotly.com/t/dash-datatable-support-for-click-events/7878)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 22, 2018, 4:51pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/84 "2018-01-22T16:51:51Z")

</div>

Split this topic on January 22, 2018, 4:51pm UTC

A post was split to a new topic: [Dash DataTable - Specify which columns should be editable](https://community.plotly.com/t/dash-datatable-specify-which-columns-should-be-editable/7879)

---

<div class="post-metadata">

**Author:** ![snowde](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/snowde/32/2470_2.png) [@snowde](https://community.plotly.com/u/snowde)\
**Post date:** [January 24, 2018, 8:48pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/85 "2018-01-24T20:48:11Z")

</div>

Thanks @roman , it worked 😉

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 25, 2018, 6:40pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/86 "2018-01-25T18:40:50Z")

</div>

Split this topic on January 25, 2018, 6:40pm UTC

A post was split to a new topic: [Header and Cell Alignment in Plotly `go.Table`](https://community.plotly.com/t/header-and-cell-alignment-in-plotly-go-table/7963)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [February 6, 2018, 8:51pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/87 "2018-02-06T20:51:17Z")

</div>

Split this topic on February 6, 2018, 8:51pm UTC

A post was split to a new topic: [Dash DataTable - sortColumn and sortDirection](https://community.plotly.com/t/dash-datatable-sortcolumn-and-sortdirection/8199)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 3, 2018, 12:48pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/88 "2018-03-03T12:48:53Z")

</div>

Split this topic on March 3, 2018, 12:48pm UTC

A post was split to a new topic: [Dash DataTable - usage-selected-rows not working](https://community.plotly.com/t/dash-datatable-usage-selected-rows-not-working/8737)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 8, 2018, 9:18pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/89 "2018-03-08T21:18:54Z")

</div>

Split this topic on March 8, 2018, 9:18pm UTC

A post was split to a new topic: [Dash DataTable - Need help adapting usage.py with my own data](https://community.plotly.com/t/dash-datatable-need-help-adapting-usage-py-with-my-own-data/8862)

---

<div class="post-metadata">

**Author:** ![Ola](https://avatars.discourse-cdn.com/v4/letter/o/dbc845/32.png) [@Ola](https://community.plotly.com/u/Ola)\
**Post date:** [March 19, 2018, 12:00pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/90 "2018-03-19T12:00:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 26, 2018, 7:04pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/91 "2018-03-26T19:04:39Z")

</div>

Split this topic on March 26, 2018, 7:04pm UTC

A post was split to a new topic: [Dash DataTable - Export as CSV](https://community.plotly.com/t/dash-datatable-export-as-csv/9220)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 30, 2018, 5:08pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/92 "2018-03-30T17:08:20Z")

</div>

Split this topic on March 30, 2018, 5:08pm UTC

A post was split to a new topic: [Dash DataTable - Display Filter on Load](https://community.plotly.com/t/dash-datatable-display-filter-on-load/9319)

---

<div class="post-metadata">

**Author:** ![Kaushy](https://avatars.discourse-cdn.com/v4/letter/k/fbc32d/32.png) [@Kaushy](https://community.plotly.com/u/Kaushy)\
**Post date:** [April 6, 2018, 12:38pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/93 "2018-04-06T12:38:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [April 10, 2018, 3:50am UTC](https://community.plotly.com/t/display-tables-in-dash/4707/94 "2018-04-10T03:50:40Z")

</div>

Split this topic on April 10, 2018, 3:50am UTC

A post was split to a new topic: [Dash Table - Dropdowns Inside Table?](https://community.plotly.com/t/dash-table-dropdowns-inside-table/9558)

---

<div class="post-metadata">

**Author:** ![vakker](https://avatars.discourse-cdn.com/v4/letter/v/59ef9b/32.png) [@vakker](https://community.plotly.com/u/vakker)\
**Post date:** [April 25, 2018, 1:52pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/95 "2018-04-25T13:52:10Z")

</div>

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](https://community.plotly.com/t/datatable-update-with-filters-applied/9743)). Do you have any thoughts on it?

Thanks

---

<div class="post-metadata">

**Author:** ![sanjayagp](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sanjayagp](https://community.plotly.com/u/sanjayagp)\
**Post date:** [May 4, 2018, 5:05am UTC](https://community.plotly.com/t/display-tables-in-dash/4707/96 "2018-05-04T05:05:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![bucricket](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bucricket](https://community.plotly.com/u/bucricket)\
**Post date:** [May 11, 2018, 7:45pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/97 "2018-05-11T19:45:58Z")

</div>

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

Mitch

---

<div class="post-metadata">

**Author:** ![syntaxError](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/syntaxerror/32/3368_2.png) [@syntaxError](https://community.plotly.com/u/syntaxError)\
**Post date:** [June 4, 2018, 3:50pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/98 "2018-06-04T15:50:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![qqm](https://avatars.discourse-cdn.com/v4/letter/q/edb3f5/32.png) [@qqm](https://community.plotly.com/u/qqm)\
**Post date:** [June 7, 2018, 8:53pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/99 "2018-06-07T20:53:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![serlucov](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@serlucov](https://community.plotly.com/u/serlucov)\
**Post date:** [June 11, 2018, 4:17pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/100 "2018-06-11T16:17:10Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [June 11, 2018, 8:44pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/101 "2018-06-11T20:44:24Z")

</div>

> [@serlucov](#):
>
> Has anyone looked into creating a dropdown feature for the table?

See [Dash Table - Dropdowns Inside Table? - #2 by chriddyp](https://community.plotly.com/t/dash-table-dropdowns-inside-table/9558/2)

---

<div class="post-metadata">

**Author:** ![Vince](https://avatars.discourse-cdn.com/v4/letter/v/b5e925/32.png) [@Vince](https://community.plotly.com/u/Vince)\
**Post date:** [June 14, 2018, 4:05pm UTC](https://community.plotly.com/t/display-tables-in-dash/4707/102 "2018-06-14T16:05:13Z")

</div>

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](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](https://codepen.io/chriddyp/pen/bWLwgP.css)’  
})

if **name** == ‘ **main** ’:  
app.run\_server(debug=True)

[Previous page](https://community.plotly.com/t/display-tables-in-dash/4707.md?page=4)

[Next page](https://community.plotly.com/t/display-tables-in-dash/4707.md?page=6)