Add documentation for table filter
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I3ab86678e2cc4f9771a07026a417298d716de649
diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md
index 8398ace..3805f8a 100644
--- a/docs/guide/components/table/index.md
+++ b/docs/guide/components/table/index.md
@@ -339,6 +339,78 @@
</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.
+
+
+
+
+
+```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 0000000..b280ad9
--- /dev/null
+++ b/docs/guide/components/table/table-filter-active.png
Binary files differ
diff --git a/docs/guide/components/table/table-filter.png b/docs/guide/components/table/table-filter.png
new file mode 100644
index 0000000..7927c7b
--- /dev/null
+++ b/docs/guide/components/table/table-filter.png
Binary files differ
