JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<link href="" //cdn.syncfusion.com/17.4.0.46/external/bootstrap.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/17.4.0.46/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <link href="" //cdn.syncfusion.com/17.4.0.46/themes/web/content/default.css" rel="stylesheet" />
    <link href="" //cdn.syncfusion.com/17.4.0.46/themes/web/content/default-responsive.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/17.4.0.46/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="//cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="//cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
    <!--<![endif]-->
    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
    
    <script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script type="text/javascript" src="//cdn.syncfusion.com/17.4.0.46/js/web/ej.web.all.min.js"></script>
    
    <div id="myGrid"></div>

JavaScript

myGridData = [{
    "code": "flag",
    "labe": "Flagge ",
    "type ": "media "
  },
  {
    "code ": "capitol ",
    "label ": "Hauptstadt ",
    "type ": "text "
  }, {
    "code ": "cnty ",
    "label ": "Staat ",
    "type ": "text "
  }
]
fieldTypes = [{
  type: "media"
}, {
  type: "text"
}, {
  type: "level"
}];
$(function() {
  $("#myGrid").ejGrid({
    "columns": [{
      "editType": "ej.Grid.EditingType.String",
      "field": "code",
      "headerText": "Code",
      "isIdentity": true,
      "isPrimaryKey": true
    }, {
      "editType": "ej.Grid.EditingType.String",
      "field": \ "label",
      "headerText": "Label",
      "isIdentity": false,
      "isPrimaryKey": false
    }, {
      "dataSource": fieldTypes,
      "dropdownData": fieldTypes,
      "editType": ej.Grid.EditingType.Dropdown,
      "field": "type",
      "headerText": "Type",
      "isIdentity": false,
      "isPrimaryKey": false
    }],
    dataSource: myGridData,
    "editSettings": {
      "allowAdding": "true",
      "allowDeleting": "true",
      "allowEditing": "true",
      "editMode": "Normal"
    }
  });
});
$("#mo_Grid").modal("show");