const fields = [
  { fieldName: 'field1' },
  { fieldName: 'field2' }
];

const columns = [
  {
    fieldName: 'field1',
    name: 'field1',
    width: 90,
    header: { text: 'Type' }
  },
  {
    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) {
        case 'T':
          ret.editor = {
            type: "text"
          };
          break;
        case 'D':
          ret.editor = {
            type: "dropdown",
            values: ['A01', 'A02', 'A03', 'A04', 'A05'],
            labels: ['Potato', 'Sweet Potato', 'Cucumber', 'Tomato', 'Carrot']
          };
          break;
      }
      return ret;
    },
    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;
    }
  }
];

const datas = [
  ["T", "TextText1"],
  ["T", "TextText2"],
  ["D", "A01"],
  ["T", "TextText3"],
  ["D", "A02"],
  ["D", "A03"],
  ["T", "TextText4"],
  ["D", "A01"],
  ["T", "TextText5"]
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  onInitialized: (grid) => {
    grid.getDataSource().setRows(datas);
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;