AG Grid - Many editors in one column

Hi Dash Community:

If we look at the example here:
Cell Editors | Dash for Python Documentation | Plotly in the Dynamic Parameters.
Is there a way to restore normal cell input ( rather than cell editor )? For instance:

dagfuncs.dynamicOptions = function(params) {
const selectedCountry =;
if (selectedCountry === ‘United States’) {
return {
values: [‘Boston’, ‘Chicago’, ‘San Francisco’],
} else {
return {
// Default way to input value in a cell

Hi @entropy_l

Great question - this isn’t in the Dash docs yet, but you can find more info in the AG Grid docs - Many Editors One Column section.

You need to use a function with the cellEditorSelector prop in the column definition. Here’s an example:

import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash(__name__)

columnDefs = [
        "field": "country",
        "editable": False,
        "field": "city",
        "cellEditorSelector": {"function": "dynamicCellEditor(params)"},


rowData = [
    {"country": "United States", "city": "Boston"},
    {"country": "Canada", "city": "Montreal"},
    {"country": "Canada", "city": "Vancouver"},

app.layout = html.Div(
            This grid has multiple editors in the same column. It's a Select Editor if the 
            country=United States otherwise it's a regular text editor.  Try editing the cities.
            defaultColDef={"editable": True},
    style={"margin": 20},

if __name__ == "__main__":

Place the following in the dashAgGridFunctions.js file in the /assets folder

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.dynamicCellEditor = function(params) {
    if ( === 'United States') {        
        return {
            component: 'agSelectCellEditor',
            params: {values: ['Boston', 'Chicago', 'San Francisco']},
    return 'agTextCellEditor'




thank you so much!
I saw the example before in Ag Grid ---- but don’t know how to implement it… Thank you!! I get great answers from you all the time!

1 Like