JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div ng-app='app'>
  <app></app>
  
  <script type='text/ng-template' id='app.html'>
  	<ui-grid
    	source='vm.source'
      columns='vm.columns'
    ></ui-grid>
  </script>
  
  <script type='text/ng-template' id='ui-grid.html'>
  	<div>
  		<ui-grid-row
      	ng-repeat='row in vm.rows'
      	events='vm.eventEmitter'
        row='row'
        columns='columns'
      ></ui-grid-row>
    </div>
  </script>
  
  <script type='text/ng-template' id='ui-grid-row.html'>
  	<div ng-click='vm.rowClicked()'>
    	<span ng-repeat='column in columns' ng-click='vm.cellClicked(column)'>
      	{{ row[column] }}
      </span>
    </div>
  </script>
</div>

JavaScript

angular.module('app', [])

.directive('app', [
	function(){
  	return{
    	restrict: 'E',
      templateUrl: 'app.html',
      controller:[
      	'$scope',
        '$q',
        function($scope, $q){
        	var vm = $scope.vm = {};
          vm.columns = ['id', 'username'];
          vm.source = {
          	fetch: function(){
            	return $q(function(resolve, reject){
              	resolve({
                  rows:[
                    {id: 1, username: 'rick'},
                    {id: 2, username: 'emil'},
                    {id: 3, username: 'noah'},
                    {id: 4, username: 'mami'}
                  ]
                });
              });
            }
          };
        }
      ]
    };
  }
])

.factory('EventEmitter', [
	function(){
  	function EventEmitter(){
    	this.subscriptions = {};
    }
    EventEmitter.prototype.on = function(event, cb){
    	if(!this.subscriptions[event]){
      	this.subscriptions[event] = [];
      }
    	this.subscriptions[event].push(cb);
    };
    EventEmitter.prototype.fire = function(event, data){
    	if(this.subscriptions[event]){
      	this.subscriptions[event].forEach(function(subscriber){
        	subscriber.apply(null, data);
        });
      }
    };
  	return EventEmitter;
  }
])

.directive('uiGrid', [
	function(){
  	return{
    	restrict: 'E',
      templateUrl: 'ui-grid.html',
      scope:{
      	source: '=',
        columns: '='
      },
      controller:[
      	'$scope',
      	'EventEmitter',
      	function($scope, EventEmitter){
        	var vm = $scope.vm = {};
          
          // Configure EventEmitter
        	vm.eventEmitter = new EventEmitter;
          vm.eventEmitter.on('row.clicked', function(row){
          	console.log(row);
          });
          vm.eventEmitter.on('cell.clicked', function(row, column){
          	console.log(row, column);
          });
          
          // Fetch data
          vm.rows = [];
         ...