diff --git a/app/assets/icons/icon-arrow--down.svg b/app/assets/icons/icon-arrow--down.svg
new file mode 100644
index 0000000..64e2e49
--- /dev/null
+++ b/app/assets/icons/icon-arrow--down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 30"><g><path d="M7.5 30l7.5-7.5-1.76-1.76-4.49 4.47V0h-2.5v25.21l-4.49-4.47L0 22.5 7.5 30z"/></g></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-arrow--up.svg b/app/assets/icons/icon-arrow--up.svg
new file mode 100644
index 0000000..fce3343
--- /dev/null
+++ b/app/assets/icons/icon-arrow--up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 30"><g><path d="M7.5 0L0 7.5l1.76 1.76 4.49-4.47V30h2.5V4.79l4.49 4.47L15 7.5 7.5 0z"/></g></svg>
\ No newline at end of file
diff --git a/app/common/components/table/table.html b/app/common/components/table/table.html
index ceedd91..6b2420d 100644
--- a/app/common/components/table/table.html
+++ b/app/common/components/table/table.html
@@ -1,17 +1,49 @@
 <table class="bmc-table {{$ctrl.size}}">
-  <thead>
-    <!-- Header row -->
-    <tr>
-      <th ng-repeat="header in $ctrl.model.header"
+  <thead class="bmc-table__head">
+    <!-- Header row (non-sortable) -->
+    <tr ng-if="!$ctrl.sortable">
+      <th ng-repeat="headerItem in $ctrl.header"
           class="bmc-table__column-header">
-        {{header}}
+        {{headerItem.label}}
+      </th>
+    </tr>
+    <!-- Header row (sortable) -->
+    <tr ng-if="$ctrl.sortable">
+      <th ng-repeat="headerItem in $ctrl.header track by $index"
+          class="bmc-table__column-header">
+        <span ng-if="!headerItem.sortable">
+          {{headerItem.label}}
+        </span>
+        <span ng-if="headerItem.sortable"
+              ng-click="$ctrl.onClickSort($index)"
+              class="bmc-table__column-header--sortable">
+          {{headerItem.label}}
+          <!-- Sort icons -->
+          <button class="sort-icon"
+                  type="button"
+                  aria-label="sort {{headerItem.label}}">
+            <icon file="icon-arrow--up.svg"
+                  ng-if="$index === $ctrl.activeSort"
+                  ng-class="{
+                    'sort-icon--descending': !$ctrl.sortAscending,
+                    'sort-icon--ascending' : $ctrl.sortAscending }"
+                  class="sort-icon--active"
+                  aria-hidden="true"></icon>
+            <span ng-if="$index !== $ctrl.activeSort"
+                  class="sort-icon--inactive"
+                  aria-hidden="true">
+                <icon file="icon-arrow--up.svg"></icon>
+                <icon file="icon-arrow--down.svg"></icon>
+            </span>
+          </button>
+        </span>
       </th>
     </tr>
   </thead>
-  <tbody>
+  <tbody class="bmc-table__body">
     <!-- Data rows -->
-    <tr ng-if="$ctrl.model.data.length > 0"
-        ng-repeat="row in $ctrl.model.data"
+    <tr ng-if="$ctrl.data.length > 0"
+        ng-repeat="row in $ctrl.data"
         class="bmc-table__row">
       <!-- Row item -->
       <td ng-repeat="item in row.uiData track by $index"
@@ -28,7 +60,7 @@
       </td>
     </tr>
     <!-- Empty table -->
-    <tr ng-if="$ctrl.model.data.length === 0">
+    <tr ng-if="$ctrl.data.length === 0">
       <td>No data</td>
     </tr>
   </tbody>
diff --git a/app/common/components/table/table.js b/app/common/components/table/table.js
index cf2b797..24aa0c9 100644
--- a/app/common/components/table/table.js
+++ b/app/common/components/table/table.js
@@ -6,57 +6,66 @@
    * bmcTable Component
    *
    * To use:
-   * The <bmc-table> component expects a 'model' attribute
-   * that will contain all the data needed to render the table.
    *
-   * The component accepts a 'row-actions-enabled' attribute,
-   * to optionally render table row actions. Defaults to false.
-   * Pass true to render actions. Row actions are defined in
-   * model.data.actions.
-   *
-   * The component accepts a 'size' attribute which can be
-   * set to 'small' which will render a smaller font size in the
-   * table.
-   *
-   * The model object should contain 'header' and 'data'
-   * properties.
-   *
-   * model: {
-   *    header: <string>[],  // Array of header labels
-   *    data: <any>[],       // Array of each row object
-   * }
-   *
-   * The header property will render each label as a <th> in the table.
-   *
-   * The data property will render each item as a <tr> in the table.
-   * Each row object in the model.data array should also have a 'uiData'
+   * The 'data' attribute should be an array of all row objects in the table.
+   * It will render each item as a <tr> in the table.
+   * Each row object in the data array should also have a 'uiData'
    * property that should be an array of the properties that will render
    * as each table cell <td>.
-   * Each row object in the model.data array can optionally have an
+   * Each row object in the data array can optionally have an
    * 'actions' property that should be an array of actions to provide the
    * <bmc-table-actions> component.
    *
-   * The 'rowActionsEnabled' property will render <bmc-table-actions> if set
-   * to true.
+   * data = [
+   *  { uiData: ['root', 'Admin', 'enabled' ] },
+   *  { uiData: ['user1', 'User', 'disabled' ] }
+   * ]
+   *
+   * The 'header' attribute should be an array of all header objects in the
+   * table. Each object in the header array should have a 'label' property
+   * that will render as a <th> in the table.
+   * If the table is sortable, can optionally add 'sortable' property to header
+   * row object. If a particular column is not sortable, set to false.
+   *
+   * header = [
+   *  { label: 'Username' },
+   *  { label: 'Privilege' }
+   *  { label: 'Account Status', sortable: false }
+   * ]
+   *
+   * The 'sortable' attribute should be a boolean value. Defaults to false.
+   * The 'default-sort' attribute should be the index value of the header
+   * obejct that should be sorted on inital load.
+   *
+   * The 'row-actions-enabled' attribute, should be a boolean value
+   * Can be set to true to render table row actions. Defaults to false.
+   *  Row actions are defined in data.actions.
+   *
+   * The 'size' attribute which can be set to 'small' which will
+   * render a smaller font size in the table.
    *
    */
 
   const TableController = function() {
+    this.sortAscending = true;
+    this.activeSort;
+
     /**
-     * Init model data
-     * @param {any} model : table model object
-     * @returns : table model object with defaults
+     * Sorts table data
      */
-    const setModel = (model) => {
-      model.header = model.header === undefined ? [] : model.header;
-      model.data = model.data === undefined ? [] : model.data;
-      model.data = model.data.map((row) => {
-        if (row.uiData === undefined) {
-          row.uiData = [];
+    const sortData = () => {
+      this.data.sort((a, b) => {
+        const aProp = a.uiData[this.activeSort];
+        const bProp = b.uiData[this.activeSort];
+        if (aProp === bProp) {
+          return 0;
+        } else {
+          if (this.sortAscending) {
+            return aProp < bProp ? -1 : 1;
+          }
+          return aProp > bProp ? -1 : 1;
         }
-        return row;
       })
-      return model;
     };
 
     /**
@@ -74,23 +83,73 @@
     };
 
     /**
-     * onInit Component lifecycle hooked
+     * Callback when sortable table header clicked
+     * @param {number} index : index of header item
+     */
+    this.onClickSort = (index) => {
+      if (index === this.activeSort) {
+        // If clicked header is already sorted, reverse
+        // the sort direction
+        this.sortAscending = !this.sortAscending;
+        this.data.reverse();
+      } else {
+        this.sortAscending = true;
+        this.activeSort = index;
+        sortData();
+      }
+    };
+
+    /**
+     * onInit Component lifecycle hook
+     * Checking for undefined values
      */
     this.$onInit = () => {
-      if (this.model === undefined) {
-        console.log('<bmc-table> Component is missing "model" attribute.');
-        return;
-      }
-      this.model = setModel(this.model);
+      this.header = this.header === undefined ? [] : this.header;
+      this.data = this.data == undefined ? [] : this.data;
+      this.sortable = this.sortable === undefined ? false : this.sortable;
       this.rowActionsEnabled =
-          this.rowActionsEnabled === undefined ? false : true;
+          this.rowActionsEnabled === undefined ? false : this.rowActionsEnabled;
+      this.size = this.size === undefined ? '' : this.size;
+
+      // Check for undefined 'uiData' property for each item in data array
+      this.data = this.data.map((row) => {
+        if (row.uiData === undefined) {
+          row.uiData = [];
+        }
+        return row;
+      })
+      if (this.sortable) {
+        // If sort is enabled, check for undefined 'sortable'
+        // property for each item in header array
+        this.header = this.header.map((column) => {
+          column.sortable =
+              column.sortable === undefined ? true : column.sortable;
+          return column;
+        })
+      }
       if (this.rowActionsEnabled) {
         // If table actions are enabled push an empty
         // string to the header array to account for additional
         // table actions cell
-        this.model.header.push('');
+        this.header.push({label: '', sortable: false});
       }
     };
+
+    /**
+     * onChanges Component lifecycle hook
+     * Check for changes in the data array and apply
+     * default or active sort if one is defined
+     */
+    this.$onChanges = (onChangesObj) => {
+      const dataChange = onChangesObj.data;
+      if (dataChange) {
+        if (this.activeSort !== undefined || this.defaultSort !== undefined) {
+          this.activeSort = this.defaultSort !== undefined ? this.defaultSort :
+                                                             this.activeSort;
+          sortData();
+        }
+      }
+    }
   };
 
   /**
@@ -99,6 +158,14 @@
   angular.module('app.common.components').component('bmcTable', {
     template: require('./table.html'),
     controller: TableController,
-    bindings: {model: '<', rowActionsEnabled: '<', size: '<', emitAction: '&'}
+    bindings: {
+      data: '<',               // Array
+      header: '<',             // Array
+      rowActionsEnabled: '<',  // boolean
+      size: '<',               // string
+      sortable: '<',           // boolean
+      defaultSort: '<',        // number (index of sort)
+      emitAction: '&'
+    }
   })
 })(window.angular);
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 0cdb414..613d88a 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -154,6 +154,28 @@
   }
 }
 
+.bmc-table__head {
+  .sort-icon {
+    padding: 0;
+    position: absolute;
+    .icon {
+      margin: 0;
+      & + .icon {
+        margin-left: -18px;
+      }
+      svg {
+        height: 1em;
+      }
+    }
+  }
+  .sort-icon--descending {
+    transform: rotate(180deg);
+  }
+  .sort-icon--inactive {
+    opacity: 0.5;
+  }
+}
+
 .bmc-table__row {
   border-bottom: 1px solid $border-color-01;
 }
@@ -161,6 +183,12 @@
 .bmc-table__column-header {
   padding: 10px 16px;
   background-color: $background-03;
+  position: relative;
+}
+
+.bmc-table__column-header--sortable {
+  cursor: pointer;
+  user-select: none;
 }
 
 .bmc-table__cell {
diff --git a/app/users/controllers/user-accounts-controller.html b/app/users/controllers/user-accounts-controller.html
index 76df616..696a984 100644
--- a/app/users/controllers/user-accounts-controller.html
+++ b/app/users/controllers/user-accounts-controller.html
@@ -23,7 +23,8 @@
       </div>
       <!-- Local user table -->
       <bmc-table
-        model="tableModel"
+        data="tableData"
+        header="tableHeader"
         row-actions-enabled="true"
         emit-action="onEmitAction(value)"
         class="local-users__table">
@@ -36,4 +37,4 @@
       <role-table></role-table>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/users/controllers/user-accounts-controller.js b/app/users/controllers/user-accounts-controller.js
index b5ed1a5..7591a53 100644
--- a/app/users/controllers/user-accounts-controller.js
+++ b/app/users/controllers/user-accounts-controller.js
@@ -17,9 +17,10 @@
       $scope.userRoles;
       $scope.localUsers;
 
-      $scope.tableModel = {};
-      $scope.tableModel.data = [];
-      $scope.tableModel.header = ['Username', 'Privilege', 'Account status'];
+      $scope.tableData = [];
+      $scope.tableHeader = [
+        {label: 'Username'}, {label: 'Privilege'}, {label: 'Account status'}
+      ];
 
       /**
        * Data table mapper
@@ -61,7 +62,7 @@
         APIUtils.getAllUserAccounts()
             .then((users) => {
               $scope.localUsers = users;
-              $scope.tableModel.data = users.map(mapTableData);
+              $scope.tableData = users.map(mapTableData);
             })
             .catch((error) => {
               console.log(JSON.stringify(error));
diff --git a/app/users/directives/role-table.html b/app/users/directives/role-table.html
index 55e8108..95b4c31 100644
--- a/app/users/directives/role-table.html
+++ b/app/users/directives/role-table.html
@@ -7,7 +7,8 @@
     <span ng-if="!roleTableCtrl.isCollapsed">Hide privilege role descriptions</span>
   </button>
   <div uib-collapse="roleTableCtrl.isCollapsed">
-    <bmc-table  model="roleTableCtrl.tableModel"
+    <bmc-table  data="roleTableCtrl.tableData"
+                header="roleTableCtrl.tableHeader"
                 size="'small'">
     </bmc-table>
   </div>
diff --git a/app/users/directives/role-table.js b/app/users/directives/role-table.js
index ee99a41..c23fed8 100644
--- a/app/users/directives/role-table.js
+++ b/app/users/directives/role-table.js
@@ -20,9 +20,10 @@
           const check =
               $sce.trustAsHtml(`<span class="icon__check-mark">${svg}<span>`);
 
-          this.tableModel = {};
-          this.tableModel.header =
-              ['', 'Admin', 'Operator', 'User', 'Callback'];
+          this.tableHeader = [
+            {label: ''}, {label: 'Admin'}, {label: 'Operator'}, {label: 'User'},
+            {label: 'Callback'}
+          ];
 
           // TODO: When API changed from D-Bus to Redfish, 'Operator' role
           // should have 'Configure components managed by this service'
@@ -30,7 +31,7 @@
           // TODO: When 'Operator' and 'User' roles have ability to change
           // own account's passwords, should have 'Update password for
           // current user account' privilege checked
-          this.tableModel.data = [
+          this.tableData = [
             {
               uiData: [
                 'Configure components managed by this service', check, '', '',