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
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
-
-
+
+
```vue
<template>
@@ -74,7 +74,7 @@
- `no-sort-reset`
- `sort-icon-left`
-
+
```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
-
+
```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.
+
+
+
+
+
+
+
+```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
