Interactively editable data table in streamlit

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

2 Likes

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!

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.

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.

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 https://github.com/streamlit/streamlit/issues/1449)

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

1 Like

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

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?