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
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.
<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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
class="card-img-top"
alt="Blue Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">90$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
class="card-img-top"
alt="Red Hoodie"
/>
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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.
<div
class="row justify-content-center"
id="checkbox-example-filters"
data-mdb-items=".checkbox-example-item"
data-mdb-auto-filter="true"
>
<div class="col-md-6" data-mdb-filter="color">
<span class="fa-lg mb-5">Filter: Color</span>
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="red" />
<label class="form-check-label" for="inlineCheckbox1">Red</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="blue" />
<label class="form-check-label" for="inlineCheckbox2">Blue</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="black" />
<label class="form-check-label" for="inlineCheckbox3">Black</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="gray" />
<label class="form-check-label" for="inlineCheckbox4">Gray</label>
</div>
</div>
<div class="col-md-6" data-mdb-filter="sale">
<span class="fa-lg mb-5">Filter: Sale</span>
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="yes" />
<label class="form-check-label" for="inlineCheckbox5">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox6" value="no" />
<label class="form-check-label" for="inlineCheckbox6">No</label>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">
100$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
class="card-img-top"
alt="Blue Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">
90$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
class="card-img-top"
alt="Red Hoodie"
/>
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">
100$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
</div>
const checkboxExampleFilters = document.getElementById('checkbox-example-filters');
const checkboxInstance = new Filters(checkboxExampleFilters)
Color example
<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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">
100$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
class="card-img-top"
alt="Blue Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">
90$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
class="card-img-top"
alt="Red Hoodie"
/>
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">
100$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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
<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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
class="card-img-top"
alt="Blue Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">90$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
class="card-img-top"
alt="Red Hoodie"
/>
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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.
<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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
class="card-img-top"
alt="Blue Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">90$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
class="card-img-top"
alt="Red Hoodie"
/>
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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
Filter: Sale
<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:
<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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40"],
"condition": "new",
"color": "blue",
"price": 12.99,
"keywords": ["t-shirt", "sweatshitrt"],
"discount": 0,
"gender": "male"
},
{
"id": 2,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40", "44"],
"condition": "new",
"color": "red",
"price": 12.99,
"discount": 0,
"gender": "male"
},
{
"id": 3,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 3,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36"],
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10,
"gender": "male"
},
{
"id": 4,
"category": "jackets",
"name": "Denim Jacket",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 0,
"gender": "unisex"
},
{
"id": 5,
"category": "jeans",
"name": "Ripped jeans",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/11.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "renewed",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 6,
"category": "jeans",
"name": "Boyfriend jeans",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/10.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": false,
"size": ["34", "36", "38", "40"],
"condition": "used",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 7,
"category": "shirts",
"name": "Ripped sweatshirt",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/7.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "collectible",
"color": "white",
"price": 29.99,
"discount": 5,
"gender": "female"
},
{
"id": 8,
"category": "shirts",
"name": "Longsleeve",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/8.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40"],
"condition": "collectible",
"color": "black",
"price": 120.99,
"discount": 0,
"gender": "male"
},
{
"id": 8,
"category": "shirts",
"name": "Stripped sweatshirt",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/6.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "white",
"price": 32.99,
"discount": 10,
"gender": "female"
},
{
"id": 9,
"category": "trousers",
"name": "Red chinos",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/5.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "red",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 10,
"category": "coats",
"name": "Camel coat",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/4.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "used",
"color": "brown",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 11,
"category": "jeans",
"name": "Blue jeans",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "blue",
"price": 42.99,
"discount": 0,
"gender": "female"
},
{
"id": 12,
"category": "shirts",
"name": "Orange T-shirt",
"rating": 3,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "orange",
"price": 12.99,
"discount": 0,
"gender": "female"
},
{
"id": 13,
"category": "skirts",
"name": "Ballerina skirt",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/2.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["38", "36"],
"condition": "collectible",
"color": "white",
"price": 12.99,
"discount": 0,
"gender": "female"
}
]
Animations - Array of Items
Add .animation and .animation-name classes to rendered elements to
animate them. The full list of available animations you can find
here.
Filter: Color
Filter: Sale
<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
Filter: Sale
<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.
<div class="row justify-content-center" id="range-example-filters" data-mdb-items=".range-example-item" data-mdb-auto-filter="false">
<div class="col-md-12 mt-3 text-center">
<p class="fa-lg">Price:</p>
<label for="customRange" class="form-label">Min</label>
<input type="range" class="form-range" min="80" max="120" id="customRange" autocompleted="" />
<p id="min-val">Current: 80$</p>
<label for="customRange2" class="form-label">Max</label>
<input type="range" class="form-range" min="80" max="120" id="customRange2" autocompleted="" />
<p id="max-val">Current: 120$</p>
</div>
</div>
<div class="row text-center" id="range-example-data">
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">
100$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp"
class="card-img-top"
alt="Blue Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">
90$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp"
class="card-img-top"
alt="Red Hoodie"
/>
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp"
class="card-img-top"
alt="Black Jeans Jacket"
/>
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">
100$
</p>
<a href="#" class="btn btn-primary 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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp"
class="card-img-top"
alt="Gray Jumper"
/>
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary 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.
<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
<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="flag-united-kingdom flag m-0"></i>
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item my-auto">
<a class="nav-link active" aria-current="page" href="#">Shop</a>
</li>
<li class="nav-item my-auto">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item my-auto">
<a class="nav-link active" aria-current="page" href="#">Sign in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<button
type="button"
class="btn btn-outline-dark btn-rounded"
data-mdb-ripple-color="dark"
>
Sign up
</button>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
class="p-5 text-center bg-image"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/clothes(5)-crop.webp');
height: 400px;
"
>
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="mb-3">Shop</h1>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
<main>
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<!-- Section: Sidebar -->
<section>
<!-- Section: Filters -->
<section id="filters" data-mdb-auto-filter="true">
<h5>Filters</h5>
<!-- Section: Condition -->
<section class="mb-4" data-mdb-filter="condition">
<h6 class="fw-bold mb-3">Condition</h6>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="new"
id="condition-checkbox"
/>
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox">
New
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="used"
id="condition-checkbox2"
/>
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox2">
Used
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="collectible"
id="condition-checkbox3"
/>
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox3">
Collectible
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="renewed"
id="condition-checkbox4"
/>
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox4">
Renewed
</label>
</div>
</section>
<!-- Section: Condition -->
<!-- Section: Avg. Customer Review -->
<section class="mb-4 border">
<h6 class="fw-bold mb-3">Avg. Customer Review</h6>
<ul class="rating" data-mdb-toggle="rating" id="filter-rating">
<li>
<i class="far fa-star fa-sm text-primary" title="1"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="2"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="3"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="4"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="5"></i>
</li>
</ul>
</section>
<!-- Section: Avg. Customer Review -->
<!-- Section: Price -->
<section class="mb-4 border">
<h6 class="fw-bold mb-3">Price</h6>
<div class="form-check mb-3">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="price-radio"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-radio">
Under $25
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="price-radio2"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-radio2">
$25 to $50
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="price-radio3"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-radio3">
$50 to $100
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="price-radio4"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-radio4">
$100 to $200
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="price-radio5"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-radio5">
$200 & above
</label>
</div>
</section>
<!-- Section: Price -->
<!-- Section: Size -->
<section class="mb-4" data-mdb-filter="price">
<h6 class="fw-bold mb-3">Size</h6>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="34"
id="price-checkbox"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox">
34
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="36"
id="price-checkbox2"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox2">
36
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="38"
id="price-checkbox3"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox3">
38
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
value="40"
id="price-checkbox4"
/>
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox4">
40
</label>
</div>
</section>
<!-- Section: Size -->
<!-- Section: Color -->
<section class="mb-4" data-mdb-filter="color">
<h6 class="fw-bold mb-3">Color</h6>
<div class="form-check form-check-inline m-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio1"
value="white"
/>
<label class="btn bg-light btn-rounded p-3" for="colorRadio1"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio2"
value="gray"
/>
<label class="btn btn-rounded p-3" for="colorRadio2" style="background-color: #bdbdbd"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio3"
value="black"
/>
<label class="btn bg-dark text-white btn-rounded p-3" for="colorRadio3"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio4"
value="green"
/>
<label class="btn bg-success btn-rounded p-3" for="colorRadio4"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio5"
value="blue"
/>
<label class="btn bg-primary btn-rounded p-3" for="colorRadio5"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio6"
value="purple"
/>
<label class="btn bg-secondary btn-rounded p-3" for="colorRadio6"></label>
</div>
<div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio7"
value="yellow"
/>
<label class="btn btn-rounded p-3" for="colorRadio7" style="background-color: #ffea00"></label>
</div>
<div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio8"
value="indigo"
/>
<label class="btn btn-rounded p-3" for="colorRadio8" style="background-color: #3f51b5"></label>
</div>
<div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio9"
value="red"
/>
<label class="btn bg-danger btn-rounded p-3" for="colorRadio9"></label>
</div>
<div class="form-check form-check-inline mt-3 me-0 p-0 pe-3">
<input
class="btn-check"
type="radio"
name="colorRadio"
id="colorRadio10"
value="orange"
/>
<label class="btn bg-warning btn-rounded p-3" for="colorRadio10"></label>
</div>
</section>
<!-- Section: Color -->
</section>
<!-- Section: Filters -->
</section>
<!-- Section: Sidebar -->
</div>
<div class="col-md-8">
<div class="row justify-content-center">
<div class="col-md-3 my-auto py-3">
<i class="fas fa-th-list fa-lg me-1"></i>
<i class="fas fa-th-large fa-lg"></i>
</div>
<div class="col-md-4 my-auto py-3">
<select class="select" id="sort-select">
<option value="1">Best rating</option>
<option value="2">Lowest price first</option>
<option value="3">Highest price first</option>
</select>
<label class="form-label select-label">Sort</label>
</div>
<div class="col-md-5 my-auto py-3">
<nav aria-label="...">
<ul class="pagination justify-content-end my-auto">
<li class="page-item">
<span class="page-link"><i class="fas fa-angle-left fa-lg"></i></span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">
2
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#"><i class="fas fa-angle-right fa-lg"></i></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row mb-4" id="content"></div>
<div class="row">
<div class="col-md-12 mt-3 text-center">
<div
class="spinner-border text-primary mx-auto my-5"
id="spinner"
role="status"
style="display: none"
>
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-dark text-white text-center text-lg-start">
<!-- Socials -->
<div class="bg-primary text-center p-3">
<div class="row">
<div class="col-md-6">
<span class="fw-bold">Get connected with us on social networks!</span>
</div>
<div class="col-md-6">
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in ms-4"></i>
<i class="fab fa-twitter ms-4"></i>
<i class="fab fa-facebook-f ms-4"></i>
</div>
</div>
</div>
<!-- Socials -->
<!-- Grid container -->
<div class="container p-5">
<!--Grid row-->
<div class="row p-2">
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">About me</h5>
<hr class="mb-4 mt-0" />
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor
sit amet, consectetur adipisicing elit.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Products</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a href="#!" class="text-white">MDBootstrap</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">MDWordPress</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">BrandFlow</a>
</li>
<li>
<a href="#!" class="text-white">Bootstrap Angular</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Useful links</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled">
<li class="mb-2">
<a href="#!" class="text-white">Your Account</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">Become an Affiliate</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">Shipping Rates</a>
</li>
<li>
<a href="#!" class="text-white">Help</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Contacts</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled">
<li class="mb-2">
<a href="#!" class="text-white">
<i class="far fa-map me-1"></i> New York, Avenue Street 10
</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">
<i class="fas fa-phone-alt me-1"></i> 042 876 836 908
</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">
<i class="far fa-envelope me-1"></i> company@example.com
</a>
</li>
<li>
<a href="#!" class="text-white">
<i class="far fa-clock me-1"></i> Monday - Friday: 10-17
</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
const filtersElement = document.getElementById('filters');
const content = document.getElementById('content');
const spinner = document.getElementById('spinner');
const sortSelect = document.getElementById('sort-select');
const filterRating = document.getElementById('filter-rating');
const priceInputs = [
'price-radio',
'price-radio2',
'price-radio3',
'price-radio4',
'price-radio5',
];
const getItems = () => {
spinner.style.display = 'block';
// A user should replace 'YOUR_API' with API that returns a JSON like one in the 'products.json' bookmark
return fetch('YOUR_API').then((data) =>
data.json()
);
};
const renderItems = (items) => {
spinner.style.display = 'none';
const elements = items.map((item) => {
const template = `
<div class="col-md-4 my-4 justify-content-center text-center">
<div class="bg-image hover-overlay hover-zoom hover-shadow ripple rounded">
<img src="${item.image}" class="img-fluid w-100" style="height: 325px" />
<a href="#!">
<div class="mask rounded" style="background-color: rgba(66, 66, 66, 0.2);"></div>
</a>
</div>
<div class="pt-4">
<h5>${item.name}</h5>
<strong>$${item.price}</strong>
</div>
</div>
`;
return template;
});
content.innerHTML = elements.join('\n');
};
getItems().then((items) => {
const filtersInstance = new Filters(filtersElement, {
items,
});
renderItems(items);
filtersInstance.sort('rating', 'desc');
});
filtersElement.addEventListener('update.mdb.filters', (e) => {
spinner.style.display = 'block';
renderItems(e.items);
});
sortSelect.addEventListener('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://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40"],
"condition": "new",
"color": "blue",
"price": 12.99,
"keywords": ["t-shirt", "sweatshitrt"],
"discount": 0,
"gender": "male"
},
{
"id": 2,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "40", "44"],
"condition": "new",
"color": "red",
"price": 12.99,
"discount": 0,
"gender": "male"
},
{
"id": 3,
"category": "shirts",
"name": "Fantasy T-shirt",
"rating": 3,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36"],
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 10,
"gender": "male"
},
{
"id": 4,
"category": "jackets",
"name": "Denim Jacket",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"condition": "new",
"color": "grey",
"price": 40.99,
"discount": 0,
"gender": "unisex"
},
{
"id": 5,
"category": "jeans",
"name": "Ripped jeans",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/11.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "renewed",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 6,
"category": "jeans",
"name": "Boyfriend jeans",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/10.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": false,
"size": ["34", "36", "38", "40"],
"condition": "used",
"color": "blue",
"price": 20.99,
"discount": 5,
"gender": "female"
},
{
"id": 7,
"category": "shirts",
"name": "Ripped sweatshirt",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/7.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["34", "36", "38", "40"],
"condition": "collectible",
"color": "white",
"price": 29.99,
"discount": 5,
"gender": "female"
},
{
"id": 8,
"category": "shirts",
"name": "Longsleeve",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/8.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40"],
"condition": "collectible",
"color": "black",
"price": 120.99,
"discount": 0,
"gender": "male"
},
{
"id": 8,
"category": "shirts",
"name": "Stripped sweatshirt",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/6.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "white",
"price": 32.99,
"discount": 10,
"gender": "female"
},
{
"id": 9,
"category": "trousers",
"name": "Red chinos",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/5.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "red",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 10,
"category": "coats",
"name": "Camel coat",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/4.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "used",
"color": "brown",
"price": 62.99,
"discount": 10,
"gender": "female"
},
{
"id": 11,
"category": "jeans",
"name": "Blue jeans",
"rating": 5,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "blue",
"price": 42.99,
"discount": 0,
"gender": "female"
},
{
"id": 12,
"category": "shirts",
"name": "Orange T-shirt",
"rating": 3,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/3.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["40", "38", "36"],
"condition": "new",
"color": "orange",
"price": 12.99,
"discount": 0,
"gender": "female"
},
{
"id": 13,
"category": "skirts",
"name": "Ballerina skirt",
"rating": 4,
"image": "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/2.webp",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
"available": true,
"size": ["38", "36"],
"condition": "collectible",
"color": "white",
"price": 12.99,
"discount": 0,
"gender": "female"
}
]
Filters - API
Usage
Via data attributes
<div id="myFilters" data-mdb-auto-filter="true" data-mdb-items=".filters-item">
<div id="inputsGroup">
<div data-mdb-filter="color">
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="red" />
<label class="form-check-label" for="inlineCheckbox1">Red</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="blue" />
<label class="form-check-label" for="inlineCheckbox2">Blue</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="black" />
<label class="form-check-label" for="inlineCheckbox3">Black</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="gray" />
<label class="form-check-label" for="inlineCheckbox4">Gray</label>
</div>
</div>
<div data-mdb-filter="sale">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="yes" />
<label class="form-check-label" for="inlineCheckbox3">No</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox6" value="no" />
<label class="form-check-label" for="inlineCheckbox4">No</label>
</div>
</div>
</div>
<div class="filters-item" data-mdb-color="blue" data-mdb-sale="no">
<span>Color: blue, Sale: No</span>
</div>
<div class="filters-item" data-mdb-color="red" data-mdb-sale="yes">
<span>Color: red, Sale: No</span>
</div>
<div class="filters-item" data-mdb-color="red" data-mdb-sale="no">
<span>Color: red, Sale: yes</span>
</div>
<div class="filters-item" data-mdb-color="yellow" data-mdb-sale="yes">
<span>Color: yellow, Sale: yes</span>
</div>
</div>
Via JavaScript
const filtersInstance = new Filters(document.getElementById('myFilters'), options)
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('.example-class').filters(options);
});
Options
Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append
the option name to data-mdb-, as in data-mdb-filter="".
| Name | Type | Default | Description |
|---|---|---|---|
items
|
String | - |
Sets a selector for filtering items. |
property
|
String | - |
Defines a filter value for an item. Swap property with a filter name that
your items should have. For multiple properties use array: data-mdb-property = "['red', 'green', 'blue']".
|
filter
|
String | - |
Sets a filter handler to the input group that it is applied to. |
autoFilter
|
String | false |
Applied to an instance enables auto filtering by inputs. |
Methods
| Name | Description | Example |
|---|---|---|
dispose
|
Destroys an Filters instance |
filtersInstance.dispose()
|
filter |
Filters an instance dataset |
filtersInstance.filter(options)
|
getFilters
|
Returns all available filters |
filtersInstance.getFilters()
|
getActiveFilters
|
Returns all active filters |
filtersInstance.getActiveFilters()
|
getInstance
|
Static method which allows you to get the filters instance associated to a DOM element. |
Filters.getInstance(filtersElement)
|
clear |
Clears all filters |
filtersInstance.clear()
|
sort |
Sorts an instance dataset |
filtersInstance.sort(category, order, additionalCustomSort)
|
const filtersElement = document.getElementById('filtersElement');
const filtersInstance = new Filters(filtersElement);
filtersInstance.filter({
color: ['red', 'blue'],
sale: ['no']
});
Events
| Name | Description |
|---|---|
update.mdb.filters
|
This event fires immediately when the instance filters or sort its dataset. |
const filtersElement = document.getElementById('filtersElement');
filtersElement.addEventListener('update.mdb.filters', function (e) {
// do something...
});
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import Filters from 'mdb-filters';