# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1551713329 -3600
# Node ID 51dbcbf11c5f34ed4b5aea35450f5e9dec8e1c60
# Parent  e13daf4390683ff317a6a7ea1e6c85de979ce654
client: addendum for e13daf439068

Of course, as you'd expect, this only solves the problem if you don't care about
significant changes in the tables sorting behavior. To point out the difference
this commit shows the other way to solve the problem without changing the tables
behavior.

diff -r e13daf439068 -r 51dbcbf11c5f client/src/components/usermanagement/Usermanagement.vue
--- a/client/src/components/usermanagement/Usermanagement.vue	Mon Mar 04 16:20:57 2019 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Mon Mar 04 16:28:49 2019 +0100
@@ -171,13 +171,20 @@
     ...mapState("application", ["showSidebar"]),
     sortedUsers() {
       const start = (this.currentPage - 1) * this.pageSize;
-      return this.users.slice(start, start + this.pageSize).sort((a, b) => {
-        if (a[this.sortColumn].toLowerCase() < b[this.sortColumn].toLowerCase())
-          return this.sortDirection === "ASC" ? -1 : 1;
-        if (a[this.sortColumn].toLowerCase() > b[this.sortColumn].toLowerCase())
-          return this.sortDirection === "ASC" ? 1 : -1;
-        return 0;
-      });
+      return this.users
+        .filter(u => u) // to clone the array and leave the original store value intact
+        .sort((a, b) => {
+          if (
+            a[this.sortColumn].toLowerCase() < b[this.sortColumn].toLowerCase()
+          )
+            return this.sortDirection === "ASC" ? -1 : 1;
+          if (
+            a[this.sortColumn].toLowerCase() > b[this.sortColumn].toLowerCase()
+          )
+            return this.sortDirection === "ASC" ? 1 : -1;
+          return 0;
+        })
+        .slice(start, start + this.pageSize);
     },
     pages() {
       return Math.ceil(this.users.length / this.pageSize);