Multiple filter in table

Hello, I’d like to request a feature of multiple filters. For example below there is a table with a search box and a predefined filter (select box).

Filtering is processed by ajax, and It will be nice to have something like

<input v-model="filter.search" />
<select v-model="filter.roleId"> ... </select>
<b-table :filter="filter" :items="itemsProvider">...</b-table>

and then get

filter: {
    search: 'john',
    roleId: 1
}

inside ctx of itemsProvider, so I could get users with both name like ‘john’ and roleId equals 1 from my api.

[alejots]

Hello!! I solved the problem with a computed method and Array.prototye.filter()

<b-table show-empty striped hover :items="invitationsFiltered">

</b-table>

computed: {
    invitationsFiltered: function () {
      var filtered = this.getInvitations.filter((el) => {
        return el.email.toLowerCase().indexOf(this.filterEmail.toLowerCase()) > -1 &&
              el.sent.toLowerCase().indexOf(this.filterSent.toLowerCase()) > -1 &&
              el.expires.toLowerCase().indexOf(this.filterExpires.toLowerCase()) > -1 &&
              el.update.toLowerCase().indexOf(this.filterUpdate.toLowerCase()) > -1 &&
              el.status.toLowerCase().indexOf(this.filterStatus.toLowerCase()) > -1
      })

      return filtered
    },
    ...mapGetters([
      'getInvitations'
    ])
  }

[adhatama]

For an alternative, I’ve got it worked by watch-ing the model filters then refresh the table. The refresh will trigger the itemsProvider

<input v-model="filters.search" />
<select v-model="filters.roleId"> ... </select>

<b-table ref="table" :items="itemsProvider">...</b-table>

data () {
    return {
         filters: {
             search: null,
             roleId: null
         }
    }
},

watch: {
    filters: {
        handler: function () {
              this.$refs.table.refresh()
        },
        deep: true
    }
},

methods: {
    itemsProvider: function (ctx, callback) {
         console.log(this.filters.search)
         console.log(this.filters.roleId)
    }
}