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