Showing Percentage in AgGrid

Hi All
I’m currently using Streamlit-Aggrid to create a dashboard, but is there anyway I can show percentage such as 72.7% without changing the data to type ‘str’?
Because I need to use the sorting function on webpage, so df[‘temp’].astype(‘str’) + ‘%’ won’t cut it~

Many Thanks
Oliver Jia

Hi Oliver,

would an f-string work here? One of these two:

f"{df['temp']:.1f} %"   # if data is already percentage
f"{df['temp']:.1%}"     # if not

I tried these and .style.format() before, it works with st.dataframe() but not works with AgGrid() :sob:

I just had a look at one of the examples from the developer. Looks like it’s a little more complicated with AgGrid. There is something called a GridOptionsBuilder that lets you configure various properties of columns.

In the AgGrid Documentation, you can also find a ValueFormatter. Not sure how that works though - I don’t know JavaScript.

I’m still not sure how it works, but if I understand the example correctly, you need to do something like this:

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_column("temp", custom_format_string='%')

or maybe something like this:

gridOptions = {
    "columnDefs": [
        "field": "temp", 
        "valueFormatter": "x.toLocaleString() + '%'"


grid = AgGrid(

Hope that helps a little (sorry, I haven’t tried it myself, so not sure if any of this works). Let me know if you figure it out.

Hi much appreciate with your help, this method do change the format of the columns to percentage display, but because it change to string value, on page sorting still be a problem :sob: