add: pagination

frontend/src/components/OverviewScreen.vue

@@ -4,8 +4,9 @@
             <map-component @mapClick="$emit('mapClick', $event)" />
         </va-card>
         <va-card class="content-container">
-            <va-data-table :items="items" :columns="columns" :hoverable="true" :clickable="true"
-                @row:click="(e) => $router.push(`/items/${e.item.id}`)" />
+            <va-data-table :items="items" :columns="columns" :hoverable="true" :clickable="true" :per-page="perPage"
+                :current-page="currentPage" @row:click="(e) => $router.push(`/items/${e.item.id}`)" />
+            <va-pagination v-model="currentPage" :pages="pages" input />
         </va-card>
     </div>
 </template>
@@ -27,9 +28,19 @@ export default {
         },
     },
     data() {
-        return {}
+        return {
+            perPage: 10,
+            currentPage: 1,
+        }
     },
     methods: {},
+    computed: {
+        pages(){
+            return (this.perPage && this.perPage !== 0) 
+            ? Math.ceil(this.items.length / this.perPage)
+            : this.items.length
+        }
+    },
 
 }
 </script>

frontend/src/main.js

@@ -24,6 +24,7 @@ import {
     VaCardContent,
     VaInnerLoading,
     VaSelect,
+    VaPagination,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -62,6 +63,7 @@ app.use(createVuesticEssential({
         VaCardContent,
         VaInnerLoading,
         VaSelect,
+        VaPagination,
     }
 }));
 

frontend/src/views/FrontView.vue

@@ -39,13 +39,13 @@ export default {
                 "resolution",
             ],
             showColumns: [
-                "basin",
-                "category",
                 "description",
+                "basin",
                 "deposit",
                 "well",
                 "stratum",
                 "org",
+                "category",
             ],
         }
     },
@@ -121,6 +121,9 @@ export default {
         filteredColumns(){
             return this.columns
                 .filter(header => this.showColumns.includes(header.database))
+                .sort((header1, header2) => {
+                    return this.showColumns.indexOf(header1.database) - this.showColumns.indexOf(header2.database)
+                })
                 .map(header => {
                     return {
                         key: header.database,