JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.core.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/js/extensions/igniteui-angular.js"></script>
<script src="https://igniteui.github.io/help-samples/data-files/northwindProducts.js"></script>
<script id="colTmpl" type="text/template" ng-non-bindable="">
        {{if ${UnitsInStock} == null }}
        N/A
        {{elseif ${UnitsInStock} >= (Math.random()+0.5)*${UnitsInStock} }}
        $ ${UnitsInStock}
        <img width='10' height='15' src='http://igniteui.github.io/igniteui-angular/samples/images/arrowUp.gif' />
        {{else}}
        $ ${UnitsInStock}
        <img width='10' height='15' src='http://igniteui.github.io/igniteui-angular/samples/images/arrowDown.gif' />
        {{/if}}
    </script>
<link href="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="sampleApp" ng-controller="gridController">
        <div class="row">
            <div class="col-md-8">
                <ig-grid id="grid1" data-source="data" data-source-type="json" width="100%" height="400px" primary-key="ProductID" auto-commit="true" auto-generate-columns="false">
                    <columns>
                       ...

CSS

.row {
    margin-right: 0;
    margin-left: 0;
}

JavaScript

$(function () {
    var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
    sampleApp.controller('gridController', function ($scope) {
       	$scope.formatterFunc = function(val, record) {
          return val.replace("<", "&lt;")
        }
        
        $scope.data = angular.copy(northwindProducts.results);

        $scope.deleteProduct = function (ix) {
            $scope.data.splice(ix, 1);
        };

        $scope.addProduct = function () {
            $scope.newProduct.ProductID = $scope.data.length + 1;
            var tmp = angular.copy($scope.newProduct);
            $scope.data.push(tmp);
        };

        $scope.newProduct = {
            ProductID: 21,
            ProductName: null,
            QuantityPerUnit: null,
            UnitsInStock: null
        };
    });
});