How to make editable dropdown lists dynamic based on rowData?

Question

I'm trying to vet AG Grid for a project I'm working on to see if it will cover all of our needs and I'm getting stuck on a feature that seems like it should be fairly straightforward. In my rowData object, each row has an array of cities that I would like to populate a cell dropdown in the "Cities" column and allow the user to select from that dropdown.

This is my first time using AG Grid and, full discretion I haven't been through all of the documentation yet, but I'm having trouble figuring out how to access the row data in the columnDef cell editor. Here you'll see I'm trying to access it via the API, but I suspect that getValue requires parameters specifying the row and column which I don't know if I can access at the time columnDef is declared.

What I'm after is a way to define what should be in the dropdown select based on that row's data.

I'm using functional components with React 18.1.0 and AG Grid 30.1.0.

export const AGTable = ({rowData}) => {
    const gridRef = useRef();  
    function getColValue (params) {
        return params.data.cities[0]
    }


    const columnDefs = [
        {field: 'date', filter: true},
        {field: 'state'},
        {
            field:'cities',
            valueGetter:getColValue,
            editable:true,
            cellEditor: 'agSelectCellEditor',
            cellEditorParams: {
                Values:[gridRef.current.api.getValue()],
                valueListGap: 0
            }
        }
    ]

    const defaultColDef = useMemo( ()=> ({
        sortable: true,
    }));
   
    return(
        <React.Fragment>      
            <div className="ag-theme-alpine" style={{width: "auto", height: 500}}>
               
                <AgGridReact
                    ref={gridRef}
                    rowData={rowData} 
                    columnDefs={columnDefs}
                    defaultColDef={defaultColDef} 
                />
            </div>
        </React.Fragment>
    )
}

You can assume the data.json looks something like:

[
{
        "state":"Florida",
        "date":"January 1st",
        "cities":[
            "Jacksonville",
            "Miami",
            "Orlando"
        ]
        },
{
        "state":"New York",
        "date":"January 2nd",
        "cities":[
            "New York City",
            "Albany",
            "Buffalo"
        ]
        },
{
        "state":"California",
        "date":"January 3rd",
        "cities":[
            "Los Angeles",
            "San Francisco",
            "Sacramento"
        ]
        }
]

I've also tried using a callback on the click, double click and cell edit events to edit state and use that state to populate the cell editor values, but that caused a good amount of re-rendering noise and seemed overly complex for what I'm trying to accomplish.

Any help would be greatly appreciated.

Answer 1

I figured it out.

agSelectCellEditor can take a function that returns the object. so:

{
      cellEditor:'agSelectCellEditor',
      cellEditorParams: function(params){
          return {values:params.data.cities}
      }
}

will provide access to that row's data.