Ag-grid : get column index of clicked cell

Custom Components streamlit-aggrid
1

Hi all,
I am trying to get the index of a cell when clicked. I am able to get the row using the return of AgGrid. I am also able to get the row and the column of the clicked cell using JS code but I cannot send the data to the streamlit code.

import streamlit as st
import numpy as np
import pandas as pd

from st_aggrid import AgGrid, DataReturnMode, GridUpdateMode, GridOptionsBuilder, JsCode

@st.cache()
def generate_df():
    df = pd.DataFrame(
        np.random.randint(0, 100, 30).reshape(-1, 3), columns=list("abc")
    )
    return df

data = generate_df()


gb = GridOptionsBuilder.from_dataframe(data)
gb.configure_columns(list('abc'), editable=True)


js = JsCode("""
function(e) {
    let api = e.api;
    let rowIndex = e.rowIndex;
    let col = e.column.colId;
    
    let rowNode = api.getDisplayedRowAtIndex(rowIndex);
    
    console.log("column index: " + col + ", row index: " + rowIndex);
};
""")

gb.configure_grid_options(onCellClicked=js)
gb.configure_selection(selection_mode ='single')
go = gb.build()

return_ag = AgGrid(data, gridOptions=go, allow_unsafe_jscode=True, reload_data=False, update_mode=GridUpdateMode.SELECTION_CHANGED)

print(return_ag)

params returned by AgGrid:

image
image859×204 4.38 KB

And the console in Inspect with the correct column and row indexes:

image
image1370×863 33.9 KB

Any suggestions?

2 Likes
2

I’m also trying to do this but without luck

3

ok maybe this might help: Although I don’t get the index in the example, I am sure it might work the same way…

this part taking from code that I found here…

def aggrid_interactive_table(df: pd.DataFrame):
“”"Creates an st-aggrid interactive table based on a dataframe.

Args:
    df (pd.DataFrame]): Source dataframe

Returns:
    dict: The selected row
"""
options = GridOptionsBuilder.from_dataframe(
    df, enableRowGroup=True, enableValue=True, enablePivot=True
)
#editable = True was removed - need this to be non- editable
options.configure_side_bar()

options.configure_selection("single")
selection = AgGrid(
    df,
    enable_enterprise_modules=True,
    gridOptions=options.build(),
    update_mode=GridUpdateMode.SELECTION_CHANGED,
    allow_unsafe_jscode=True,
    height=200
)

return selection

Then In my code I have the following (I am doing a parent/child form think invoice header/line items)

get the GUID (ID) of the selected row and filter the child row based on that

if selection["selected_rows"]:
    c = selection["selected_rows"][0]["ID"]
    if c > 0:
        st.write(df3[df3['ID'] == c])

What the code is setting c = the “ID Field” i have in the parent Dataframe that is selected. I had to use 0 for the first even thought I am only allowing on selection. and From there I pass it to 2nd dataframe. I have not tried with index, but though this would help. (BTW I started with streamlit yesterday and just learning)

4

That will simply assign the value in column ‘ID’ of the selected row to c. This will happen regardless whether the clicked column was ‘ID’ or something else, so I’m afraid this won’t help.

5

I have the same problem. It seems that class AgGridReturn only return row info but col info. Have you solved it?Looking forward to your early reply
@dataclass
class AgGridReturn(Mapping):
“”“Class to hold AgGrid call return”“”
data: Union[pd.DataFrame , str] = None
selected_rows: List[Mapping] = field(default_factory=list)
column_state = None

6

Did you ever get anywhere with this? I’ve been trying to work this out for a while now

7

Does someone have an update about it?

8

I would be interested on this too

9

It’s incredible that a grid control won’t give you the column of the cell clicked! It’s laughable. Why do you people use this thing? it’s a toy

10

Is there any update on this issue?

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

# Define sample data
data = {
    'System Name': ['System A', 'System B', 'System C', 'System D'],
    'Value 1': [10, 20, 30, 40],
    'Value 2': [1, 2, 3, 4]
}
df = pd.DataFrame(data)

# Configure grid options using GridOptionsBuilder
builder = GridOptionsBuilder.from_dataframe(df)
builder.configure_pagination(enabled=True)
builder.configure_selection(selection_mode='single', use_checkbox=False)
builder.configure_column('System Name', editable=False)
grid_options = builder.build()

# Display AgGrid
st.write("AgGrid Demo")
return_value = AgGrid(df, gridOptions=grid_options)
print(return_value["selected_rows"])
12

This will return the selected row. How can I get the column index of the selected cell or if possible, the value of the selected cell?

13

If anyone still wondering how to get the rowIndex and colIndex of the selected cell in streamlit 1.37.0

response = AgGrid(
        df,
        gridOptions=grid_options,
        update_mode=GridUpdateMode.SELECTION_CHANGED,
        theme="streamlit",  
        height=400,
      )
rowIndex = response["grid_response"]["gridState"]["focusedCell"]["rowIndex"]
colIndex = response["grid_response"]["gridState"]["focusedCell"]["colId"]

#Selected row - as already discussed
selected_rows = response["selected_rows"].iloc[0]

#session state keeping the value of the selected cell
st.session_state.selected_cell = list(response["selected_rows"].iloc[0])[int(col_id)-1]
2 Likes