Can I have editable cells in a Dash data table to allow a user to input data?

Dash Python
1

I am thinking to build a small app that will allow users to enter data in a data table and will store the data in a data frame. I am trying to research the best way to go about this and like the Dash data tables, but it looks like you can only edit rows and columns. Am I reading this correctly? Editable DataTable | Dash for Python Documentation | Plotly

The goal of the project is to display data that I already have and collect more data that’s needed. Is there a better way to go about this? Storing the data in a pandas data frame is fine. Thank you in advance!

2

Hi @Akane
With Dash DataTable, you can also allow user to add new rows and add data that way.

3

@Akane Is your specific question how do you collect data and store it? If so, then @adamschroeder 's answer allows them to edit but not save the data. I think there are methods to save user input data into a database, but I’m not that familiar on how to do it. @adamschroeder do you know if there are any good resources on how to do that?

4

One way to save the data would be to connect the datatable to an external database. Whenever the user submits the new data inputted into the DataTable, the DB would update as well. I have a video tutorial that shows that process, but it’s not my preferred way because it takes all the data from the DataTable and uploads everything into the DB instead of just the new data.
See callback on code line 87 here.

If I find other resources on the topic, I’ll make sure to add them here. If anyone else knows of resources, please add them to this thread below.
Thank you,

5

Hey i am still having issue in this can anyone explain in detail please.

6

Thank you @johnkangw and @adamschroeder for the reply.

@johnkangw yes I have a problem with storing editable datatable.
@adamschroeder I would like to save my data into a dataframe or an excel file ( update my excel file with the new data).

Thank you so much for your help.

7

With DataTable, you can definitely make individual cells editable. You can do this simply by adding the editable=True parameter to the DataTable component. I don’t recommend using this as a way to add data, it will trigger a callback every time you change any cell, but it will update the data property which you can then use to update the pre-existing data however you want.

A better way is to create input components for specific columns. Then you can control when the data is updated with a button click.

2 Likes