Merge pull request #3119 from threefoldtech/development_datatables

Make all datatables paginations consistent
threefoldtech · Jul 16, 2024 · 204298c · 204298c
2 parents 135184f + f9f49da
commit 204298c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 20 deletions.
diff --git a/packages/playground/src/components/contracts_list/contracts_table.vue b/packages/playground/src/components/contracts_list/contracts_table.vue
@@ -9,18 +9,18 @@
       :deleting="deleting"
       v-bind:onClick:row="loading || deleting ? undefined : onClickRow"
       :no-data-text="capitalize(`No ${props.contractsType} contracts found on your account.`)"
-      :items-per-page-options="[
-        { value: 5, title: '5' },
-        { value: 10, title: '10' },
-        { value: 15, title: '15' },
-        { value: 50, title: '50' },
-      ]"
       class="elevation-1 v-data-table-header"
       density="compact"
       :items-length="$props.count.value"
       :items-per-page="$props.size.value"
       :page="$props.page.value"
       :items="contracts.value"
+      :items-per-page-options="[
+        { value: 5, title: '5' },
+        { value: 10, title: '10' },
+        { value: 20, title: '20' },
+        { value: 50, title: '50' },
+      ]"
       return-object
       show-select
       @update:page="updatePage"

diff --git a/packages/playground/src/components/nodes_table.vue b/packages/playground/src/components/nodes_table.vue
@@ -12,7 +12,7 @@
           :items-per-page-options="[
             { value: 5, title: '5' },
             { value: 10, title: '10' },
-            { value: 15, title: '15' },
+            { value: 20, title: '20' },
             { value: 50, title: '50' },
           ]"
           :page="$props.page"

diff --git a/packages/playground/src/components/ssh_keys/SshTable.vue b/packages/playground/src/components/ssh_keys/SshTable.vue
@@ -19,7 +19,7 @@
         :items-per-page-options="[
           { value: 5, title: '5' },
           { value: 10, title: '10' },
-          { value: 15, title: '15' },
+          { value: 20, title: '20' },
           { value: 50, title: '50' },
         ]"
         loading-text="Loading..."

diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
@@ -20,6 +20,12 @@
       :headers="headers"
       :items="farms"
       v-model:items-per-page="pageSize"
+      :items-per-page-options="[
+        { value: 5, title: '5' },
+        { value: 10, title: '10' },
+        { value: 20, title: '20' },
+        { value: 50, title: '50' },
+      ]"
       v-model:page="page"
       show-expand
       :expanded="expanded"
@@ -35,12 +41,6 @@
       expand-on-click
       @update:options="getUserFarms"
       :hover="true"
-      :items-per-page-options="[
-        { value: 5, title: '5' },
-        { value: 10, title: '10' },
-        { value: 15, title: '15' },
-        { value: 50, title: '50' },
-      ]"
       return-object
     >
       <template v-slot:top>

diff --git a/packages/playground/src/dashboard/components/user_nodes.vue b/packages/playground/src/dashboard/components/user_nodes.vue
@@ -7,15 +7,15 @@
       :loading="loading"
       :items="nodes"
       :items-length="nodesCount"
+      :headers="headers"
+      v-model:page="page"
+      v-model:items-per-page="pageSize"
       :items-per-page-options="[
         { value: 5, title: '5' },
         { value: 10, title: '10' },
-        { value: 15, title: '15' },
+        { value: 20, title: '20' },
         { value: 50, title: '50' },
       ]"
-      :headers="headers"
-      v-model:page="page"
-      v-model:items-per-page="pageSize"
       show-expand
       :expanded="expanded"
       @update:expanded="

diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
@@ -89,13 +89,13 @@
         loading-text="Loading Farms..."
         :items="farms"
         :items-length="totalFarms"
+        :items-per-page="size"
         :items-per-page-options="[
           { value: 5, title: '5' },
           { value: 10, title: '10' },
-          { value: 15, title: '15' },
+          { value: 20, title: '20' },
           { value: 50, title: '50' },
         ]"
-        :items-per-page="size"
         @update:items-per-page="
           size = $event;
           loadFarms();