Aggrid: Is there a way to color a row based on a column value?

🧩 Custom Components streamlit-aggrid
1

Hi.

I’m using streamlit-aggrid custom component to display dataframes. I’d like to color an entire row based on a specific column’s value. I’m not sure how to do it as there are no examples provided for this. Please help.

Best wishes,

Dinesh

2

I figured out how to do it, thanks to code to enable other functionality not directly supported that a user posted on the Aggrid thread in Show the Community channel. The following snippet should help (I’m assuming the dataframe has a column called state, and you know about using Aggrid otherwise including imports):

            jscode = JsCode("""
            function(params) {
                if (params.data.state === 'failed') {
                    return {
                        'color': 'white',
                        'backgroundColor': 'red'
                    }
                }
            };
            """)
            
            gridOptions = gb.build()
            gridOptions['getRowStyle'] = jscode

            grid_response = AgGrid(
                df,
                gridOptions=gridOptions,
                allow_unsafe_jscode=True,
           )

Hope this helps others searching for a similar answer,

Dinesh

4 Likes
3

hi there,

what if I want to color a row, based on a condition between other fields/columns in my dataframe?
How do the JS function will look like? how do i send over the params?

suppose I have a dataframe with the following fields:
ColumnA, ColumnB, ColumnC
and I want to apply a certain format for the entire row, if the following condition is true: ColumnA != ColumnB+ColumnC.

please help! Thanks

4

hi,

very helpful, it works. What if the column’s name has a blank space (example: “city state”)? In this case it does not work.

1 Like
5

You’ll need to configure the column with both a header_name and a field.

  • The field should not include the space (e.g., “city_state”) and is what your JS will refer to and should be a column name n your dataframe.
  • The header_name will be what is displayed (e.g., “city state”) in the table header
gob.configure_column(field="city_state", header_name="city, state")

jscode = JsCode("""
               function(params) {
                             if (params.data.city_state === 'Corvallis, Oregon') {
                                 return {
                                       'color': 'black',
                                       'backgroundColor': 'orange'
                                 }
                             }
                             if (params.data.city_state === 'Eugene, Oregon') {
                                 return {
                                       'color': 'yellow',
                                       'backgroundColor': 'green'
                                 }
                             }
                 }; 
                 """)

I didn’t check the syntax, but you may get the gist of the solution.

1 Like
6

Just set the if statement to include the conditiion you’re trying to meet: e.g.,

jscode = JsCode("""
function(params) {
        if (params.data.ColumnA != (params.data.ColumnB + params.data.ColumnC)) { return ....
1 Like
7

Hi, I’ve tried this and it sort of works. I can change the background color, make the text bold, anything I want, except change the text color itself. Do you know why? Thanks

9

Hi, this code with changing background color for a row doesn’t work for me when I create AgGrid with ‘key’ parameter. Any idea please? Thank you!