Add documentation for table search

Create table directory to organize related images in the same
directory and add updates to image path that will fix incorrect
path in final build.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I896ed5babc596306c082ca6e79aa3c0948a61227

9 files changed, 81 insertions, 6 deletions

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index fffc2590..1cf949b1 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -49,7 +49,7 @@ module.exports = {
             "/guide/components/",
             "/guide/components/alert",
             "/guide/components/buttons/",
-            "/guide/components/table",
+            "/guide/components/table/",
             "/guide/components/toast",
           ]
           },
diff --git a/docs/guide/components/table.md b/docs/guide/components/table/index.md
index 6e9e57a8..aca509c2 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table/index.md
@@ -17,8 +17,8 @@ There are a few required properties to maintain consistency across the applicati
 - `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
 
-![Basic table example](/table.png)
-![Basic empty table example](/table-empty.png)
+![Basic table example](./table.png)
+![Basic empty table example](./table-empty.png)
 
 ```vue
 <template>
@@ -74,7 +74,7 @@ To enable table sort, include `sortable: true` in the fields array for sortable
 - `no-sort-reset`
 - `sort-icon-left`
 
-![Table sort example](/table-sort.png)
+![Table sort example](./table-sort.png)
 
 
 ```vue
@@ -132,7 +132,7 @@ Use the [row-details slot](https://bootstrap-vue.org/docs/components/table#comp-
 3. Use the `#cell` slot to target the expandable row column and add the button with accessible markup and click handler
 4. Use the `#row-details` slot to format expanded row content
 
-![Table row expand example](/table-expand-row.png)
+![Table row expand example](./table-expand-row.png)
 
 ```vue
 <template>
@@ -183,8 +183,83 @@ export default {
 </script>
 ```
 
+## Search
+
+The table is leveraging [BootstrapVue table filtering](https://bootstrap-vue.org/docs/components/table#filtering) for search. Add the [@filtered](https://bootstrap-vue.org/docs/components/table#filter-events) event listener onto the `<b-table>` component. The event callback should track the total filtered items count.
+
+Import the `<search>` and `<table-cell-count>` components and include them in the template above the `<b-table>` component.
+
+Include the [SearchFilterMixin](https://github.com/openbmc/webui-vue/blob/master/src/components/Mixins/SearchFilterMixin.js). Add the `@change-search` and `@clear-search` event listeners on the `<search>` component and use the corresponding `onChangeSearchInput` and `onClearSearchInput` methods as the event callbacks. The table should also include the dynamic `:filter` prop with `searchFilter` set as the value.
+
+The `<table-cell-count>` component requires two properties, total table item count and total filtered items count.
+
+Add the `:empty-filtered-text` prop to the table to show the translated message if there are no search matches.
+
+![Table search example](./table-search.png)
+
+![Table search active example](./table-search-active.png)
+
+![Table search empty example](./table-search-empty.png)
+
+```vue
+<template>
+  <b-container>
+  <b-row>
+    <b-col>
+      <search
+        @changeSearch="onChangeSearchInput"
+        @clearSearch="onClearSearchInput"
+      />
+    </b-col>
+    <b-col>
+      <table-cell-count
+        :filtered-items-count="filteredItemsCount"
+        :total-number-of-cells="items.length"
+      />
+    </b-col>
+  </b-row>
+  <b-table
+    hover
+    responsive="md"
+    :items="items"
+    :fields="fields"
+    :filter="searchFilter"
+    :empty-filtered-text="$t('global.table.emptySearchMessage')"
+    @filtered="onFiltered"
+  />
+  </b-container>
+</template>
+<script>
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import SearchFilterMixin, { searchFilter } from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  components: { Search, TableCellCount },
+  mixins: [ SearchFilterMixin ],
+  data() {
+    return {
+      items: [...],
+      fields: [...],
+      searchFilter,
+      filteredItems: [],
+    }
+  },
+  computed: {
+    filteredItemsCount() {
+      return this.filteredItems.length;
+    },
+  },
+  methods: {
+    onFiltered(items) {
+      this.filteredItems = items;
+    },
+  },
+}
+</script>
+```
+
 <!-- ## Pagination -->
 <!-- ## Row actions -->
 <!-- ## Batch actions -->
-<!-- ## Search -->
 <!-- ## Filter -->
diff --git a/docs/.vuepress/public/table-empty.png b/docs/guide/components/table/table-empty.png
index 90ecfc14..90ecfc14 100644
--- a/docs/.vuepress/public/table-empty.png
+++ b/docs/guide/components/table/table-empty.png
diff --git a/docs/.vuepress/public/table-expand-row.png b/docs/guide/components/table/table-expand-row.png
index b8ee9c96..b8ee9c96 100644
--- a/docs/.vuepress/public/table-expand-row.png
+++ b/docs/guide/components/table/table-expand-row.png
diff --git a/docs/guide/components/table/table-search-active.png b/docs/guide/components/table/table-search-active.png
new file mode 100644
index 00000000..4fe5c44a
--- /dev/null
+++ b/docs/guide/components/table/table-search-active.png
diff --git a/docs/guide/components/table/table-search-empty.png b/docs/guide/components/table/table-search-empty.png
new file mode 100644
index 00000000..5fee6100
--- /dev/null
+++ b/docs/guide/components/table/table-search-empty.png
diff --git a/docs/guide/components/table/table-search.png b/docs/guide/components/table/table-search.png
new file mode 100644
index 00000000..8621d17d
--- /dev/null
+++ b/docs/guide/components/table/table-search.png
diff --git a/docs/.vuepress/public/table-sort.png b/docs/guide/components/table/table-sort.png
index af6d831e..af6d831e 100644
--- a/docs/.vuepress/public/table-sort.png
+++ b/docs/guide/components/table/table-sort.png
diff --git a/docs/.vuepress/public/table.png b/docs/guide/components/table/table.png
index 0160013e..0160013e 100644
--- a/docs/.vuepress/public/table.png
+++ b/docs/guide/components/table/table.png