diff --git a/src/components/table-2.vue b/src/components/table-2.vue
index 89519211123ab633f7d41a6bc2aaaf71cff4922e..a5d5d1f1e516db4cc51605dd7e7de66fe905d788 100644
--- a/src/components/table-2.vue
+++ b/src/components/table-2.vue
@@ -72,6 +72,7 @@
 <script>
 
 import { HTTP } from '../http-common'
+// import axios from 'axios';
 
 export default {
   name: "Table2",
@@ -80,6 +81,7 @@ export default {
     columns: Object,
     endpoint: String,
     filter: String,
+    filter_column: String,
 
   },
   data() {
@@ -96,11 +98,16 @@ export default {
     };
   },
   mounted() {
-      this.getData(1)
+      this.sorted.column = this.columns.Id.data
+      this.getData()
   },
   methods: {
-    getData(page){
-        HTTP.get(`${this.endpoint}?page=${page}`).then((res)=>{
+    getData(){
+      let sortCol = this.sorted.column
+      if (!this.sorted.asc){
+        sortCol = `-${sortCol}`
+      }
+        HTTP.get(`${this.endpoint}?page=${this.page}?sort=${sortCol}?filter[${this.filter_column}]=${this.filter}`).then((res)=>{
             if (res.status == 200){
                 this.entries = res.data.data.data
                 this.page = res.data.data.current_page
@@ -111,42 +118,31 @@ export default {
         })
     },
     sort(column) {
-        console.log("sort "+ column)
+      console.log("sort "+ column)
       if (column === this.sorted.column) {
-        this.entries.reverse();
         this.sorted.asc = !this.sorted.asc;
       } else {
-        var col = this.columns[column];
-        this.entries.sort(function (a, b) {
-          let x = a[col];
-          let y = b[col];
-          if (x < y) {
-            return -1;
-          }
-          if (x > y) {
-            return 1;
-          }
-          return 0;
-        });
         this.sorted.column = column;
+        this.sorted.asc = true
       }
-      this.goPage(1);
+      this.page = 1
+      this.getData()
     },
     nextPage() {
       if (this.page < this.page_num) {
         this.page += 1;
-        this.getData(this.page)
+        this.getData()
       }
     },
     prevPage() {
       if (this.page > 1) {
         this.page -= 1;
-        this.getData(this.page)
+        this.getData()
       }
     },
     goPage(i) {
       this.page = i;
-      this.getData(this.page)
+      this.getData()
     },
     updatePagination() {
       this.pagination = [];
@@ -156,16 +152,6 @@ export default {
         }
       }
     },
-    /* eslint-disable no-unused-vars */
-    filterEntry(entry) {
-      for (const [key, value] of Object.entries(this.columns)) {
-        if (entry[value.data].toLowerCase().includes(this.filter)) {
-          return true;
-        }
-      }
-      return false;
-    },
-    /* eslint-enable no-unused-vars */
   },
 };
 </script>
diff --git a/src/views/Test.vue b/src/views/Test.vue
index fea4a46df786a7cf4cc7f9b31edd38bf58e26854..7e4a7c2b164ae4e14dcc3c7f0c6d17e7efbb9272 100644
--- a/src/views/Test.vue
+++ b/src/views/Test.vue
@@ -4,7 +4,7 @@
                 <Sidebar current_page = "About"></Sidebar>
                 <div class="col ps-md-2 pt-2">
                     <Header></Header>
-                        <Table2 :endpoint="'kpis'" :columns="columns" @edit-entry="print" @delete-entry="print" @detail-entry="print" ></Table2>
+                        <Table2 :endpoint="'kpis'" :columns="columns" :filter="''" :filter_column="'name'" @edit-entry="print" @delete-entry="print" @detail-entry="print" ></Table2>
                 </div>
             </div>
     </div>