Updating Table based on selected row of another table

Dash Python
1

I am working with the Dash Tables and I am trying to update a table when a row is selected in the previous table. I am getting the second table to update when I select a row but when I go to select a different row the second table does not update with the correct information. I know that the callback function is working because I added in the print function just before the data table and that will print the correct index number to my terminal but the code will not continue on from there.

I am not sure what I am doing wrong that is keeping the table from being updated the second, third, fourth… times. I have tried looking else where but I have not been able to find an answer for my situation. Any help that can be provided will be greatly appreciated.

05%20PM
Screen Shot 2019-02-20 at 4.08.05 PM.png1314×476 34.7 KB

16%20PM
Screen Shot 2019-02-20 at 4.08.16 PM.png1288×344 45.9 KB

28%20PM
Screen Shot 2019-02-20 at 4.08.28 PM.png1302×344 46 KB

#################### CODE ####################

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import pandas as pd
from gspread_pandas import Spread
import dash_table

from …app import app

app.css.append_css({‘external_url’: ‘https://codepen.io/amyoshino/pen/jzXypZ.css’}) # noqa: E501

data = [
[‘Not Fulfilled’,‘2019-02-12 6:23:00’,‘6425386’,‘1589625’,‘jim.john@aol.com’,‘Bank of America’,‘Jim’,‘John’,“Jim’s Place”,‘Collector’],
[‘Not Fulfilled’,‘2019-02-12 6:45:00’,‘6798541’,‘1578542’,‘ssmith@yahoo.com’,‘US Bank’,‘Steve’,‘Smith’,“Smith’s Store”,‘Vision’],
[‘Not Fulfilled’,‘2019-02-12 8:16:00’,‘6673825’,‘1384408’,‘thelastresort@msn.com’,‘Chase’,‘Sarah’,‘Sica’,‘The Last Resort’,‘Firewall’],
[‘Not Fulfilled’,‘2019-02-12 9:01:00’,‘4435827’,‘1756843’,‘aaa@gmail.com’,‘Wells Fargo’,‘Eric’,‘Williams’,‘AAA’,‘Firewall’]
]
fulfillment = pd.DataFrame(data,columns=[‘Status’, ‘Created At’, ‘Internal ID’, ‘Invoice #’, ‘Customer Email’, ‘Processing Bank’, ‘First Name’, ‘Last Name’, ‘Company Name’, ‘Fulfillment Type’])

layout = html.Div([
html.Div([
dash_table.DataTable(
id=‘datatable-interactivity’,
columns=[
{“name”: i, “id”: i} for i in fulfillment.columns
],
data=fulfillment.to_dict(“rows”),
editable=False,
sorting=True,
sorting_type=“single”,
row_selectable=“single”,
selected_rows=[],
style_table={‘margin-top’: 10, ‘overflowX’: ‘scroll’},
style_cell={‘text-align’: ‘center’}
),
], className=‘ten columns offset-by-one’),

        html.Div(id='display_selected_row', className='eight columns offset-by-two')
    ])

@app.callback(
Output(‘display_selected_row’, “children”),
[Input(‘datatable-interactivity’, “derived_virtual_data”),
Input(‘datatable-interactivity’, “derived_virtual_selected_rows”)])
def update_graph(rows, derived_virtual_selected_rows):
if derived_virtual_selected_rows is None:
derived_virtual_selected_rows = []

if rows is None:
    dff = fulfillment
else:
    dff = pd.DataFrame(rows)


return html.Div([
            print(derived_virtual_selected_rows[0]),
            dash_table.DataTable(
                id='display_selected_row',
                columns=[
                    {"name": i, "id": i} for i in dff.columns
                ],
                data=dff.iloc[[derived_virtual_selected_rows[0]]].to_dict("rows"),
                editable=False,
                style_table={'margin-top': 10, 'overflowX': 'scroll'},
                style_cell={'text-align': 'center'}
            ),
        ])