Vue Filters

Vue Bootstrap 5 Filters plugin

Filters are the best way to select data that meets your requirements - they affect your search results by filtrating and sorting the dataset you pass to our component.

Note: Read the API tab to find all available options and advanced customization

View full screen demo

Basic example - DOM Elements

Use the items prop to define a container with data to filter. This is required for proper component initialization.

Add data-mdb-filter-property to every item you want to be filtrable. If you want to handle your filters by inputs, make a container for them, and add data-mdb-filter-property to it.

Note: You must have at least one filtrable element for a component to work properly.

Filter: Color
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

Checkbox example

Note: If there is more than one option, the result of filtering will show items that match both of them.

Filter: Color
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

Color example

Filter: Color

...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

Size example

Filter: Size
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

Animations with DOM Elements

Add data-mdb-filter-animation attribute with animation type to filtrable elements to animate them. The full list of available animations you can find here.

Filter: Color
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

Data structure - array

Note: Your items dataset can be an array of items. We made this solution for backend needs.

Filter: Color
Filter: Sale

Spinner & Asynchronous Data example

Price:


Animations - Array of Items

Add data-mdb-filter-animation attribute with animation type to filtrable elements to animate them. The full list of available animations you can find here.

Filter: Color
Filter: Sale

Filter and sort

Filter: Color
Filter: Sale

Customization - custom filter

Pass an arrow function as the value of the filter key at the filter object to define your custom filter.

Price:

Current: 80$

Current: 120$

...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

Custom sort


Full screen example

View full screen demo

Vue Filters - API


Import


        import { MDBFilter } from "mdb-vue-filters";
      

Properties

Name Type Default Description
dataset Object {} Allows you to set specific dataset object
filters Object {} Allows you to set filtering rules
items String "" Defines items query selector
noFoundMessage String "<h3 class='text-center mt-5'>No items found</h3>" Defines message if no results
noFoundMessageElement String "div" Defines message wrapper if no results
sort Object {} Defines sorting rules
tag String "div" Defines wrapper element
template Function Defines template function

Events

Name Description
update This event fires immediately after any change. It returns an item list.

For example, to listen on file change add an event


        <MDBFilter @update="handleUpdate" />