From 111325b199f8cc1741958fd645522858bdca55f4 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Tue, 3 Nov 2020 14:48:08 -0800
Subject: Add documentation for table component

Adds Table documentation page under Components section with
an example of how to create a basic table.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9033fae662bd46d301edfb02d8a5c108e05017c6
---
 docs/.vuepress/config.js           |  1 +
 docs/.vuepress/enhanceApp.js       |  2 +
 docs/.vuepress/styles/palette.styl | 17 +++++++
 docs/guide/components/table.md     | 93 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 113 insertions(+)
 create mode 100644 docs/.vuepress/styles/palette.styl
 create mode 100644 docs/guide/components/table.md

(limited to 'docs')

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 61ac0a85..c650d7e6 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -48,6 +48,7 @@ module.exports = {
             "/guide/components/",
             "/guide/components/alert",
             "/guide/components/button",
+            "/guide/components/table",
             "/guide/components/toast",
           ]
           },
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
index 5c218373..6ff87759 100644
--- a/docs/.vuepress/enhanceApp.js
+++ b/docs/.vuepress/enhanceApp.js
@@ -7,6 +7,7 @@ import StatusIcon from "./components/app-imports/StatusIcon";
 import {
     AlertPlugin,
     ButtonPlugin,
+    TablePlugin,
     ToastPlugin
   } from 'bootstrap-vue';
 
@@ -14,6 +15,7 @@ import {
 export default ({ Vue }) => {
       Vue.use(AlertPlugin);
       Vue.use(ButtonPlugin);
+      Vue.use(TablePlugin);
       Vue.use(ToastPlugin);
 
       // BMC Components and Mixins
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
new file mode 100644
index 00000000..fc4f27eb
--- /dev/null
+++ b/docs/.vuepress/styles/palette.styl
@@ -0,0 +1,17 @@
+
+// VuePress Theme overrides
+// Needed for table component to render correctly.
+
+tr:nth-child(2n)
+  background-color transparent
+table
+  border-collapse collapse
+  z-index 0 !important
+  width 100%
+  display table
+th
+  border-right transparent
+  border-left transparent
+  text-align left
+td
+  border none
\ No newline at end of file
diff --git a/docs/guide/components/table.md b/docs/guide/components/table.md
new file mode 100644
index 00000000..4ed496ef
--- /dev/null
+++ b/docs/guide/components/table.md
@@ -0,0 +1,93 @@
+# Table
+
+All tables in the application are using the [BoostrapVue table component](https://bootstrap-vue.org/docs/components/table).
+
+To use the component, include the `<b-table>` tag in the template. The component is registered globally so does not need to be imported in each SFC.
+
+## Basic table
+There are a few required properties to maintain consistency across the application. The full list of options can be viewed on the [Bootstrap-vue table component's documentation page](https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-props).
+
+
+### Required properties
+
+- `items` - renders table items
+- `fields` - renders table header
+- `hover` - enables table row hover state
+- `responsive` or `stacked` - makes the table responsive (enables horizontal scrolling or stacked view) at the defined breakpoint
+- `show-empty` *(required if table data is generated dynamically)* - shows an empty message if there are no items in the table
+- `empty-text` *(required if table data is generated dynamically)* - the translated empty message
+
+<br/>
+
+<b-table
+  :fields="['Name', 'Age', 'Color']"
+  :items="[
+    {Name: 'Babe', Age: '3 years', Color: 'white, orange, grey' },
+    {Name: 'Grey Boy', Age: '4 months', Color: 'grey' }
+  ]"
+  hover
+  head-variant="light"
+  table-variant="light"
+/>
+
+<b-table
+  show-empty
+  hover
+  :fields="['Name', 'Age', 'Color']"
+  head-variant="light"
+  table-variant="light"
+  empty-text="No items available"
+/>
+
+<br/>
+
+```vue
+<template>
+  <b-table
+    hover
+    show-empty
+    responsive="md"
+    :items="items"
+    :fields="fields"
+    :empty-text="$t('global.table.emptyMessage')"
+  />
+</template>
+
+<script>
+  export default {
+    data() {
+      items: [
+        {
+          name: 'Babe',
+          age: '3 years',
+          color: 'white, orange, grey'
+        },
+        {
+          name: 'Grey Boy',
+          age: '4 months',
+          color: 'grey'
+        },
+      ],
+      fields: [
+        {
+          key: 'name',
+          label: this.$t('table.name') //translated label
+        },
+        {
+          key: 'age',
+          label: this.$t('table.age') //translated label
+        },
+        {
+          key: 'color',
+          label: this.$t('table.color') // translated label
+        }
+      ]
+    }
+  }
+</script>
+```
+
+<!-- ## Table with row actions, sort, and exapndable rows -->
+<!-- ## Table with pagination -->
+<!-- ## Table with batch actions -->
+<!-- ## Table with search and filter -->
-- 
cgit v1.2.3