JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="AppKeysCtrl">
<table class="table table-hover">
    <thead>
        <tr>
            <th></th>
            <th>Created</th>
            <th>App Key</th>
            <th>Name</th>
            <th>Level</th>
            <th>Active</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="entry in appkeys" data-ng-class="{danger:!entry.active}">
        <td>{{$index + 1}}</td>
        <td>{{entry.timestamp | date:'mediumDate'}}</td>
        <td>{{entry.appkey}}</td>
        <td>
            <span data-ng-hide="editMode">{{entry.name}}</span>
            <input type="text" data-ng-show="editMode" data-ng-model="entry.name" data-ng-required />
        </td>
        <td>
            <span data-ng-hide="editMode">{{entry.level}}</span>
            <select class="form-control" name="entry.level" data-ng-model="entry.level" data-ng-show="editMode">
                <option value="3">3 - Developer Access - [Temporary]</option>
                <option value="2">2 - Standard Tool Access - [Default]</option>
                <option value="1">1 - Administrative Access - [Admin Section Only]</option>
            </select>
        </td>
        <td>
            <span data-ng-hide="editMode">{{entry.active && 'Active' || 'Inactive'}}</span>
            <select class="form-control" name="entry.active" data-ng-model="entry.active" data-ng-show="editMode">
                <option value="true">Active</option>
                <option value="false">Inactive</option>
            </select>
        </td>
        <td>
            <input type="checkbox" data-ng-hide="editMode" data-ng-click="editMode = true; editAppKey(entry)" class="btn btn-default"/>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false" class="btn btn-default">Save</button>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false; cancel()" class="btn btn-default">Cancel</button>
       ...

JavaScript

app = angular.module("formDemo", []);

function AppKeysCtrl($scope, $http, $location) {
    var tmpDate = new Date();
    
          $scope.newField = {};
          $scope.editing = false;
    
     $scope.appkeys = [
         { "appkey" : "0123456789", "name" : "My new app key", "created" : tmpDate },
         { "appkey" : "abcdefghij", "name" : "Someone elses app key", "created" : tmpDate }
     ];
    
    $scope.editAppKey = function(field) {
        $scope.editing = $scope.appkeys.indexOf(field);
        $scope.newField = angular.copy(field);
    }
    
    $scope.saveField = function(index) {
        if ($scope.editing !== false) {
            $scope.appkeys[$scope.editing] = $scope.newField;
            $scope.editing = false;
        }       
    };
    
    $scope.cancel = function(index) {
        if ($scope.editing !== false) {
            $scope.appkeys[$scope.editing] = $scope.newField;
            $scope.editing = false;
        }       
    };
}

angular.element(document).ready(function() {
    angular.bootstrap(document, ["formDemo"]);
});