Merge branch 'master' of https://github.com/xaksis/vue-good-table

xaksis · Sep 29, 2021 · 56d3534 · 56d3534
2 parents 2f5764c + e575463
commit 56d3534
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -25,6 +25,9 @@
           :rtl="rtl"
           :total="totalRows || totalRowCount"
           :mode="paginationMode"
+          :jumpFirstOrLast="paginationOptions.jumpFirstOrLast"
+          :firstText="firstText"
+          :lastText="lastText"
           :nextText="nextText"
           :prevText="prevText"
           :rowsPerPageText="rowsPerPageText"
@@ -325,6 +328,9 @@
           :rtl="rtl"
           :total="totalRows || totalRowCount"
           :mode="paginationMode"
+          :jumpFirstOrLast="paginationOptions.jumpFirstOrLast"
+          :firstText="firstText"
+          :lastText="lastText"
           :nextText="nextText"
           :prevText="prevText"
           :rowsPerPageText="rowsPerPageText"
@@ -428,6 +434,7 @@ export default {
           dropdownAllowAll: true,
           mode: 'records', // or pages
           infoFn: null,
+          jumpFirstOrLast : false
         };
       },
     },
@@ -450,6 +457,8 @@ export default {
     tableLoading: false,
 
     // text options
+    firstText: "First",
+    lastText: "Last",
     nextText: 'Next',
     prevText: 'Previous',
     rowsPerPageText: 'Rows per page',
@@ -1473,6 +1482,8 @@ export default {
         perPageDropdown,
         perPageDropdownEnabled,
         dropdownAllowAll,
+        firstLabel,
+        lastLabel,
         nextLabel,
         prevLabel,
         rowsPerPageLabel,
@@ -1519,6 +1530,14 @@ export default {
         this.paginationMode = mode;
       }
 
+      if (typeof firstLabel === 'string') {
+        this.firstText = firstLabel;
+      }
+
+      if (typeof lastLabel === 'string') {
+        this.lastText = lastLabel;
+      }
+
       if (typeof nextLabel === 'string') {
         this.nextText = nextLabel;
       }

diff --git a/src/components/pagination/VgtPagination.vue b/src/components/pagination/VgtPagination.vue
@@ -32,6 +32,22 @@
         :page-text="pageText"
         :info-fn="infoFn"
         :mode="mode" />
+      <button
+        v-if="jumpFirstOrLast"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !firstIsPossible }"
+        @click.prevent.stop="firstPage"
+      >
+        <span
+          aria-hidden="true"
+          class="chevron"
+          v-bind:class="{ left: !rtl, right: rtl }"
+        ></span>
+        <span>{{ firstText }}</span>
+      </button>
+
       <button
         type="button"
         aria-controls="vgt-table"
@@ -51,6 +67,22 @@
         <span>{{nextText}}</span>
         <span aria-hidden="true" class="chevron" v-bind:class="{ 'right': !rtl, 'left': rtl }"></span>
       </button>
+
+      <button
+        v-if="jumpFirstOrLast"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !lastIsPossible }"
+        @click.prevent.stop="lastPage"
+      >
+        <span>{{ lastText }}</span>
+        <span
+          aria-hidden="true"
+          class="chevron"
+          v-bind:class="{ right: !rtl, left: rtl }"
+        ></span>
+      </button>
     </div>
   </div>
 </template>
@@ -73,8 +105,11 @@ export default {
     customRowsPerPageDropdown: { default() { return []; } },
     paginateDropdownAllowAll: { default: true },
     mode: { default: PAGINATION_MODES.Records },
+    jumpFirstOrLast: { default: false },
 
     // text options
+    firstText: { default: "First" },
+    lastText: { default: "Last" },
     nextText: { default: 'Next' },
     prevText: { default: 'Prev' },
     rowsPerPageText: { default: 'Rows per page:' },
@@ -128,6 +163,16 @@ export default {
       return remainder === 0 ? quotient : quotient + 1;
     },
 
+    // Can go to first page
+    firstIsPossible() {
+      return this.currentPage > 1;
+    },
+
+    // Can go to last page
+    lastIsPossible() {
+      return this.currentPage < Math.ceil(this.total / this.currentPerPage);
+    },
+
     // Can go to next page
     nextIsPossible() {
       return this.currentPage < this.pagesCount;
@@ -152,6 +197,24 @@ export default {
       }
     },
 
+    // Go to first page
+    firstPage() {
+      if (this.firstIsPossible) {
+        this.currentPage = 1;
+        this.prevPage = 0;
+        this.pageChanged();
+      }
+    },
+
+    // Go to last page
+    lastPage() {
+      if (this.lastIsPossible) {
+        this.currentPage = this.pagesCount;
+        this.prev = this.currentPage - 1;
+        this.pageChanged();
+      }
+    },
+
     // Go to next page
     nextPage() {
       if (this.nextIsPossible) {