JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js/apiviewer.js"></script>
<script src="http://igniteui.com/js-data/northwind"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="http://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<table id="grid">
</table>

JavaScript

$(function () {
  $("#grid").igGrid({
    virtualization: false,
    autoGenerateColumns: false,
    renderCheckboxes: true,
    primaryKey: "EmployeeID",
    columns: [{
      headerText: "Employee ID", key: "EmployeeID", dataType: "number"
    },
		{
			headerText: "First Name", key: "FirstName", dataType: "string"
		},
		{
			headerText: "Last Name", key: "LastName", dataType: "string"
		},
		{
			headerText: "Birth Date", key: "BirthDate", dataType: "date"
		},
		{
			headerText: "HireDate", key: "HireDate", dataType: "date"
		}],
    dataSource: northwind,
    dataSourceType: "json",
    responseDataKey: "results",
    height: "350px",
    width:"100%",
    features: [
      
      {
        name: "Updating",
        editMode: "row",
        editRowEnding: function (evt, ui) {
        	console.log(ui)
        },
        columnSettings: [
          {
            columnKey: "EmployeeID",
            readOnly: true
          },
          {
            columnKey: "BirthDate",
            editorType: "datepicker",
            validation: true,
            required: true,
            editorOptions: {
              maxValue: new Date()
            }
          }, {
            columnKey: "HireDate",
            editorType: "datepicker",
            validation: true,
            required: true
          }]
      }]
  });
});