JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css">
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.dv.js"></script>
<table id="grid"></table>
<input id="btnTest" type="button" value="Save Row" />

JavaScript

var testData = [];

$(document).ready(function() {
    $("#grid").igGrid({
        height: "100%",
        dataSource: testData,
        renderCheckboxes: true,
        columns: [
            { headerText: "ID", key: "ID", dataType: "number", width: "50px" },
            { headerText: "Name", key: "Name", dataType: "string", width: "125px" },
            { headerText: "Available", key: "Available", dataType: "bool", width: "75px" },
            { headerText: "Quantity", key: "Quantity", dataType: "number", width: "50px" },
            { headerText: "Expire Date", key: "ExpireDate", dataType: "date", width: "150px" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ID",
        features: [
            {
                name: "Updating",
                enableAddRow: true,
                editMode: "row",
                enableDeleteRow: true
            }
        ]
    });
    
    $("#btnTest").click(function(){
        $("#grid").igGrid("commit");
        
        var newDS = [];
        $("#grid").igGrid("option", "dataSource", newDS);
    });
});