Ag-Grid Format ROW as percentage

Custom Components streamlit-aggrid
1

There are lots of examples of how to format columns, and I can get foreground and bg coloring for particular rows, but how do I do numeric formatting for a particular row as [percentange, FP, etc]???
@PablocFonseca ?

2

Bump? anyone?

3

Same problem here, any solution?

4

User jsCode, it works for me

JsCode('''
        function(params){
            if (params.value == 0){
                return '';
            }else{
                return new Intl.NumberFormat('default', {
                                              style: 'percent',
                                              minimumFractionDigits: 2,
                                              maximumFractionDigits: 2,
                                              }).format(params.value);
            }
        }
        ''')
5

Hi @apassy and @PX_G

See if the following code works for you. I have provided both options: (a) formatting the entire column as a percentage, and (b) formatting a column cell based on a row condition. Refer col titled ‘PC_col’

import streamlit as st
import pandas as pd
from st_aggrid import GridOptionsBuilder, AgGrid, JsCode

st.set_page_config(layout = "wide", initial_sidebar_state = "expanded")

df = pd.DataFrame({'Num_col': [1000, 2000, 3000], 'PC_col': [18, 83, 64]})

sc1, sc2, sc3 = st.columns(3)
with sc1:
    st.caption('No changes applied PC_col:')
    AgGrid(df, height=128, key='ag0')

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_column("PC_col", valueGetter="data.PC_col.toString() + '%';") 

vgo = gb.build()
with sc2:
    st.caption('Changes applied to all rows of PC_col')
    AgGrid(df, gridOptions=vgo, height=128, key='ag1')

sc3.caption('Conditional changes applied to only 2nd row of PC_col')
col2pcjs = JsCode(""" function(params) { if (params.data.Num_col == 2000) { return (params.value/100).toLocaleString('en-US', { style: 'percent' }) } 
                                         else                             { return params.value } }; 
                                        """)


gb2 = GridOptionsBuilder.from_dataframe(df)
gb2.configure_column("PC_col", cellRenderer=col2pcjs) 
vgo2 = gb2.build()

with sc3:
    AgGrid(df, gridOptions=vgo2, allow_unsafe_jscode=True, height=128, key='ag2')

Cheers

2 Likes
6

@Shawn_Pereira -

Thanks so much for the examples, they are very helpful, however, i’m looking to unconditionally format a particular row.

I’m missing the necessary JS and (adn ag grid) background to understand how to modify your code to do this.

1 Like