Question: I'm using streamlit-aggrid to display table. In the C column i use multiselect feature, select items and results are ok, but during selecting ,the preview values were undefined(undefined). I prefer to display the preview value like the result ex:Pink;Purple.  I use followin python code in streamlit framwork. Select Items are dictionary value. When select from dropdownbox ,i want to display name&code. But when selected,cell values are names with ";" concated. import streamlit as st import pandas as pd from st_aggrid import AgGrid, GridOptionsBuilder, JsCode df = pd.DataFrame( "", index=range(10), columns=list("c"), ) gb = GridOptionsBuilder.from_dataframe(df) gb.configure_default_column(editable=True) dic= [ { "name": 'Pink', "code": '#FFC0CB' }, { "name": 'Purple', "code": '#A020F0' }, { "name": 'Blue', "code": '#0000FF' }, { "name": 'Green', "code": '#008000' }, ] st.text(dic) gb.configure_column( "c", cellEditor="agRichSelectCellEditor", valueFormatter=JsCode( """function(params) { if (Array.isArray(params.value)) { let stringjoin=""; params.value.forEach((el) => {if (el!=null && el !== "") { stringjoin +=";"+ el.name}}); return stringjoin.slice(1) } return params.value.name; }""" ), valueParser=JsCode("""function(params) { console.log(params); const { newValue } = params.newValue; if (newValue == null || newValue === "") { return null; } if (Array.isArray(newValue)) { let stringjoin=""; newValue.forEach((el) => {stringjoin +=";"+ el.name}); return stringjoin.slice(1) } return newValue; }"""), cellEditorParams={ "values": dic, "multiSelect": "true", "suppressMultiSelectPillRenderer": "true", "formatValue": JsCode("""function(v) {if (v !== null || v !== "") { return `${v.name} (${v.code})` } } """), "parseValue": JsCode("""function(v) { let stringjoin=""; console.log(v); forEach((el) => {stringjoin +=";"+ el.name}); return stringjoin.slice(1) }"""), "allowTyping": "true", "filterList": "true", "valueListMaxHeight": 220, "searchType": "matchAny", }, ) gb.configure_grid_options(enableRangeSelection=True) go = gb.build() response = AgGrid( df, gridOptions=go, enable_enterprise_modules=True, key="grid1", allow_unsafe_jscode=True, ) 

Answer: import streamlit as st import pandas as pd from st_aggrid import AgGrid, GridOptionsBuilder, JsCode df = pd.DataFrame( "", index=range(5), columns=list("c"), ) df["c"]=[["Pink (#FFC0CB)","Purple (#A020F0)"], ["Purple (#A020F0)"], ["Blue (#0000FF)"], ["Green (#008000)"], ["Pink (#FFC0CB)"]] df["c"] = df["c"].astype("object") gb = GridOptionsBuilder.from_dataframe(df) gb.configure_default_column(editable=True) dic= [ { "name": 'Pink', "code": '#FFC0CB' }, { "name": 'Purple', "code": '#A020F0' }, { "name": 'Blue', "code": '#0000FF' }, { "name": 'Green', "code": '#008000' }, ] st.text(dic) gb.configure_column( "c", cellEditor="agRichSelectCellEditor", # singleClickEdit= "true", valueFormatter=JsCode( """function(params) { const { value } = params; if (Array.isArray(value)) { return value.map(item => item.toString().split("(")[0]).join(";"); } return value; }""" ), valueParser=JsCode("""function(params) { console.log(params); const { newValue } = params; if (newValue == null || newValue === "") { return null; } if (Array.isArray(newValue)) { return newValue; } return params.newValue.split(";"); }"""), cellEditorParams={ "values": list(map(lambda item: item["name"]+" ("+item["code"]+")", dic)), "multiSelect": "true", "allowTyping": "true", "filterList": "true", "valueListMaxHeight": 220, "searchType": "matchAny", }, ) gb.configure_grid_options(enableRangeSelection=True) go = gb.build() response = AgGrid( df, gridOptions=go, enable_enterprise_modules=True, key="grid1", allow_unsafe_jscode=True, )  initial  when edited:  end edit