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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

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
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="basic-example-filters"
  data-mdb-items=".basic-example-item"
  data-mdb-auto-filter="true"
>
  <div class="col-md-6" data-mdb-filter="color">
    <span class="fa-lg">Filter: Color</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions"
        id="inlineRadio1"
        value="black"
      />
      <label class="form-check-label" for="inlineRadio1">Black</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions"
        id="inlineRadio2"
        value="red"
      />
      <label class="form-check-label" for="inlineRadio2">Red</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions"
        id="inlineRadio3"
        value="blue"
      />
      <label class="form-check-label" for="inlineRadio3">Blue</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions"
        id="inlineRadio4"
        value="gray"
      />
      <label class="form-check-label" for="inlineRadio4">Gray</label>
    </div>
  </div>

  <div class="col-md-6" data-mdb-filter="sale">
    <span class="fa-lg mb-5">Filter: Sale</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions2"
        id="inlineRadio5"
        value="yes"
      />
      <label class="form-check-label" for="inlineRadio5">Yes</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions2"
        id="inlineRadio6"
        value="no"
      />
      <label class="form-check-label" for="inlineRadio6">No</label>
    </div>

    <button type="button" class="btn btn-primary mt-3" id="resetButton" data-mdb-ripple-init>
      Clear all filters
    </button>
  </div>
</div>

<div class="row text-center" id="basic-example-data">
  <div
    class="col-md-4 mt-3 basic-example-item"
    data-mdb-color="black"
    data-mdb-sale="no"
    data-mdb-price="100"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 basic-example-item"
    data-mdb-sale="yes"
    data-mdb-color="gray"
    data-mdb-price="80"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />

      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 basic-example-item"
    data-mdb-color="blue"
    data-mdb-sale="no"
    data-mdb-price="90"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="Blue Jeans Jacket"
      />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">90$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 basic-example-item"
    data-mdb-color="red"
    data-mdb-sale="yes"
    data-mdb-price="120"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="Red Hoodie"
      />

      <div class="card-body">
        <h5 class="card-title">Red Hoodie</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">150$</span>
          <span class="fw-bold fa-lg">120$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 basic-example-item"
    data-mdb-color="black"
    data-mdb-sale="no"
    data-mdb-price="100"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 basic-example-item"
    data-mdb-color="gray"
    data-mdb-sale="yes"
    data-mdb-price="80"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />

      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
</div>
const basicExampleFilters = document.getElementById('basic-example-filters');
const resetButton = document.getElementById('resetButton');

const filtersInstance = new Filters(basicExampleFilters);

resetButton.addEventListener('click', () => {
  filtersInstance.clear();
});

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
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="checkbox-example-filters"
  data-mdb-items=".checkbox-example-item"
  data-mdb-auto-filter="true"
>
  <div class="col-md-6" data-mdb-filter="color">
    <span class="fa-lg mb-5">Filter: Color</span>

    <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 class="col-md-6" data-mdb-filter="sale">
    <span class="fa-lg mb-5">Filter: Sale</span>

    <div class="form-check mt-3">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="yes" />
      <label class="form-check-label" for="inlineCheckbox5">Yes</label>
    </div>

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

<div class="row text-center">
  <div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 checkbox-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />
      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="Blue Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">
          90$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="Red Hoodie"
      />
      <div class="card-body">
        <h5 class="card-title">Red Hoodie</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">150$</span>
          <span class="fw-bold fa-lg">120$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />
      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
</div>
const checkboxExampleFilters = document.getElementById('checkbox-example-filters');
const checkboxInstance = new Filters(checkboxExampleFilters)

Color example

Filter: Color

Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="color-example-filters"
  data-mdb-items=".color-example-item"
  data-mdb-auto-filter="true"
>
  <div class="col-md-12 text-center mb-3" data-mdb-filter="color">
    <p class="fa-lg mt-2 mb-4">Filter: Color</p>

    <div class="form-check form-check-inline">
      <input class="btn-check" type="radio" name="colorRadio" id="colorRadio1" value="red" />
      <label class="btn bg-danger btn-rounded p-4" for="colorRadio1"></label>
    </div>

    <div class="form-check form-check-inline">
      <input class="btn-check" type="radio" name="colorRadio" id="colorRadio2" value="blue" />
      <label class="btn bg-primary btn-rounded p-4" for="colorRadio2"></label>
    </div>

    <div class="form-check form-check-inline">
      <input class="btn-check" type="radio" name="colorRadio" id="colorRadio3" value="black" />
      <label class="btn bg-dark text-white btn-rounded p-4" for="colorRadio3"></label>
    </div>

    <div class="form-check form-check-inline">
      <input class="btn-check" type="radio" name="colorRadio" id="colorRadio4" value="gray" />
      <label class="btn btn-rounded p-4" for="colorRadio4"
        style="background-color: #BDBDBD;"></label>
    </div>
  </div>
  <div class="col-md-12 text-center my-3">
    <button type="button" class="btn btn-primary" id="resetButton2" data-mdb-ripple-init>
      Clear all filters
    </button>
  </div>
</div>

<div class="row text-center">
  <div class="col-md-4 mt-3 color-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 color-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />
      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 color-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="Blue Jeans Jacket"
      />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">
          90$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 color-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="Red Hoodie"
      />
      <div class="card-body">
        <h5 class="card-title">Red Hoodie</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">150$</span>
          <span class="fw-bold fa-lg">120$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 color-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 color-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />
      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
</div>
const secondResetButton = document.getElementById('resetButton2');
const colorExampleFilters = document.getElementById('color-example-filters');
const colorExampleInstance = new Filters(colorExampleFilters);

secondResetButton.addEventListener('click', () => {
  colorExampleInstance.clear();
});

Size example

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

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="size-filters"
  data-mdb-items=".size-item"
  data-mdb-auto-filter="true"
>
  <div class="col-md-6" data-mdb-filter="size">
    <span class="fa-lg mb-5">Filter: Size</span>
    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox1"
        value="36"
      />
      <label class="form-check-label" for="inlineCheckbox1">36</label>
    </div>
    <div class="form-check">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox2"
        value="38"
      />
      <label class="form-check-label" for="inlineCheckbox2">38</label>
    </div>
    <div class="form-check">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox3"
        value="40"
      />
      <label class="form-check-label" for="inlineCheckbox3">40</label>
    </div>
    <div class="form-check">
      <input
        class="form-check-input"
        type="checkbox"
        id="inlineCheckbox4"
        value="42"
      />
      <label class="form-check-label" for="inlineCheckbox4">42</label>
    </div>
  </div>
  <div class="col-md-6" data-mdb-filter="sale">
    <span class="fa-lg mb-5">Filter: Sale</span>
    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions2"
        id="inlineRadio5"
        value="yes"
      />
      <label class="form-check-label" for="inlineRadio5">Yes</label>
    </div>
    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="inlineRadioOptions2"
        id="inlineRadio6"
        value="no"
      />
      <label class="form-check-label" for="inlineRadio6">No</label>
    </div>
    <button type="button" class="btn btn-primary mt-3" id="resetButtonSize" data-mdb-ripple-init>
      Clear all filters
    </button>
  </div>
</div>
<div class="row text-center" id="size-data">
  <div
    class="col-md-4 mt-3 size-item"
    data-mdb-size="[36, 38, 40, 42]"
    data-mdb-sale="no"
    data-mdb-price="100"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 size-item"
    data-mdb-sale="yes"
    data-mdb-size="[40, 42]"
    data-mdb-price="80"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />
      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 size-item"
    data-mdb-size="[38]"
    data-mdb-sale="no"
    data-mdb-price="90"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="Blue Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">90$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 size-item"
    data-mdb-size="[36]"
    data-mdb-sale="yes"
    data-mdb-price="120"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="Red Hoodie"
      />
      <div class="card-body">
        <h5 class="card-title">Red Hoodie</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">150$</span>
          <span class="fw-bold fa-lg">120$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 size-item"
    data-mdb-size="[36, 40, 42]"
    data-mdb-sale="no"
    data-mdb-price="100"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 size-item"
    data-mdb-size="[36, 38, 40]"
    data-mdb-sale="yes"
    data-mdb-price="80"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />
      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
</div>
const sizeExampleFilters = document.getElementById('size-filters');
const resetButton = document.getElementById('resetButtonSize');
const filtersInstance = new Filters(sizeExampleFilters);

resetButton.addEventListener('click', () => {
  filtersInstance.clear();
});

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
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="animation-filters"
  data-mdb-items=".animation-dom-item"
  data-mdb-auto-filter="true"
>
  <div class="col-md-6" data-mdb-filter="color">
    <span class="fa-lg">Filter: Color</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="animationRadio"
        id="animationRadio1"
        value="black"
      />
      <label class="form-check-label" for="animationRadio1">Black</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationRadio"
        id="animationRadio2"
        value="red"
      />
      <label class="form-check-label" for="animationRadio2">Red</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationRadio"
        id="animationRadio3"
        value="blue"
      />
      <label class="form-check-label" for="animationRadio3">Blue</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationRadio"
        id="animationRadio4"
        value="gray"
      />
      <label class="form-check-label" for="animationRadio4">Gray</label>
    </div>
  </div>

  <div class="col-md-6" data-mdb-filter="sale">
    <span class="fa-lg mb-5">Filter: Sale</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="animationRadio2"
        id="animationRadio5"
        value="yes"
      />
      <label class="form-check-label" for="animationRadio5">Yes</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationRadio2"
        id="animationRadio6"
        value="no"
      />
      <label class="form-check-label" for="animationRadio6">No</label>
    </div>

    <button type="button" class="btn btn-primary mt-3" id="animationResetButton" data-mdb-ripple-init>
      Clear all filters
    </button>
  </div>
</div>

<div class="row text-center" id="animation-filters-data">
  <div
    class="col-md-4 mt-3 animation-dom-item animation fade-in"
    data-mdb-color="black"
    data-mdb-sale="no"
    data-mdb-price="100"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 animation-dom-item animation fade-in"
    data-mdb-sale="yes"
    data-mdb-color="gray"
    data-mdb-price="80"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />

      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 animation-dom-item animation fade-in"
    data-mdb-color="blue"
    data-mdb-sale="no"
    data-mdb-price="90"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="Blue Jeans Jacket"
      />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">90$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 animation-dom-item animation fade-in"
    data-mdb-color="red"
    data-mdb-sale="yes"
    data-mdb-price="120"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="Red Hoodie"
      />

      <div class="card-body">
        <h5 class="card-title">Red Hoodie</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">150$</span>
          <span class="fw-bold fa-lg">120$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 animation-dom-item animation fade-in"
    data-mdb-color="black"
    data-mdb-sale="no"
    data-mdb-price="100"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div
    class="col-md-4 mt-3 animation-dom-item animation fade-in"
    data-mdb-color="gray"
    data-mdb-sale="yes"
    data-mdb-price="80"
  >
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />

      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
</div>
const animationFilters = document.getElementById('animation-filters');
const resetButton = document.getElementById('animationResetButton');
const animationFiltersInstance = new Filters(animationFilters);

resetButton.addEventListener('click', () => {
  animationFiltersInstance.clear();
});

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
...
Black Jeans Jacket

100$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

80$

Buy now
...
Gray Jumper

80$

Buy now
...
Red Hoodie

120$

Buy now
...
Blue Jeans Jacket

90$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="array-example-filters"
  data-mdb-auto-filter="true"
>
  <div class="col-md-6" data-mdb-filter="color">
    <span class="fa-lg">Filter: Color</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="arrayRadioOptions"
        id="arrayRadio1"
        value="black"
      />
      <label class="form-check-label" for="arrayRadio1">Black</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="arrayRadioOptions"
        id="arrayRadio2"
        value="red"
      />
      <label class="form-check-label" for="arrayRadio2">Red</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="arrayRadioOptions"
        id="arrayRadio3"
        value="blue"
      />
      <label class="form-check-label" for="arrayRadio3">Blue</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="arrayRadioOptions"
        id="arrayRadio4"
        value="gray"
      />
      <label class="form-check-label" for="arrayRadio4">Gray</label>
    </div>
  </div>

  <div class="col-md-6" data-mdb-filter="sale">
    <span class="fa-lg mb-5">Filter: Sale</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="arrayRadioOptions2"
        id="arrayRadio5"
        value="yes"
      />
      <label class="form-check-label" for="arrayRadio5">Yes</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="arrayRadioOptions2"
        id="arrayRadio6"
        value="no"
      />
      <label class="form-check-label" for="arrayRadio6">No</label>
    </div>

    <button type="button" class="btn btn-primary mt-3" id="arrayReset" data-mdb-ripple-init>
      Clear all filters
    </button>
  </div>
</div>
<div class="row text-center" id="array-example-data">

</div>
const arrayExampleFilters = document.getElementById('array-example-filters');
const arrayExampleData = document.getElementById('array-example-data');
const arrayReset = document.getElementById('arrayReset');

const dataset = [
  {
    id: 1,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 2,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 3,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 4,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 5,
    color: 'red',
    price: 120,
    sale: 'yes',
    product: 'Red Hoodie',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    id: 6,
    color: 'blue',
    price: 90,
    sale: 'no',
    product: 'Blue Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
];

const arrayInstance = new Filters(arrayExampleFilters, {
  items: dataset,
});

const renderItems = (items) => {
  const elements = items.map((item) => {
    const template = `
      <div class="col-md-4 mt-3">
        <div class="card shadow-2">
          <img src="${item.img}"
            class="card-img-top" alt="..." />

          <div class="card-body">
            <h5 class="card-title">${item.product}</h5>
            <p class="card-text">
              ${item.price}$
            </p>
            <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
          </div>
        </div>
      </div>
    `;
    return template;
  });

  arrayExampleData.innerHTML = elements.join('\n');
};

renderItems(dataset);

arrayExampleFilters.addEventListener('update.mdb.filters', (e) => {
  renderItems(e.items);
});

arrayReset.addEventListener('click', () => {
  arrayInstance.clear();
});

Spinner & Asynchronous Data example

Price:

...
Fantasy T-shirt

12.99$

Buy now
...
Fantasy T-shirt

12.99$

Buy now
...
Fantasy T-shirt

40.99$

Buy now
...
Denim Jacket

40.99$

Buy now
...
Ripped jeans

20.99$

Buy now
...
Boyfriend jeans

20.99$

Buy now
...
Ripped sweatshirt

29.99$

Buy now
...
Longsleeve

120.99$

Buy now
...
Stripped sweatshirt

32.99$

Buy now
...
Red chinos

62.99$

Buy now
...
Camel coat

62.99$

Buy now
...
Blue jeans

42.99$

Buy now
...
Orange T-shirt

12.99$

Buy now
...
Ballerina skirt

12.99$

Buy now
Edit in sandbox 
<div class="row justify-content-center mb-5" id="spinner-example-filters">
  <p class="text-center fa-lg fw-bold">Price:</p>

  <div class="col-md-3 mt-3 text-center">
    <div class="form-outline" data-mdb-input-init>
      <input type="number" id="typeNumber" class="form-control" value="0" />
      <label class="form-label" for="typeNumber">Minimum</label>
    </div>
  </div>

  <div class="col-md-3 mt-3 text-center">
    <div class="form-outline" data-mdb-input-init>
      <input
        type="number"
        id="typeNumber2"
        class="form-control"
        value="200"
      />
      <label class="form-label" for="typeNumber2">Maximum</label>
    </div>
  </div>
</div>

<div
  class="row text-center mt-3"
  id="spinner-example-data"
  style="max-height: 800px; overflow-y: scroll"
></div>

<div class="row">
  <div class="col-md-12 mt-3">
    <div
      class="spinner-grow text-primary mx-auto my-5"
      id="spinner"
      role="status"
      style="display: none"
    >
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div>
const spinnerExampleFilters = document.getElementById('spinner-example-filters');
const spinner = document.getElementById('spinner');
const spinnerData = document.getElementById('spinner-example-data');
const spinnerInput = document.getElementById('typeNumber');
const secondSpinnerInput = document.getElementById('typeNumber2');

const getItems = () => {
  spinner.style.display = 'block';

  // A user should replace 'YOUR_API' with API that returns a JSON like one in the 'products.json' bookmark
  return fetch('YOUR_API').then((data) =>
    data.json()
  );
};

const renderItems = (items) => {
  spinner.style.display = 'none';

  const elements = items.map((item) => {
    const template = `
      <div class="col-md-4 mt-3">
        <div class="card shadow-2">
          <img src="${item.image}"
            class="card-img-top" alt="..." />

          <div class="card-body">
            <h5 class="card-title">${item.name}</h5>
            <p class="card-text">
              ${item.price}$
            </p>
            <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
          </div>
        </div>
      </div>
    `;
    return template;
  });

  spinnerData.innerHTML = elements.join('\n');
};

getItems().then((items) => {
  const asyncInstance = new Filters(spinnerExampleFilters, {
    items,
  });

  renderItems(items);
});

spinnerExampleFilters.addEventListener('update.mdb.filters', (e) => {
  spinner.style.display = 'block';

  renderItems(e.items);
});

spinnerInput.addEventListener('change', () => {
  const minVal = spinnerInput.value;
  const maxVal = secondSpinnerInput.value;

  const asyncInstance = Filters.getInstance(spinnerExampleFilters);

  asyncInstance.filter({
    price: (price) => {
      return price >= minVal && price <= maxVal;
    },
  });
});

secondSpinnerInput.addEventListener('change', () => {
  const minVal = spinnerInput.value;
  const maxVal = secondSpinnerInput.value;

  const asyncInstance = Filters.getInstance(spinnerExampleFilters);

  asyncInstance.filter({
    price: (price) => {
      return price >= minVal && price <= maxVal;
    },
  });
});
[
  {
    "id": 1,
    "category": "shirts",
    "name": "Fantasy T-shirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "40"],
    "condition": "new",
    "color": "blue",
    "price": 12.99,
    "keywords": ["t-shirt", "sweatshitrt"],
    "discount": 0,
    "gender": "male"
  },
  {
    "id": 2,
    "category": "shirts",
    "name": "Fantasy T-shirt",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "40", "44"],
    "condition": "new",
    "color": "red",
    "price": 12.99,
    "discount": 0,
    "gender": "male"
  },
  {
    "id": 3,
    "category": "shirts",
    "name": "Fantasy T-shirt",
    "rating": 3,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36"],
    "condition": "new",
    "color": "grey",
    "price": 40.99,
    "discount": 10,
    "gender": "male"
  },
  {
    "id": 4,
    "category": "jackets",
    "name": "Denim Jacket",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "condition": "new",
    "color": "grey",
    "price": 40.99,
    "discount": 0,
    "gender": "unisex"
  },
  {
    "id": 5,
    "category": "jeans",
    "name": "Ripped jeans",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/11.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "38", "40"],
    "condition": "renewed",
    "color": "blue",
    "price": 20.99,
    "discount": 5,
    "gender": "female"
  },
  {
    "id": 6,
    "category": "jeans",
    "name": "Boyfriend jeans",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/10.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": false,
    "size": ["34", "36", "38", "40"],
    "condition": "used",
    "color": "blue",
    "price": 20.99,
    "discount": 5,
    "gender": "female"
  },
  {
    "id": 7,
    "category": "shirts",
    "name": "Ripped sweatshirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/7.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "38", "40"],
    "condition": "collectible",
    "color": "white",
    "price": 29.99,
    "discount": 5,
    "gender": "female"
  },
  {
    "id": 8,
    "category": "shirts",
    "name": "Longsleeve",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/8.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40"],
    "condition": "collectible",
    "color": "black",
    "price": 120.99,
    "discount": 0,
    "gender": "male"
  },
  {
    "id": 8,
    "category": "shirts",
    "name": "Stripped sweatshirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/6.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "white",
    "price": 32.99,
    "discount": 10,
    "gender": "female"
  },
  {
    "id": 9,
    "category": "trousers",
    "name": "Red chinos",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/5.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "red",
    "price": 62.99,
    "discount": 10,
    "gender": "female"
  },
  {
    "id": 10,
    "category": "coats",
    "name": "Camel coat",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/4.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "used",
    "color": "brown",
    "price": 62.99,
    "discount": 10,
    "gender": "female"
  },
  {
    "id": 11,
    "category": "jeans",
    "name": "Blue jeans",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "blue",
    "price": 42.99,
    "discount": 0,
    "gender": "female"
  },
  {
    "id": 12,
    "category": "shirts",
    "name": "Orange T-shirt",
    "rating": 3,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "orange",
    "price": 12.99,
    "discount": 0,
    "gender": "female"
  },
  {
    "id": 13,
    "category": "skirts",
    "name": "Ballerina skirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/2.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["38", "36"],
    "condition": "collectible",
    "color": "white",
    "price": 12.99,
    "discount": 0,
    "gender": "female"
  }
]

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
...
Black Jeans Jacket

100$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

80$

Buy now
...
Gray Jumper

80$

Buy now
...
Red Hoodie

120$

Buy now
...
Blue Jeans Jacket

90$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="array-animation-filters"
  data-mdb-auto-filter="true"
>
  <div class="col-md-6" data-mdb-filter="color">
    <span class="fa-lg">Filter: Color</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="animationArrayRadio"
        id="animationArrayRadio1"
        value="black"
      />
      <label class="form-check-label" for="animationArrayRadio1">Black</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationArrayRadio"
        id="animationArrayRadio2"
        value="red"
      />
      <label class="form-check-label" for="animationArrayRadio2">Red</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationArrayRadio"
        id="animationArrayRadio3"
        value="blue"
      />
      <label class="form-check-label" for="animationArrayRadio3">Blue</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationArrayRadio"
        id="animationArrayRadio4"
        value="gray"
      />
      <label class="form-check-label" for="animationArrayRadio4">Gray</label>
    </div>
  </div>

  <div class="col-md-6" data-mdb-filter="sale">
    <span class="fa-lg mb-5">Filter: Sale</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="animationArrayRadio2"
        id="animationArrayRadio5"
        value="yes"
      />
      <label class="form-check-label" for="animationArrayRadio5">Yes</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="animationArrayRadio2"
        id="animationArrayRadio6"
        value="no"
      />
      <label class="form-check-label" for="animationArrayRadio6">No</label>
    </div>

    <button type="button" class="btn btn-primary mt-3" id="animationArrayReset" data-mdb-ripple-init>
      Clear all filters
    </button>
  </div>
</div>
<div class="row text-center" id="animation-array-data"></div>
const arrayAnimationFilters = document.getElementById('array-animation-filters');
const arrayAnimationData = document.getElementById('animation-array-data');
const arrayReset = document.getElementById('animationArrayReset');

const dataset = [
  {
    id: 1,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 2,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 3,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 4,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 5,
    color: 'red',
    price: 120,
    sale: 'yes',
    product: 'Red Hoodie',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    id: 6,
    color: 'blue',
    price: 90,
    sale: 'no',
    product: 'Blue Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
];

const animationArrayInstance = new Filters(arrayAnimationFilters, {
  items: dataset,
});

const renderItems = (items) => {
  const elements = items.map((item) => {
    const template = `
      <div class="col-md-4 mt-3 animation zoom-in">
        <div class="card shadow-2">
          <img src="${item.img}"
            class="card-img-top" alt="..." />

          <div class="card-body">
            <h5 class="card-title">${item.product}</h5>
            <p class="card-text">
              ${item.price}$
            </p>
            <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
          </div>
        </div>
      </div>
    `;
    return template;
  });

  arrayAnimationData.innerHTML = elements.join('\n');
};

renderItems(dataset);

arrayAnimationFilters.addEventListener('update.mdb.filters', (e) => {
  renderItems(e.items);
});

arrayReset.addEventListener('click', () => {
  animationArrayInstance.clear();
});

Filter and sort

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

100$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

80$

Buy now
...
Gray Jumper

80$

Buy now
...
Red Hoodie

120$

Buy now
...
Blue Jeans Jacket

90$

Buy now
Edit in sandbox 
<div
  class="row justify-content-center"
  id="filter-sort-example-filters"
  data-mdb-auto-filter="true"
>
  <div class="col-md-6" data-mdb-filter="color">
    <span class="fa-lg">Filter: Color</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="filterSortRadioOptions"
        id="filterSortRadio1"
        value="black"
      />
      <label class="form-check-label" for="filterSortRadio1">Black</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="filterSortRadioOptions"
        id="filterSortRadio2"
        value="red"
      />
      <label class="form-check-label" for="filterSortRadio2">Red</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="filterSortRadioOptions"
        id="filterSortRadio3"
        value="blue"
      />
      <label class="form-check-label" for="filterSortRadio3">Blue</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="filterSortRadioOptions"
        id="filterSortRadio4"
        value="gray"
      />
      <label class="form-check-label" for="filterSortRadio4">Gray</label>
    </div>
  </div>

  <div class="col-md-6" data-mdb-filter="sale">
    <span class="fa-lg mb-5">Filter: Sale</span>

    <div class="form-check mt-3">
      <input
        class="form-check-input"
        type="radio"
        name="filterSortRadioOptions2"
        id="filterSortRadio5"
        value="yes"
      />
      <label class="form-check-label" for="filterSortRadio5">Yes</label>
    </div>

    <div class="form-check">
      <input
        class="form-check-input"
        type="radio"
        name="filterSortRadioOptions2"
        id="filterSortRadio6"
        value="no"
      />
      <label class="form-check-label" for="filterSortRadio6">No</label>
    </div>

    <button type="button" class="btn btn-primary mt-3" id="filterSortReset" data-mdb-ripple-init>
      Clear all filters
    </button>
  </div>

  <div class="col-md-6 my-5">
    <select class="select" id="filter-sort-select">
      <option value="" disabled selected>Choose category</option>
      <option value="1">Product name ascending</option>
      <option value="2">Product name descending</option>
      <option value="3">Highest price</option>
      <option value="4">Lowest price</option>
    </select>
    <label class="form-label select-label">Sort</label>
  </div>
</div>
<div class="row text-center" id="filter-sort-example-data"></div>
const multiExampleFilters = document.getElementById('filter-sort-example-filters');
const multiExampleData = document.getElementById('filter-sort-example-data');
const multiReset = document.getElementById('filterSortReset');
const multiSelect = document.getElementById('filter-sort-select');

const dataset = [
  {
    id: 1,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 2,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 3,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 4,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 5,
    color: 'red',
    price: 120,
    sale: 'yes',
    product: 'Red Hoodie',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    id: 6,
    color: 'blue',
    price: 90,
    sale: 'no',
    product: 'Blue Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
];

const multiInstance = new Filters(multiExampleFilters, {
  items: dataset,
});

const renderItems = (items) => {
  const elements = items.map((item) => {
    const template = `
      <div class="col-md-4 mt-3">
        <div class="card shadow-2">
          <img src="${item.img}"
            class="card-img-top" alt="..." />

          <div class="card-body">
            <h5 class="card-title">${item.product}</h5>
            <p class="card-text">
              ${item.price}$
            </p>
            <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
          </div>
        </div>
      </div>
    `;
    return template;
  });

  multiExampleData.innerHTML = elements.join('\n');
};

renderItems(dataset);

multiExampleFilters.addEventListener('update.mdb.filters', (e) => {
  renderItems(e.items);
});

multiReset.addEventListener('click', () => {
  multiInstance.clear();
});

multiSelect.addEventListener('optionSelected.mdb.select', (e) => {
  const value = e.target.value;
  if (value === '1') {
    multiInstance.sort('product');
  }

  if (value === '2') {
    multiInstance.sort('product', 'desc');
  }

  if (value === '3') {
    multiInstance.sort('price', 'desc');
  }

  if (value === '4') {
    multiInstance.sort('price');
  }
});

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
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Edit in sandbox 
<div class="row justify-content-center" id="range-example-filters" data-mdb-items=".range-example-item" data-mdb-auto-filter="false">
  <div class="col-md-12 mt-3 text-center">
    <p class="fa-lg">Price:</p>

    <label for="customRange" class="form-label">Min</label>
    <input type="range" class="form-range" min="80" max="120" id="customRange" autocompleted="" />

    <p id="min-val">Current: 80$</p>

    <label for="customRange2" class="form-label">Max</label>
    <input type="range" class="form-range" min="80" max="120" id="customRange2" autocompleted="" />

    <p id="max-val">Current: 120$</p>
  </div>
</div>

<div class="row text-center" id="range-example-data">
  <div class="col-md-4 mt-3 range-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 range-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />

      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 range-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="Blue Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">
          90$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 range-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="Red Hoodie"
      />
      <div class="card-body">
        <h5 class="card-title">Red Hoodie</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">150$</span>
          <span class="fw-bold fa-lg">120$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 range-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="Black Jeans Jacket"
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 mt-3 range-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">
    <div class="card shadow-2">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="Gray Jumper"
      />
      <div class="card-body">
        <h5 class="card-title">Gray Jumper</h5>
        <p class="card-text">
          <span class="text-decoration-line-through">100$</span>
          <span class="fw-bold fa-lg">80$</span>
        </p>
        <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
      </div>
    </div>
  </div>
</div>
const rangeExampleFilters = document.getElementById('range-example-filters');
const minRange = document.getElementById('customRange');
const maxRange = document.getElementById('customRange2');

const rangeInstance = new Filters(rangeExampleFilters);

minRange.addEventListener('change', () => {
  const min = minRange.value;
  const max = maxRange.value;

  document.getElementById('min-val').textContent = `Current: ${min}$`;

  rangeInstance.filter({price: (price) => {
    return price >= min && price <= max;
  }});
});

maxRange.addEventListener('change', () => {
  const min = minRange.value;
  const max = maxRange.value;

  document.getElementById('max-val').textContent = `Current: ${max}$`;

  rangeInstance.filter({price: (price) => {
    return price >= min && price <= max;
  }});
});

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.

...
Black Jeans Jacket

100$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

80$

Buy now
...
Gray Jumper

80$

Buy now
...
Red Hoodie

120$

Buy now
...
Blue Jeans Jacket

90$

Buy now
Edit in sandbox 
<div class="row justify-content-center" id="custom-sort">
  <div class="col-md-4 text-center">
    <button type="button" class="btn btn-primary" id="customSortBtn" data-mdb-ripple-init>
      Sort by product name ascending
    </button>
  </div>
  <div class="col-md-4 text-center">
    <button type="button" class="btn btn-primary" id="customSortBtn2" data-mdb-ripple-init>
      Sort by product name descending
    </button>
  </div>
</div>
<div class="row text-center" id="custom-sort-data"></div>
const customSort = document.getElementById('custom-sort');
const customSortData = document.getElementById('custom-sort-data');
const customSortAsc = document.getElementById('customSortBtn');
const customSortDesc = document.getElementById('customSortBtn2');

const dataset = [
  {
    id: 1,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 2,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 3,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 4,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
  {
    id: 5,
    color: 'red',
    price: 120,
    sale: 'yes',
    product: 'Red Hoodie',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    id: 6,
    color: 'blue',
    price: 90,
    sale: 'no',
    product: 'Blue Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
];

const customSortInstance = new Filters(customSort, {
  items: dataset,
});

const renderItems = (items) => {
  const elements = items.map((item) => {
    const template = `
      <div class="col-md-4 mt-3">
        <div class="card shadow-2">
          <img src="${item.img}"
            class="card-img-top" alt="..." />

          <div class="card-body">
            <h5 class="card-title">${item.product}</h5>
            <p class="card-text">
              ${item.price}$
            </p>
            <a href="#" class="btn btn-primary" data-mdb-ripple-init>Buy now</a>
          </div>
        </div>
      </div>
    `;
    return template;
  });

  customSortData.innerHTML = elements.join('\n');
};

renderItems(dataset);

customSort.addEventListener('update.mdb.filters', (e) => {
  renderItems(e.items);
});

customSortAsc.addEventListener('click', (e) => {
  customSortInstance.sort('product', null, (firstItem, secondItem) => {
    if (firstItem < secondItem) return -1;
    if (firstItem > secondItem) return 1;
    return 0;
  });
});

customSortDesc.addEventListener('click', (e) => {
  customSortInstance.sort('product', null, (firstItem, secondItem) => {
    if (firstItem > secondItem) return -1;
    if (firstItem < secondItem) return 1;
    return 0;
  });
});

Full screen example

View full screen demo
Edit in sandbox 
<header>
  <!-- Navbar -->
  <nav class="navbar sticky-top navbar-expand-lg bg-body">
    <div class="container-fluid">
      <button
        class="navbar-toggler"
        type="button"
        data-mdb-collapse-init
        data-mdb-target="#navbarExample01"
        aria-controls="navbarExample01"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="https://mdbecommerce.com/">
        <i class="fab fa-mdb fa-2x" alt="mdb logo"></i>
      </a>
      <div class="collapse navbar-collapse ms-auto" id="navbarExample01">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item my-auto">
            <a class="nav-link active" aria-current="page" href="#">
              <span class="badge rounded-pill bg-danger">1</span>
              <i class="fas fa-shopping-cart"></i>
            </a>
          </li>
          <!-- Navbar dropdown -->
          <li class="nav-item dropdown my-auto">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              <i class="flag-united-kingdom flag m-0"></i>
            </a>
            <!-- Dropdown menu -->
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item my-auto">
            <a class="nav-link active" aria-current="page" href="#">Shop</a>
          </li>
          <li class="nav-item my-auto">
            <a class="nav-link active" aria-current="page" href="#">Contact</a>
          </li>
          <li class="nav-item my-auto">
            <a class="nav-link active" aria-current="page" href="#">Sign in</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <button
                type="button"
                class="btn btn-outline-dark btn-rounded"
                data-mdb-ripple-init
                data-mdb-ripple-color="dark"
              >
                Sign up
              </button>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Navbar -->

  <!-- Background image -->
  <div
    class="p-5 text-center bg-image"
    style="
      background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/clothes(5)-crop.webp');
      height: 400px;
    "
  >
    <div class="mask" style="background-color: rgba(0, 0, 0, 0.7)">
      <div class="d-flex justify-content-center align-items-center h-100">
        <div class="text-white">
          <h1 class="mb-3">Shop</h1>
        </div>
      </div>
    </div>
  </div>
  <!-- Background image -->
</header>

<main>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-4">
        <!-- Section: Sidebar -->
        <section>
          <!-- Section: Filters -->
          <section id="filters" data-mdb-auto-filter="true">
            <h5>Filters</h5>

            <!-- Section: Condition -->
            <section class="mb-4" data-mdb-filter="condition">
              <h6 class="fw-bold mb-3">Condition</h6>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="new"
                  id="condition-checkbox"
                />
                <label class="form-check-label text-uppercase small text-muted" for="condition-checkbox">
                  New
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="used"
                  id="condition-checkbox2"
                />
                <label class="form-check-label text-uppercase small text-muted" for="condition-checkbox2">
                  Used
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="collectible"
                  id="condition-checkbox3"
                />
                <label class="form-check-label text-uppercase small text-muted" for="condition-checkbox3">
                  Collectible
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="renewed"
                  id="condition-checkbox4"
                />
                <label class="form-check-label text-uppercase small text-muted" for="condition-checkbox4">
                  Renewed
                </label>
              </div>
            </section>
            <!-- Section: Condition -->

            <!-- Section: Avg. Customer Review -->
            <section class="mb-4 border">
              <h6 class="fw-bold mb-3">Avg. Customer Review</h6>

              <ul class="rating" data-mdb-toggle="rating" id="filter-rating">
                <li>
                  <i class="far fa-star fa-sm text-primary" title="1"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary" title="2"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary" title="3"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary" title="4"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary" title="5"></i>
                </li>
              </ul>
            </section>
            <!-- Section: Avg. Customer Review -->

            <!-- Section: Price -->
            <section class="mb-4 border">
              <h6 class="fw-bold mb-3">Price</h6>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="radio"
                  name="flexRadioDefault"
                  id="price-radio"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-radio">
                  Under $25
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="radio"
                  name="flexRadioDefault"
                  id="price-radio2"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-radio2">
                  $25 to $50
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="radio"
                  name="flexRadioDefault"
                  id="price-radio3"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-radio3">
                  $50 to $100
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="radio"
                  name="flexRadioDefault"
                  id="price-radio4"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-radio4">
                  $100 to $200
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="radio"
                  name="flexRadioDefault"
                  id="price-radio5"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-radio5">
                  $200 & above
                </label>
              </div>
            </section>
            <!-- Section: Price -->

            <!-- Section: Size -->
            <section class="mb-4" data-mdb-filter="price">
              <h6 class="fw-bold mb-3">Size</h6>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="34"
                  id="price-checkbox"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-checkbox">
                  34
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="36"
                  id="price-checkbox2"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-checkbox2">
                  36
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="38"
                  id="price-checkbox3"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-checkbox3">
                  38
                </label>
              </div>

              <div class="form-check mb-3">
                <input
                  class="form-check-input"
                  type="checkbox"
                  value="40"
                  id="price-checkbox4"
                />
                <label class="form-check-label text-uppercase small text-muted" for="price-checkbox4">
                  40
                </label>
              </div>
            </section>
            <!-- Section: Size -->

            <!-- Section: Color -->
            <section class="mb-4" data-mdb-filter="color">
              <h6 class="fw-bold mb-3">Color</h6>

              <div class="form-check form-check-inline m-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio1"
                  value="white"
                />
                <label class="btn bg-light btn-rounded p-3" for="colorRadio1"></label>
              </div>

              <div class="form-check form-check-inline m-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio2"
                  value="gray"
                />
                <label class="btn btn-rounded p-3" for="colorRadio2" style="background-color: #bdbdbd"></label>
              </div>

              <div class="form-check form-check-inline m-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio3"
                  value="black"
                />
                <label class="btn bg-dark text-white btn-rounded p-3" for="colorRadio3"></label>
              </div>

              <div class="form-check form-check-inline m-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio4"
                  value="green"
                />
                <label class="btn bg-success btn-rounded p-3" for="colorRadio4"></label>
              </div>

              <div class="form-check form-check-inline m-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio5"
                  value="blue"
                />
                <label class="btn bg-primary btn-rounded p-3" for="colorRadio5"></label>
              </div>

              <div class="form-check form-check-inline m-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio6"
                  value="purple"
                />
                <label class="btn bg-secondary btn-rounded p-3" for="colorRadio6"></label>
              </div>

              <div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio7"
                  value="yellow"
                />
                <label class="btn btn-rounded p-3" for="colorRadio7" style="background-color: #ffea00"></label>
              </div>

              <div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio8"
                  value="indigo"
                />
                <label class="btn btn-rounded p-3" for="colorRadio8" style="background-color: #3f51b5"></label>
              </div>

              <div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio9"
                  value="red"
                />
                <label class="btn bg-danger btn-rounded p-3" for="colorRadio9"></label>
              </div>

              <div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
                <input
                  class="btn-check"
                  type="radio"
                  name="colorRadio"
                  id="colorRadio10"
                  value="orange"
                />
                <label class="btn bg-warning btn-rounded p-3" for="colorRadio10"></label>
              </div>
            </section>
            <!-- Section: Color -->
          </section>
          <!-- Section: Filters -->
        </section>
        <!-- Section: Sidebar -->
      </div>
      <div class="col-md-8">
        <div class="row justify-content-center">
          <div class="col-md-3 my-auto py-3">
            <i class="fas fa-th-list fa-lg me-1"></i>
            <i class="fas fa-th-large fa-lg"></i>
          </div>
          <div class="col-md-4 my-auto py-3">
            <select class="select" id="sort-select">
              <option value="1">Best rating</option>
              <option value="2">Lowest price first</option>
              <option value="3">Highest price first</option>
            </select>
            <label class="form-label select-label">Sort</label>
          </div>
          <div class="col-md-5 my-auto py-3">
            <nav aria-label="...">
              <ul class="pagination justify-content-end my-auto">
                <li class="page-item">
                  <span class="page-link"><i class="fas fa-angle-left fa-lg"></i></span>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page">
                  <span class="page-link">
                    2
                    <span class="visually-hidden">(current)</span>
                  </span>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#"><i class="fas fa-angle-right fa-lg"></i></a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <div class="row mb-4" id="content"></div>
        <div class="row">
          <div class="col-md-12 mt-3 text-center">
            <div
              class="spinner-border text-primary mx-auto my-5"
              id="spinner"
              role="status"
              style="display: none"
            >
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<footer class="bg-dark text-white text-center text-lg-start">
  <!-- Socials -->
  <div class="bg-primary text-center p-3">
    <div class="row">
      <div class="col-md-6">
        <span class="fw-bold">Get connected with us on social networks!</span>
      </div>
      <div class="col-md-6">
        <i class="fab fa-instagram"></i>
        <i class="fab fa-linkedin-in ms-4"></i>
        <i class="fab fa-twitter ms-4"></i>
        <i class="fab fa-facebook-f ms-4"></i>
      </div>
    </div>
  </div>
  <!-- Socials -->

  <!-- Grid container -->
  <div class="container p-5">
    <!--Grid row-->
    <div class="row p-2">
      <!--Grid column-->
      <div class="col-md-3 mx-auto py-4">
        <h5 class="text-uppercase">About me</h5>
        <hr class="mb-4 mt-0" />

        <p>
          Here you can use rows and columns to organize your footer content. Lorem ipsum dolor
          sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-3 mx-auto py-4">
        <h5 class="text-uppercase">Products</h5>
        <hr class="mb-4 mt-0" />

        <ul class="list-unstyled mb-0">
          <li class="mb-2">
            <a href="#!" class="text-white">MDBootstrap</a>
          </li>
          <li class="mb-2">
            <a href="#!" class="text-white">MDWordPress</a>
          </li>
          <li class="mb-2">
            <a href="#!" class="text-white">BrandFlow</a>
          </li>
          <li>
            <a href="#!" class="text-white">Bootstrap Angular</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-3 mx-auto py-4">
        <h5 class="text-uppercase">Useful links</h5>
        <hr class="mb-4 mt-0" />

        <ul class="list-unstyled">
          <li class="mb-2">
            <a href="#!" class="text-white">Your Account</a>
          </li>
          <li class="mb-2">
            <a href="#!" class="text-white">Become an Affiliate</a>
          </li>
          <li class="mb-2">
            <a href="#!" class="text-white">Shipping Rates</a>
          </li>
          <li>
            <a href="#!" class="text-white">Help</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-3 mx-auto py-4">
        <h5 class="text-uppercase">Contacts</h5>
        <hr class="mb-4 mt-0" />

        <ul class="list-unstyled">
          <li class="mb-2">
            <a href="#!" class="text-white">
              <i class="far fa-map me-1"></i> New York, Avenue Street 10
            </a>
          </li>
          <li class="mb-2">
            <a href="#!" class="text-white">
              <i class="fas fa-phone-alt me-1"></i> 042 876 836 908
            </a>
          </li>
          <li class="mb-2">
            <a href="#!" class="text-white">
              <i class="far fa-envelope me-1"></i> company@example.com
            </a>
          </li>
          <li>
            <a href="#!" class="text-white">
              <i class="far fa-clock me-1"></i> Monday - Friday: 10-17
            </a>
          </li>
        </ul>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
  <!-- Grid container -->

  <!-- Copyright -->
  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
    © 2020 Copyright:
    <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>
const filtersElement = document.getElementById('filters');
const content = document.getElementById('content');
const spinner = document.getElementById('spinner');
const sortSelect = document.getElementById('sort-select');
const filterRating = document.getElementById('filter-rating');

const priceInputs = [
  'price-radio',
  'price-radio2',
  'price-radio3',
  'price-radio4',
  'price-radio5',
];

const getItems = () => {
  spinner.style.display = 'block';

  // A user should replace 'YOUR_API' with API that returns a JSON like one in the 'products.json' bookmark
  return fetch('YOUR_API').then((data) =>
    data.json()
  );
};

const renderItems = (items) => {
  spinner.style.display = 'none';

  const elements = items.map((item) => {
    const template = `
      <div class="col-md-4 my-4 justify-content-center text-center">
        <div class="bg-image hover-overlay hover-zoom hover-shadow ripple rounded">
          <img src="${item.image}" class="img-fluid w-100" style="height: 325px" />
          <a href="#!">
            <div class="mask rounded" style="background-color: rgba(66, 66, 66, 0.2);"></div>
          </a>
        </div>
        <div class="pt-4">
          <h5>${item.name}</h5>
          <strong>$${item.price}</strong>
        </div>
      </div>
    `;
    return template;
  });

  content.innerHTML = elements.join('\n');
};

getItems().then((items) => {
  const filtersInstance = new Filters(filtersElement, {
    items,
  });

  renderItems(items);
  filtersInstance.sort('rating', 'desc');
});

filtersElement.addEventListener('update.mdb.filters', (e) => {
  spinner.style.display = 'block';

  renderItems(e.items);
});

sortSelect.addEventListener('optionSelected.mdb.select', (e) => {
    const value = e.target.value;
    const filtersInstance = Filters.getInstance(filtersElement);

    if (value === '1') {
      filtersInstance.sort('rating', 'desc');
    }

    if (value === '2') {
      filtersInstance.sort('price');
    }

    if (value === '3') {
      filtersInstance.sort('price', 'desc');
    }
  });

  filterRating.addEventListener('scoreSelect.mdb.rating', (e) => {
    const value = e.value;

    const filtersInstance = Filters.getInstance(filtersElement);

    filtersInstance.filter({
      rating: [value],
    });
  });

  document.getElementById(priceInputs[0]).addEventListener('change', () => {
    const filtersInstance = Filters.getInstance(filtersElement);

    filtersInstance.filter({
      price: (price) => {
        return price < 25;
      }
    });
  });

  document.getElementById(priceInputs[1]).addEventListener('change', () => {
    const filtersInstance = Filters.getInstance(filtersElement);

    filtersInstance.filter({
      price: (price) => {
        return price >= 25 && price < 50;
      }
    });
  });

  document.getElementById(priceInputs[2]).addEventListener('change', () => {
    const filtersInstance = Filters.getInstance(filtersElement);

    filtersInstance.filter({
      price: (price) => {
        return price >= 50 && price < 100;
      }
    });
  });

  document.getElementById(priceInputs[3]).addEventListener('change', () => {
    const filtersInstance = Filters.getInstance(filtersElement);

    filtersInstance.filter({
      price: (price) => {
        return price >= 100 && price < 200;
      }
    });
  });

  document.getElementById(priceInputs[4]).addEventListener('change', () => {
    const filtersInstance = Filters.getInstance(filtersElement);

    filtersInstance.filter({
      price: (price) => {
        return price >= 200;
      }
    });
  });
[
  {
    "id": 1,
    "category": "shirts",
    "name": "Fantasy T-shirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "40"],
    "condition": "new",
    "color": "blue",
    "price": 12.99,
    "keywords": ["t-shirt", "sweatshitrt"],
    "discount": 0,
    "gender": "male"
  },
  {
    "id": 2,
    "category": "shirts",
    "name": "Fantasy T-shirt",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "40", "44"],
    "condition": "new",
    "color": "red",
    "price": 12.99,
    "discount": 0,
    "gender": "male"
  },
  {
    "id": 3,
    "category": "shirts",
    "name": "Fantasy T-shirt",
    "rating": 3,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36"],
    "condition": "new",
    "color": "grey",
    "price": 40.99,
    "discount": 10,
    "gender": "male"
  },
  {
    "id": 4,
    "category": "jackets",
    "name": "Denim Jacket",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "condition": "new",
    "color": "grey",
    "price": 40.99,
    "discount": 0,
    "gender": "unisex"
  },
  {
    "id": 5,
    "category": "jeans",
    "name": "Ripped jeans",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/11.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "38", "40"],
    "condition": "renewed",
    "color": "blue",
    "price": 20.99,
    "discount": 5,
    "gender": "female"
  },
  {
    "id": 6,
    "category": "jeans",
    "name": "Boyfriend jeans",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/10.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": false,
    "size": ["34", "36", "38", "40"],
    "condition": "used",
    "color": "blue",
    "price": 20.99,
    "discount": 5,
    "gender": "female"
  },
  {
    "id": 7,
    "category": "shirts",
    "name": "Ripped sweatshirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/7.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["34", "36", "38", "40"],
    "condition": "collectible",
    "color": "white",
    "price": 29.99,
    "discount": 5,
    "gender": "female"
  },
  {
    "id": 8,
    "category": "shirts",
    "name": "Longsleeve",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/8.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40"],
    "condition": "collectible",
    "color": "black",
    "price": 120.99,
    "discount": 0,
    "gender": "male"
  },
  {
    "id": 8,
    "category": "shirts",
    "name": "Stripped sweatshirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/6.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "white",
    "price": 32.99,
    "discount": 10,
    "gender": "female"
  },
  {
    "id": 9,
    "category": "trousers",
    "name": "Red chinos",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/5.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "red",
    "price": 62.99,
    "discount": 10,
    "gender": "female"
  },
  {
    "id": 10,
    "category": "coats",
    "name": "Camel coat",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/4.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "used",
    "color": "brown",
    "price": 62.99,
    "discount": 10,
    "gender": "female"
  },
  {
    "id": 11,
    "category": "jeans",
    "name": "Blue jeans",
    "rating": 5,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "blue",
    "price": 42.99,
    "discount": 0,
    "gender": "female"
  },
  {
    "id": 12,
    "category": "shirts",
    "name": "Orange T-shirt",
    "rating": 3,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["40", "38", "36"],
    "condition": "new",
    "color": "orange",
    "price": 12.99,
    "discount": 0,
    "gender": "female"
  },
  {
    "id": 13,
    "category": "skirts",
    "name": "Ballerina skirt",
    "rating": 4,
    "image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/2.webp",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
    "available": true,
    "size": ["38", "36"],
    "condition": "collectible",
    "color": "white",
    "price": 12.99,
    "discount": 0,
    "gender": "female"
  }
]

Filters - API

Import

Edit in sandbox 
import Filters from 'mdb-filters';

Usage

Via data attributes

Using the Filters plugin doesn't require any additional JavaScript code - simply add data-mdb-filters-init attribute to container with data to filter and use other data attributes to set all options.

Edit in sandbox 
<div id="myFilters" data-mdb-filters-init 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

Edit in sandbox 
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.

Edit in sandbox 
$(document).ready(() => {
  $('.example-class').filters(options);
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-items="".

Name Type Default Description
items String | Array null Sets a selector for filtering items.
autoFilter Boolean false Applied to an instance enables auto filtering by inputs.
property String | Array Defines a filter value for an item. Swap property with a filter name that your items should have. For multiple properties use array: data-mdb-property = "['red', 'green', 'blue']".
filter String Sets a filter handler to the input group that it is applied to.

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)
Edit in sandbox 
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.
Edit in sandbox 
const filtersElement = document.getElementById('filtersElement');

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