const fields = [
  {
    fieldName: 'CustomerID'
  }
];

const columns = [
  {
    name: 'CustomerID',
    fieldName: 'CustomerID',
    width: '500',
    sortable: false,
    editable: false,
    renderer: {
      type: 'multicheck',
      multiSelect: true,
      wrap: true,
      values: ['VINET', 'HANAR', 'TOMSP', 'SUPRD', 'VICTE', 'RATTC', 'WARTH'],
      labels: ['Vins et alcools Chevalier', 'Hanari Carnes', 'Toms Spezialitäten', 'Suprêmes délices', 'Victuailles en stock', 'Rattlesnake Canyon Grocery', 'Wartian Herkku']
    },
    header: {
      text: 'multicheck Renderer',
      styleName: 'orange-column'
    }
  },
  {
    width: '200',
    name: 'CustomerID2',
    fieldName: 'CustomerID',
    header: {
      text: 'Checked Values'
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 50,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        dataProvider.rowCount = 17;
        grid.refresh();
      });
  }
}, {
  fields
});

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