--- a/client/src/components/usermanagement/Usermanagement.vue	Thu Sep 23 17:33:07 2021 +0200
+++ b/client/src/components/usermanagement/Usermanagement.vue	Fri Sep 24 13:10:25 2021 +0200
@@ -4,7 +4,11 @@
     <div class="d-flex content py-2">
       <div :class="userlistStyle">
         <div class="card shadow-xs">
-          <UIBoxHeader icon="users-cog" :title="usersLabel" />
+          <UIBoxHeader
+            icon="users-cog"
+            :title="usersLabel"
+            :checkBox="checkboxObject"
+          />
           <UITableHeader
             :columns="[
               { id: 'role', title: `${roleForColumLabel}`, class: 'col-1' },
@@ -15,7 +19,10 @@
             ]"
           />
           <UITableBody
-            :data="users | sortTable(sortColumn, sortDirection, page, pageSize)"
+            :data="
+              usersForTable
+                | sortTable(sortColumn, sortDirection, page, pageSize)
+            "
             :isActive="item => item === currentUser"
             maxHeight="47rem"
           >
@@ -169,7 +176,9 @@
   data() {
     return {
       sortColumn: "user", // overriding the sortTable mixin's empty default value
-      reportToggled: false
+      reportToggled: false,
+      usersForTable: [],
+      areSomeUsersHidden: false
     };
   },
   components: {
@@ -208,7 +217,7 @@
       return this.$gettext("Email");
     },
     pages() {
-      return Math.ceil(this.users.length / this.pageSize);
+      return Math.ceil(this.usersForTable.length / this.pageSize);
     },
     tableStyle() {
       return {
@@ -227,9 +236,42 @@
           userlistextended: !this.isUserDetailsVisible
         }
       ];
+    },
+    checkboxObject() {
+      // Hide checkbox in case there are no deactivated users
+      if (this.users.some(u => !u.active)) {
+        return {
+          value: this.areSomeUsersHidden,
+          label: "Hide inactive users",
+          callback: () => {
+            this.changeDisplayingState();
+          }
+        };
+      } else {
+        return undefined;
+      }
     }
   },
+  watch: {
+    users() {
+      this.filterUsers();
+    }
+  },
+  mounted() {
+    this.usersForTable = this.users;
+  },
   methods: {
+    changeDisplayingState() {
+      this.areSomeUsersHidden = !this.areSomeUsersHidden;
+      this.filterUsers();
+    },
+    filterUsers() {
+      if (this.areSomeUsersHidden) {
+        this.usersForTable = this.users.filter(u => u.active);
+      } else {
+        this.usersForTable = this.users;
+      }
+    },
     toggleReport(user) {
       HTTP.patch(
         `/users/${user.user}`,