Datatable programmatically filter

  • 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!

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

  • @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.


  • @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

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

Log in to reply