# Dash DataTable - Is it possible to save DataTable output after adding row and additional manual modification of cells

**URL:** <https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272>\
**Category:** Dash Python\
**Created:** [March 28, 2018, 7:55pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272 "2018-03-28T19:55:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan1](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@Dan1](https://community.plotly.com/u/Dan1)\
**Post date:** [March 28, 2018, 7:55pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/1 "2018-03-28T19:55:21Z")

</div>

Is it possible to save to CSV Dash DataTable after user’s manual modification (for example changing text in the cells)?

Script below add new row to Dash DataTable. For test purpose please change manually as well cell value…

`
1) Can save Dash DataTable output after adding line and manual modification to CSV file? I have already created "Save new row" button, which is intended to save file to CSV file.

Is there any possibility in dash to create message to user, for example if user clicks more than one time to the “add new row” button?

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
app = dash.Dash()
app.scripts.config.serve_locally = True
app.css.config.serve_locally = True
INITIAL_ROWS = [
{‘a’: ‘Miami’, ‘b’: “FL”},
{‘a’: ‘Redwood City’, ‘b’: “CA”},
{‘a’: ‘Chicago’, ‘b’: “IL”}
]
EXTRA_ROWS = [
{‘a’: ‘Naperville’, ‘b’: “IL”}]
app.layout = html.Div([
dt.DataTable(rows=INITIAL_ROWS, row_selectable=False,
filterable=True, sortable=True,
selected_row_indices=[], id=‘my_cities_datatable’),
html.Button(“Add new row”, id=‘get_new_row_button_id’),
html.Button(“Save new row”, id=‘save_new_row_button_id’),
], className=“container”)
@app.callback(
Output(‘my_cities_datatable’, ‘rows’),
[Input(‘get_new_row_button_id’, ‘n_clicks’),
Input(‘get_new_row_button_id’, ‘id’)])
def get_new_row(n_clicks, id_name):
print
“n_clicks=%s, id_name=%s” % (n_clicks, id_name)
if n_clicks == None:
return INITIAL_ROWS
if n_clicks ==1:
return INITIAL_ROWS + EXTRA_ROWS
if n_clicks > 1:
return print(“save current row before adding another row”)
app.css.append_css({
“external_url”: “https://codepen.io/chriddyp/pen/bWLwgP.css”
})
if name == ‘main’:
app.run_server(debug=True)
`

---

<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 29, 2018, 9:21am UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/2 "2018-03-29T09:21:39Z")

</div>

I second this request. You can download the rows (after modification) to csv using [Download raw data](https://community.plotly.com/t/download-raw-data/4700/8?u=ola)  
But if you initiate any callback before downloading them, the changes made will be lost. I haven’t quiet figured out a workaround yet.

---

<div class="post-metadata">

**Author:** ![ragesz](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@ragesz](https://community.plotly.com/u/ragesz)\
**Post date:** [April 17, 2018, 12:55pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/3 "2018-04-17T12:55:44Z")

</div>

This solution works for me:

```
# -*- 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
import json
import pandas as pd
import plotly

app = dash.Dash()

app.scripts.config.serve_locally = True

DF_SIMPLE = pd.DataFrame({
    'x': ['A', 'B', 'C', 'D', 'E', 'F'],
    'y': [4, 3, 1, 2, 3, 6],
    'z': ['a', 'b', 'c', 'a', 'b', 'c']
})

app.layout = html.Div([
    html.H4('Editable DataTable'),
    dt.DataTable(
        rows=DF_SIMPLE.to_dict('records'),

        # optional - sets the order of columns
        columns=sorted(DF_SIMPLE.columns),

        filterable=True,
        sortable=True,
        editable=True,

        id='editable-table'
    ),
    html.Div([
        html.Button('Save', id='save-button'),
        html.P(id='editable-table-hidden', style={'display':'none'}),
        html.P(id='save-button-hidden', style={'display':'none'}),
    

    ], className='row')
], className='container')

@app.callback(
    Output('editable-table-hidden', 'children'),
    [Input('editable-table', 'rows')])
def update_selected_row_indices(rows):
    global DF_SIMPLE
    DF_SIMPLE = pd.DataFrame(rows)
    return json.dumps(rows, indent=2)

@app.callback(
    Output('save-button-hidden', 'children'),
    [Input('save-button', 'n_clicks')])
def clicks(n_clicks):
    if n_clicks > 0:
        DF_SIMPLE.to_csv('df.csv', index=False, encoding='utf-8')

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

---

<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:** [April 17, 2018, 1:03pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/4 "2018-04-17T13:03:55Z")

</div>

This doesn’t really work though. Once I refresh the page, the table returns the original values.

---

<div class="post-metadata">

**Author:** ![neal](https://avatars.discourse-cdn.com/v4/letter/n/49beb7/32.png) [@neal](https://community.plotly.com/u/neal)\
**Post date:** [December 3, 2018, 10:48am UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/5 "2018-12-03T10:48:37Z")

</div>

Have you figured it out? How to keep values changed when you refresh the page? I am having the same issue.

---

<div class="post-metadata">

**Author:** ![Dan1](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@Dan1](https://community.plotly.com/u/Dan1)\
**Post date:** [December 3, 2018, 2:49pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/6 "2018-12-03T14:49:30Z")

</div>

I couldn’t do it in Dash not sure if it’s intended for complex data tables, I have learned JavaScript and program tables in ag- grid…

---

<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:** [December 3, 2018, 4:49pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/7 "2018-12-03T16:49:29Z")

</div>

I added a ‘save’ button, which triggers a callback that’s saves data table to csv.  
Theres another thread that explains adding the row, ill attach it here when I find it

---

<div class="post-metadata">

**Author:** ![neal](https://avatars.discourse-cdn.com/v4/letter/n/49beb7/32.png) [@neal](https://community.plotly.com/u/neal)\
**Post date:** [December 3, 2018, 5:01pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/8 "2018-12-03T17:01:35Z")

</div>

Great, please share when you find it.

---

<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:** [December 4, 2018, 11:08pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/9 "2018-12-04T23:08:12Z")

</div>

> [@Ola](#):
>
> Theres another thread that explains adding the row, ill attach it here when I find it

This is in our documentation! Please read through the dash table user guide, we spent a ton of time outlining all of these use cases.  
This is in part 5 (“Adding or removing rows”)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/4dd8ed7977fb554669e748bf9e6202dfb287ab21.png)  
dash table user guide here: [Dash DataTable | Dash for Python Documentation | Plotly](https://dash.plot.ly/datatable)

---

<div class="post-metadata">

**Author:** ![ShreyasT](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@ShreyasT](https://community.plotly.com/u/ShreyasT)\
**Post date:** [March 4, 2019, 4:32pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/10 "2019-03-04T16:32:33Z")

</div>

Hey Chris! I checked the link you provided above but is there any documentation specific to when the end user edits specific cells of the table? That is, after they make the necessary changes, the datatable is saved and even after refreshing the page it shows the table with the corrected changes.

---

<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 8, 2019, 9:53pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/11 "2019-03-08T21:53:43Z")

</div>

@ragesz - I don’t think the table data saves to the original df. The data behind the table is saved in a separate list of Dicts. But you can use Pandas from\_records to put that in a DF and save it.

```auto
@application.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_new = round(time_updated / 1000) + 10
    saved = pd.DataFrame.from_records(table_data)
    saved.to_csv('/home/username/data_cleaning_app_updates.csv', index=False)
```

---

<div class="post-metadata">

**Author:** ![sclavijo](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@sclavijo](https://community.plotly.com/u/sclavijo)\
**Post date:** [July 12, 2019, 5:25pm UTC](https://community.plotly.com/t/dash-datatable-is-it-possible-to-save-datatable-output-after-adding-row-and-additional-manual-modification-of-cells/9272/12 "2019-07-12T17:25:58Z")

</div>

Could you utilize the Store() component? I started playing around with a dataframe editor with the thought process being:

Select DF  
Store DF in component  
Display DF in Table populated and created via app.callback() to children  
User Edits DF  
User ‘Saves’  
Overwrite DF in Component  
Repeat until completed