Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

DashTable does not work

Hi,

i am trying to create an simle dashboard using plotly and dash. The application is almost complete but the table slider shown on the dashboard does not work.

For the above image when I try to go from page 1 to next page using the arrow keys I am unable to do so as the arrow keys are displayed but disabled

PFA my code:

import pandas as pd     #(version 1.0.0)
import plotly           #(version 4.5.4) pip install plotly==4.5.4
import plotly.express as px

import dash             #(version 1.9.1) pip install dash==1.9.1
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

#---------------------------------------------------------------
#Taken from https://www.ecdc.europa.eu/en/geographical-distribution-2019-ncov-cases
df = pd.read_excel("C:/Users/Administrator/Desktop/Zerodha/ohlcv.xlsx")

dff = df.groupby(['Symbol'], as_index=False)[['Open','High','Low','Close','Last']].sum()
print (dff[:5])
#---------------------------------------------------------------
app.layout = html.Div([
    html.Div([
        dash_table.DataTable(
            id='datatable_id',
            data=dff.to_dict('records'),
            columns=[
                {"name": i, "id": i, "deletable": False, "selectable": False} for i in dff.columns
            ],
            editable=False,
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            row_selectable="multi",
            row_deletable=False,
            selected_rows=[],
            page_action="native",
            page_current= 0,
            page_size= 6,
            # page_action='none',
            # style_cell={
            # 'whiteSpace': 'normal'
            # },
            # fixed_rows={ 'headers': True, 'data': 0 },
            # virtualization=False,
            style_cell_conditional=[
                {'if': {'column_id': 'Symbol'},
                 'width': '40%', 'textAlign': 'left'},
                {'if': {'column_id': 'Open'},
                 'width': '30%', 'textAlign': 'left'},
                {'if': {'column_id': 'High'},
                 'width': '10%', 'textAlign': 'left'},
                {'if': {'column_id': 'Low'},
                 'width': '30%', 'textAlign': 'left'},
                {'if': {'column_id': 'Close'},
                 'width': '10%', 'textAlign': 'left'},
                {'if': {'column_id': 'Last'},
                 'width': '10%', 'textAlign': 'left'},
               
            ],
        ),
    ],className='row'),

    html.Div([
        html.Div([
            dcc.Dropdown(id='linedropdown',
                options=[
                         {'label': 'Open', 'value': 'Open'},
                         {'label': 'High', 'value': 'High'},
                         {'label': 'Low', 'value': 'Low'},
                         {'label': 'Close', 'value': 'Close'},
                         {'label': 'Last', 'value': 'Last'}
                ],
                value='Close',
                multi=False,
                clearable=False
            ),
        ],className='six columns'),

        html.Div([
        dcc.Dropdown(id='piedropdown',
            options=[
                
                         {'label': 'Open', 'value': 'Open'},
                         {'label': 'High', 'value': 'High'},
                         {'label': 'Low', 'value': 'Low'},
                         {'label': 'Close', 'value':'Close'},
                         {'label': 'Last', 'value': 'Last'},
                         
                
            ],
            value='Close',
            multi=False,
            clearable=False
        ),
        ],className='six columns'),

    ],className='row'),

    html.Div([
        html.Div([
            dcc.Graph(id='linechart'),
        ],className='six columns'),

        html.Div([
            dcc.Graph(id='piechart'),
        ],className='six columns'),

    ],className='row'),


])

#------------------------------------------------------------------
@app.callback(
    [Output('piechart', 'figure'),
     Output('linechart', 'figure')],
    [Input('datatable_id', 'selected_rows'),
     Input('piedropdown', 'value'),
     Input('linedropdown', 'value')]
)
def update_data(chosen_rows,piedropval,linedropval):
    if len(chosen_rows)==0:
        df_filterd = dff[dff['Symbol'].isin(['APLAPOLLO','AUBANK','AARTIDRUGS'])]
    else:
        print(chosen_rows)
        df_filterd = dff[dff.index.isin(chosen_rows)]

    pie_chart=px.pie(
            data_frame=df_filterd,
            names='Symbol',
            values=piedropval,
            hole=.3,
            labels={'Symbol'}
            )


    #extract list of chosen countries
    list_chosen_countries=df_filterd['Symbol'].tolist()
    #filter original df according to chosen countries
    #because original df has all the complete dates
    df_line = df[df['Symbol'].isin(list_chosen_countries)]

    line_chart = px.line(
            data_frame=df_line,
            x='Date',
            y=linedropval,
            color='Symbol',
            labels={'Symbol', 'Date'},
            )
    line_chart.update_layout(uirevision='foo')

    return (pie_chart,line_chart)

#------------------------------------------------------------------

if __name__ == '__main__':
    app.run_server(debug=False)

All the other components such as dropdown and charts work as expected as shown:

You should relabel your question as a Python question instead of R.