Filters

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 data-mdb-items attribute 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 .animation and .animation-name classes 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 data-mdb-items set can be an array of items. We made this solution for backend needs. Just set your dataset using a constructor.

Filter: Color
Filter: Sale

Spinner & Asynchronous Data example

Price:


Animations - Array of Items

Add .animation and .animation-name classes to rendered 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

Pass an arrow function (with two parameters - previous and second comparing items) as the third parameter at the sort function to define your custom sort rule.


Full screen example

View full screen demo

Filters - API


Usage

Via data attributes


      <div id="myFilters" data-mdb-auto-filter="true" data-mdb-items=".filters-item">
        <div id="inputsGroup">
          <div data-mdb-filter="color">
            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="red" />
              <label class="form-check-label" for="inlineCheckbox1">Red</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="blue" />
              <label class="form-check-label" for="inlineCheckbox2">Blue</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="black" />
              <label class="form-check-label" for="inlineCheckbox3">Black</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="gray" />
              <label class="form-check-label" for="inlineCheckbox4">Gray</label>
            </div>
          </div>

          <div data-mdb-filter="sale">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="yes" />
              <label class="form-check-label" for="inlineCheckbox3">No</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox6" value="no" />
              <label class="form-check-label" for="inlineCheckbox4">No</label>
            </div>
          </div>
        </div>

        <div class="filters-item" data-mdb-color="blue" data-mdb-sale="no">
          <span>Color: blue, Sale: No</span>
        </div>
        <div class="filters-item" data-mdb-color="red" data-mdb-sale="yes">
          <span>Color: red, Sale: No</span>
        </div>
        <div class="filters-item" data-mdb-color="red" data-mdb-sale="no">
          <span>Color: red, Sale: yes</span>
        </div>
        <div class="filters-item" data-mdb-color="yellow" data-mdb-sale="yes">
          <span>Color: yellow, Sale: yes</span>
        </div>
      </div>
    

Via JavaScript


      const filtersInstance = new Filters(document.getElementById('myFilters'), options)
    

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.


      $('.example-class').filters(options);
    

Options

Name Type Default Description
data-mdb-items String - Sets a selector for filtering items.
data-mdb-property String - Defines a filter value for an item. Swap property with a filter name that your items should have.
data-mdb-filter String - Sets a filter handler to the input group that it is applied to.
data-mdb-auto-filter String false Applied to an instance enables auto filtering by inputs.

Methods

Name Description Example
dispose Destroys an Filters instance filtersInstance.dispose()
filter Filters an instance dataset filtersInstance.filter(options)
getFilters Returns all available filters filtersInstance.getFilters()
getActiveFilters Returns all active filters filtersInstance.getActiveFilters()
getInstance Static method which allows you to get the filters instance associated to a DOM element. Filters.getInstance(filtersElement)
clear Clears all filters filtersInstance.clear()
sort Sorts an instance dataset filtersInstance.sort(category, order, additionalCustomSort)

      const filtersElement = document.getElementById('filtersElement');
      const filtersInstance = new Filters(filtersElement);

      filtersInstance.filter({
        color: ['red', 'blue'],
        sale: ['no']
      });
    

Events

Name Description
update.mdb.filters This event fires immediately when the instance filters or sort its dataset.

      const filtersElement = document.getElementById('filtersElement');

      filtersElement.addEventListener('update.mdb.filters', function (e) {
        // do something...
      });
    

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


        import Filters from 'mdb-filters';