diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index fffc259..1cf949b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -49,7 +49,7 @@
             "/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
similarity index 65%
rename from docs/guide/components/table.md
rename to docs/guide/components/table/index.md
index 6e9e57a..aca509c 100644
--- a/docs/guide/components/table.md
+++ b/docs/guide/components/table/index.md
@@ -17,8 +17,8 @@
 - `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 @@
 - `no-sort-reset`
 - `sort-icon-left`
 
-![Table sort example](/table-sort.png)
+![Table sort example](./table-sort.png)
 
 
 ```vue
@@ -132,7 +132,7 @@
 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 @@
 </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
similarity index 100%
rename from docs/.vuepress/public/table-empty.png
rename to docs/guide/components/table/table-empty.png
Binary files differ
diff --git a/docs/.vuepress/public/table-expand-row.png b/docs/guide/components/table/table-expand-row.png
similarity index 100%
rename from docs/.vuepress/public/table-expand-row.png
rename to docs/guide/components/table/table-expand-row.png
Binary files differ
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 0000000..4fe5c44
--- /dev/null
+++ b/docs/guide/components/table/table-search-active.png
Binary files differ
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 0000000..5fee610
--- /dev/null
+++ b/docs/guide/components/table/table-search-empty.png
Binary files differ
diff --git a/docs/guide/components/table/table-search.png b/docs/guide/components/table/table-search.png
new file mode 100644
index 0000000..8621d17
--- /dev/null
+++ b/docs/guide/components/table/table-search.png
Binary files differ
diff --git a/docs/.vuepress/public/table-sort.png b/docs/guide/components/table/table-sort.png
similarity index 100%
rename from docs/.vuepress/public/table-sort.png
rename to docs/guide/components/table/table-sort.png
Binary files differ
diff --git a/docs/.vuepress/public/table.png b/docs/guide/components/table/table.png
similarity index 100%
rename from docs/.vuepress/public/table.png
rename to docs/guide/components/table/table.png
Binary files differ