From 80299e63f4c338d9537b051c57c1f3e5efb7721c Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 1 Dec 2020 13:11:24 -0800
Subject: Add documentation for table pagination

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic40d7b4580417590b2d465fe359198c92354c242
---
 docs/guide/components/table/index.md             |  97 ++++++++++++++++++++++-
 docs/guide/components/table/table-pagination.png | Bin 0 -> 107052 bytes
 2 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 docs/guide/components/table/table-pagination.png

(limited to 'docs')

diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index 3d13a2b8..cd1ba202 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -506,4 +506,99 @@ export default {
 </script>
 ```
 
-<!-- ## Pagination -->
+
+## Pagination
+
+To add table pagination:
+1. Import the BVPaginationMixin
+1. Add the `per-page` and `current-page` props to the `<table>` component.
+1. Add the below HTML snippet to the template. Make sure to update the `total-rows` prop.
+
+```vue{21}
+<b-row>
+  <b-col sm="6">
+    <b-form-group
+      class="table-pagination-select"
+      :label="$t('global.table.itemsPerPage')"
+      label-for="pagination-items-per-page"
+    >
+      <b-form-select
+        id="pagination-items-per-page"
+        v-model="perPage"
+        :options="itemsPerPageOptions"
+      />
+    </b-form-group>
+  </b-col>
+  <b-col sm="6">
+    <b-pagination
+      v-model="currentPage"
+      first-number
+      last-number
+      :per-page="perPage"
+      :total-rows="getTotalRowCount(items.length)"
+      aria-controls="table-event-logs"
+    />
+  </b-col>
+</b-row>
+```
+![Table pagination example](./table-pagination.png)
+
+```vue
+<template>
+  <b-container>
+    <b-table
+      hover
+      responsive="md"
+      :items="filteredItems"
+      :fields="fields"
+      :per-page="perPage"
+      :current-page="currentPage"
+    />
+    <b-row>
+      <b-col sm="6">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(items.length)"
+          aria-controls="table-event-logs"
+        />
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+<script>
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions
+} from '@/components/Mixins/BVPaginationMixin';
+
+export default {
+  mixins: [ BVPaginationMixin ],
+  data() {
+    return {
+      items: [...],
+      fields: [..],
+      currentPage,
+      perPage,
+      itemsPerPageOptions
+    },
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/guide/components/table/table-pagination.png b/docs/guide/components/table/table-pagination.png
new file mode 100644
index 00000000..88134d8f
Binary files /dev/null and b/docs/guide/components/table/table-pagination.png differ
-- 
cgit v1.2.3