ag-grid with button for add

# code is from streamlit forums https://discuss.streamlit.io/t/ag-grid-component-with-input-support/8108/385

df=pd.DataFrame({ "Name": ['Erica', 'Rogers', 'Malcolm', 'Barrett'], "Age": [43, 35, 57, 29]})

add_row_func = """function(e) 
                    { let api = e.api; 
                      let rowIndex = e.rowIndex + 1; 
                      
                      let vnme = e.data.Name;
                      let vage = e.data.Age;

                      api.applyTransaction({addIndex: rowIndex, add: [{'Name': vnme, 'Age': vage}]}); 

                      };"""
ShowAddBtn = JsCode("function addBtn(params) { return '<button style=background-color:green;>+</button>'; }")

gridOptions = GridOptionsBuilder.from_dataframe(df)
gridOptions.configure_column('+', headerTooltip='Add new row', editable=False, filter=False, 
                            onCellClicked=JsCode(add_row_func), cellRenderer=ShowAddBtn,
                            autoHeight=True, wrapText=False, lockPosition='left', pinned='left', 
                            sorteable=False, suppressMenu=True, maxWidth = 50)
gridOptions.configure_default_column(editable=True)
gb = gridOptions.build()

dta = AgGrid(df, gridOptions=gb, height=350, allow_unsafe_jscode=True, theme="blue",
             update_mode=GridUpdateMode.SELECTION_CHANGED)