JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://staging.igniteui.com/19-2/js/modernizr.min.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://staging.igniteui.com/19-2/js/angular.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angularjs.js"></script>
<script src="https://staging.igniteui.com/19-2/js-data/northwindProducts"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://staging.igniteui.com/19-2/css/bootstrap/bootstrap.min.css" rel="stylesheet"></link>

<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='https://www.igniteui.com/images/samples/templating-engine/coltemplatewithconditionalcell/arrowup.gif' />
        {{else}}
        $ ${UnitsInStock}
        <img width='10' height='15' src='https://www.igniteui.com/images/samples/templating-engine/coltemplatewithconditionalcell/arrowdown.gif' />
        {{/if}}
    </script>

<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>
                        <column key="ProductID"...

CSS

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

JavaScript

$(function () {
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('gridController', function ($scope) {
            $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
            };
        });
});