added array in AdminUserContainer and added onClick in UserTable.jsx

src/client/js/components/Admin/Users/UserTable.jsx

@@ -19,9 +19,15 @@ class UserTable extends React.Component {
 
     };
 
+    // this.onClickColumnSort = this.onClickColumnSort.bind(this);
     this.getUserStatusLabel = this.getUserStatusLabel.bind(this);
   }
 
+
+  onClickColumnSort(sortName) {
+    console.log(sortName);
+  }
+
   /**
    * return status label element by `userStatus`
    * @param {string} userStatus
@@ -85,28 +91,28 @@ class UserTable extends React.Component {
               <th width="100px">#</th>
               <th>
                 {t('status')}
-                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true"></a>
-                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></a>
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('StatusAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('StatusDesc')}></a>
               </th>
               <th>
                 <code>username</code>
-                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true"></a>
-                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></a>
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('UserNameAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('UserNameDesc')}></a>
               </th>
               <th>
                 {t('Name')}
-                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true"></a>
-                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></a>
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('NameAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('NameDesc')}></a>
               </th>
               <th>
                 {t('Email')}
-                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true"></a>
-                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></a>
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('EmailAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('EmailDesc')}></a>
               </th>
               <th width="100px">
                 {t('Created')}
-                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true"></a>
-                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></a>
+                <a className="glyphicon glyphicon-triangle-top" aria-hidden="true" onClick={() => this.onClickColumnSort('CreatedAsc')}></a>
+                <a className="glyphicon glyphicon-triangle-bottom" aria-hidden="true" onClick={() => this.onClickColumnSort('CreatedDesc')}></a>
               </th>
               <th width="150px">{t('Last_Login')}</th>
               <th width="70px"></th>

src/client/js/services/AdminUsersContainer.js

@@ -18,6 +18,7 @@ export default class AdminUsersContainer extends Container {
 
     this.state = {
       users: [],
+      descColumns: [],
       isPasswordResetModalShown: false,
       isUserInviteModalShown: false,
       userForPasswordResetModal: null,