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">
              <input type="checkbox" ng-model="isShown">Grid Visibility
            </div>
        </div>
        <div class="row">   
            <div class="col-md-8" ng-if="isShown">
                <ig-grid id="grid1"...

CSS

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

JavaScript

$(function () {
    var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
    sampleApp.controller('gridController', function ($scope) {
       	$scope.isShown = true;
        $scope.formatterFunc = function(val, record) {
          return val.replace("<", "&lt;")
        }
        var results = [];
        for(i = 0; i < 600; i++) {
        	var result = {
            "ProductID": i,
            "ProductName": "Chai" + i,
            "QuantityPerUnit": i * 10,
            "UnitPrice": i % 23,
          };
          for (j = 0; j < 50; j++) {
          	result["Product" + j] = "Product" + j;
          }
          results.push(result);
        }
        
        $scope.data = angular.copy(results);
        
        $scope.columns = [
        	{ key: "ProductID", headerText: "ID", width: "50px", dataType: "number" },
          { key: "ProductName", headerText: "Name", width: "250px", dataType: "string" },
          { key: "QuantityPerUnit", headerText: "Quantity Per Unit", width: "200px", dataType: "string" },
          { key: "UnitsInStock", headerText: "Units In Stock", width:"100px", dataType: "number"}
        ];
        for (j = 0; j < 50; j++) {
          $scope.columns.push(
          	{ key: "Product" + j, headerText: "Product" + j, width: "100px", dataType: "string"}
          );
        }

        $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
        };
    });
});