From 3381eb0a05d9aa0c95e61b024700ae0e2f606147 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Wed, 18 Nov 2020 08:44:32 -0800
Subject: Add documentation for table filter

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I3ab86678e2cc4f9771a07026a417298d716de649
---
 docs/guide/components/table/index.md               |  74 ++++++++++++++++++++-
 .../guide/components/table/table-filter-active.png | Bin 0 -> 68324 bytes
 docs/guide/components/table/table-filter.png       | Bin 0 -> 103124 bytes
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 docs/guide/components/table/table-filter-active.png
 create mode 100644 docs/guide/components/table/table-filter.png

(limited to 'docs/guide')

diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index 8398ace6..3805f8a1 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -339,6 +339,78 @@ export default {
 </script>
 ```
 
+## Filters
+
+To add a table dropdown filter:
+1. Import the `<table-filter> `component and TableFilterMixin.
+1. Add a filters prop to the `<table-filters>` component. This prop should be an array of filter groups–each required to have a key, label, and values prop.
+
+The `label` prop value should be the translated filter group label. The `key` prop will usually match the filtered by table column key. The `values` prop should be an array of filter values that will render as a list of checkbox items in the dropdown.
+
+The component will emit a `@filter-change` event that will provide the filter group and all selected values in the group. Use the getFilteredTableData method from the TableFilterMixin to show the filtered table data.
+
+![Table filter example](./table-filter.png)
+
+![Table filter active example](./table-filter-active.png)
+
+```vue
+<template>
+  <b-container>
+    <b-row>
+      <b-col class="text-right">
+        <table-filter
+          :filters="tableFilters"
+          @filter-change="onTableFilterChange"
+        />
+      </b-col>
+    </b-row>
+    <b-table
+      hover
+      responsive="md"
+      :items="filteredItems"
+      :fields="fields"
+    />
+  </b-container>
+</template>
+<script>
+import TableFilter from '@/components/Global/TableFilter';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+
+export default {
+  components: { TableFilter },
+  mixins: [ TableFilterMixin ],
+  data() {
+    return {
+      items: [...],
+      fields: [...],
+      tableFilters: [
+        {
+          label: this.$t('table.status'),
+          key: status,
+          values: ['Open', 'Closed']
+        }
+      ],
+      activeFilters: [],
+    },
+  },
+  computed: {
+    filteredItems() {
+      return this.getFilteredTableData(this.items, this.activeFilters);
+    },
+  },
+  methods: {
+    onTableFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+    },
+  },
+}
+</script>
+```
+
+
+### Date filter
+
+To add a date filter, import the `<table-date-filter>` component. It will emit a `@change` event with the user input date values. There is a date filter method, `getFilteredTableDataByDate`, in the `TableFilterMixin`.
+
 <!-- ## Pagination -->
 <!-- ## Batch actions -->
-<!-- ## Filter -->
diff --git a/docs/guide/components/table/table-filter-active.png b/docs/guide/components/table/table-filter-active.png
new file mode 100644
index 00000000..b280ad9f
Binary files /dev/null and b/docs/guide/components/table/table-filter-active.png differ
diff --git a/docs/guide/components/table/table-filter.png b/docs/guide/components/table/table-filter.png
new file mode 100644
index 00000000..7927c7b2
Binary files /dev/null and b/docs/guide/components/table/table-filter.png differ
-- 
cgit v1.2.3