Streamlit AGGrid: add custom cell editor

Custom Components streamlit-aggrid
1

I’d like to add this custom cell editor or something similar in functionality:
Option 1: ag-grid-autocomplete-editor - npm (npmjs.com)
Option 2: Next-level cell editing in ag-Grid with CRUD and React Hooks

How do I go about making this custom cell editor JS to the AG Grid? I could add just the code to JSCode object, but what about the dependencies in the import statements? Do I need to create a component within Streamlit?

2

Nobody has suggestions, or better a working example, about this topic?

I need custom cell editors; I’m trying to implement a ‘select allow typing’ and a ‘multiselect not allow typing‘

3

Hi @sabbakwaas

Here’s the code to get you started with the dropdown - you need to double click the cell below the Country heading to see the dropdown and choose from it.

import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, GridOptionsBuilder
from st_aggrid.shared import GridUpdateMode, AgGridTheme

country_lst = ["", "India", "Indonesia", "Russia", "Germany"]
df=pd.DataFrame({ "Country": ['']})

gridOptions = GridOptionsBuilder.from_dataframe(df)
gridOptions.configure_column('Country', 
                             editable=True, 
                             cellEditor='agSelectCellEditor', 
                             cellEditorParams={'values': country_lst })
gb = gridOptions.build()

dta = AgGrid(df, 
             gridOptions=gb, 
             height=200, 
             theme=AgGridTheme.ALPINE, 
             update_mode=GridUpdateMode.SELECTION_CHANGED)

Since I know minimal JS, someone else will have to contribute for the ‘search-as-you-type’ functionality of the dropdown. Alternatively, you can use the Streamlit’s data_editor instead - refer to the docs for this.

This code works as intended for the library versions stated below.

Cheers

PS: streamlit-aggrid - 1.1.4.post1
streamlit - 1.49.1