JSFiddle - React, Tailwind, and code Playground

by Chitkala More

HTML

<form class="form-horizontal" name="myform">

    <div>
      <div class="col-sm-12">        
        <div class="col-sm-4">
          <div class="form-group">
             <div class="col-sm-12">
              <label class="control-label">First Name</label>
              <input type="text" class="form-control" name="fname" data-ng-model="fname" required>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
            <label>Last Name</label>
            <input type="text" class="form-control" name="lname" data-ng-model="lname" required>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
            <label>Date of Birth</label>
            <input type="date" class="form-control" name="dob" data-ng-model="dob" required>
            </div>
          </div>          
          <div class="form-group">
            <div class="col-sm-12">
            <label>Email Address</label>
            <input type="email" class="form-control" name="email" data-ng-model="email" required>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
            <label>Conact Number</label>
            <input type="tel" class="form-control" name="contactno" data-ng-model="contactno">
            </div>
          </div> 
          <input type="button" data-ng-click="addEmp()" value="Submit" class="btn btn-primary"/>
        </div>
        
        <div class="col-sm-8">
          <table class="table table-bordered mt20">
          <thead>
            <tr>
              <th><button ng-click="order('fname')">First Name</button>
         <span class="sortorder" ng-show="predicate === 'fname'" ng-class="{reverse:reverse}"></span>
                </th>             
              <th data-ng-click="orderByMe('lname')">Last Name</th>
              <th>Date of Birth</th>
              <th>Email Address</th>
              <th>Conact...

CSS

.mt20{
      margin-top:20px;
    }

JavaScript

//angular.module("empApp", []).controller('infoCtrl', function($scope) {
var myApp =  angular.module('empApp',[]); 
myApp.controller('infoCtrl',function($scope){

  $scope.employee = [
    {fname:'chitkala',
     lname: 'More',
     dob: '10/07/1987',
     email:'[email protected]',
     contactno:9860563009
    }];
 

//Add Row function
  $scope.addEmp = function(){
   
       $scope.employee.push({
                  fname: $scope.fname,
                  lname: $scope.lname,
                  dob: $scope.dob,
                  email: $scope.email,
                  contactno: $scope.contactno
                  }); 
    
                  $scope.fname='';
                  $scope.lname='';
                  $scope.dob='';
                  $scope.email='';
                  $scope.contactno='';
    
                  }; 
  
//Remove Row function
  $scope.removeEmp = function(index){
    $scope.employee.splice(index, 1);
  };    

//Edit Row function
  $scope.editEmp = function ($window,index) {
   
  var field = $scope.employee[index];
  var url = '/employee/' + employee.id;
  };
    
$scope.orderByMe = function(empInfo) {
    $scope.myOrderBy = empInfo;
  };
  
});