From 15bebe2592d2fc0dee3a0957511bd1c4c1d6eee9 Mon Sep 17 00:00:00 2001
From: VictorCazanave <victor.cazanave@gmail.com>
Date: Wed, 4 Jul 2018 17:15:29 +0800
Subject: [PATCH 1/3] add pagination-top and pagination-bottom slots

---
 src/components/Table.vue | 71 +++++++++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 30 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index a195f445..4ba06c71 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -12,22 +12,27 @@
       </slot>
     </div>
     <div class="vgt-inner-wrap" :class="{'is-loading': isTableLoading}">
-      <vgt-pagination
+      <slot
         v-if="paginate && paginateOnTop"
-        ref="paginationTop"
-        @page-changed="pageChanged"
-        @per-page-changed="perPageChanged"
-        :perPage="perPage"
-        :rtl="rtl"
-        :total="totalRows || totalRowCount"
-        :nextText="nextText"
-        :prevText="prevText"
-        :rowsPerPageText="rowsPerPageText"
-        :customRowsPerPageDropdown="customRowsPerPageDropdown"
-        :paginateDropdownAllowAll="paginateDropdownAllowAll"
-        :ofText="ofText"
-        :allText="allText"></vgt-pagination>
-
+        name="pagination-top"
+        :pageChanged="pageChanged"
+        :perPageChanged="perPageChanged"
+        :total="totalRows || totalRowCount">
+        <vgt-pagination
+          ref="paginationTop"
+          @page-changed="pageChanged"
+          @per-page-changed="perPageChanged"
+          :perPage="perPage"
+          :rtl="rtl"
+          :total="totalRows || totalRowCount"
+          :nextText="nextText"
+          :prevText="prevText"
+          :rowsPerPageText="rowsPerPageText"
+          :customRowsPerPageDropdown="customRowsPerPageDropdown"
+          :paginateDropdownAllowAll="paginateDropdownAllowAll"
+          :ofText="ofText"
+          :allText="allText"></vgt-pagination>
+      </slot>
       <vgt-global-search
         @on-keyup="searchTableOnKeyUp"
         @on-enter="searchTableOnEnter"
@@ -166,22 +171,28 @@
           </tbody>
         </table>
       </div>
-      <vgt-pagination
+      <slot
         v-if="paginate && paginateOnBottom"
-        ref="paginationBottom"
-        @page-changed="pageChanged"
-        @per-page-changed="perPageChanged"
-        :perPage="perPage"
-        :rtl="rtl"
-        :total="totalRows || totalRowCount"
-        :nextText="nextText"
-        :prevText="prevText"
-        :rowsPerPageText="rowsPerPageText"
-        :customRowsPerPageDropdown="customRowsPerPageDropdown"
-        :paginateDropdownAllowAll="paginateDropdownAllowAll"
-        :ofText="ofText"
-        :allText="allText"
-        ></vgt-pagination>
+        name="pagination-bottom"
+        :pageChanged="pageChanged"
+        :perPageChanged="perPageChanged"
+        :total="totalRows || totalRowCount">
+        <vgt-pagination
+          ref="paginationBottom"
+          @page-changed="pageChanged"
+          @per-page-changed="perPageChanged"
+          :perPage="perPage"
+          :rtl="rtl"
+          :total="totalRows || totalRowCount"
+          :nextText="nextText"
+          :prevText="prevText"
+          :rowsPerPageText="rowsPerPageText"
+          :customRowsPerPageDropdown="customRowsPerPageDropdown"
+          :paginateDropdownAllowAll="paginateDropdownAllowAll"
+          :ofText="ofText"
+          :allText="allText"
+          ></vgt-pagination>
+      </slot>
     </div>
   </div>
 </template>

From 0c55cc13c675db78d0c9b3b6a0d72e55e0791141 Mon Sep 17 00:00:00 2001
From: VictorCazanave <victor.cazanave@gmail.com>
Date: Wed, 4 Jul 2018 17:18:40 +0800
Subject: [PATCH 2/3] update docs with custom pagination

---
 vp-docs/guide/advanced/README.md | 34 +++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/vp-docs/guide/advanced/README.md b/vp-docs/guide/advanced/README.md
index a85e4502..b6e37134 100644
--- a/vp-docs/guide/advanced/README.md
+++ b/vp-docs/guide/advanced/README.md
@@ -69,4 +69,36 @@ Sometimes you might want to customize column headers. You can do that in the fol
      </span>
   </template>
 </vue-good-table>
-```
\ No newline at end of file
+```
+
+## Custom pagination
+
+Sometimes you might want to customize the pagination. You can do that in the following way:
+```html
+<vue-good-table
+  :columns="columns"
+  :rows="rows">
+  <template slot="pagination-top" slot-scope="props">
+    <custom-top-pagination
+      :total="props.total"
+      :pageChanged="props.pageChanged"
+      :perPageChanged="props.perPageChanged">
+    </custom-top-pagination>
+  </template>
+  <template slot="pagination-bottom" slot-scope="props">
+    <custom-bottom-pagination
+      :total="props.total"
+      :pageChanged="props.pageChanged"
+      :perPageChanged="props.perPageChanged">
+    </custom-bottom-pagination>
+  </template>
+</vue-good-table>
+```
+
+::: tip NOTE
+You will have to implement your own pagination system:
+
+* The total number of rows can be accessed via `props.total`
+* The function to call when the current page has changed can be accessed via `props.pageChanged`.
+* The function to call when the per page value has changed can be accessed via `props.perPageChanged` .
+:::
\ No newline at end of file

From 57890e56fbf931615af98d96a90e6cad7205a92b Mon Sep 17 00:00:00 2001
From: VictorCazanave <victor.cazanave@gmail.com>
Date: Fri, 6 Jul 2018 09:57:40 +0800
Subject: [PATCH 3/3] fix docs

---
 vp-docs/guide/advanced/README.md | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/vp-docs/guide/advanced/README.md b/vp-docs/guide/advanced/README.md
index b6e37134..37e22e60 100644
--- a/vp-docs/guide/advanced/README.md
+++ b/vp-docs/guide/advanced/README.md
@@ -77,20 +77,14 @@ Sometimes you might want to customize the pagination. You can do that in the fol
 ```html
 <vue-good-table
   :columns="columns"
-  :rows="rows">
-  <template slot="pagination-top" slot-scope="props">
-    <custom-top-pagination
-      :total="props.total"
-      :pageChanged="props.pageChanged"
-      :perPageChanged="props.perPageChanged">
-    </custom-top-pagination>
-  </template>
+  :rows="rows"
+  :pagination-options="{enabled: true}">
   <template slot="pagination-bottom" slot-scope="props">
-    <custom-bottom-pagination
+    <custom-pagination
       :total="props.total"
       :pageChanged="props.pageChanged"
       :perPageChanged="props.perPageChanged">
-    </custom-bottom-pagination>
+    </custom-pagination>
   </template>
 </vue-good-table>
 ```