const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', fillWidth: 1, header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', fillWidth: 1, header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' } },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } }
];

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

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

function fitStyleNone() {
  gridView.displayOptions.fitStyle = 'none';
}

function fitStyleEven() {
  gridView.displayOptions.fitStyle = 'even';
}

function fitStyleEvenFill() {
  gridView.displayOptions.fitStyle = 'evenFill';
}

function fitStyleFill() {
  gridView.displayOptions.fitStyle = 'fill';
}