Datatable programmatically filter

[Lucien]

Hi:)

I searched for this, but could not find anything quite related. I was wondering if there is a way to filter the datatable programmatically. This would be great as I can then save the search and when the user returns to the page I can fill it back in for them and filter. Also preemptively searching for a user might be cool in some cases.

Thanks in advance!

[leopiccionia]

I’d suggest you to try binding data prop to a computed property.

[Lucien]

@leopiccionia said in Datatable programmatically filter:

I’d suggest you to try binding data prop to a computed property.

Hi @leopiccionia, thanks for the tip. However, I would like to show the user was is being searched, or allow them to modify it. So it would be nice if the search input could be populated. Ultimately, I want to save their search and resume it later.

Thanks

[benoitranque]

@Lucien and what stops you using a computed property for this?

data () {
  return {
    searchTerm: '', // string search term
    rawData: [] // data from server goes here
  }
},
computed: {
  displayData () {
    return this.rawData.filter((item, index) => {
      return item.indexOf(this.searchTerm)
    })
  }
}

You could use this for any kind of parameter.
If you mean you want to use the native q-datatable search bar, you can access the content of it using this:

<q-data-table ref="myTable">
....
// in vue model
this.$refs.myTable.filtering.terms

[Lucien]

Hi @benoitranque. Thanks for the help, I was referring the second part exactly. You deserve a medal:)