JSFiddle - React, Tailwind, and code Playground

by samur3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>


<div ng-app="my-app" ng-controller="homeCtrl as vm">

  <div ui-grid="vm.gridOptions" ui-grid-edit />

</div>

CSS

.busy {
  color: red;
}

JavaScript

angular.module('my-app', ['ui.grid' ,'ui.grid.edit'])
 .directive('uiSelectWrap', uiSelectWrap)
.controller('homeCtrl', function($scope) {
	const dropDownOptions = [
  	{ value: 1, label: 'foo' },
    { value: 2, label: 'bar' },
    { value: 3, label: 'baz' }
  ];
  
  this.ds = dropDownOptions.map(obj => Object.assign({}, obj, { selectedBy: null }));
  this.gridData = [
    { name: 'bob', something: 1 },
    { name: 'joe', something: 2 },
    { name: 'dave', something: 3 },
  ];
  
  this.updateSelection = (row) => {
  
 // debugger;
    // deselect previous value
    const toDeselect = this.ds.find(obj => obj.selectedBy === row);
    toDeselect && (toDeselect.selectedBy = null);
    
    // if a valid option was chosen
  	if (row.selected) {
    	// find the new value to select
      const toSelect = this.ds.find(obj => obj.value === +row.selected);
      if (toSelect) {
    		// if the value was selected by another control, reset this control's selection to empty
        toSelect.selectedBy && (toSelect.selectedBy.selected = null);
    		// select a value
      	toSelect.selectedBy = row;
      }
    }
  }
  
  this.gridOptions =  {
    columnDefs: [
      { name: 'name' },
      {
        name: 'something',
        editableCellTemplate: ` <ui-select-wrap><div class="tomer"><select ng-model="row.entity.selected" ng-change="grid.appScope.vm.updateSelection(row.entity)">
	<option value="">Select One...</option>
	<option ng-repeat="opt in grid.appScope.vm.ds" value="{{opt.value}}" ng-class="{ busy: opt.selectedBy && opt.selectedBy !== row.entity }">{{opt.label}}</option>
</select></div>  </ui-select-wrap>`,editDropdownValueLabel: 'something',editDropdownIdLabel: 'something',
        
      }
    ],
    data: this.gridData
  };
  
  this.gridOptions.onRegisterApi = function(gridApi){
  
    //set gridApi on scope
    $scope.gridApi = gridApi;
    gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
    debugger;
      if(...