--- a/client/src/components/ImportStretches.vue	Tue Mar 19 18:07:50 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Tue Mar 19 18:59:40 2019 +0100
@@ -8,13 +8,19 @@
     <div v-if="!edit" class="mb-3">
       <UITableHeader
         :columns="[
-          { id: 'name', title: 'Name', class: 'col-4' },
-          { id: 'date', title: 'Date', class: 'col-2' },
-          { id: 'srcorg', title: 'Source organization', class: 'col-3' }
+          { id: 'properties.name', title: 'Name', class: 'col-4' },
+          { id: 'properties.date_info', title: 'Date', class: 'col-2' },
+          {
+            id: 'properties.source_organization',
+            title: 'Source organization',
+            class: 'col-3'
+          }
         ]"
-        :sortable="false"
       />
-      <UITableBody :data="stretches" v-slot="{ item: stretch }">
+      <UITableBody
+        :data="filteredStretches() | sortTable(sortColumn, sortDirection)"
+        v-slot="{ item: stretch }"
+      >
         <div class="py-1 col-4 ">
           <a
             class="linkto text-info"
@@ -34,10 +40,10 @@
           }}</a>
         </div>
         <div class="py-1 col-2">
-          {{ stretch.properties["date_info"] | surveyDate }}
+          {{ stretch.properties.date_info | surveyDate }}
         </div>
         <div class="py-1 col-3">
-          {{ stretch.properties["source_organization"] }}
+          {{ stretch.properties.source_organization }}
         </div>
         <div class="py-1 col text-right">
           <button
@@ -279,12 +285,14 @@
  * Tom Gottfried <tom.gottfried@intevation.de>
  */
 import { mapState, mapGetters } from "vuex";
-import { displayError, displayInfo } from "@/lib/errors.js";
-import { LAYERS } from "@/store/map.js";
+import { displayError, displayInfo } from "@/lib/errors";
+import { LAYERS } from "@/store/map";
 import { HTTP } from "@/lib/http";
+import { sortTable } from "@/lib/mixins";
 
 export default {
   name: "importstretches",
+  mixins: [sortTable],
   data() {
     return {
       staging: [],
@@ -314,24 +322,53 @@
       countryCodeError: false
     };
   },
-  mounted() {
-    this.edit = false;
-    this.loadStretches().catch(error => {
-      const { status, data } = error.response;
-      displayError({
-        title: this.$gettext("Backend Error"),
-        message: `${status}: ${data.message || data}`
-      });
-    });
-    this.loadStagingData().catch(error => {
-      const { status, data } = error.response;
-      displayError({
-        title: this.$gettext("Backend Error"),
-        message: `${status}: ${data.message || data}`
-      });
-    });
+  computed: {
+    ...mapState("application", ["searchQuery"]),
+    ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
+    ...mapGetters("user", ["isSysAdmin"]),
+    ...mapState("imports", ["stretches"]),
+    stretchesInStaging() {
+      const result = [];
+      for (let stretch of this.stretches) {
+        for (let s of this.staging) {
+          if (s.kind == "st" && s.summary.stretch == stretch.properties.name) {
+            result.push({ name: s.summary.stretch, id: s.id });
+          }
+        }
+      }
+      return result;
+    },
+    pointsValid() {
+      if (!this.startrhm || !this.endrhm) return true;
+      const start = this.startrhm.replace(/\D+/g, "") * 1;
+      const end = this.endrhm.replace(/\D+/g, "") * 1;
+      const result = start < end;
+      return result;
+    }
+  },
+  watch: {
+    identifiedFeatures() {
+      const filterDistanceMarks = x => {
+        return /^distance_marks/.test(x["id_"]);
+      };
+      const distanceMark = this.identifiedFeatures.filter(filterDistanceMarks);
+      if (distanceMark.length > 0) {
+        const value = distanceMark[0].getProperties()["location"];
+        this.startrhm = this.pipetteStart ? value : this.startrhm;
+        this.endrhm = this.pipetteEnd ? value : this.endrhm;
+        this.pipetteStart = false;
+        this.pipetteEnd = false;
+      }
+    }
   },
   methods: {
+    filteredStretches() {
+      return this.stretches.filter(s => {
+        return (s.properties.name + s.properties.source_organization)
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+      });
+    },
     gotoStaging(id) {
       this.$router.push("/review/" + id);
     },
@@ -531,43 +568,22 @@
         });
     }
   },
-  watch: {
-    identifiedFeatures() {
-      const filterDistanceMarks = x => {
-        return /^distance_marks/.test(x["id_"]);
-      };
-      const distanceMark = this.identifiedFeatures.filter(filterDistanceMarks);
-      if (distanceMark.length > 0) {
-        const value = distanceMark[0].getProperties()["location"];
-        this.startrhm = this.pipetteStart ? value : this.startrhm;
-        this.endrhm = this.pipetteEnd ? value : this.endrhm;
-        this.pipetteStart = false;
-        this.pipetteEnd = false;
-      }
-    }
-  },
-  computed: {
-    ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
-    ...mapGetters("user", ["isSysAdmin"]),
-    ...mapState("imports", ["stretches"]),
-    stretchesInStaging() {
-      const result = [];
-      for (let stretch of this.stretches) {
-        for (let s of this.staging) {
-          if (s.kind == "st" && s.summary.stretch == stretch.properties.name) {
-            result.push({ name: s.summary.stretch, id: s.id });
-          }
-        }
-      }
-      return result;
-    },
-    pointsValid() {
-      if (!this.startrhm || !this.endrhm) return true;
-      const start = this.startrhm.replace(/\D+/g, "") * 1;
-      const end = this.endrhm.replace(/\D+/g, "") * 1;
-      const result = start < end;
-      return result;
-    }
+  mounted() {
+    this.edit = false;
+    this.loadStretches().catch(error => {
+      const { status, data } = error.response;
+      displayError({
+        title: this.$gettext("Backend Error"),
+        message: `${status}: ${data.message || data}`
+      });
+    });
+    this.loadStagingData().catch(error => {
+      const { status, data } = error.response;
+      displayError({
+        title: this.$gettext("Backend Error"),
+        message: `${status}: ${data.message || data}`
+      });
+    });
   }
 };
 </script>