[Vuejs]-Vuetify table with column filter will not apply table filter to that column

by

1👍

This is the piece of code in Vuetify which performs the filtration:

  return items.filter(item => {
    // Headers with custom filters are evaluated whether or not a search term has been provided.
    // We need to match every filter to be included in the results.
    const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter))

    // Headers without custom filters are only filtered by the `search` property if it is defined.
    // We only need a single column to match the search term to be included in the results.
    const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter))

    return matchesColumnFilters && matchesSearchTerm
  })

As you can see – the result is a logical AND from both type of columns (those with custom filter and those without a filter).
customFilter will be your filterOnlyCapsText function while defaultFilter is implemented like this

export function defaultFilter (value, search, item) {
  return value != null &&
    search != null &&
    typeof value !== 'boolean' &&
    value.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1
}

A non-ideal solution seems to be to dynamically remove (undefine) the column filter from the column definition when the search term is non-empty.
Of course this will completely defeat the Calories filter – but at least it will obey the Search term.

A more complete solution would be to use your own filtration instead of the VDataTable filtration.

👤IVO GELOV

Leave a comment