JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="http://code.angularjs.org/1.0.8/angular-mocks.js"></script>
<h4>Angular-xeditable Editable column (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
      <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold; white-space: nowrap">

      <!-- username header -->
      <td style="width:40%">
        Name
        <form editable-form name="nameform" onaftersave="saveColumn('name')" ng-show="nameform.$visible">
          <button type="submit" ng-disabled="nameform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="nameform.$waiting" ng-click="nameform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>  
        <button class="btn btn-default" ng-show="!nameform.$visible" ng-click="nameform.$show()">
          edit
        </button>
      </td>

      <!-- status header -->
      <td style="width:30%">
        Status
        <form editable-form name="statusform" onaftersave="saveColumn('status')" ng-show="statusform.$visible">
          <button type="submit" ng-disabled="statusform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="statusform.$waiting" ng-click="statusform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>  
        <button class="btn btn-default" ng-show="!statusform.$visible" ng-click="statusform.$show()">
          edit
        </button>
      </td>

      <!-- group header -->
      <td style="width:30%">
 ...

CSS

div[ng-app] { margin: 10px; }

JavaScript

var app = angular.module("app", ["xeditable", "ngMockE2E"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter, $q, $http) {
   $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data) {
    if (data !== 'awesome') {
      return "Username should be `awesome`";
    }
  };

  $scope.saveColumn = function(column) {
    var results = [];
    angular.forEach($scope.users, function(user) {
      results.push($http.post('/saveColumn', {column: column, value: user[column], id: user.id}));
    })
    return $q.all(results);
  };
});

// ---------------- mock $http requests --------------------
app.run(function($httpBackend) {
  $httpBackend.whenGET('/groups').respond([
    {id: 1, text: 'user'},
    {id: 2, text: 'customer'},
    {id: 3, text: 'vip'},
    {id: 4, text: 'admin'}
  ]);
    
 ...