Obtain the filters in streamlit-aggrid

🧩 Custom Components streamlit-aggrid
1

Hi!
I am working with streamlit-aggrid. It is a fantastic tool.

I think I have to ask this question to @PablocFonseca. Is it possible to know what variables and conditions are used when filtering a dataframe?

  • Let me suppose I have a dataframe with age column.
  • I display it with streamlit-aggrid.
  • After that, I filter people whose age is greater than 18.

Is it possible that, apart form getting the data, to obtain a list with the conditions used? In this case, I would obtain something like: [(age, greater than, 18)]

Thanks!

2

Hi, I would be also interested in this, does somebody have an answer?

3

Hi @pachoning and @Miguel_Gonzalez ,
After more than an hour of searching and testing, I found a solution from here.
Please see my code below. Hope this could be a help for you.
PS: Refer here to know how gridOptions.api works.

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

# Test data is copy from www.ag-grid.com
# In order to minimize the coding time, please allow me to show it in such a weird format.
data = {
    "Michael Phelps": 27,
    "Natalie Coughlin": 25,
    "Aleksey Nemov": 24,
    "Alicia Coutts": 24,
    "Missy Franklin": 17,
    "Ryan Lochte": 27,
    "Allison Schmitt": 22,
    "Natalie Coughlin": 21,
    "Ian Thorpe": 17,
    "Dara Torres": 33,
    "Cindy Klassen": 26,
}

df = pd.DataFrame({"name": data.keys(), "age": data.values()})


defaultColDef = {
    "filter": True,
    "resizable": True,
    "sortable": True,
    
}

# refer from https://www.ag-grid.com/javascript-data-grid/filter-api/#example-filter-api-readonly
# This is the keypoint. 
"""
If you have a component that you wish to work on data once it's ready
 (calculate the sum of a column for example) 
then you'll need to hook into either the gridReady 
or the firstDataRendered events.
"""
onFirstDataRendered = JsCode("""
function onFirstDataRendered(parmas) {
  # console.log('The grid is now ready');
  var ageFilterComponent = parmas.api.getFilterInstance('age');
  ageFilterComponent.setModel({
    type: 'greaterThan',
    filter: 18,
    filterTo: null,
  });

  parmas.api.onFilterChanged();
}
""")

options = {
    "rowSelection": "multiple",
    "rowMultiSelectWithClick": True,
    # "sideBar": ["columns", 'filters'],
    "enableRangeSelection": True,
    "onFirstDataRendered": onFirstDataRendered
}

options_builder = GridOptionsBuilder.from_dataframe(df)
options_builder.configure_default_column(**defaultColDef)
options_builder.configure_grid_options(**options)
grid_options = options_builder.build()
grid_table = AgGrid(df, grid_options, allow_unsafe_jscode=True)

image
image886×413 15.6 KB

The filter is set with a model after the grid is ready.
image

1 Like
4

Hello!
I have tried to adapt this code to get the column where a filter was applied, but without success!
I think it’s related to onFilterChanged, but I don’t know exactly how to do it… Does anyone know? Thanks :slight_smile:

5

Hey @CharlieLL

I tried to implement the above code but it does not work for me. It gives Invalid Token error when I try to render the aggrid table.

@Catia_Correia Did you by any change find a solution? Thank you in advance!

6

Remove the comment from JS code:
# console.log('The grid is now ready');