v
v
vue-tables-2
Search…
Dependencies & Compatability
Getting Started
Client Table
Server Table
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
Custom Filters
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:
1
customFilters
:
[
{
2
name
:
'alphabet'
,
3
callback
:
function
(
row
,
query
)
{
4
return
row
.
name
[
0
]
==
query
;
5
}
6
}
]
Copied!
B. Then emit the event when appropriate:
Using the event bus:
1
Event
.
$emit
(
'vue-tables.filter::alphabet'
,
query
)
;
Copied!
Vue 3
Event Bus:
1
EventBus
.
emit
(
'vue-tables.filter::alphabet'
,
query
)
;
Copied!
Using Vuex:
1
this
.
$store
.
commit
(
'myTable/SET_CUSTOM_FILTER'
,
{
filter
:
'alphabet'
,
value
:
query
}
)
Copied!
Server Side Filters
A. use the customFilters option to declare your filters, following this syntax:
1
customFilters
:
[
'alphabet'
,
'age-range'
]
Copied!
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.
Previous
List Filters
Next
Custom Sorting
Last modified
10mo ago
Copy link