Filters

Vue Bootstrap 5 Filters plugin

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

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

View full screen demo

Basic example - DOM Elements

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

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

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

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

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
        
            
            <template>
              <MDBFilter
                items=".basic-example-item"
                :filters="{ color: colorRadio, sale: saleRadio }"
              >
                <MDBRow class="justify-content-center">
                  <MDBCol md="6">
                    <span class="fa-lg">Filter: Color</span>
                    <MDBRadio
                      label="Black"
                      wrapperClass="mt-3"
                      name="colorRadio"
                      v-model="colorRadio"
                      value="black"
                    />
                    <MDBRadio
                      label="Red"
                      name="colorRadio"
                      v-model="colorRadio"
                      value="red"
                    />
                    <MDBRadio
                      label="Blue"
                      name="colorRadio"
                      v-model="colorRadio"
                      value="blue"
                    />
                    <MDBRadio
                      label="Gray"
                      name="colorRadio"
                      v-model="colorRadio"
                      value="gray"
                    />
                  </MDBCol>
                  <MDBCol md="6">
                    <span class="fa-lg mb-5">Filter: Sale</span>
                    <MDBRadio
                      label="Yes"
                      wrapperClass="mt-3"
                      name="saleRadio"
                      v-model="saleRadio"
                      value="yes"
                    />
                    <MDBRadio
                      label="No"
                      name="saleRadio"
                      v-model="saleRadio"
                      value="no"
                    />
                    <MDBBtn
                      color="primary"
                      class="mt-3"
                      id="reset-button"
                      @click="resetRadios"
                    >
                      Clear all filters
                    </MDBBtn  >
                  </MDBCol>
                </MDBRow>
                <MDBRow class="text-center">
                  <MDBCol
                    md="4"
                    class="mt-3 basic-example-item"
                    data-mdb-filter-color="black"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 basic-example-item"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-color="gray"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 basic-example-item"
                    data-mdb-filter-color="blue"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="90"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
                        <MDBCardText>90$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 basic-example-item"
                    data-mdb-filter-color="red"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="120"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Red Hoodie</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">150$</span>
                          <span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 basic-example-item"
                    data-mdb-filter-color="black"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 basic-example-item"
                    data-mdb-filter-color="gray"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                </MDBRow>
              </MDBFilter>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBRadio,
                MDBCard,
                MDBCardImg,
                MDBCardBody,
                MDBCardTitle,
                MDBCardText,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBRadio,
                  MDBCard,
                  MDBCardImg,
                  MDBCardBody,
                  MDBCardTitle,
                  MDBCardText,
                  MDBBtn,
                },
                setup() {
                  const colorRadio = ref("");
                  const saleRadio = ref("");
                  const resetRadios = () => {
                    colorRadio.value = "";
                    saleRadio.value = "";
                  };
                  return {
                    colorRadio,
                    saleRadio,
                    resetRadios,
                  };
                },
              };
            </script>
          
        
    

Checkbox example

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

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

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
        
            
            <template>
              <MDBFilter
                items=".checkbox-example-item"
                :filters="{ color: colorCheckboxes, sale: saleCheckboxes }"
              >
                <MDBRow class="justify-content-center">
                  <MDBCol md="6">
                    <span class="fa-lg">Filter: Color</span>
                    <MDBCheckbox
                      label="Red"
                      v-model="colorCheckboxes.red"
                      wrapperClass="mt-3"
                    />
                    <MDBCheckbox label="Blue" v-model="colorCheckboxes.blue" />
                    <MDBCheckbox label="Black" v-model="colorCheckboxes.black" />
                    <MDBCheckbox label="Gray" v-model="colorCheckboxes.gray" />
                  </MDBCol>
                  <MDBCol md="6">
                    <span class="fa-lg mb-5">Filter: Sale</span>
                    <MDBCheckbox
                      label="Yes"
                      wrapperClass="mt-3"
                      v-model="saleCheckboxes.yes"
                    />
                    <MDBCheckbox label="No" v-model="saleCheckboxes.no" />
                    <MDBBtn
                      color="primary"
                      class="mt-3"
                      id="reset-button"
                      @click="resetCheckboxes"
                    >
                      Clear all filters
                    </MDBBtn  >
                  </MDBCol>
                </MDBRow>
                <MDBRow class="text-center">
                  <MDBCol
                    md="4"
                    class="mt-3 checkbox-example-item"
                    data-mdb-filter-color="black"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 checkbox-example-item"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-color="gray"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 checkbox-example-item"
                    data-mdb-filter-color="blue"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="90"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
                        <MDBCardText>90$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 checkbox-example-item"
                    data-mdb-filter-color="red"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="120"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Red Hoodie</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">150$</span>
                          <span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 checkbox-example-item"
                    data-mdb-filter-color="black"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 checkbox-example-item"
                    data-mdb-filter-color="gray"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                </MDBRow>
              </MDBFilter>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBCheckbox,
                MDBCard,
                MDBCardImg,
                MDBCardBody,
                MDBCardTitle,
                MDBCardText,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBCheckbox,
                  MDBCard,
                  MDBCardImg,
                  MDBCardBody,
                  MDBCardTitle,
                  MDBCardText,
                  MDBBtn,
                },
                setup() {
                  const colorCheckboxes = ref({
                    red: false,
                    blue: false,
                    black: false,
                    gray: false,
                  });
                  const saleCheckboxes = ref({
                    yes: false,
                    no: false,
                  });
                  const resetCheckboxes = () => {
                    Object.keys(colorCheckboxes.value).forEach((key) => {
                      colorCheckboxes.value[key] = false;
                    });
                    Object.keys(saleCheckboxes.value).forEach((key) => {
                      saleCheckboxes.value[key] = false;
                    });
                  };
                  return {
                    colorCheckboxes,
                    saleCheckboxes,
                    resetCheckboxes,
                  };
                },
              };
            </script>
          
        
    

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
        
            
            <template>
              <MDBFilter
              items=".color-example-item"
              :filters="{ color: colorButtonsRadio }"
            >
              <MDBRow class="justify-content-center">
                <MDBCol md="12" class="text-center mb-3">
                  <p class="fa-lg mt-2 mb-4">Filter: Color</p>
                  <MDBRadio
                    inline
                    label=" "
                    labelClass="btn bg-danger btn-rounded p-4"
                    name="colorButtonsRadio"
                    v-model="colorButtonsRadio"
                    value="red"
                    hidden
                  />
                  <MDBRadio
                    inline
                    label=" "
                    labelClass="btn bg-primary btn-rounded p-4"
                    name="colorButtonsRadio"
                    v-model="colorButtonsRadio"
                    value="blue"
                    hidden
                  />
                  <MDBRadio
                    inline
                    label=" "
                    labelClass="btn bg-dark btn-rounded p-4"
                    name="colorButtonsRadio"
                    v-model="colorButtonsRadio"
                    value="black"
                    hidden
                  />
                  <MDBRadio
                    inline
                    label=" "
                    labelClass="btn bg-dark opacity-50 btn-rounded p-4"
                    name="colorButtonsRadio"
                    v-model="colorButtonsRadio"
                    value="gray"
                    hidden
                  />
                </MDBCol>
                <MDBCol md="12" class="my-3 text-center">
                  <MDBBtn
                    color="primary"
                    class="mt-3"
                    id="reset-button"
                    @click="resetButtonsRadio"
                  >
                    Clear all filters
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
              <MDBRow class="text-center">
                <MDBCol
                  md="4"
                  class="mt-3 color-example-item"
                  data-mdb-filter-color="black"
                  data-mdb-filter-sale="no"
                  data-mdb-filter-price="100"
                >
                  <MDBCard class="shadow-2">
                    <MDBCardImg
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                      top
                      alt="..."
                    />
                    <MDBCardBody>
                      <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                      <MDBCardText>100$</MDBCardText>
                      <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
                <MDBCol
                  md="4"
                  class="col-md-4 mt-3 color-example-item"
                  data-mdb-filter-sale="yes"
                  data-mdb-filter-color="gray"
                  data-mdb-filter-price="80"
                >
                  <MDBCard class="shadow-2">
                    <MDBCardImg
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                      top
                      alt="..."
                    />
                    <MDBCardBody>
                      <MDBCardTitle>Gray Jumper</MDBCardTitle>
                      <MDBCardText>
                        <span class="text-decoration-line-through">100$</span>
                        <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                      >
                      <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
                <MDBCol
                  md="4"
                  class="col-md-4 mt-3 color-example-item"
                  data-mdb-filter-color="blue"
                  data-mdb-filter-sale="no"
                  data-mdb-filter-price="90"
                >
                  <MDBCard class="shadow-2">
                    <MDBCardImg
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
                      top
                      alt="..."
                    />
                    <MDBCardBody>
                      <MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
                      <MDBCardText>90$</MDBCardText>
                      <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
                <MDBCol
                  md="4"
                  class="col-md-4 mt-3 color-example-item"
                  data-mdb-filter-color="red"
                  data-mdb-filter-sale="yes"
                  data-mdb-filter-price="120"
                >
                  <MDBCard class="shadow-2">
                    <MDBCardImg
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
                      top
                      alt="..."
                    />
                    <MDBCardBody>
                      <MDBCardTitle>Red Hoodie</MDBCardTitle>
                      <MDBCardText>
                        <span class="text-decoration-line-through">150$</span>
                        <span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
                      >
                      <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
                <MDBCol
                  md="4"
                  class="col-md-4 mt-3 color-example-item"
                  data-mdb-filter-color="black"
                  data-mdb-filter-sale="no"
                  data-mdb-filter-price="100"
                >
                  <MDBCard class="shadow-2">
                    <MDBCardImg
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                      top
                      alt="..."
                    />
                    <MDBCardBody>
                      <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                      <MDBCardText>100$</MDBCardText>
                      <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
                <MDBCol
                  md="4"
                  class="col-md-4 mt-3 color-example-item"
                  data-mdb-filter-color="gray"
                  data-mdb-filter-sale="yes"
                  data-mdb-filter-price="80"
                >
                  <MDBCard class="shadow-2">
                    <MDBCardImg
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                      top
                      alt="..."
                    />
                    <MDBCardBody>
                      <MDBCardTitle>Gray Jumper</MDBCardTitle>
                      <MDBCardText>
                        <span class="text-decoration-line-through">100$</span>
                        <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                      >
                      <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
              </MDBRow>
            </MDBFilter>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBRadio,
                MDBCard,
                MDBCardImg,
                MDBCardBody,
                MDBCardTitle,
                MDBCardText,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBRadio,
                  MDBCard,
                  MDBCardImg,
                  MDBCardBody,
                  MDBCardTitle,
                  MDBCardText,
                  MDBBtn,
                },
                setup() {
                  const colorButtonsRadio = ref("");
                  const resetButtonsRadio = () => {
                    colorButtonsRadio.value = "";
                  };
                  return {
                    colorButtonsRadio,
                    resetButtonsRadio,
                  };
                },
              };
            </script>
          
        
    

Size example

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

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
        
            
            <template>
              <MDBFilter
                items=".size-item"
                :filters="{ size: sizeCheckboxes, sale: saleRadio2 }"
              >
                <MDBRow class="justify-content-center">
                  <MDBCol md="6" data-mdb-filter-filter="size">
                    <span class="fa-lg">Filter: Size</span>
                    <MDBCheckbox
                      label="36"
                      v-model="sizeCheckboxes['36']"
                      wrapperClass="mt-3"
                    />
                    <MDBCheckbox label="38" v-model="sizeCheckboxes['38']" />
                    <MDBCheckbox label="40" v-model="sizeCheckboxes['40']" />
                    <MDBCheckbox label="42" v-model="sizeCheckboxes['42']" />
                  </MDBCol>
                  <MDBCol md="6">
                    <span class="fa-lg mb-5">Filter: Sale</span>
                    <MDBRadio
                      label="Yes"
                      wrapperClass="mt-3"
                      name="saleRadio2"
                      v-model="saleRadio2"
                      value="yes"
                    />
                    <MDBRadio
                      label="No"
                      name="saleRadio2"
                      v-model="saleRadio2"
                      value="no"
                    />
                    <MDBBtn
                      color="primary"
                      class="mt-3"
                      id="reset-button"
                      @click="resetFilters"
                    >
                      Clear all filters
                    </MDBBtn  >
                  </MDBCol>
                </MDBRow>
                <MDBRow class="text-center">
                  <MDBCol
                    md="4"
                    class="mt-3 size-item"
                    data-mdb-filter-size="[36,38,40,42]"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 size-item"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-size="[40,42]"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 size-item"
                    data-mdb-filter-size="[38]"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="90"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
                        <MDBCardText>90$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 size-item"
                    data-mdb-filter-size="[36]"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="120"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Red Hoodie</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">150$</span>
                          <span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 size-item"
                    data-mdb-filter-size="[36,40,42]"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 size-item"
                    data-mdb-filter-size="[36,38,40]"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                        >
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                </MDBRow>
              </MDBFilter>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBCheckbox,
                MDBRadio,
                MDBCard,
                MDBCardImg,
                MDBCardBody,
                MDBCardTitle,
                MDBCardText,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBCheckbox,
                  MDBRadio,
                  MDBCard,
                  MDBCardImg,
                  MDBCardBody,
                  MDBCardTitle,
                  MDBCardText,
                  MDBBtn,
                },
                setup() {
                  const sizeCheckboxes = ref({
                    36: false,
                    38: false,
                    40: false,
                    42: false,
                  });
                  const saleRadio2 = ref("");
                  const resetFilters = () => {
                    Object.keys(sizeCheckboxes.value).forEach((key) => {
                      sizeCheckboxes.value[key] = false;
                    });
                    saleRadio2.value = "";
                  };
                  return {
                    sizeCheckboxes,
                    saleRadio2,
                    resetFilters,
                  };
                },
              };
            </script>
          
        
    

Animations with DOM Elements

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

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

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
        
            
            <template>
              <MDBFilter
                items=".animation-dom-item"
                data-mdb-filter-animation="fade-in"
                :filters="{ color: colorRadio3, sale: saleRadio3 }"
              >
                <MDBRow class="justify-content-center">
                  <MDBCol md="6">
                    <span class="fa-lg">Filter: Color</span>
                    <MDBRadio
                      label="Black"
                      wrapperClass="mt-3"
                      name="colorRadio3"
                      v-model="colorRadio3"
                      value="black"
                    />
                    <MDBRadio
                      label="Red"
                      name="colorRadio3"
                      v-model="colorRadio3"
                      value="red"
                    />
                    <MDBRadio
                      label="Blue"
                      name="colorRadio3"
                      v-model="colorRadio3"
                      value="blue"
                    />
                    <MDBRadio
                      label="Gray"
                      name="colorRadio3"
                      v-model="colorRadio3"
                      value="gray"
                    />
                  </MDBCol>
                  <MDBCol md="6">
                    <span class="fa-lg mb-5">Filter: Sale</span>
                    <MDBRadio
                      label="Yes"
                      wrapperClass="mt-3"
                      name="saleRadio3"
                      v-model="saleRadio3"
                      value="yes"
                    />
                    <MDBRadio
                      label="No"
                      name="saleRadio3"
                      v-model="saleRadio3"
                      value="no"
                    />
                    <MDBBtn
                      color="primary"
                      class="mt-3"
                      id="reset-button"
                      @click="resetRadios3"
                    >
                      Clear all filters
                    </MDBBtn>
                  </MDBCol>
                </MDBRow>
                <MDBRow class="text-center">
                  <MDBCol
                    md="4"
                    class="mt-3 animation-dom-item"
                    data-mdb-filter-animation="fade-in"
                    data-mdb-filter-color="black"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 animation-dom-item"
                    data-mdb-filter-animation="fade-in"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-color="gray"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span>
                        </MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 animation-dom-item"
                    data-mdb-filter-animation="fade-in"
                    data-mdb-filter-color="blue"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="90"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
                        <MDBCardText>90$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 animation-dom-item"
                    data-mdb-filter-animation="fade-in"
                    data-mdb-filter-color="red"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="120"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Red Hoodie</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">150$</span>
                          <span class="fw-bold fa-lg ps-1">120$</span>
                        </MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 animation-dom-item"
                    data-mdb-filter-animation="fade-in"
                    data-mdb-filter-color="black"
                    data-mdb-filter-sale="no"
                    data-mdb-filter-price="100"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                        <MDBCardText>100$</MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol
                    md="4"
                    class="col-md-4 mt-3 animation-dom-item"
                    data-mdb-filter-animation="fade-in"
                    data-mdb-filter-color="gray"
                    data-mdb-filter-sale="yes"
                    data-mdb-filter-price="80"
                  >
                    <MDBCard class="shadow-2">
                      <MDBCardImg
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                        top
                        alt="..."
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Gray Jumper</MDBCardTitle>
                        <MDBCardText>
                          <span class="text-decoration-line-through">100$</span>
                          <span class="fw-bold fa-lg ps-1">80$</span>
                        </MDBCardText>
                        <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                </MDBRow>
              </MDBFilter>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBRadio,
                MDBCard,
                MDBCardImg,
                MDBCardBody,
                MDBCardTitle,
                MDBCardText,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBRadio,
                  MDBCard,
                  MDBCardImg,
                  MDBCardBody,
                  MDBCardTitle,
                  MDBCardText,
                  MDBBtn,
                },
                setup() {
                  const colorRadio3 = ref("");
                  const saleRadio3 = ref("");
                  const resetRadios3 = () => {
                    colorRadio3.value = "";
                    saleRadio3.value = "";
                  };
                  return {
                    colorRadio3,
                    saleRadio3,
                    resetRadios3,
                  };
                },
              };
            </script>
          
        
    

Data structure - array

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

Filter: Color
Filter: Sale
        
            
            <template>
              <MDBRow class="justify-content-center">
                <MDBCol md="6">
                  <span class="fa-lg">Filter: Color</span>
                  <MDBRadio
                    label="Black"
                    wrapperClass="mt-3"
                    name="colorRadio4"
                    v-model="colorRadio4"
                    value="black"
                  />
                  <MDBRadio
                    label="Red"
                    name="colorRadio4"
                    v-model="colorRadio4"
                    value="red"
                  />
                  <MDBRadio
                    label="Blue"
                    name="colorRadio4"
                    v-model="colorRadio4"
                    value="blue"
                  />
                  <MDBRadio
                    label="Gray"
                    name="colorRadio4"
                    v-model="colorRadio4"
                    value="gray"
                  />
                </MDBCol>
                <MDBCol md="6">
                  <span class="fa-lg mb-5">Filter: Sale</span>
                  <MDBRadio
                    label="Yes"
                    wrapperClass="mt-3"
                    name="saleRadio4"
                    v-model="saleRadio4"
                    value="yes"
                  />
                  <MDBRadio
                    label="No"
                    name="saleRadio4"
                    v-model="saleRadio4"
                    value="no"
                  />
                  <MDBBtn
                    color="primary"
                    class="mt-3"
                    id="reset-button"
                    @click="resetRadios4"
                  >
                    Clear all filters
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
              <MDBFilter
                :dataset="filterDataset"
                :template="filterTemplate"
                :filters="{ color: colorRadio4, sale: saleRadio4 }"
                items=".filter-item"
                class="row text-center"
              />
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBRadio,
                MDBBtn
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBRadio,
                  MDBBtn
                },
                setup() {
                  const colorRadio4 = ref("");
                  const saleRadio4 = ref("");
                  const resetRadios4 = () => {
                    colorRadio4.value = "";
                    saleRadio4.value = "";
                  };
                  const filterDataset = ref([
                    {
                      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.jpg",
                    },
                    {
                      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.jpg",
                    },
                    {
                      id: 3,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 4,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 5,
                      color: "red",
                      price: 120,
                      sale: "yes",
                      product: "Red Hoodie",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
                    },
                    {
                      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.jpg",
                    },
                  ]);
                  const filterTemplate = (item) => `
                    <div class="col-md-4 mt-3 filter-item" data-mdb-filter-color="${item.color}" data-mdb-filter-sale="${item.sale}">
                      <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 {
                    colorRadio4,
                    saleRadio4,
                    resetRadios4,
                    filterDataset,
                    filterTemplate,
                  };
                },
              };
            </script>
          
        
    

Spinner & Asynchronous Data example

Price:

        
            
            <template>
              <MDBRow class="justify-content-center mb-5">
                <p class="text-center fa-lg fw-bold">Price:</p>
                <MDBCol md="3" class="mt-3 text-center">
                  <MDBInput
                    type="number"
                    v-model="defaultMinPrice"
                    @change="handleMinPriceChange"
                  />
                </MDBCol>
                <MDBCol md="3" class="mt-3 text-center">
                  <MDBInput
                    type="number"
                    v-model="defaultMaxPrice"
                    @change="handleMaxPriceChange"
                  />
                </MDBCol>
              </MDBRow>
              <MDBRow v-if="loading" class="text-center mb-5">
                <MDBCol md="12">
                  <MDBSpinner grow color="primary" />
                </MDBCol>
              </MDBRow>
              <MDBFilter
                v-else
                :dataset="filterDataset2"
                :template="filterTemplate2"
                :filters="{ price: { min: minPrice, max: maxPrice } }"
                items=".filter-item"
                class="row text-center mt-3"
                style="max-height: 800px; overflow-y: scroll"
              />
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBInput,
                MDBSpinner,
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBInput,
                  MDBSpinner,
                },
                setup() {
                  const defaultMinPrice = ref(0);
                  const defaultMaxPrice = ref(200);
                  const minPrice = ref(0);
                  const maxPrice = ref(200);
                  const loading = ref(true);
                  const filterDataset2 = ref([]);
                  const loadData = () => {
                    loading.value = true;
                    setTimeout(() => {
                      fetch("products.json")
                        .then((response) => response.json())
                        .then((data) => {
                          filterDataset2.value = data;
                          loading.value = false;
                        });
                    }, 1000);
                  };
                  const filterTemplate2 = (item) => `
                    <div class="col-md-4 mt-3 filter-item" data-mdb-filter-price="${item.price}">
                      <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>
                  `;
                  loadData();
                  const handleMinPriceChange = (event) => {
                    minPrice.value = event.target.value;
                    loadData();
                  };
                  const handleMaxPriceChange = (event) => {
                    maxPrice.value = event.target.value;
                    loadData();
                  };
                  return {
                    defaultMinPrice,
                    defaultMaxPrice,
                    minPrice,
                    maxPrice,
                    filterDataset2,
                    filterTemplate2,
                    loading,
                    handleMinPriceChange,
                    handleMaxPriceChange,
                  };
                },
              };
            </script>
          
        
    
        
            
            [
              {
                "id": 1,
                "category": "shirts",
                "name": "Fantasy T-shirt",
                "rating": 4,
                "image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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 data-mdb-filter-animation attribute with animation type to filtrable elements to animate them. The full list of available animations you can find here.

Filter: Color
Filter: Sale
        
            
            <template>
              <MDBRow class="justify-content-center">
                <MDBCol md="6">
                  <span class="fa-lg">Filter: Color</span>
                  <MDBRadio
                    label="Black"
                    wrapperClass="mt-3"
                    name="colorRadio5"
                    v-model="colorRadio5"
                    value="black"
                  />
                  <MDBRadio
                    label="Red"
                    name="colorRadio5"
                    v-model="colorRadio5"
                    value="red"
                  />
                  <MDBRadio
                    label="Blue"
                    name="colorRadio5"
                    v-model="colorRadio5"
                    value="blue"
                  />
                  <MDBRadio
                    label="Gray"
                    name="colorRadio5"
                    v-model="colorRadio5"
                    value="gray"
                  />
                </MDBCol>
                <MDBCol md="6">
                  <span class="fa-lg mb-5">Filter: Sale</span>
                  <MDBRadio
                    label="Yes"
                    wrapperClass="mt-3"
                    name="saleRadio5"
                    v-model="saleRadio5"
                    value="yes"
                  />
                  <MDBRadio
                    label="No"
                    name="saleRadio5"
                    v-model="saleRadio5"
                    value="no"
                  />
                  <MDBBtn
                    color="primary"
                    class="mt-3"
                    id="reset-button"
                    @click="resetRadios5"
                  >
                    Clear all filters
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
              <MDBFilter
                :dataset="filterDataset5"
                :template="filterTemplate5"
                :filters="{ color: colorRadio5, sale: saleRadio5 }"
                items=".filter-item"
                class="row text-center"
              />
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBRadio,
                MDBBtn
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBRadio,
                  MDBBtn
                },
                setup() {
                  const colorRadio5 = ref("");
                  const saleRadio5 = ref("");
                  const resetRadios5 = () => {
                    colorRadio5.value = "";
                    saleRadio5.value = "";
                  };
                  const filterDataset5 = ref([
                    {
                      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.jpg",
                    },
                    {
                      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.jpg",
                    },
                    {
                      id: 3,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 4,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 5,
                      color: "red",
                      price: 120,
                      sale: "yes",
                      product: "Red Hoodie",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
                    },
                    {
                      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.jpg",
                    },
                  ]);
                  const filterTemplate5 = (item) => `
                    <div
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-color="${item.color}"
                      data-mdb-filter-sale="${item.sale}"
                      data-mdb-filter-animation="fade-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 {
                    colorRadio5,
                    saleRadio5,
                    resetRadios5,
                    filterDataset5,
                    filterTemplate5,
                  };
                },
              };
            </script>
          
        
    

Filter and sort

Filter: Color
Filter: Sale
        
            
            <template>
              <MDBRow>
                <MDBCol md="6">
                  <span class="fa-lg">Filter: Color</span>
                  <MDBRadio label="Black" wrapperClass="mt-3" name="colorRadio6" v-model="colorRadio6" value="black" />
                  <MDBRadio label="Red" name="colorRadio6" v-model="colorRadio6" value="red" />
                  <MDBRadio label="Blue" name="colorRadio6" v-model="colorRadio6" value="blue" />
                  <MDBRadio label="Gray" name="colorRadio6" v-model="colorRadio6" value="gray" />
                </MDBCol>
                <MDBCol md="6">
                  <span class="fa-lg mb-5">Filter: Sale</span>
                  <MDBRadio label="Yes" wrapperClass="mt-3" name="saleRadio6" v-model="saleRadio6" value="yes" />
                  <MDBRadio label="No" name="saleRadio6" v-model="saleRadio6" value="no" />
                  <MDBBtn color="primary" class="mt-3" id="reset-button" @click="resetRadios6">
                    Clear all filters
                  </MDBBtn>
                <MDBCol>
                <MDBCol md="8" class="my-5">
                  <MDBSelect label="Sort" :preselect="false" placeholder="Choose category" v-model:options="sortingOptions6"
                    v-model:selected="sortingSelected6" />
                </MDBCol>
              </MDBRow>
              <MDBFilter :dataset="filterDataset6" :template="filterTemplate6" :filters="{ color: colorRadio6, sale: saleRadio6 }"
                :sort="sort6" items=".filter-item" class="row text-center" />
            </template>
          
        
    
        
            
            <script>
              import { ref, watch } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBRadio,
                MDBBtn,
                MDBSelect
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBRadio,
                  MDBBtn,
                  MDBSelect
                },
                setup() {
                  const colorRadio6 = ref("");
                  const saleRadio6 = ref("");
                  const resetRadios6 = () => {
                    colorRadio6.value = "";
                    saleRadio6.value = "";
                  };
                  const filterDataset6 = ref([
                    {
                      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.jpg",
                    },
                    {
                      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.jpg",
                    },
                    {
                      id: 3,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 4,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 5,
                      color: "red",
                      price: 120,
                      sale: "yes",
                      product: "Red Hoodie",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
                    },
                    {
                      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.jpg",
                    },
                  ]);
                  const filterTemplate6 = (item) => `
                    <div
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-color="${item.color}"
                      data-mdb-filter-sale="${item.sale}"
                      data-mdb-filter-animation="fade-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>
                  `;
                  const sortingOptions6 = ref([
                    { text: "Product name ascending", value: 1 },
                    { text: "Product name descending", value: 2 },
                    { text: "Highest price", value: 3 },
                    { text: "Lowest price", value: 4 },
                  ]);
                  const sortingSelected6 = ref("");
                  const sort6 = ref({});
                  watch(
                    () => sortingSelected6.value,
                    (selected) => {
                      switch (selected) {
                        case 1: {
                          sort6.value.category = "product";
                          sort6.value.order = "asc";
                          break;
                        }
                        case 2: {
                          sort6.value.category = "product";
                          sort6.value.order = "desc";
                          break;
                        }
                        case 3: {
                          sort6.value.category = "price";
                          sort6.value.order = "desc";
                          break;
                        }
                        case 4: {
                          sort6.value.category = "price";
                          sort6.value.order = "asc";
                          break;
                        }
                        default: {
                          return;
                        }
                      }
                    }
                  );
                  return {
                    colorRadio6,
                    saleRadio6,
                    resetRadios6,
                    filterDataset6,
                    filterTemplate6,
                    sortingOptions6,
                    sortingSelected6,
                    sort6
                  };
                },
              };
            </script>
          
        
    

Customization - custom filter

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

Price:

Current: 80$

Current: 120$

...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
        
            
            <template>
              <MDBFilter
                  :filters="{ price: { min: minRange, max: maxRange } }"
                  items=".filter-item"
                  class="row text-center mt-3"
                >
                  <MDBRow class="justify-content-center mb-5">
                    <MDBCol md="12" class="mt-3 text-center">
                      <p class="fa-lg">Price:</p>
                      <MDBRange
                        label="Min"
                        v-model="defaultMinRange"
                        @change="handleMinRangeChange"
                        :min="80"
                        :max="120"
                      />
                      <p id="min-val">Current: {{ minRange }}$</p>
                      <MDBRange
                        label="Max"
                        v-model="defaultMaxRange"
                        @change="handleMaxRangeChange"
                        :min="80"
                        :max="120"
                      />
                      <p id="min-val">Current: {{ maxRange }}$</p>
                    </MDBCol>
                  </MDBRow>
                  <MDBRow class="text-center">
                    <MDBCol
                      md="4"
                      class="mt-3 filter-item"
                      data-mdb-filter-color="black"
                      data-mdb-filter-sale="no"
                      data-mdb-filter-price="100"
                    >
                      <MDBCard class="shadow-2">
                        <MDBCardImg
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                          top
                          alt="..."
                        />
                        <MDBCardBody>
                          <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                          <MDBCardText>100$</MDBCardText>
                          <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                    <MDBCol
                      md="4"
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-sale="yes"
                      data-mdb-filter-color="gray"
                      data-mdb-filter-price="80"
                    >
                      <MDBCard class="shadow-2">
                        <MDBCardImg
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                          top
                          alt="..."
                        />
                        <MDBCardBody>
                          <MDBCardTitle>Gray Jumper</MDBCardTitle>
                          <MDBCardText>
                            <span class="text-decoration-line-through">100$</span>
                            <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                          >
                          <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                    <MDBCol
                      md="4"
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-color="blue"
                      data-mdb-filter-sale="no"
                      data-mdb-filter-price="90"
                    >
                      <MDBCard class="shadow-2">
                        <MDBCardImg
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg"
                          top
                          alt="..."
                        />
                        <MDBCardBody>
                          <MDBCardTitle>Blue Jeans Jacket</MDBCardTitle>
                          <MDBCardText>90$</MDBCardText>
                          <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                    <MDBCol
                      md="4"
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-color="red"
                      data-mdb-filter-sale="yes"
                      data-mdb-filter-price="120"
                    >
                      <MDBCard class="shadow-2">
                        <MDBCardImg
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg"
                          top
                          alt="..."
                        />
                        <MDBCardBody>
                          <MDBCardTitle>Red Hoodie</MDBCardTitle>
                          <MDBCardText>
                            <span class="text-decoration-line-through">150$</span>
                            <span class="fw-bold fa-lg ps-1">120$</span></MDBCardText
                          >
                          <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                    <MDBCol
                      md="4"
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-color="black"
                      data-mdb-filter-sale="no"
                      data-mdb-filter-price="100"
                    >
                      <MDBCard class="shadow-2">
                        <MDBCardImg
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg"
                          top
                          alt="..."
                        />
                        <MDBCardBody>
                          <MDBCardTitle>Black Jeans Jacket</MDBCardTitle>
                          <MDBCardText>100$</MDBCardText>
                          <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                    <MDBCol
                      md="4"
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-color="gray"
                      data-mdb-filter-sale="yes"
                      data-mdb-filter-price="80"
                    >
                      <MDBCard class="shadow-2">
                        <MDBCardImg
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg"
                          top
                          alt="..."
                        />
                        <MDBCardBody>
                          <MDBCardTitle>Gray Jumper</MDBCardTitle>
                          <MDBCardText>
                            <span class="text-decoration-line-through">100$</span>
                            <span class="fw-bold fa-lg ps-1">80$</span></MDBCardText
                          >
                          <MDBBtn tag="a" color="primary">Buy now</MDBBtn>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBFilter>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBRange,
                MDBCard,
                MDBCardImg,
                MDBCardBody,
                MDBCardTitle,
                MDBCardText,
                MDBBtn,
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBRange,
                  MDBCard,
                  MDBCardImg,
                  MDBCardBody,
                  MDBCardTitle,
                  MDBCardText,
                  MDBBtn,
                },
                setup() {
                  const defaultMinRange = ref(80);
                  const defaultMaxRange = ref(120);
                  const minRange = ref(80);
                  const maxRange = ref(120);
                  const handleMinRangeChange = (event) => {
                    minRange.value = event.target.value;
                  };
                  const handleMaxRangeChange = (event) => {
                    maxRange.value = event.target.value;
                  };
                  return {
                    defaultMinRange,
                    defaultMaxRange,
                    minRange,
                    maxRange,
                    handleMinRangeChange,
                    handleMaxRangeChange,
                  };
                },
              };
            </script>
          
        
    

Custom sort

        
            
            <template>
              <MDBRow class="justify-content-center">
                <MDBCol md="4" class="text-center">
                  <MDBBtn color="primary" @click="customSort('product', 'asc')">
                    Sort by product name ascending
                  </MDBBtn>
                </MDBCol>
                <MDBCol md="4" class="text-center">
                  <MDBBtn color="primary" @click="customSort('product', 'desc')">
                    Sort by product name descending
                  </MDBBtn>
                </MDBCol>
              </MDBRow>
              <MDBFilter
                :dataset="filterDataset7"
                :template="filterTemplate7"
                :sort="sort7"
                items=".filter-item"
                class="row text-center"
              />
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBFilter } from "mdb-vue-filters";
              import {
                MDBRow,
                MDBCol,
                MDBBtn
              } from "mdb-vue-ui-kit";
              export default {
                name: "App",
                components: {
                  MDBFilter,
                  MDBRow,
                  MDBCol,
                  MDBBtn
                },
                setup() {
                  const sort7 = ref({});
                  const customSort = (category, order) => {
                    sort7.value.category = category;
                    sort7.value.order = order;
                  };
                  const filterDataset7 = ref([
                    {
                      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.jpg",
                    },
                    {
                      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.jpg",
                    },
                    {
                      id: 3,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 4,
                      color: "gray",
                      price: 80,
                      sale: "yes",
                      product: "Gray Jumper",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.jpg",
                    },
                    {
                      id: 5,
                      color: "red",
                      price: 120,
                      sale: "yes",
                      product: "Red Hoodie",
                      img: "https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.jpg",
                    },
                    {
                      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.jpg",
                    },
                  ]);
                  const filterTemplate7 = (item) => `
                    <div
                      class="col-md-4 mt-3 filter-item"
                      data-mdb-filter-color="${item.color}"
                      data-mdb-filter-sale="${item.sale}"
                    >
                      <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 {
                    sort7,
                    customSort,
                    filterDataset7,
                    filterTemplate7,
                  };
                },
              };
            </script>
          
        
    

Full screen example

        
            
            <template>
              <header>
                <MDBNavbar expand="lg" light bg="white" position="sticky" container>
                  <MDBNavbarToggler @click="collapse = !collapse" target="#navbarSupportedContent"></MDBNavbarToggler>
                  <MDBNavbarBrand href="#">
                    <MDBIcon iconStyle="fab" icon="mdb" size="2x" alt="mdb logo" />
                  </MDBNavbarBrand>
                  <MDBCollapse v-model="collapse" id="navbarSupportedContent">
                    <MDBNavbarNav right>
                      <MDBNavbarItem to="/full-page-example" active class="my-auto">
                        <MDBBadge color="danger" rounded pill>1</MDBBadge>
                        <MDBIcon icon="shopping-cart" />
                      </MDBNavbarItem>
                      <MDBNavbarItem class="my-auto">
                        <!-- Navbar dropdown -->
                        <MDBDropdown class="nav-item" v-model="dropdown">
                          <MDBDropdownToggle tag="a" class="nav-link" @click="dropdown = !dropdown"><i
                              class="flag-united-kingdom flag m-0"></i>
                          </MDBDropdownToggle>
                          <MDBDropdownMenu>
                            <MDBDropdownItem href="#">Action</MDBDropdownItem>
                            <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
                            <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
                          </MDBDropdownMenu>
                        </MDBDropdown>
                      </MDBNavbarItem>
                      <MDBNavbarItem to="/full-page-example" active class="my-auto">Shop</MDBNavbarItem>
                      <MDBNavbarItem to="/full-page-example" active class="my-auto">Contact</MDBNavbarItem>
                      <MDBNavbarItem to="/full-page-example" active class="my-auto">Sign in</MDBNavbarItem>
                      <MDBNavbarItem to="/full-page-example" class="my-auto">
                        <MDBBtn outline="dark" rounded>Sign up</MDBBtn>
                      </MDBNavbarItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBNavbar>
                <div class="p-5 text-center bg-image" style="
                    background-image: url('https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.jpg');
                    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>
              </header>
              <main>
                <MDBContainer class="mt-5">
                  <MDBRow>
                    <MDBCol md="4">
                      <section>
                        <h5>Filters</h5>
                        <section class="mb-4">
                          <h6 class="fw-bold mb-3">Condition</h6>
                          <MDBCheckbox v-model="condition.new" label="New" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBCheckbox v-model="condition.used" label="Used" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBCheckbox v-model="condition.collectible" label="Collectible" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBCheckbox v-model="condition.renewed" label="Renewed" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                        </section>
                        <section class="mb-4">
                          <h6 class="fw-bold mb-3">Avg. Customer Review</h6>
                          <MDBRating v-model="rating">
                            <MDBRatingItem title="1" :index="1" />
                            <MDBRatingItem title="2" :index="2" />
                            <MDBRatingItem title="3" :index="3" />
                            <MDBRatingItem title="4" :index="4" />
                            <MDBRatingItem title="5" :index="5" />
                          </MDBRating>
                        </section>
                        <section class="mb-4">
                          <h6 class="fw-bold mb-3">Price</h6>
                          <MDBRadio name="price" v-model="price" value="under25" label="Under $25" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBRadio name="price" v-model="price" value="25to50" label="$25 to $50" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBRadio name="price" v-model="price" value="50to100" label="$50 to $100" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBRadio name="price" v-model="price" value="100to200" label="$100 to $200" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBRadio name="price" v-model="price" value="over200" label="$200 & above" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                        </section>
                        <section class="mb-4">
                          <h6 class="fw-bold mb-3">Size</h6>
                          <MDBCheckbox v-model="size['34']" label="34" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBCheckbox v-model="size['36']" label="36" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBCheckbox v-model="size['38']" label="38" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                          <MDBCheckbox v-model="size['40']" label="40" wrapperClass="mb-3"
                            labelClass="form-check-label text-uppercase small text-muted" />
                        </section>
                        <section class="mb-4">
                          <h6 class="fw-bold mb-3">Color</h6>
                          <MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-white btn-rounded p-3"
                            name="colorButtonsRadio" v-model="color" value="white" hidden />
                          <MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3"
                            labelClass="btn bg-black opacity-50 btn-rounded p-3" name="colorButtonsRadio" v-model="color"
                            value="grey" hidden />
                          <MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-black btn-rounded p-3"
                            name="colorButtonsRadio" v-model="color" value="black" hidden />
                          <MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-primary btn-rounded p-3"
                            name="colorButtonsRadio" v-model="color" value="blue" hidden />
                          <MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-danger btn-rounded p-3"
                            name="colorButtonsRadio" v-model="color" value="red" hidden />
                          <MDBRadio inline label=" " wrapperClass="m-0 p-0 pe-3" labelClass="btn bg-warning btn-rounded p-3"
                            name="colorButtonsRadio" v-model="color" value="orange" hidden />
                        </section>
                      </section>
                    </MDBCol>
                    <MDBCol md="8">
                      <MDBRow class="justify-content-center">
                        <MDBCol md="6" class="my-auto py-3">
                          <MDBSelect label="Sort" placeholder="Choose category" v-model:options="sortingOptions"
                            v-model:selected="sortingSelected" />
                        </MDBCol>
                      </MDBRow>
                      <MDBFilter class="row mb-4" :dataset="filterDataset" :template="filterTemplate" :filters="filters"
                        :sort="sort" items=".filter-item" />
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              </main>
              <footer class="bg-dark text-white text-center text-lg-left">
                <!-- Socials -->
                <div class="bg-primary text-center p-3">
                  <div class="row">
                    <div class="col-md-6">
                      <span class="font-weight-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 mr-1"></i> New York, Avenue Street 10</a>
                        </li>
                        <li class="mb-2">
                          <a href="#!" class="text-white"><i class="fas fa-phone-alt mr-1"></i> 042 876 836 908</a>
                        </li>
                        <li class="mb-2">
                          <a href="#!" class="text-white"><i class="far fa-envelope mr-1"></i> company@example.com</a>
                        </li>
                        <li>
                          <a href="#!" class="text-white"><i class="far fa-clock mr-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>
            </template>
          
        
    
        
            
            <script>
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarBrand,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBCollapse,
                MDBDropdown,
                MDBDropdownToggle,
                MDBDropdownMenu,
                MDBDropdownItem,
                MDBIcon,
                MDBBadge,
                MDBBtn,
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBCheckbox,
                MDBRating,
                MDBRatingItem,
                MDBRadio,
                MDBSelect,
              } from "mdb-vue-ui-kit";
              import MDBFilter from "@/components/MDBFilter";
              import { ref, computed, watch } from "vue";
              export default {
                components: {
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarBrand,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                  MDBDropdown,
                  MDBDropdownToggle,
                  MDBDropdownMenu,
                  MDBDropdownItem,
                  MDBIcon,
                  MDBBadge,
                  MDBBtn,
                  MDBContainer,
                  MDBRow,
                  MDBCol,
                  MDBCheckbox,
                  MDBRating,
                  MDBRatingItem,
                  MDBRadio,
                  MDBSelect,
                  MDBFilter,
                },
                setup() {
                  const collapse = ref(false);
                  const dropdown = ref(false);
                  const condition = ref({
                    new: false,
                    used: false,
                    collectible: false,
                    renewed: false,
                  });
                  const rating = ref(0);
                  const price = ref("");
                  const size = ref({
                    34: false,
                    36: false,
                    38: false,
                    40: false,
                  });
                  const color = ref("");
                  const parsedPrice = computed(() => {
                    if (price.value === "under25") {
                      return { max: 25 };
                    } else if (price.value === "25to50") {
                      return { min: 25, max: 50 };
                    } else if (price.value === "50to100") {
                      return { min: 50, max: 100 };
                    } else if (price.value === "100to200") {
                      return { min: 100, max: 200 };
                    } else if (price.value === "over200") {
                      return { min: 200 };
                    }
                    return "";
                  });
                  const filters = computed(() => ({
                    condition: condition.value,
                    rating: rating.value,
                    price: parsedPrice.value,
                    size: size.value,
                    color: color.value,
                  }));
                  const filterDataset = ref([]);
                  fetch("products.json")
                    .then((response) => response.json())
                    .then((data) => {
                      filterDataset.value = data;
                    });
                  const filterTemplate = (item) => `
                  <div
                    class="col-md-4 my-4 justify-content-center text-center filter-item"
                    data-mdb-filter-condition="${item.condition}"
                    data-mdb-filter-rating="${item.rating}"
                    data-mdb-filter-price="${item.price}"
                    data-mdb-filter-size="${item.size}"
                    data-mdb-filter-color="${item.color}"
                    data-mdb-filter-animation="fade-in"
                  >
                    <div class="bg-image hover-overlay hover-zoom hover-shadow">
                      <img src="${item.image}" class="img-fluid w-100" alt="..." 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>
                `;
                  const sortingOptions = ref([
                    { text: "Best rating", value: 1 },
                    { text: "Lowest price first", value: 2 },
                    { text: "Highest price first", value: 3 },
                  ]);
                  const sortingSelected = ref("");
                  const sort = ref({});
                  watch(
                    () => sortingSelected.value,
                    (selected) => {
                      switch (selected) {
                        case 1: {
                          sort.value.category = "rating";
                          sort.value.order = "desc";
                          break;
                        }
                        case 2: {
                          sort.value.category = "price";
                          sort.value.order = "asc";
                          break;
                        }
                        case 3: {
                          sort.value.category = "price";
                          sort.value.order = "desc";
                          break;
                        }
                        default: {
                          return;
                        }
                      }
                    }
                  );
                  return {
                    collapse,
                    dropdown,
                    condition,
                    rating,
                    price,
                    size,
                    color,
                    filters,
                    filterDataset,
                    filterTemplate,
                    sortingOptions,
                    sortingSelected,
                    sort,
                  };
                },
              };
            </script>
          
        
    
        
            
            [
              {
                "id": 1,
                "category": "shirts",
                "name": "Fantasy T-shirt",
                "rating": 4,
                "image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "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.jpg",
                "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam.",
                "available": true,
                "size": ["38", "36"],
                "condition": "collectible",
                "color": "white",
                "price": 12.99,
                "discount": 0,
                "gender": "female"
              }
            ]
          
        
    

Filters - API


Import

        
            
          <script>
            import { MDBFilter } from "mdb-vue-filters";
          </script>
        
        
    

Properties

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

Events

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

For example, to listen on file change add an event

        
            
          <template>
            <MDBFilter @update="handleUpdate" />
          </template>