Ag-Grid component with input support

[PablocFonseca]

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

[Shinigami86]

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.

[PablocFonseca]

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

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

[Shinigami86]

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

[kaveh]

How did you manage to work with images?

[Shinigami86]

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)

[Charly_Wargnier]

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

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

Setting were as follows:

Thanks,
Charly

[dataexplorer]

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

[PablocFonseca]

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

[MesumRaza]

Cannot handle Date Column

[MesumRaza]

Wonderful Job man!

[Charly_Wargnier]

Ace! Thanks Pablo!

[imClumsyPanda]

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

[Shinigami86]

Wonderful! Good job Pablo!
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

[PablocFonseca]

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.

[SimonBiggs]

Updated streamlit share link:

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

[apex_yu]

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

[Charly_Wargnier]

Thanks Apex!

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

Charly

[PablocFonseca]

To write multiple grids, did you try to define a diferent and unique key parameter for each one of them?

[apex_yu]

sorry for confusing, I have two problem so far using the aggrid

1. the code above can actually be
   ag_grid(df1)

ag_grid(df2)

ag_grid(df3)

and the error still appears, and i wonder if this is the render of the component side

• Towards the bottom of the source file, the template calls Streamlit.setComponentReady() to tell Streamlit it’s ready to start receiving data. (You’ll generally want to do this after creating and loading everything that the Component relies on.)
• It subscribes to Streamlit.RENDER_EVENT to be notified of when to redraw. (This event won’t be fired until setComponentReady is called)

And
2) the aligment of the column “name” and colume “content”
in one dataframe, some of the column name is align to left and some is align to right as shown below