JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.bootstrap.css">
<div ng-app="demoApp">
	<div ng-controller="demoController">
    <div class="grid-section">
		  <jqx-grid jqx-settings="demoGridSettings" jqx-create="createDemoGrid"></jqx-grid>
    </div>
	</div>
</div>

CSS

.jqx-grid-cell {
  border-right: none;
  white-space: normal;
  // border-left: none;
}

.custom-align > div {
    margin-top: 5px !important;
}

.alertTextStatus {
    color:black;
    font-weight: bold;
}

.alertTextStatus-Warning {
    color:red;
    font-weight: bold;
}

.grid-section {
   padding: 10px;
}

JavaScript

var demoApp = angular.module("demoApp", ["jqwidgets"]);

demoApp.controller("demoController", function ($scope, $timeout) {

	// Html binding variables.
	angular.extend($scope, {
		createDemoGrid : false
		, demoGridSettings : {
			altrows : true
			, autorowheight : true
			, autoheight: true
			, bindingcomplete: function (event) {
				console.log("demoGridSettings is now binded");
			}
			, columns : []
			, columnsreorder : true
			, columnsresize : true
			, filterable : true
			, groupable: true
			, localization: {
				"emptydatastring": "There is no data to show."
			}
			, pagesize : 5
			, pagesizeoptions : ['5', '10', '20']
			, pagermode : "default"
			, pageable : true
			, ready: function() {
				console.log("demoGridSettings is now ready");
			}
			, scrollbarsize: 10
			, selectionmode : 'none'
			, showfilterrow: true
			, sortable : true
			, source : []
			, theme : 'bootstrap'
			, width : '100%'
		}
	});

	var assessmentData = [
		{
			"_id": "58526dc759c5f64039a89973",
			"assessmentPeriod": "2016",
			"assessmentType": "Maturity",
			"assessment_type": "Maturity Analysis",
			"daysLeft": 6,
			"created_at": "2016-12-15T10:13:43.189Z",
			"endDate": "2016-12-31T18:29:59.999Z",
			"status": "In Progress",
			"title": "Assessment  Mandatory FALSE",
			"totalUser": 4,
			"totalUserRes": 1,
			"updated_at": "2016-12-16T11:31:30.709Z",
			"question_title": "Sample 3 Level Template",
			"question_version": "1.2"
		},
		{
			"_id": "58526cd715eb78e745c87bb6",
			"assessmentPeriod": "2016",
			"assessmentType": "Maturity",
			"assessment_type": "Maturity Analysis",
			"daysLeft": 6,
			"created_at": "2016-12-15T10:13:43.189Z",
			"endDate": "2016-12-31T18:29:59.999Z",
			"status": "In Progress",
			"title": "Assessment  Mandatory TRUE",
			"totalUser": 4,
			"totalUserRes": 1,
			"updated_at": "2016-12-15T10:37:59.912Z",
			"question_title": "Sample 3 Level Template",
			"question_version": "1.2"
		},
		{
			"_id":...