# \[Solved\] Updating a Dash Datatable rows with row\_update and rows

**URL:** <https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573>\
**Category:** Dash Python\
**Created:** [October 30, 2017, 7:33pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573 "2017-10-30T19:33:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![partybearlj](https://avatars.discourse-cdn.com/v4/letter/p/e5b9ba/32.png) [@partybearlj](https://community.plotly.com/u/partybearlj)\
**Post date:** [October 30, 2017, 7:33pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/1 "2017-10-30T19:33:23Z")

</div>

I have a table of stock tickers in a dash datatable with stock performance metrics. The last row is a custom etf that weights the returns and averages them together.  
i.e.

 ![dashhelp](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/87f9ac13df26dcb3694a761bb16b264b237bf494.PNG)  
What I’m trying to do is update the custom etf columns after everything has been reweighted. Everything is preset to be equally weighted.

@app.callback(  
dash.dependencies.Output(‘comps-table’,‘rows’),  
[ dash.dependencies.Input(‘comps-table’, ‘row\_update’),  
dash.dependencies.Input(‘comps-table’, ‘rows’),  
])  
def update\_graph(tickers, selected\_ticker, row\_update, rows):  
if row\_update is not None:  
_ **creates reweighted etf** _  
return rows

Is there a way to do this? I already have it set up so when you change the weighting it effects a graph which works great but i would like the table to update as well.

Thanks

---

<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:** [October 30, 2017, 9:49pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/2 "2017-10-30T21:49:34Z")

</div>

Great question @partybearlj –

Here’s a simple that updates the 2nd column based off of edits in the first column:

```python
import copy
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
import json
import pandas as pd
import plotly

app = dash.Dash()

app.scripts.config.serve_locally = True

RECORDS = [
    {'Input': '', 'Output': ''}
    for i in range(100)
]

app.layout = html.Div([
    html.H4('Editable DataTable'),
    html.Div([
        html.Div(
            children=dt.DataTable(
                rows=RECORDS,

                # optional - sets the order of columns
                columns=['Input', 'Output'],

                editable=True,

                id='editable-table'
            ),
            className='six columns'
        ),
        html.Pre(id='output', className='six columns')
    ])
], className='container')

@app.callback(
    Output('output', 'children'),
    [Input('editable-table', 'row_update'),
     Input('editable-table', 'rows')])
def display_output(row_update, rows):
    return html.Div(className='row', children=[
        html.Div([
            html.Code('row_update'),
            html.Pre(json.dumps(row_update, indent=2))
        ], className='six columns'),
        html.Div([
            html.Code('rows'),
            html.Pre(json.dumps(rows, indent=2))
        ], className='six columns'),
    ])

@app.callback(
    Output('editable-table', 'rows'),
    [Input('editable-table', 'row_update')],
    [State('editable-table', 'rows')])
def update_rows(row_update, rows):
    row_copy = copy.deepcopy(rows)
    if row_update:
        updated_row_index = row_update[0]['from_row']
        updated_value = row_update[0]['updated'].values()[0]
        row_copy[updated_row_index]['Output'] = (
            float(updated_value) ** 2
        )
    return row_copy

app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})

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

```

![dash-datatable-editable-update-self](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/324e34bfb0ffe6ea0735d147c33ef1073ede17e5.gif)

---

<div class="post-metadata">

**Author:** ![partybearlj](https://avatars.discourse-cdn.com/v4/letter/p/e5b9ba/32.png) [@partybearlj](https://community.plotly.com/u/partybearlj)\
**Post date:** [October 30, 2017, 10:47pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/3 "2017-10-30T22:47:42Z")

</div>

Hey thanks a lot this is exactly what I needed!

---

<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 8, 2018, 2:27pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/4 "2018-06-08T14:27:25Z")

</div>

Has datatable been updated so this syntax is no longer usable?

---

<div class="post-metadata">

**Author:** ![fish\_in\_mn](https://avatars.discourse-cdn.com/v4/letter/f/7ea924/32.png) [@fish\_in\_mn](https://community.plotly.com/u/fish_in_mn)\
**Post date:** [March 1, 2019, 3:49pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/6 "2019-03-01T15:49:38Z")

</div>

I used ‘active\_cell’ with ‘data\_timestamp’. I also used that to make a call back to update a database table.

```auto
import time
import pandas as pd
import dash_table
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.config.suppress_callback_exceptions = False
app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

df = pd.DataFrame([[1, 2], [3, 4], [5, 6], [7, 8]], columns=["A", "B"])
           
app.layout = html.Div([
    html.H1(
        children='Sample Table - Shows how to identify modified Row',
        style={
            'textAlign': 'center'
        }
    ),

                   
    dash_table.DataTable(
                id='table-editing-simple',
                columns=[
                    {"name": "A", "id": "A", "editable": False},
                    {"name": "B", "id": "B", "editable": True}],
                data = df.to_dict("rows"),
                editable = True
                ),
    html.Div(
            html.H5(
                id='table-action-outputs',
                children='',
                style={'textAlign': 'left'}),
            style={'width': '100%', 'display': 'inline-block', 'float': 'left'},
            ),

])

@app.callback(Output('table-action-outputs', 'children'),
              [Input('table-editing-simple', 'data_timestamp'),
              Input('table-editing-simple', 'active_cell'),
              Input('table-editing-simple', 'data')])
def update_database(time_updated, cell_coordinates, table_data):
    time_updated = round(time_updated / 1000)
    time_now = round(time.time()) - 2
    if (time_updated) >= time_now:
       db_response = str(time_updated) + " " + str(time_now)
       str_return = "Data timestamp:" + str(time_updated) 
       str_return2 = ". Did you update this row? " + str(table_data[cell_coordinates[0]])
       sql_query = "UPDATE table SET B = '{table_data[cell_coordinates[0]][cell_coordinates[1]]}', MODIFIED_DATE = {time_updated} WHERE A = '{table_data[cell_coordinates[0]][cell_coordinates[0]]}'"
       db_response = f". Sample DB SQL Update statement: {sql_query}"  
    else:
       time_round = round(time.time())
       str_return = "No time match. " + str(type(time_updated)) + " is the Dash updated time which does not match this server time: " + str(time_round) + "\n"
       str_return2 = ". No matching record found due to time issue.\n"
       db_response = ". No DB update due to time gap issue.\n"
    return str_return, str_return2, db_response

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

```

---

<div class="post-metadata">

**Author:** ![dhenke](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@dhenke](https://community.plotly.com/u/dhenke)\
**Post date:** [April 23, 2019, 7:28am UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/7 "2019-04-23T07:28:48Z")

</div>

I like the approach, however, this doesn’t seem to work either? As soon as you edit a cell and press _Enter_, the _active\_cell_ is no longer the previously edited cell.

Apparently, there is no way around to compare _data\_previous_ and _data_?

---

<div class="post-metadata">

**Author:** ![diomampocharles](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/diomampocharles/32/7116_2.png) [@diomampocharles](https://community.plotly.com/u/diomampocharles)\
**Post date:** [June 23, 2019, 11:58am UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/8 "2019-06-23T11:58:24Z")

</div>

How do I make this a working one. I am not getting the table in the left, just the right (with row\_update and rows). Thank you!

---

<div class="post-metadata">

**Author:** ![pryanga](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@pryanga](https://community.plotly.com/u/pryanga)\
**Post date:** [September 16, 2019, 7:33am UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/9 "2019-09-16T07:33:51Z")

</div>

> [@chriddyp](#):
>
> ```auto
> 
> def display_output(row_update, rows): 
> return html.Div(className='row', children=[html.Div([html.Code('row_update'), html.Pre(json.dumps(row_update, indent=2))], 
> className='six columns'), 
> html.Div([ html.Code('rows'), 
> html.Pre(json.dumps(rows, indent=2)) ], 
> className='six columns'), ])
> 
> ```

what is the significance of this code chunk

Shouldnt the second app.callback display the updated value in the output column?  
Pardon if the question is noob, i m new to dash plotly.

---

<div class="post-metadata">

**Author:** ![Carl](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/carl/32/8296_2.png) [@Carl](https://community.plotly.com/u/Carl)\
**Post date:** [October 30, 2019, 11:34pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/10 "2019-10-30T23:34:07Z")

</div>

It isn’t clear to me either. Replacing the function display\_output in the original code at the top with chriddyp’s does not work: the original table does not display and is not editable.  
Replacing

```auto
import dash_table_experiments as dt

```

with

```auto
import dash_table as dt

```

also does not work. This looks like exactly the problem I have been having the past ~week. Hoping someone can help me!

Cheers,

Carl

---

<div class="post-metadata">

**Author:** ![dankie](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dankie/32/9927_2.png) [@dankie](https://community.plotly.com/u/dankie)\
**Post date:** [May 8, 2020, 10:26pm UTC](https://community.plotly.com/t/solved-updating-a-dash-datatable-rows-with-row-update-and-rows/6573/11 "2020-05-08T22:26:41Z")

</div>

Hi @chriddyp please can you post an implementation for a datatble with dropdown inputs where if i select a particular value from two columns it gives an ouput in another column emphacies is on dropdown in datatable facing this challenge for a month now