Ag-Grid component with input support

🧩 Custom Components streamlit-aggrid
1

Hello!

I just implemented Ag-Grid as a custom component, just for testing. I followed some tutorials and despite the result being far from production code, I liked it and I’m planning to use it on some personal small projects.

https://github.com/PablocFonseca/streamlit-aggrid

on streamlit share:
https://share.streamlit.io/pablocfonseca/streamlit-aggrid/main/example.py

I’d like to mention I’ve zero experience with react or front-end development. Also, programing is more a hobby than a job. So, I expect there is room for lots of improvement on the code I wrote.

Pablo

34 Likes
2

Hey @PablocFonseca, welcome to the community!

Thanks a lot for sharing your streamlit-agGrid :fire:, I see lots of users on the forum looking for an alternative interactive datagrid, so if it solves your problems I’m pretty sure this will help other users as well :wink: !

(Also I peeked under the hood and wow, for a first time Python+React development you got a lot of things right!)

Bonus suggestions if you have some time for this:

  • Are you maybe able to record a small GIF to show people how it works ?
  • Would you be willing to upload your component on PyPi so it’s easier for others to install ?
  • We are multiple component creators to share a demo of the component on Streamlit Share, have you considered building a demo there for those who don’t know what’s ag-grid ?
  • Are you able to edit the Component Tracker with your newly created component :slight_smile: ? This helps us keep track of everything the community built

Anyway, great work, I’m looking forward to using it, and maybe contribute :upside_down_face: …

Fanilo

2 Likes
3

Truly awesome work @PablocFonseca! :raised_hands:

I second @andfanilo, sterling Python+React dev job for a first time! :open_mouth:

A quick q: do you know if filtered results can be exported to csv?

Thanks,
Charly

1 Like
4

@Charly_Wargnier Yes, and I believe it should be simple. It is a matter of changing the params on the getDataAsCsv(params) call on the ag-grid side.

For reference:
https://www.ag-grid.com/javascript-grid-export/

1 Like
5

This looks absolutely awesome :slight_smile: :balloon:

1 Like
6

This looks super promising. I managed to get it to work locally but I’m struggling deploying it using pipenv. I get the following error:

ERROR: Could not find a version that matches streamlit-aggrid (from -r /var/folders/g_/td0tdmf14_d_vg1lkn9zbd_c0000gp/T/pipenvel8uovqwrequirements/pipenv-78j7apf0-constraints.txt (line 3))
No versions found
Was https://pypi.org/simple reachable?

7

Looks like I was missing some lines on setup.py. It should be now installable with

pip install -i https://test.pypi.org/simple/ streamlit-aggrid

I’m not yet sure about the difference btw test.pypi and pypi.org/simple. Once I find out I’ll update.
Thanks!

8

Thanks I got it to work! This grid is absolutely awesome! Game changer!

1 Like
9

Hi Pablo!

Any luck in enabling filtered results to be exported to csv?

I’ve tried a few things yet no luck so far.

Thanks
Charly

10

Wow, this is awesome!
Is it possible to style the cell? I try to use df.style but doesn’t work (AttributeError: ‘Styler’ object has no attribute ‘to_json’)

11

Not yet… I had to spent sometime fixing pypi deployment. I’ll take a look into that later this week. If anyone wants to take a shot first, solution is somewhere here https://www.ag-grid.com/javascript-grid-export/ :slight_smile:

12

And the selectable checkbook to the left would be a great feature too. It’s already available with the selectable data component library but combining everything together would just make sense at this point.

13

This is awesome. Appreciate your work on this. Is there any delete feature to delete rows?

14

I don’t think Styler objects will work. Only dataframe objects

15

@Charly_Wargnier, @fdubinski
I uploaded another example with row selections in use, check github example.

actually filtered rows were not returned to streamlit by default, it needed a little hack to work: source

@rchamila, one option for deletion is to retrieve the selected rows and delete them on python side.

1 Like
16

is it possibile to Disable the in cell editing function ?

17

Thanks for the prompt update Pablo!

I’ve updated the pip install and now your component doesn’t seem to be working anymore - see the issue I have when trying to run one of your files below:

image
image709×247 8.33 KB

Is this expected?

Thanks,
Charly

18

My bad. Probably i uploaded it in with release flag = False. I’ll fix

1 Like
19

Just fixed in version 0.0.7. Should be working

20

Yes. Just use editable=False on columnDef. Source