Dynamically change editor

This is an example of dynamically changing the editor according to the classification value.
If the separator value is 'T', it operates as plain text, and if it is 'D', it operates as a drop-down editor.
Check styleCallback() and displayCallback().

var columns = [{
   "fieldName": "field1",
   "name": "field1",
   "width": 90,
   "header": { "text": "Separator" }
}, {
   "fieldName": "field2",
   "name": "field2",
   "width": 150,
   "header": { "text": "text/dropdown" },
   "styleCallback": function(grid, dataCell){
     var gubun = grid.getValue(dataCell.index.itemIndex, "field1");
     var ret = {};
 
     switch (gubun) {
         //If the separator value is T, display the text editor
         case 'T':
             ret.editor = {
                 type: "text"
             };
             break;
         //If the separator value is D, display the drop-down editor
         case 'D':
             ret.editor = {
                 type: "dropdown",
                 values: ['A01', 'A02', 'A03', 'A04', 'A05'],
                 labels: ['potato', 'sweet potato', 'cucumber', 'tomato', 'carrot']
             }
     }
     return ret;
   },
   //Basically, drop-down data is displayed as a code value, so it is displayed as a label value.
   "displayCallback": function (grid, index, value) {
     var retValue = value;
     var gubun = grid.getValue(index.itemIndex, "field1");
 
     if (gubun === 'D') {
         var idx = ['A01', 'A02', 'A03', 'A04', 'A05'].indexOf(value);
 
         retValue = ['Potato', 'Sweet Potato', 'Cucumber', 'Tomato', 'Carrot'][idx];
     }
 
     return retValue;
   }
}];