Browse Source

Added pagination to aliases table

Will Browning 5 years ago
parent
commit
62b4eea27d
2 changed files with 10 additions and 3 deletions
  1. 3 3
      resources/css/app.css
  2. 7 0
      resources/js/pages/Aliases.vue

+ 3 - 3
resources/css/app.css

@@ -221,12 +221,12 @@ table.vgt-table tr.clickable:hover {
 }
 
 .vgt-wrap__footer {
-  @apply p-4 text-grey-400 bg-white border border-grey-200;
+  @apply p-4 text-grey-400 bg-white;
 }
 
 .vgt-wrap__footer .footer__row-count__label,
 .vgt-wrap__footer .footer__row-count__select {
-  @apply inline-block align-middle;
+  @apply inline-block align-middle bg-white;
 }
 
 .vgt-wrap__footer .footer__row-count__label {
@@ -305,7 +305,7 @@ table.vgt-table tr.clickable:hover {
 }
 
 .vgt-wrap__footer .footer__navigation__page-info__current-entry {
-  @apply text-center w-6 inline-block my-0 mx-2 font-bold;
+  @apply text-center w-6 inline-block my-0 mx-2 font-bold border border-grey-200;
 }
 
 @media only screen and (max-width: 750px) {

+ 7 - 0
resources/js/pages/Aliases.vue

@@ -142,6 +142,13 @@
         enabled: true,
         initialSortBy: { field: 'created_at', type: 'desc' },
       }"
+      :pagination-options="{
+        enabled: true,
+        mode: 'pages',
+        perPage: 25,
+        perPageDropdown: [25, 50, 100],
+        rowsPerPageLabel: 'Aliases per page',
+      }"
       styleClass="vgt-table"
     >
       <div slot="emptystate" class="flex items-center justify-center h-24 text-lg text-grey-700">