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)", "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",
    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,
)

when edited: