diff --git a/src/components/table/table.js b/src/components/table/table.js index 57e2383a8b8..294dfb9303e 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -779,16 +779,6 @@ export default { }) }, computedItems () { - // Grab some props/data to ensure reactivity - const perPage = this.perPage - const currentPage = this.currentPage - const filter = this.filter - const sortBy = this.localSortBy - const sortDesc = this.localSortDesc - const sortCompare = this.sortCompare - const localFiltering = this.localFiltering - const localSorting = this.localSorting - const localPaging = this.localPaging let items = this.hasProvider ? this.localItems : this.items if (!items) { this.$nextTick(this._providerUpdate) @@ -797,30 +787,49 @@ export default { // Array copy for sorting, filtering, etc. items = items.slice() // Apply local filter - if (filter && localFiltering) { - if (filter instanceof Function) { - items = items.filter(filter) + this.filteredItems = items = this.filterItems(items) + // Apply local sort + items = this.sortItems(items) + // Apply local pagination + items = this.paginateItems(items) + // Update the value model with the filtered/sorted/paginated data set + this.$emit('input', items) + return items + }, + computedBusy () { + return this.busy || this.localBusy + } + }, + methods: { + keys, + filterItems (items) { + if (this.localFiltering && this.filter) { + if (this.filter instanceof Function) { + return items.filter(this.filter) + } + + let regex + if (this.filter instanceof RegExp) { + regex = this.filter } else { - let regex - if (filter instanceof RegExp) { - regex = filter - } else { - regex = new RegExp('.*' + filter + '.*', 'ig') - } - items = items.filter(item => { - const test = regex.test(recToString(item)) - regex.lastIndex = 0 - return test - }) + regex = new RegExp('.*' + this.filter + '.*', 'ig') } + + return items.filter(item => { + const test = regex.test(recToString(item)) + regex.lastIndex = 0 + return test + }) } - if (localFiltering) { - // Make a local copy of filtered items to trigger filtered event - this.filteredItems = items.slice() - } - // Apply local Sort + return items + }, + sortItems (items) { + const sortBy = this.localSortBy + const sortDesc = this.localSortDesc + const sortCompare = this.sortCompare + const localSorting = this.localSorting if (sortBy && localSorting) { - items = stableSort(items, (a, b) => { + return stableSort(items, (a, b) => { let ret = null if (typeof sortCompare === 'function') { // Call user provided sortCompare routine @@ -834,21 +843,19 @@ export default { return (ret || 0) * (sortDesc ? -1 : 1) }) } + return items + }, + paginateItems (items) { + const currentPage = this.currentPage + const perPage = this.perPage + const localPaging = this.localPaging // Apply local pagination - if (Boolean(perPage) && localPaging) { + if (!!perPage && localPaging) { // Grab the current page of data (which may be past filtered items) - items = items.slice((currentPage - 1) * perPage, currentPage * perPage) + return items.slice((currentPage - 1) * perPage, currentPage * perPage) } - // Update the value model with the filtered/sorted/paginated data set - this.$emit('input', items) return items }, - computedBusy () { - return this.busy || this.localBusy - } - }, - methods: { - keys, fieldClasses (field) { return [ field.sortable ? 'sorting' : '',