vue-tables-2
  • Dependencies & Compatability
  • Getting Started
    • Vue Version 3
  • Client Table
    • Asynchronous Loading
    • Grouping
    • Filtering Algorithm
    • Editable Cells
  • Server Table
    • Implementations
    • Custom Request Function
    • Setting Multiple Request Parameters
    • Error Message
    • Draw Counter
  • Virtual Pagination
  • Custom Template
  • Column Templates
  • Nested Data Structures
  • Selectable Rows
  • Date Columns
  • List Filters
  • Custom Filters
  • Custom Sorting
  • Multiple Sorting
  • Child Rows
  • Conditional Cell Styling
  • Columns Visibility
  • Methods
  • Properties
  • Events
  • Slots
  • Options API
Powered by GitBook
On this page

Was this helpful?

Custom Filters

PreviousList FiltersNextCustom Sorting

Last updated 4 years ago

Was this helpful?

Custom filters allow you to integrate your own filters into the plugin using Vue's events system.

Client Side Filters

A. use the customFilters option to declare your filters, following this syntax:

customFilters: [{
    name: 'alphabet',
    callback: function (row, query) {
        return row.name[0] == query;
    }
}]

B. Then emit the event when appropriate:

Using the event bus:

Event.$emit('vue-tables.filter::alphabet', query);

Event Bus:

EventBus.emit('vue-tables.filter::alphabet', query);

Using Vuex:

this.$store.commit('myTable/SET_CUSTOM_FILTER', {filter:'alphabet', value:query})

Server Side Filters

A. use the customFilters option to declare your filters, following this syntax:

customFilters: ['alphabet','age-range']

B. the same as in the client component.

C. Custom filters will be sent as request parameters. Implement the necessary logic on the server side.

Vue 3