Full row editing with custom select editor and dynamic options updating - reactjs

Question

I am trying to implement a custom select editor with dynamic options updating in ag-grid.
Saw an example of the same in vue js
AG Grid Vue example
How can to render the dynamic options in table cell?
//custom dropdown for cell editor
export const CustomDropDownEditor = forwardRef((props: any, ref) => {
const createInitialState = () => {
let startValue = props.value;
const filter = props?.values?.filter((item) => item.isSelected);
if (filter?.length) {
startValue = filter[0].dataFieldLookupId;
} else {
startValue = -1;
}
return {
value: startValue,
};
};
const [value, setValue] = useState(-1);
const refSelect = useRef<HTMLSelectElement>(null);
const dispatch = useDispatch<any>();
useEffect(() => {
if (props?.values?.length) {
const state: any = createInitialState();
setValue(state.value);
}
}, [props]);
useImperativeHandle(ref, () => {
return {
getValue() {
return value;
},
isCancelBeforeStart() {
},
isCancelAfterEnd() {
},
};
});
const onselectionchange = (e) => {console.log(props)
if (props?.properties?.dataFieldRelation) {
let service: any = props?.properties?.dataFieldRelation?.subSetValueService;
if (service !== undefined) {
service = service.replace("{dataFieldLookupId}", e?.target?.value);
dispatch(getDatafieldValues(service, props?.properties?.dataFieldRelation?.childDataFieldId, props.body))
}
const index = props?.datafields?.findIndex((item) => item?.uniqueDataFieldId == props?.properties?.uniqueDataFieldId);
props?.datafields[index]?.validatedValues?.forEach(element => {
if (element?.dataFieldLookupId == e.target.value)
element.isSelected = true;
else
element.isSelected = false;
});
props?.setFields(props?.datafields);
} else {
if (props?.properties?.dataFieldName === "Test Method") {
} else if (props?.properties?.dataFieldName === "Test Result") {
} else {
const index = props?.datafields?.findIndex((item) => item?.uniqueDataFieldId == props?.properties?.uniqueDataFieldId);
props?.datafields[index]?.validatedValues?.forEach(element => {
if (element?.dataFieldLookupId == e.target.value)
element.isSelected = true;
else
element.isSelected = false;
});
props?.setFields(props?.datafields);
}
}
setValue(e.target.value);
}
return (
<select
ref={refSelect}
name={props.properties.uniqueDataFieldId}
id={props.properties.uniqueDataFieldId}
value={value}
onChange={onselectionchange}>
<option value={-1}>--Select--</option>
{props?.values?.map((item, key) => (
<option key={key} value={item.dataFieldLookupId}>{item.dataFieldLookupValue}</option>
))
}
</select>
)
})
//get column definition in dynamically
const getEquipmentColumn = (generalProperties, datafields, isEditMode) => {
const columnInfo: any = [];
if (generalProperties?.length) {
for (var i = 0; i < generalProperties?.length; i++) {
if (generalProperties[i]?.name === "EquipmentId") {
let data: any = {
headerName: "action",
minWidth: 150,
cellRenderer: EditButtom,
editable: false,
colId: "action",
pinned: "left",
lockPinned: true
}
columnInfo.push(data);
}
if (generalProperties[i]?.propertyType !== "INTERNAL") {
let data: any = {
headerName: generalProperties[i]?.alias,
field: generalProperties[i]?.name,
comparator: comparator,
}
if (datafields?.length && isEditMode) {
const filterData = datafields?.filter((item) => item?.uniqueDataFieldId === generalProperties[i]?.uniqueDataFieldId);
if (filterData?.length) {
if (["Text Box", "Text Area"].includes(filterData[0]?.dataEntryControl?.dataEntryControlName)) {
if (filterData[0].disabled === false) {
data.editable = true;
data.cellEditor = "customeTextBox"
data.cellEditorParams = {
properties: filterData[0],
datafields: datafields,
}
} else {
data.editable = false;
}
}
else if (filterData[0]?.dataEntryControl?.dataEntryControlName === "Date Picker") {
data.editable = false;
} else if (filterData[0]?.dataEntryControl?.dataEntryControlName === "Date Time Picker") {
data.editable = false;
} else if (filterData[0]?.dataEntryControl?.dataEntryControlName === "Drop-down list") {
if (filterData[0].disabled === false) {
data.editable = true;
data.cellEditor = "customDropDown"
data.cellEditorParams = {
values: filterData[0].validatedValues,
properties: filterData[0],
datafields: datafields,
body: body,
setFields: (props) => setDatafields([...props]),
}
} else {
data.editable = false;
}
}
} else {
data.editable = false;
}
}
columnInfo.push(data);
}
}
}
return [columnInfo, isEditMode];
}
//getting additional values for dependency dropdown
useLayoutEffect(() => {
if (additionalFieldValues) {
let fieldValues = JSON.parse(JSON.stringify(additionalFieldValues));
const findIndex = datafields?.findIndex((item) => item.uniqueDataFieldId === fieldValues[1]);
if (findIndex >= 0) {
datafields[findIndex].validatedValues = fieldValues[0];
}
agGridRef.current.api.refreshCells({ columns: [`${datafields[findIndex].dataFieldName}`], force: true });
setDatafields(datafields);
dispatch(setAdditionalDatafieldValues(""));
}
}, [additionalFieldValues])