JSFiddle - React, Tailwind, and code Playground

by Mahmoud Kandeel

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.4/css/dx.common.css">
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.4/css/dx.light.css">
<script src="https://az564335.vo.msecnd.net/jslib/16.1.4/js/dx.all.debug.js"></script>
<div ng-controller="defaultCtrl">
  <div id="gridContainer" dx-data-grid="gridSettings"></div>
</div>

JavaScript

var myApp = angular.module('myApp', ['dx']);

var employees = [{
  "ID": 1,
  "FirstName": "John",
  "LastName": "Heart",
  "StateID": [5]
}, {
  "ID": 2,
  "FirstName": "Olivia",
  "LastName": "Peyton",
  "StateID": [5]
}, {
  "ID": 3,
  "FirstName": "Robert",
  "LastName": "Reagan",
  "StateID": [4]
}];

var states = [{
  "ID": 1,
  "Name": "Alabama"
}, {
  "ID": 2,
  "Name": "Alaska"
}, {
  "ID": 3,
  "Name": "Arizona"
}, {
  "ID": 4,
  "Name": "Arkansas"
}, {
  "ID": 5,
  "Name": "California"
}, {
  "ID": 6,
  "Name": "Colorado"
}, {
  "ID": 7,
  "Name": "Connectictu"
}, {
  "ID": 8,
  "Name": "Delaware"
}, {
  "ID": 9,
  "Name": "District of Columbia"
}, {
  "ID": 10,
  "Name": "Florida"
}, {
  "ID": 11,
  "Name": "Georgia"
}, {
  "ID": 12,
  "Name": "Hawaii"
}, {
  "ID": 13,
  "Name": "Idaho"
}, {
  "ID": 14,
  "Name": "Illinois"
}, {
  "ID": 15,
  "Name": "Indiana"
}, {
  "ID": 16,
  "Name": "Iowa"
}, {
  "ID": 17,
  "Name": "Kansas"
}, {
  "ID": 18,
  "Name": "Kentucky"
}, {
  "ID": 19,
  "Name": "Louisiana"
}, {
  "ID": 20,
  "Name": "Maine"
}, {
  "ID": 21,
  "Name": "Maryland"
}, {
  "ID": 22,
  "Name": "Massachusetts"
}, {
  "ID": 23,
  "Name": "Michigan"
}, {
  "ID": 24,
  "Name": "Minnesota"
}, {
  "ID": 25,
  "Name": "Mississippi"
}, {
  "ID": 26,
  "Name": "Missouri"
}, {
  "ID": 27,
  "Name": "Montana"
}, {
  "ID": 28,
  "Name": "Nebraska"
}, {
  "ID": 29,
  "Name": "Nevada"
}, {
  "ID": 30,
  "Name": "New Hampshire"
}, {
  "ID": 31,
  "Name": "New Jersey"
}, {
  "ID": 32,
  "Name": "New Mexico"
}, {
  "ID": 33,
  "Name": "New York"
}, {
  "ID": 34,
  "Name": "North Carolina"
}, {
  "ID": 35,
  "Name": "Ohio"
}, {
  "ID": 36,
  "Name": "Oklahoma"
}, {
  "ID": 37,
  "Name": "Oregon"
}, {
  "ID": 38,
  "Name": "Pennsylvania"
}, {
  "ID": 39,
  "Name": "Rhode Island"
}, {
  "ID": 40,
  "Name": "South Carolina"
}, {
  "ID": 41,
  "Name": "South Dakota"
}, {
  "ID": 42,
  "Name": "Tennessee"
}, {
  "ID": 43,
  "Name": "Texas"
}, {
  "ID": 44,
 ...