I am trying to implement a dropdown with grouped option as a cell editor in AG Grid. However I couldn't find any examples or documentations specifically showing how to achieve this in AG Grid
Expected Output: Current Result:
Here is the code :
{
resizable: false,
flex: 1,
sortable: false,
suppressMovable: true,
suppressCellSelection: true,
field: 'fkcoaId',
headerName: 'CoA Category',
tooltipField: 'fkcoaId',
editable: true,
minWidth: 200,
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: Object.entries(
coaCategories.reduce((acc: { [key: string]: string[] }, category) => {
const categoryType = category.type
if (!acc[categoryType!]) {
acc[categoryType!] = []
}
acc[categoryType!].push(category.category!)
return acc
}, {})
).flatMap(([group, categories]) => categories.map((category) => `${group} -> ${category}`)),
},
valueGetter: (params: any) => {
const category = coaCategories.find((c) => c.id === params.data.fkcoaId)
return category ? `${category.type} -> ${category.category}` : ''
},
valueSetter: (params: any) => {
const [group, categoryName] = (params.newValue || '').split(' -> ')
const selectedCategory = coaCategories.find((c) => c.type === group && c.category === categoryName)
if (selectedCategory) {
params.data.fkcoaId = selectedCategory.id
return true
}
return false
},
},