Ag-Grid component with input support

I just tried on the example that’s hosted on streamlit share and could not reproduce this. Are you running it local?

1 Like

This was from the hosted example.
I also had the issue from the local version I have.

However, I just gave it a try in the hosted example and you are right I cannot reproduce it anymore!

I’ll try to uninstall and reinstall locally to see if it’s also fixed.

locally I was just using
gb = GridOptionsBuilder.from_dataframe(df)
and I’m not reconfiguring the columns after like in your example though

gb.configure_column(…) → for each column

I’ll keep you posted

I rewrote the conversion part. I’m uploading a patch to pypi

1 Like

Wow this is a fantastic job! Now streamlit with this grid has enormous potential!

Maybe there is a small “bug”. If you pass simple CSS in cellStyle it doesn’t work. You have to pass CSS through JsCode function.

If you are not using JsCode, make sure to send CSS as a dictionary, e.g.

gb.configure_column("group", cellStyle={'color': 'red'})
1 Like

Oh you are right, my fault.
I found that images work too!!!
This an example of the incredible potential of streamlit+aggrid

6 Likes

How did you manage to work with images?

1 Like

You have to use the parameter cellRenderer in gb.configure_column. Then you create a javascript funcion to pass your image.
This is my code for the table. In my case I have a hide column name NATION_PATH where there is the path of the image that I use in LEAGUE column.

    image_nation = JsCode("""function (params) {
            var element = document.createElement("span");
            var imageElement = document.createElement("img");
        
            if (params.data.NATION_PATH) {
                imageElement.src = params.data.NATION_PATH;
                imageElement.width="20";
            } else {
                imageElement.src = "";
            }
            element.appendChild(imageElement);
            element.appendChild(document.createTextNode(params.value));
            return element;
            }""")
    gb.configure_column('LEAGUE', cellRenderer=image_nation)
3 Likes

Blown away by that ag-grid integration @PablocFonseca, well done! :raised_hands:

JFYI, I stumbled upon this issue, not sure if that’s expected?

Setting were as follows:

Thanks,
Charly

I think this component (or component based on material UI)should be inbuilt into streamlit . The current method of displaying dataframe , when we have to display all data is not UI friendly

2 Likes

Fixed! It was a bug on the demo.
Also, I just learned about React Components state on v 0.1.5. Check this another demo

2 Likes
1 Like

Wonderful Job man!

1 Like

Ace! Thanks Pablo!

Great job, Pablo!! Btw is there any documentation to follow when using this awesome component?

Wonderful! Good job Pablo! :+1:
Now I’m trying to use Grid Events on the table…for example click on a cell and open a popup…but this does not seem possible for now. Do you have a solution? Here the docs for events https://www.ag-grid.com/documentation/angular/grid-events/
Thanks in advance

I know that some grid features,such as csv downloading for instance, doesn’t work bc the grid is within an iframe and browsers have security policies in place. Maybe this is the case? Try using console.log first to see if your event is fired… if u want to share your code, send me the link and I can take a look later this week.

1 Like

Updated streamlit share link:

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

1 Like

Your app is having trouble loading the st_aggrid.agGrid component.

(The app is attempting to load the component from * , and hasn’t received its “streamlit:componentReady”* message.)

  • If this is a development build, have you started the dev server?
  • If this is a release build, have you compiled the frontend?

My version is the updated v0.16 and streamlit 0.73
this happen when i dump the dataframe to the aggrid like this:

ag_grid(df)

ag_grid(df)

ag_grid(df)

formating one single have no problem so far, but consecutive transform will raise the “warning” message

1 Like

Thanks Apex!

I’ve reinstalled everything and it’s working now! :slight_smile:

Charly