Interactively editable data table in streamlit

Custom Components
1

Hi everyone, firstly I would like to say that Streamlit is great. For my application, through streamlit I am trying to import an excel file as a data table and trying to make it interactively editable. Is there any way through which I can make the data table editable interactively? If not, is there any workaround for it? Any suggestions/ comments are very much appreciated. Thank you

3 Likes
2

Hey I think the use case is great! Right now I think there’s no direct way of doing it with streamlit. However, it’d be interesting to create a new Streamlit component using this react component https://nadbm.github.io/react-datasheet/

If that works, I imagine you can load your excel using Pandas and send it to the component as a Json object and work with it interactively.

Here’s the doc for creating new components https://docs.streamlit.io/en/stable/streamlit_components.html

Let me know if that helps!

3

Thank you for your response @leopiney. I will look into this for sure. Is there a way to export the data table from Streamlit app to an excel file? I found a piece of code for CSV though. I tried to export as an excel as well but I was not able to do it. Please let me know your thoughts on this. Thank you.

4

That would be fantastic actually! Has anyone worked on that yet? My react knowledge is non existent so I’m not sure how easy/difficult it would be to integrate it into a streamlit component.

5

Actually :smiley: I made a tutorial about it : https://streamlit-components-tutorial.netlify.app/ . I made it as someone who also knew nothing about React
You should then be able to pass a Dataframe as an array of dictionaries and pass it into the react-datasheet state (there are other data react here Make st.dataframe more awesome · Issue #1449 · streamlit/streamlit · GitHub)

Creating a component is easy but it does require a bit of effort as you’re manipulating a bit of Python and JS. If you’re willing to try we can help you on your way to building this though :slight_smile:

Fanilo

3 Likes
6

Thanks a lot! That super useful. I’ll give it a try!

7

I managed to use the selectable data table and it’s quite handy. I was wondering… if I wanted to change the format of the table, say, have it more dense, how would I go about that?

8

What. This is an insane amount of work! Kudos to you!

9

Hi everyone, I have just started to use Streamlit and I find it absolutely awesome!
I just wanted to know if someone knows more about the plans regarding editable data table?
I have seen that Dash has a component allowing to edit data table like a spreadsheet (Editable DataTable | Dash for Python Documentation | Plotly), does the Streamlit team plan to do something similar?
Thanks very much!

10

Hi All
Im currently using AgGrid in Streamlit, it has basic editable and interactive features which work for me.
Examples: Example
Github: Github

2 Likes
11

That’s really cool!!! Thanks very much!!!

12

hey what versions are you using, my grids keep crashing without reason?Ag-grid crashes and does not complete code to save data to backend · Issue #165 · PablocFonseca/streamlit-aggrid · GitHub