const fields = [
  {
    fieldName: 'dateTime1',
    dataType: 'text'
  },
  {
    fieldName: 'dateTime2',
    dataType: 'text'
  }
];

const columns = [
  {
    name: 'dateTime1',
    fieldName: 'dateTime1',
    width: '130',
    header: {
      text: 'yyyy-MM-dd data'
    },
    editor: {
      type: 'date',
      datetimeFormat: 'yyyy-MM-dd',
      textReadOnly: true,
      mask: {
        editMask: '9999-99-99',
        includedFormat: true
      }
    }
  },
  {
    name: 'dateTime2',
    fieldName: 'dateTime2',
    width: '130',
    header: {
      text: 'yyyyMMdd data'
    },
    editor: {
      type: 'date',
      datetimeFormat: 'yyyyMMdd',
      textReadOnly: true,
      mask: {
        editMask: '9999-99-99'
      }
    },
    textFormat: '([0-9]{4})([0-9]{2})([0-9]{2})$;$1-$2-$3'
  }
];

const data = [
  ["2019-01-01", "20190101"],
  ["2019-01-01", "20190101"],
  ["2019-01-01", "20190101"],
  ["2019-01-01", "20190101"],
  ["2019-01-01", "20190101"],
  ["2019-01-01", "20190101"]
];

function getJsonRow() {
  gridView.setFocus();
  gridView.commit(true);
  alert(JSON.stringify(dataProvider.getJsonRow(gridView.getCurrent().dataRow)));
}

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) => {
    grid.getDataSource().setRows(data);
    grid.refresh();
  }
}, {
  fields
});

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