Filters

Bootstrap 5 Filters plugin

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

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

View full screen demo

Basic example - DOM Elements

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

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

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

Filter: Color

Black

Red

Blue

Gray

Filter: Sale

Yes

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

Blue Jeans Jacket

90$

Buy now

Red Hoodie

150$ 120$

Buy now

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

HTML
JS

<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">
      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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="..."
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="..."
      />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="..."
      />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">90$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="..."
      />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="..."
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="..."
      />

      <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 ripple-surface">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

Red

Blue

Black

Gray

Filter: Sale

Yes

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

Blue Jeans Jacket

90$

Buy now

Red Hoodie

150$ 120$

Buy now

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

HTML
JS

<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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">
          90$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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

100$

Buy now

Gray Jumper

100$ 80$

Buy now

Blue Jeans Jacket

90$

Buy now

Red Hoodie

150$ 120$

Buy now

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

HTML
JS

<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">
      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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">
          90$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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

Yes

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

Blue Jeans Jacket

90$

Buy now

Red Hoodie

150$ 120$

Buy now

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

HTML
JS

<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">
      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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="..."
      />
      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">90$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="..."
      />
      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="..."
      />
      <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 ripple-surface">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

Black

Red

Blue

Gray

Filter: Sale

Yes

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

Blue Jeans Jacket

90$

Buy now

Red Hoodie

150$ 120$

Buy now

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

HTML
JS

<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">
      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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="..."
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="..."
      />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top"
        alt="..."
      />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">90$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top"
        alt="..."
      />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top"
        alt="..."
      />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">100$</p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top"
        alt="..."
      />

      <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 ripple-surface">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

Black

Red

Blue

Gray

Filter: Sale

Yes

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

HTML
JS

<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">
      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 ripple-surface">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:

Minimum

Maximum

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

<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">
      <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">
      <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 ripple-surface">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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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

Black

Red

Blue

Gray

Filter: Sale

Yes

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

HTML
JS

<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">
      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 ripple-surface">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

Black

Red

Blue

Gray

Filter: Sale

Yes

Sort

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

HTML
JS

<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">
      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 ripple-surface">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('optionSelect.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:

Min

Current: 80$

Max

Current: 120$

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

Blue Jeans Jacket

90$

Buy now

Red Hoodie

150$ 120$

Buy now

Black Jeans Jacket

100$

Buy now

Gray Jumper

100$ 80$

Buy now

HTML
JS

<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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Blue Jeans Jacket</h5>
        <p class="card-text">
          90$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
        class="card-img-top" alt="..." />

      <div class="card-body">
        <h5 class="card-title">Black Jeans Jacket</h5>
        <p class="card-text">
          100$
        </p>
        <a href="#" class="btn btn-primary ripple-surface">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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
        class="card-img-top" alt="..." />

      <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 ripple-surface">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

HTML
JS

<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">
      Sort by product name ascending
    </button>
  </div>
  <div class="col-md-4 text-center">
    <button type="button" class="btn btn-primary" id="customSortBtn2">
      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 ripple-surface">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

<header>
  <!-- Navbar -->
  <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button
        class="navbar-toggler"
        type="button"
        data-mdb-toggle="collapse"
        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="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-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://mdbootstrap.com/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">
              <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">
              <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('optionSelect.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('onSelect.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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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

Usage

Via data attributes

HTML

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

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

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

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

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

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

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

Via JavaScript

JavaScript

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

Via jQuery

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

jQuery

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

Options

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

Methods

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

JavaScript

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.

JavaScript

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

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

Import

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

JavaScript

import Filters from 'mdb-filters';