diff --git a/src/components/table/README.md b/src/components/table/README.md index ef1cd9621fd..3ae1a6145b1 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -3000,7 +3000,7 @@ your app handles the various inconsistencies with events. :current-page="currentPage" :per-page="perPage" :filter="filter" - :filterIncludedFields="filterOn" + :filter-included-fields="filterOn" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" diff --git a/src/components/table/helpers/mixin-filtering.js b/src/components/table/helpers/mixin-filtering.js index deb4646bec6..2c4545533bb 100644 --- a/src/components/table/helpers/mixin-filtering.js +++ b/src/components/table/helpers/mixin-filtering.js @@ -49,10 +49,10 @@ export default { }, computed: { computedFilterIgnored() { - return this.filterIgnoredFields ? concat(this.filterIgnoredFields).filter(identity) : null + return concat(this.filterIgnoredFields || []).filter(identity) }, computedFilterIncluded() { - return this.filterIncludedFields ? concat(this.filterIncludedFields).filter(identity) : null + return concat(this.filterIncludedFields || []).filter(identity) }, computedFilterDebounce() { const ms = toInteger(this.filterDebounce, 0) diff --git a/src/components/table/helpers/sanitize-row.js b/src/components/table/helpers/sanitize-row.js index 2509c2765ac..dc42253088d 100644 --- a/src/components/table/helpers/sanitize-row.js +++ b/src/components/table/helpers/sanitize-row.js @@ -31,8 +31,8 @@ const sanitizeRow = (row, ignoreFields, includeFields, fieldsObj = {}) => { const allowedKeys = keys(formattedRow).filter( key => !IGNORED_FIELD_KEYS[key] && - !(isArray(ignoreFields) && arrayIncludes(ignoreFields, key)) && - !(isArray(includeFields) && !arrayIncludes(includeFields, key)) + !(isArray(ignoreFields) && ignoreFields.length > 0 && arrayIncludes(ignoreFields, key)) && + !(isArray(includeFields) && includeFields.length > 0 && !arrayIncludes(includeFields, key)) ) return pick(formattedRow, allowedKeys) diff --git a/src/components/table/table-filtering.spec.js b/src/components/table/table-filtering.spec.js index b125fb9cb94..023ac6af24a 100644 --- a/src/components/table/table-filtering.spec.js +++ b/src/components/table/table-filtering.spec.js @@ -207,6 +207,63 @@ describe('table > filtering', () => { wrapper.destroy() }) + it('`filter-ignored-fields` prop works', async () => { + const wrapper = mount(BTable, { + propsData: { + fields: testFields, + items: testItems, + filter: '', + filterIgnoredFields: [] + } + }) + + expect(wrapper).toBeDefined() + await waitNT(wrapper.vm) + + expect(wrapper.findAll('tbody > tr').length).toBe(3) + + // Search for a value in "a" column + await wrapper.setProps({ filter: '3' }) + await waitNT(wrapper.vm) + expect(wrapper.findAll('tbody > tr').length).toBe(1) + + // Ignore "a" column from filtering + await wrapper.setProps({ filterIgnoredFields: ['a'] }) + await waitNT(wrapper.vm) + expect(wrapper.findAll('tbody > tr').length).toBe(0) + + wrapper.destroy() + }) + + it('`filter-included-fields` prop works', async () => { + const wrapper = mount(BTable, { + propsData: { + fields: testFields, + // Add a extra item with a duplicated value in another field + items: [...testItems, { a: 4, b: 'y', c: 'a' }], + filter: '', + filterIncludedFields: [] + } + }) + + expect(wrapper).toBeDefined() + await waitNT(wrapper.vm) + + expect(wrapper.findAll('tbody > tr').length).toBe(4) + + // Search for "a" + await wrapper.setProps({ filter: 'a' }) + await waitNT(wrapper.vm) + expect(wrapper.findAll('tbody > tr').length).toBe(2) + + // Only include "a" and "b" fields + await wrapper.setProps({ filterIncludedFields: ['a', 'b'] }) + await waitNT(wrapper.vm) + expect(wrapper.findAll('tbody > tr').length).toBe(1) + + wrapper.destroy() + }) + it('should filter for formatted values for keys which are not present in row', async () => { const wrapper = mount(BTable, { propsData: {