perPageDropdownEnabled property added fixes #790

xaksis · Jan 17, 2021 · 9e38540 · 9e38540
1 parent a246512
commit 9e38540
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -59,6 +59,7 @@ export default {
         enabled: true,
         perPage: 2,
         perPageDropdown: [50, 100, 200, 300, 500, 1000],
+        perPageDropdownEnabled: false,
       },
       columns: [
         {

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -28,6 +28,7 @@
           :nextText="nextText"
           :prevText="prevText"
           :rowsPerPageText="rowsPerPageText"
+          :perPageDropdownEnabled="perPageDropdownEnabled"
           :customRowsPerPageDropdown="customRowsPerPageDropdown"
           :paginateDropdownAllowAll="paginateDropdownAllowAll"
           :ofText="ofText"
@@ -313,6 +314,7 @@
           :nextText="nextText"
           :prevText="prevText"
           :rowsPerPageText="rowsPerPageText"
+          :perPageDropdownEnabled="perPageDropdownEnabled"
           :customRowsPerPageDropdown="customRowsPerPageDropdown"
           :paginateDropdownAllowAll="paginateDropdownAllowAll"
           :ofText="ofText"
@@ -405,6 +407,7 @@ export default {
           enabled: false,
           perPage: 10,
           perPageDropdown: null,
+          perPageDropdownEnabled: true,
           position: 'bottom',
           dropdownAllowAll: true,
           mode: 'records', // or pages
@@ -1407,6 +1410,7 @@ export default {
         perPage,
         position,
         perPageDropdown,
+        perPageDropdownEnabled,
         dropdownAllowAll,
         nextLabel,
         prevLabel,
@@ -1441,6 +1445,10 @@ export default {
         }
       }
 
+      if (typeof perPageDropdownEnabled === 'boolean') {
+        this.perPageDropdownEnabled = perPageDropdownEnabled;
+      }
+
       if (typeof dropdownAllowAll === 'boolean') {
         this.paginateDropdownAllowAll = dropdownAllowAll;
       }

diff --git a/src/components/VgtPagination.vue b/src/components/VgtPagination.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vgt-wrap__footer vgt-clearfix">
-    <div class="footer__row-count vgt-pull-left">
+    <div v-if="perPageDropdownEnabled" class="footer__row-count vgt-pull-left">
       <form>
         <label :for="id" class="footer__row-count__label">{{rowsPerPageText}}:</label>
         <select
@@ -70,6 +70,7 @@ export default {
     total: { default: null },
     perPage: {},
     rtl: { default: false },
+    perPageDropdownEnabled: { default: true },
     customRowsPerPageDropdown: { default() { return []; } },
     paginateDropdownAllowAll: { default: true },
     mode: { default: 'records' },

diff --git a/src/styles/black-rhino/black-rhino.scss b/src/styles/black-rhino/black-rhino.scss
@@ -83,7 +83,7 @@
       }
       &__select{
         color:  $text-color-td;
-        background: $table-bg;
+        background: $input-bg;
         border: none;
         -webkit-appearance: none; 
         -moz-appearance: none;

diff --git a/src/styles/nocturnal/nocturnal.scss b/src/styles/nocturnal/nocturnal.scss
@@ -72,15 +72,40 @@
     border: 1px solid $border-color;
     background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
     .footer__row-count{
+      position: relative;
       &__label{
         color: $secondary-text-color;
       }
       &__select{
         color:  $text-color;
+        background: darken($thead-bg-color-2, 5%);
+        border: none;
+        -webkit-appearance: none; 
+        -moz-appearance: none;
+        appearance: none;
+        padding-right: 15px;
+        padding-left: 10px;
+        border-radius: 3px;
+        text-align: center;
         &:focus{
           border-color: $link-color;
         }
       }
+      &::after{
+        content: '';
+        display: block;
+        position: absolute;
+        height: 0px;
+        width: 0px;
+        right: 6px;
+        top: 50%;
+        margin-top: -1px;
+        border-top:  6px solid $text-color;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-bottom: none;
+        pointer-events: none
+      }
     }
     .footer__navigation{
       &__page-btn{