JSFiddle - React, Tailwind, and code Playground

by Ramsey Feng

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">  
    <div id="productsGrid" ui-grid="gridOptions" class="grid"></div>
</body>

CSS

.grid {
  width: 99.8%;
  height: 565px;
}

.iconBtn {
    padding: 0;
    border: none;
    background: none;
    color: #54698D;
    cursor: pointer;
}

.iconBtn:active {
    color: #f47513;
	transition:color 1s;
}

.iconBtn:hover {
    color: #355FB2;
}

	.iconBtn:focus {
		outline: none;
	}

.iconBtnClicked{
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: #f47513;/*peach color*/
}

.iconBtnClick:active {
	color:white;
	transition:color .1s;
}

JavaScript

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

myApp.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {

var productData = {
	"Products": [{
		"TagLevel1": null,
		"ProductName": "Carrot",
		"ProductCode": "car-001",
		"IsSelected": null,
		"ClientLineId": null,
		"Active": true
	}, {
		"TagLevel1": null,
		"ProductName": "Cucumber",
		"ProductCode": "cuc-001",
		"IsSelected": null,
		"ClientLineId": null,
		"Active": true
	}, {
		"TagLevel1": null,
		"ProductName": "Cabbage",
		"ProductCode": "cab-001",
		"IsSelected": null,
		"ClientLineId": null,
		"Active": true
	}, {
		"TagLevel1": null,
		"ProductName": "Lettuce",
		"ProductCode": "let-001",
		"IsSelected": null,
		"ClientLineId": null,
		"Active": true
	}]
};

var actionTemplate = '<div style="text-align:center;vertical-align:middle;line-height:35px;"><button id="{{row.entity.ProductId + \'_AddToCartBtn\'}}" title="Add to cart" ng-class="(row.entity.IsSelected == true ? \'iconBtnClicked iconBtnClick fa fa-cart-plus fa-2x\':\'iconBtn iconBtnClick fa fa-shopping-cart fa-2x\')" ng-click="grid.appScope.AddToCart(row.entity, $event)" /></div>';

  $scope.gridOptions = {
		rowHeight: 35,
    showGridFooter: false,
		enableFiltering: false,
		enableColumnMenus: false,
		columnDefs: [
			{ field: 'IsSelected', name: 'IsSelected', width: '85', displayName: 'ACTION', enableSorting: false, enableFiltering:false, cellTemplate: actionTemplate },
			{ field: 'ProductCode', name: 'ProductCode', width: '200', displayName: 'PRODUCT CODE'  },
      { field: 'ProductName', name: 'ProductName', width: '800', displayName: 'PRODUCT NAME' },
		],
    onRegisterApi: function(gridApi) {
			$scope.gridApi = gridApi;
		}
	};
  
  $scope.init = function() {
  	$scope.ProductViewModel = productData;
  	$scope.ProductViewModel.Products = $filter('orderBy')($scope.ProductViewModel.Products, "ProductCode", false);
    $scope.gridOptions.data = $scope.ProductViewModel.Products;
  };
  
  
  
  //button on GUI...