plotly/dash-docs

Shouldn't the Editable DataTable docs Contain a CSV List Editor?

schwabts opened this issue · 3 comments

The page Editable DataTable already is close to this proposal which logically might make even more sense as a sample app. Anyway, I added my thoughts as comments.

In the example editing_rows_and_columns.py in section Adding or Removing Rows I'd use

  1. id='adding-columns-name' in l. 12 and l. 56,
  2. id='adding-columns-button' in l. 17 and l. 55, and
  3. id='adding-rows-button' in l. 36 and l. 44.

For displaying an export button insert these lines before l. 32:

    export_format='csv',
    export_headers='names',

To my surprise the csv files exported by pressing the button generated because of this change do not contain the rows and columns that were added by add_row(n_clicks, rows, columns) and update_columns(n_clicks, value, existing_columns) after I had pressed the "Add Column" and "Add Row" buttons.

Moreover, because of the hard-coded filenames used by the Export button callback the exported files get overwritten everytime the button is pressed. In particular this implementation of the Export button is a problem when using different DataTables in Dash Apps. A solution for this problem is proposed in the next comment but I still did not succeed to export DataTables such that the exported files contain the rows and columns added by pressing the "Add Column" and "Add Row" buttons, too.

For displaying a custom export button create a new example making a copy of editing_rows_and_columns.py.

Insert the following lines into this copy just because even when DataTable will get an option to choose alternative filenames of exported files this might be an example of general interest.

  1. before l. 20:
    html.Button('Export to file:', id='button-export', n_clicks=0),
    dcc.Input( id='input-filename', placeholder='Filename...', value='', style={'padding': 10} ),
  1. in l. 37:
    dcc.Download(id='download')
  1. in l. 41:
@callback(
    Output('download', "data"),
    [
        State('input-filename', "value"),
        Input('button-export', "n_clicks")
    ],
    [
        State('datatable', "data")
    ],
    prevent_initial_call=True
)
def download_table(filename, n_clicks, data):
    df = pd.DataFrame.from_records(data)
    return dcc.send_data_frame(df.to_csv, filename, index=False)