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);