Filters

React 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 - JSX Elements

Use filterData and data properties to define elements to filter. This is required for proper component initialization.

Add filters, filterOptions and handlers for them to every input you want to use as a filter.

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

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

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now 
import React, { useState } from 'react';
import { MDBCol, MDBRow, MDBRadio, MDBBtn, MDBCardText, MDBCardBody, MDBCard } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

export const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [basicFilters, setBasicFilters] = useState({ color: '', sale: '' });
  const [basicData, setBasicData] = useState(exampleData);

  const onChangeBasic = (e) => {
    setBasicFilters({ ...basicFilters, [e.target.name]: e.target.value });
  };

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol md='6'>
              <span className='fa-lg'>Filter: Color</span>

              <MDBRadio
                name='color'
                onChange={onChangeBasic}
                value='black'
                checked={basicFilters.color === 'black'}
                label='Black'
                wrapperClass='mt-3'
              />

              <MDBRadio
                name='color'
                value='red'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'red'}
                label='Red'
              />

              <MDBRadio
                name='color'
                value='blue'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'blue'}
                label='Blue'
              />

              <MDBRadio
                name='color'
                value='gray'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'gray'}
                label='Gray'
              />
            </MDBCol>

            <MDBCol md='6'>
              <span className='fa-lg mb-5'>Filter: Sale</span>

              <MDBRadio
                name='sale'
                onChange={onChangeBasic}
                checked={basicFilters.sale === 'yes'}
                value='yes'
                label='Yes'
                wrapperClass='mt-3'
              />

              <MDBRadio
                name='sale'
                onChange={onChangeBasic}
                checked={basicFilters.sale === 'no'}
                value='no'
                label='No'
              />

              <MDBBtn
                className='mt-3'
                style={{ minWidth: '156px' }}
                onClick={() => setBasicFilters({ color: '', sale: '' })}
              >
                Clear all filters
              </MDBBtn>
            </MDBCol>
          </MDBRow>
          <MDBFilters
            filterData={setBasicData}
            data={exampleData}
            filters={basicFilters}
            filterOptions={[
              { type: 'radio', key: 'color' },
              { type: 'radio', key: 'sale' },
            ]}
          >
            {basicData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 basic-example-item'>
                <MDBCard className='card shadow-2'>
                  <img src={item.img} className='card-img-top' alt='...' />

                  <MDBCardBody>
                    <h5 className='card-title'>{item.name}</h5>
                    {item.sale === 'yes' ? (
                      <MDBCardText>
                        <span className='text-decoration-line-through'>{item.oldPrice}$</span>{' '}
                        <span className='fw-bold fa-lg'>{item.price}$</span>
                      </MDBCardText>
                    ) : (
                      <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                    )}

                    <a href='#' className='btn btn-primary ripple-surface'>
                      Buy now
                    </a>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Checkbox example

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

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

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now 
import React, { useState } from 'react';
import { MDBCol, MDBRow, MDBCheckbox, MDBBtn, MDBCardText, MDBCardBody, MDBCard } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

export const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [checkboxFilters, setCheckboxFilters] = useState({
    color: [],
    sale: [],
  });

  const [checkboxData, setCheckboxData] = useState(exampleData);

  const onChangeCheckbox = (e: { target: { name, value } }) => {
    const containsValue = checkboxFilters[e.target.name].includes(e.target.value);

    if (containsValue) {
      setCheckboxFilters({
        ...checkboxFilters,
        [e.target.name]: checkboxFilters[e.target.name].filter((element) => element !== e.target.value),
      });
    } else {
      const newArray = [...checkboxFilters[e.target.name], e.target.value];

      setCheckboxFilters({ ...checkboxFilters, [e.target.name]: newArray });
    }
  };

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol md='6'>
              <span className='fa-lg'>Filter: Color</span>

              <MDBCheckbox
                name='color'
                onChange={onChangeCheckbox}
                value='black'
                checked={checkboxFilters.color.includes('black')}
                label='Black'
                wrapperClass='mt-3'
              />

              <MDBCheckbox
                name='color'
                value='red'
                onChange={onChangeCheckbox}
                checked={checkboxFilters.color.includes('red')}
                label='Red'
              />

              <MDBCheckbox
                name='color'
                value='blue'
                onChange={onChangeCheckbox}
                checked={checkboxFilters.color.includes('blue')}
                label='Blue'
              />

              <MDBCheckbox
                name='color'
                value='gray'
                onChange={onChangeCheckbox}
                checked={checkboxFilters.color.includes('gray')}
                label='Gray'
              />
            </MDBCol>

            <MDBCol md='6'>
              <span className='fa-lg mb-5'>Filter: Sale</span>

              <MDBCheckbox
                name='sale'
                onChange={onChangeCheckbox}
                checked={checkboxFilters.sale.includes('yes')}
                value='yes'
                label='Yes'
                wrapperClass='mt-3'
              />

              <MDBCheckbox
                name='sale'
                onChange={onChangeCheckbox}
                checked={checkboxFilters.sale.includes('no')}
                value='no'
                label='No'
              />

              <MDBBtn
                className='mt-3'
                style={{ minWidth: '156px' }}
                onClick={() => setCheckboxFilters({ color: [], sale: [] })}
              >
                Clear all filters
              </MDBBtn>
            </MDBCol>
          </MDBRow>
          <MDBFilters
            filterData={setCheckboxData}
            data={exampleData}
            filters={checkboxFilters}
            filterOptions={[
              { type: 'checkbox', key: 'color' },
              { type: 'checkbox', key: 'sale' },
            ]}
          >
            {checkboxData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 basic-example-item'>
                <MDBCard className='card shadow-2'>
                  <img src={item.img} className='card-img-top' alt='...' />

                  <MDBCardBody>
                    <h5 className='card-title'>{item.name}</h5>
                    {item.sale === 'yes' ? (
                      <MDBCardText>
                        <span className='text-decoration-line-through'>{item.oldPrice}$</span>{' '}
                        <span className='fw-bold fa-lg'>{item.price}$</span>
                      </MDBCardText>
                    ) : (
                      <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                    )}

                    <a href='#' className='btn btn-primary ripple-surface'>
                      Buy now
                    </a>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Color example

Filter: Color

Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now 
import React, { useEffect, useState } from 'react';
import { MDBCol, MDBRow, MDBRadio, MDBBtn, MDBCardText, MDBCardBody, MDBCard, MDBRipple } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

export const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [colorFilters, setColorFilters] = useState({ color: '' });
  const [colorData, setColorData] = useState(exampleData);

  const onChangeColor = (e) => {
    setColorFilters({ ...colorFilters, [e.target.name]: e.target.value });
  };

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol className='text-center mb-3' md='12'>
              <p className='fa-lg mb-4'>Filter: Color</p>
              <div className='form-check form-check-inline'>
                <input
                  onChange={onChangeColor}
                  checked={colorFilters.color === 'red'}
                  className='btn-check'
                  type='radio'
                  name='color'
                  id='colorRadio1'
                  value='red'
                />

                <MDBRipple
                  rippleTag='label'
                  className='btn bg-danger btn-rounded p-4 '
                  htmlFor='colorRadio1'
                  style={{ minWidth: '48px' }}
                ></MDBRipple>
              </div>

              <div className='form-check form-check-inline'>
                <input
                  onChange={onChangeColor}
                  checked={colorFilters.color === 'blue'}
                  className='btn-check'
                  type='radio'
                  name='color'
                  id='colorRadio2'
                  value='blue'
                />
                <MDBRipple
                  rippleTag='label'
                  className='btn bg-primary btn-rounded p-4 '
                  htmlFor='colorRadio2'
                  style={{ minWidth: '48px' }}
                ></MDBRipple>
              </div>

              <div className='form-check form-check-inline'>
                <input
                  onChange={onChangeColor}
                  checked={colorFilters.color === 'black'}
                  className='btn-check'
                  type='radio'
                  name='color'
                  id='colorRadio3'
                  value='black'
                />
                <MDBRipple
                  rippleTag='label'
                  className='btn bg-dark text-white btn-rounded p-4 '
                  htmlFor='colorRadio3'
                  style={{ minWidth: '48px' }}
                ></MDBRipple>
              </div>

              <div className='form-check form-check-inline'>
                <input
                  onChange={onChangeColor}
                  checked={colorFilters.color === 'gray'}
                  className='btn-check'
                  type='radio'
                  name='color'
                  id='colorRadio4'
                  value='gray'
                />
                <MDBRipple
                  rippleTag='label'
                  className='btn btn-rounded p-4 '
                  htmlFor='colorRadio4'
                  style={{ backgroundColor: 'rgb(189, 189, 189)', minWidth: '48px' }}
                ></MDBRipple>
              </div>
            </MDBCol>
            <MDBCol md='12' className='text-center my-3'>
              <MDBBtn onClick={() => setColorFilters({ color: '' })} style={{ minWidth: '155px' }}>
                Clear all filters
              </MDBBtn>
            </MDBCol>
          </MDBRow>
          <MDBFilters
            filterData={setColorData}
            data={exampleData}
            filters={colorFilters}
            filterOptions={[{ type: 'radio', key: 'color' }]}
          >
            {colorData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 color-example-item'>
                <MDBCard className='card shadow-2'>
                  <img src={item.img} className='card-img-top' alt='...' />

                  <MDBCardBody>
                    <h5 className='card-title'>{item.name}</h5>
                    {item.sale === 'yes' ? (
                      <MDBCardText>
                        <span className='text-decoration-line-through'>{item.oldPrice}$</span>{' '}
                        <span className='fw-bold fa-lg'>{item.price}$</span>
                      </MDBCardText>
                    ) : (
                      <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                    )}

                    <a href='#' className='btn btn-primary ripple-surface'>
                      Buy now
                    </a>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Size example

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

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now 
import React, { useState } from 'react';
import { MDBCol, MDBRow, MDBCheckbox, MDBBtn, MDBCardText, MDBCardBody, MDBCard, MDBRadio } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

const sizeData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    size: '42',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    size: '36',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    size: '42',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    size: '40',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    size: '38',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    size: '36',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [sizeFilters, setSizeFilters] = useState({
    size: [],
    sale: '',
  });

  const [checkboxData, setCheckboxData] = useState(sizeData);

  const onChangeCheckbox = (e: { target: { name, value } }) => {
    const containsValue = sizeFilters[e.target.name].includes(e.target.value);

    if (containsValue) {
      setSizeFilters({
        ...sizeFilters,
        [e.target.name]: sizeFilters.size.filter((element) => element !== e.target.value),
      });
    } else {
      const newArray = [...sizeFilters.size, e.target.value];

      setSizeFilters({ ...sizeFilters, [e.target.name]: newArray });
    }
  };

  const onChangeRadio = (e) => {
    setSizeFilters({ ...sizeFilters, [e.target.name]: e.target.value });
  };

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol md='6'>
              <span className='fa-lg'>Filter: Color</span>

              <MDBCheckbox
                name='size'
                onChange={onChangeCheckbox}
                value='36'
                checked={sizeFilters.size.includes('36')}
                label='36'
                wrapperClass='mt-3'
              />

              <MDBCheckbox
                name='size'
                value='38'
                onChange={onChangeCheckbox}
                checked={sizeFilters.size.includes('38')}
                label='38'
              />

              <MDBCheckbox
                name='size'
                value='40'
                onChange={onChangeCheckbox}
                checked={sizeFilters.size.includes('40')}
                label='40'
              />

              <MDBCheckbox
                name='size'
                value='42'
                onChange={onChangeCheckbox}
                checked={sizeFilters.size.includes('42')}
                label='42'
              />
            </MDBCol>

            <MDBCol md='6'>
              <span className='fa-lg mb-5'>Filter: Sale</span>

              <MDBRadio
                name='sale'
                onChange={onChangeRadio}
                checked={sizeFilters.sale === 'yes'}
                value='yes'
                label='Yes'
                wrapperClass='mt-3'
              />

              <MDBRadio
                name='sale'
                onChange={onChangeRadio}
                checked={sizeFilters.sale === 'no'}
                value='no'
                label='No'
              />

              <MDBBtn
                className='mt-3'
                style={{ minWidth: '156px' }}
                onClick={() => setSizeFilters({ size: [], sale: '' })}
              >
                Clear all filters
              </MDBBtn>
            </MDBCol>
          </MDBRow>
          <MDBFilters
            filterData={setCheckboxData}
            data={sizeData}
            filters={sizeFilters}
            filterOptions={[
              { type: 'checkbox', key: 'size' },
              { type: 'radio', key: 'sale' },
            ]}
          >
            {checkboxData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 basic-example-item'>
                <MDBCard className='card shadow-2'>
                  <img src={item.img} className='card-img-top' alt='...' />

                  <MDBCardBody>
                    <h5 className='card-title'>{item.name}</h5>
                    {item.sale === 'yes' ? (
                      <MDBCardText>
                        <span className='text-decoration-line-through'>{item.oldPrice}$</span>{' '}
                        <span className='fw-bold fa-lg'>{item.price}$</span>
                      </MDBCardText>
                    ) : (
                      <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                    )}

                    <a href='#' className='btn btn-primary ripple-surface'>
                      Buy now
                    </a>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Animations with DOM Elements

Wrap filtrable elements in MDBAnimation component to animate them. The full list of available options you can find here.

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

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now 
import React, { useEffect, useState } from 'react';
import { MDBCol, MDBRow, MDBRadio, MDBBtn, MDBCardText, MDBCardBody, MDBCard, MDBAnimation } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [basicFilters, setBasicFilters] = useState({ color: '', sale: '' });
  const [basicData, setBasicData] = useState(exampleData);

  const onChangeBasic = (e) => {
    setBasicFilters({ ...basicFilters, [e.target.name]: e.target.value });
  };

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol md='6'>
              <span className='fa-lg'>Filter: Color</span>

              <MDBRadio
                name='color'
                onChange={onChangeBasic}
                value='black'
                checked={basicFilters.color === 'black'}
                label='Black'
                wrapperClass='mt-3'
              />

              <MDBRadio
                name='color'
                value='red'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'red'}
                label='Red'
              />

              <MDBRadio
                name='color'
                value='blue'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'blue'}
                label='Blue'
              />

              <MDBRadio
                name='color'
                value='gray'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'gray'}
                label='Gray'
              />
            </MDBCol>

            <MDBCol md='6'>
              <span className='fa-lg mb-5'>Filter: Sale</span>

              <MDBRadio
                name='sale'
                onChange={onChangeBasic}
                checked={basicFilters.sale === 'yes'}
                value='yes'
                label='Yes'
                wrapperClass='mt-3'
              />

              <MDBRadio
                name='sale'
                onChange={onChangeBasic}
                checked={basicFilters.sale === 'no'}
                value='no'
                label='No'
              />

              <MDBBtn
                className='mt-3'
                style={{ minWidth: '156px' }}
                onClick={() => setBasicFilters({ color: '', sale: '' })}
              >
                Clear all filters
              </MDBBtn>
            </MDBCol>
          </MDBRow>
          <MDBFilters
            filterData={setBasicData}
            data={exampleData}
            filters={basicFilters}
            filterOptions={[
              { type: 'radio', key: 'color' },
              { type: 'radio', key: 'sale' },
            ]}
          >
            {basicData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 basic-example-item'>
                <MDBAnimation key={Math.random()} animation='fade-in' start='onLoad' tag='div'>
                  <MDBCard className='card shadow-2'>
                    <img src={item.img} className='card-img-top' alt='...' />

                    <MDBCardBody>
                      <h5 className='card-title'>{item.name}</h5>
                      {item.sale === 'yes' ? (
                        <MDBCardText>
                          <span className='text-decoration-line-through'>{item.oldPrice}$</span>{' '}
                          <span className='fw-bold fa-lg'>{item.price}$</span>
                        </MDBCardText>
                      ) : (
                        <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                      )}

                      <a href='#' className='btn btn-primary ripple-surface'>
                        Buy now
                      </a>
                    </MDBCardBody>
                  </MDBCard>
                </MDBAnimation>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Filter and sort

Filter: Color
Filter: Sale
Choose category
import React, { useEffect, useState } from 'react';
import { MDBCol, MDBRow, MDBRadio, MDBBtn, MDBCardText, MDBCardBody, MDBCard, MDBSelect } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [basicFilters, setBasicFilters] = useState({ color: '', sale: '' });
  const [basicData, setBasicData] = useState(exampleData);
  const [sort, setSort] = useState({ sortProperty: '', order: 'asc' });

  const onChangeBasic = (e) => {
    setBasicFilters({ ...basicFilters, [e.target.name]: e.target.value });
  };

  const handleGetValue = (e) => {
    const value = e;

    if (value === 1) {
      setSort({ sortProperty: 'name', order: 'asc' });
    }

    if (value === 2) {
      setSort({ sortProperty: 'name', order: 'desc' });
    }

    if (value === 3) {
      setSort({ sortProperty: 'price', order: 'desc' });
    }

    if (value === 4) {
      setSort({ sortProperty: 'price', order: 'asc' });
    }
  };

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol md='6'>
              <span className='fa-lg'>Filter: Color</span>

              <MDBRadio
                name='color'
                onChange={onChangeBasic}
                value='black'
                checked={basicFilters.color === 'black'}
                label='Black'
                wrapperClass='mt-3'
              />

              <MDBRadio
                name='color'
                value='red'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'red'}
                label='Red'
              />

              <MDBRadio
                name='color'
                value='blue'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'blue'}
                label='Blue'
              />

              <MDBRadio
                name='color'
                value='gray'
                onChange={onChangeBasic}
                checked={basicFilters.color === 'gray'}
                label='Gray'
              />
            </MDBCol>

            <MDBCol md='6'>
              <span className='fa-lg mb-5'>Filter: Sale</span>

              <MDBRadio
                name='sale'
                onChange={onChangeBasic}
                checked={basicFilters.sale === 'yes'}
                value='yes'
                label='Yes'
                wrapperClass='mt-3'
              />

              <MDBRadio
                name='sale'
                onChange={onChangeBasic}
                checked={basicFilters.sale === 'no'}
                value='no'
                label='No'
              />

              <MDBBtn
                className='mt-3'
                style={{ minWidth: '156px' }}
                onClick={() => setBasicFilters({ color: '', sale: '' })}
              >
                Clear all filters
              </MDBBtn>
            </MDBCol>
            <MDBCol md='8' className='my-5'>
              <MDBSelect
                getSelectedValue={handleGetValue}
                data={[
                  { text: 'Choose category', value: '', disabled: true },
                  { text: 'Product name ascending', value: 1, selected: true },
                  { text: 'Product name descending', value: 2 },
                  { text: 'Highest price', value: 3 },
                  { text: 'Lowest price', value: 4 },
                ]}
              />
            </MDBCol>
          </MDBRow>
          <MDBFilters
            filteredData={basicData}
            filterData={setBasicData}
            sortOptions={sort}
            data={exampleData}
            filters={basicFilters}
            filterOptions={[
              { type: 'radio', key: 'color' },
              { type: 'radio', key: 'sale' },
            ]}
          >
            {basicData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 basic-example-item'>
                <MDBCard className='card shadow-2'>
                  <img src={item.img} className='card-img-top' alt='...' />

                  <MDBCardBody>
                    <h5 className='card-title'>{item.name}</h5>
                    {item.sale === 'yes' ? (
                      <MDBCardText>
                        <span className='text-decoration-line-through'>{item.oldPrice}$</span>{' '}
                        <span className='fw-bold fa-lg'>{item.price}$</span>
                      </MDBCardText>
                    ) : (
                      <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                    )}

                    <a href='#' className='btn btn-primary ripple-surface'>
                      Buy now
                    </a>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Customization - custom filter

Price:

Current: 80$

Current: 120$

Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now
Blue Jeans Jacket
Blue Jeans Jacket

90$

Buy now
Red Hoodie
Red Hoodie

150$ 120$

Buy now
Black Jeans Jacket
Black Jeans Jacket

100$

Buy now
Gray Jumper
Gray Jumper

100$ 80$

Buy now 
import React, { useEffect, useState } from 'react';
import { MDBCol, MDBRow, MDBRadio, MDBBtn, MDBCardText, MDBCardBody, MDBCard, MDBRange } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [customFilters, setCustomFilters] = useState({ min: 80, max: 120 });
  const [basicData, setBasicData] = useState(exampleData);

  const onChange = (e) => {
    setCustomFilters({ ...customFilters, [e.target.name]: e.target.value });
  };

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol className='col-md-12 mt-3 text-center'>
              <p className='fa-lg'>Price:</p>

              <MDBRange name='min' min='80' max='120' value={customFilters.min} label='Min' onChange={onChange} />

              <p id='min-val'>Current: {customFilters.min}$</p>

              <MDBRange name='max' min='80' max='120' value={customFilters.max} label='Max' onChange={onChange} />

              <p id='max-val'>Current: {customFilters.max}$</p>
            </MDBCol>
          </MDBRow>
          <MDBFilters
            filterData={setBasicData}
            data={exampleData}
            filters={customFilters}
            filterOptions={[
              {
                type: 'custom',
                key: 'min',
                custom: (data, key, filter) => {
                  return data.filter((item) =>
                    item.salePrice ? item.salePrice >= filter : item.price >= filter
                  );
                },
              },
              {
                type: 'custom',
                key: 'max',
                custom: (data, key, filter) => {
                  return data.filter((item) =>
                    item.salePrice ? item.salePrice <= filter : item.price <= filter
                  );
                },
              },
            ]}
          >
            {basicData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 basic-example-item'>
                <MDBCard className='card shadow-2'>
                  <img src={item.img} className='card-img-top' alt='...' />

                  <MDBCardBody>
                    <h5 className='card-title'>{item.name}</h5>
                    {item.sale === 'yes' ? (
                      <MDBCardText>
                        <span className='text-decoration-line-through'>{item.oldPrice}$</span>
                        <span className='fw-bold fa-lg'>{item.price}$</span>
                      </MDBCardText>
                    ) : (
                      <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                    )}

                    <a href='#' className='btn btn-primary ripple-surface'>
                      Buy now
                    </a>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Custom sort

import React, { useEffect, useState } from 'react';
import { MDBCol, MDBRow, MDBRadio, MDBBtn, MDBCardText, MDBCardBody, MDBCard, MDBSelect } from 'mdb-react-ui-kit';
import { MDBFilters } from 'mdb-react-filters';

const exampleData = [
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },

  {
    name: 'Blue Jeans Jacket',
    price: 90,
    color: 'blue',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
  },
  {
    name: 'Red Hoodie',
    oldPrice: 150,
    price: 120,
    color: 'red',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
  },
  {
    name: 'Black Jeans Jacket',
    price: 100,
    color: 'black',
    sale: 'no',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    name: 'Gray Jumper',
    oldPrice: 100,
    price: 80,
    color: 'gray',
    sale: 'yes',
    img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
];

export default function App() {
  const [basicData, setBasicData] = useState(exampleData);
  const [sort, setSort] = useState({
    sortProperty: 'name',
    order: 'asc',
    customSort: (firstItem, secondItem) => {
      if (firstItem < secondItem) return -1;
      if (firstItem > secondItem) return 1;
      return 0;
    },
  });

  return (
    <section className='pb-4'>
      <div className='bg-white border rounded-5'>
        <section className='w-100 p-4 justify-content-center'>
          <MDBRow className='justify-content-center'>
            <MDBCol md='4' className='text-center'>
              <MDBBtn
                onClick={() =>
                  setSort({
                    ...sort,
                    order: 'asc',
                    customSort: (firstItem, secondItem) => {
                      if (firstItem < secondItem) return -1;
                      if (firstItem > secondItem) return 1;
                      return 0;
                    },
                  })
                }
              >
                Sort by product name ascending
              </MDBBtn>
            </MDBCol>

            <MDBCol md='4' className='text-center'>
              <MDBBtn
                onClick={() =>
                  setSort({
                    ...sort,
                    order: 'desc',
                    customSort: (firstItem, secondItem) => {
                      if (firstItem > secondItem) return -1;
                      if (firstItem < secondItem) return 1;
                      return 0;
                    },
                  })
                }
              >
                Sort by product name descending
              </MDBBtn>
            </MDBCol>
          </MDBRow>
          <MDBFilters filteredData={basicData} filterData={setBasicData} sortOptions={sort} data={exampleData}>
            {basicData.map((item, i) => (
              <MDBCol key={i} md='4' className='mt-3 basic-example-item'>
                <MDBCard className='card shadow-2'>
                  <img src={item.img} className='card-img-top' alt='...' />

                  <MDBCardBody>
                    <h5 className='card-title'>{item.name}</h5>
                    {item.sale === 'yes' ? (
                      <MDBCardText>
                        <span className='text-decoration-line-through'>{item.oldPrice}$</span>{' '}
                        <span className='fw-bold fa-lg'>{item.price}$</span>
                      </MDBCardText>
                    ) : (
                      <MDBCardText className='card-text'>{item.price}$</MDBCardText>
                    )}

                    <a href='#' className='btn btn-primary ripple-surface'>
                      Buy now
                    </a>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            ))}
          </MDBFilters>
        </section>
      </div>
    </section>
  );
}

Full screen example

View full screen demo 
import { MDBFilters } from 'mdb-react-filters';
import {
  MDBContainer,
  MDBNavbar,
  MDBNavbarToggler,
  MDBIcon,
  MDBCollapse,
  MDBDropdownMenu,
  MDBNavbarLink,
  MDBNavbarItem,
  MDBBtn,
  MDBDropdownItem,
  MDBDropdownToggle,
  MDBDropdown,
  MDBNavbarNav,
  MDBBadge,
  MDBRow,
  MDBCol,
  MDBSelect,
  MDBAnimation,
  MDBCheckbox,
  MDBRating,
  MDBRatingElement,
  MDBRadio,
  MDBRipple,
  MDBFooter,
} from 'mdb-react-ui-kit';
import React, { useState } from 'react';

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

export default function App() {
  const [showNavText, setShowNavText] = useState(false);
  const [filterData, setFilterData] = useState(advancedData);
  const [sort, setSort] = useState({ sortProperty: '', order: 'asc' });
  const [filters, setFilters] = useState({ condition: [], rating: 0, price: { min: 0, max: Infinity }, size: [], color: '' });

  const handleGetValue = (e) => {
    const value = e;

    if (value === 1) {
      setSort({ sortProperty: 'rating', order: 'desc' });
    }

    if (value === 2) {
      setSort({ sortProperty: 'price', order: 'asc' });
    }

    if (value === 3) {
      setSort({ sortProperty: 'price', order: 'desc' });
    }
  };

  const onChangeCheckbox = (e: { target: { name, value } }) => {
    const containsValue = (filters[e.target.name]).includes(e.target.value);

    if (containsValue) {
      setFilters({
        ...filters,
        [e.target.name]: (filters[e.target.name]).filter((element) => element !== e.target.value),
      });
    } else {
      const newArray = [...(filters[e.target.name]), e.target.value];

      setFilters({ ...filters, [e.target.name]: newArray });
    }
  };

  const onChangeRadio = (e) => {
    const values = e.target.value.split('-');

    setFilters({ ...filters, [e.target.name]: { min: parseInt(values[0]), max: parseInt(values[1]) } });
  };

  const onChangeColor = (e) => {
    setFilters({ ...filters, [e.target.name]: e.target.value });
  };

  return (
    <>
      <header>
        <MDBNavbar sticky expand='lg' light className='bg-light'>
          <MDBContainer fluid className='justify-content-between'>
            <MDBNavbarToggler
              type='button'
              data-target='#navbarText'
              aria-controls='navbarText'
              aria-expanded='false'
              aria-label='Toggle navigation'
              onClick={() => setShowNavText(!showNavText)}
            >
              <MDBIcon icon='bars' fas />
            </MDBNavbarToggler>
            <a className='navbar-brand' href='https://mdbecommerce.com/'>
              <MDBIcon fab icon='mdb' className='fa-2x' />
            </a>

            <MDBCollapse navbar show={showNavText}>
              <MDBNavbarNav className='ml-auto'>
                <MDBNavbarItem className='nav-item my-auto'>
                  <a className='nav-link active' aria-current='page' href='#'>
                    <MDBBadge className='rounded-pill' color='danger'>
                      1
                    </MDBBadge>
                    <MDBIcon fas icon='shopping-cart' />
                  </a>
                </MDBNavbarItem>

                <MDBDropdown className='nav-item my-auto'>
                  <MDBDropdownToggle className='nav-link' tag='a'>
                    <i className='united kingdom flag m-0'></i>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem link>Action</MDBDropdownItem>
                    <MDBDropdownItem link>Another action</MDBDropdownItem>
                    <MDBDropdownItem link>Something else here</MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBNavbarItem className='my-auto'>
                  <MDBNavbarLink>Shop</MDBNavbarLink>
                </MDBNavbarItem>
                <MDBNavbarItem className='my-auto'>
                  <MDBNavbarLink>Contact</MDBNavbarLink>
                </MDBNavbarItem>
                <MDBNavbarItem className='my-auto'>
                  <MDBNavbarLink>Sign in</MDBNavbarLink>
                </MDBNavbarItem>
                <MDBNavbarItem>
                  <MDBNavbarLink>
                    <MDBBtn outline color='dark' rounded>
                      Sign up
                    </MDBBtn>
                  </MDBNavbarLink>
                </MDBNavbarItem>
              </MDBNavbarNav>
            </MDBCollapse>
          </MDBContainer>
        </MDBNavbar>

        <div
          className='p-5 text-center bg-image'
          style={{
            backgroundImage: "url('https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.webp')",
            height: '400px',
          }}
        >
          <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}>
            <div className='d-flex justify-content-center align-items-center h-100'>
              <div className='text-white'>
                <h1 className='mb-3'>Shop</h1>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main>
        <MDBContainer className='mt-5'>
          <MDBRow>
            <MDBCol md='4'>
              <section>
                <h5>Filters</h5>

                <section className='mb-4'>
                  <h6 className='font-weight-bold mb-3'>Condition</h6>

                  <MDBCheckbox
                    name='condition'
                    onChange={onChangeCheckbox}
                    value='new'
                    checked={filters.condition.includes('new')}
                    label='NEW'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBCheckbox
                    name='condition'
                    onChange={onChangeCheckbox}
                    value='used'
                    checked={filters.condition.includes('used')}
                    label='USED'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBCheckbox
                    name='condition'
                    onChange={onChangeCheckbox}
                    value='collectible'
                    checked={filters.condition.includes('collectible')}
                    label='COLLECTIBLE'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBCheckbox
                    name='condition'
                    onChange={onChangeCheckbox}
                    value='renewed'
                    checked={filters.condition.includes('renewed')}
                    label='RENEWED'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />
                </section>

                <section className='mb-4'>
                  <h6 className='font-weight-bold mb-3'>Avg. Customer Review</h6>

                  <MDBRating
                    active={filters.rating}
                    setActive={(value) => setFilters({ ...filters, rating: value })}
                  >
                    <MDBRatingElement title='1' itemId={1} icon='star' />
                    <MDBRatingElement title='2' itemId={2} icon='star' />
                    <MDBRatingElement title='3' itemId={3} icon='star' />
                    <MDBRatingElement title='4' itemId={4} icon='star' />
                    <MDBRatingElement title='5' itemId={5} icon='star' />
                  </MDBRating>
                </section>

                <section className='mb-4'>
                  <h6 className='font-weight-bold mb-3'>Price</h6>

                  <MDBRadio
                    name='price'
                    onChange={onChangeRadio}
                    value='0-25'
                    checked={JSON.stringify(filters.price) === JSON.stringify({ min: 0, max: 25 })}
                    label='UNDER $25'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBRadio
                    name='price'
                    onChange={onChangeRadio}
                    value='25-50'
                    checked={JSON.stringify(filters.price) === JSON.stringify({ min: 25, max: 50 })}
                    label='$25 TO $50'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBRadio
                    name='price'
                    value='50-100'
                    onChange={onChangeRadio}
                    checked={JSON.stringify(filters.price) === JSON.stringify({ min: 50, max: 100 })}
                    label='$50 TO $100'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBRadio
                    name='price'
                    value='100-200'
                    onChange={onChangeRadio}
                    checked={JSON.stringify(filters.price) === JSON.stringify({ min: 100, max: 200 })}
                    label='$100 TO $200'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBRadio
                    name='price'
                    value='200-'
                    onChange={onChangeRadio}
                    checked={JSON.stringify(filters.price) === JSON.stringify({ min: 200, max: Infinity })}
                    label='$200 & ABOVE'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />
                </section>

                <section className='mb-4'>
                  <h6 className='font-weight-bold mb-3'>Price</h6>

                  <MDBCheckbox
                    name='size'
                    value='34'
                    onChange={onChangeCheckbox}
                    checked={filters.size.includes('34')}
                    label='34'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBCheckbox
                    name='size'
                    onChange={onChangeCheckbox}
                    value='36'
                    checked={filters.size.includes('36')}
                    label='36'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBCheckbox
                    name='size'
                    value='38'
                    onChange={onChangeCheckbox}
                    checked={filters.size.includes('38')}
                    label='38'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />

                  <MDBCheckbox
                    name='size'
                    value='40'
                    onChange={onChangeCheckbox}
                    checked={filters.size.includes('40')}
                    label='40'
                    labelClass='text-muted small'
                    wrapperClass='mb-3'
                  />
                </section>

                <section className='mb-4'>
                  <h6 className='font-weight-bold mb-3'>Color</h6>
                  <div className='form-check form-check-inline m-0 p-0 pr-3'>
                    <input
                      onChange={onChangeColor}
                      checked={filters.color === 'white'}
                      className='btn-check'
                      type='radio'
                      name='color'
                      id='colorRadio4'
                      value='white'
                    />
                    <MDBRipple
                      rippleTag='label'
                      className='btn btn-light btn-rounded p-3 '
                      htmlFor='colorRadio4'
                    ></MDBRipple>
                  </div>

                  <div className='form-check form-check-inline m-0 p-0 pr-3'>
                    <input
                      onChange={onChangeColor}
                      checked={filters.color === 'grey'}
                      className='btn-check'
                      type='radio'
                      name='color'
                      id='colorRadio6'
                      value='grey'
                    />
                    <MDBRipple
                      style={{ backgroundColor: '#bdbdbd' }}
                      rippleTag='label'
                      className='btn btn-rounded p-3 '
                      htmlFor='colorRadio6'
                    ></MDBRipple>
                  </div>

                  <div className='form-check form-check-inline m-0 p-0 pr-3'>
                    <input
                      onChange={onChangeColor}
                      checked={filters.color === 'black'}
                      className='btn-check'
                      type='radio'
                      name='color'
                      id='colorRadio3'
                      value='black'
                    />
                    <MDBRipple
                      rippleTag='label'
                      className='btn bg-dark text-white btn-rounded p-3 '
                      htmlFor='colorRadio3'
                    ></MDBRipple>
                  </div>

                  <div className='form-check form-check-inline m-0 p-0 pr-3'>
                    <input
                      onChange={onChangeColor}
                      checked={filters.color === 'blue'}
                      className='btn-check'
                      type='radio'
                      name='color'
                      id='colorRadio2'
                      value='blue'
                    />
                    <MDBRipple
                      rippleTag='label'
                      className='btn bg-primary btn-rounded p-3 '
                      htmlFor='colorRadio2'
                    ></MDBRipple>
                  </div>

                  <div style={{ paddingRight: '1rem' }} className='form-check form-check-inline m-0 p-0'>
                    <input
                      onChange={onChangeColor}
                      checked={filters.color === 'red'}
                      className='btn-check'
                      type='radio'
                      name='color'
                      id='colorRadio1'
                      value='red'
                    />

                    <MDBRipple
                      rippleTag='label'
                      className='btn bg-danger btn-rounded p-3 '
                      htmlFor='colorRadio1'
                    ></MDBRipple>
                  </div>

                  <div className='form-check form-check-inline m-0 p-0 pr-3'>
                    <input
                      onChange={onChangeColor}
                      checked={filters.color === 'orange'}
                      className='btn-check'
                      type='radio'
                      name='color'
                      id='colorRadio5'
                      value='orange'
                    />
                    <MDBRipple
                      rippleTag='label'
                      className='btn btn-rounded bg-warning p-3 '
                      htmlFor='colorRadio5'
                    ></MDBRipple>
                  </div>
                </section>
              </section>
            </MDBCol>
            <MDBCol md='8'>
              <MDBRow className='justify-content-center'>
                <MDBCol md='6' className='my-auto py-3'>
                  <MDBSelect
                    getSelectedValue={handleGetValue}
                    label='Sort'
                    data={[
                      { text: 'Best rating', value: 1, selected: true },
                      { text: 'Lowest price first', value: 2 },
                      { text: 'Highest price first', value: 3 },
                    ]}
                  />
                </MDBCol>
              </MDBRow>
              <MDBFilters
                filters={filters}
                filterOptions={[
                  { type: 'checkbox', key: 'condition' },
                  {
                    type: 'custom',
                    key: 'rating',
                    custom: (data, key, filter) => {
                      return filter ? data.filter((item) => item.rating === filter) : data;
                    },
                  },
                  {
                    type: 'custom',
                    key: 'price',
                    custom: (data, key, filter) => {
                      return filter
                        ? data.filter((item) => item.price >= filter.min && item.price <= filter.max)
                        : data;
                    },
                  },
                  {
                    type: 'custom',
                    key: 'size',
                    custom: (data, key, filter) => {
                      return filter.length
                        ? data.filter((item) => item.size.some((size) => filter.includes(size)))
                        : data;
                    },
                  },
                  {
                    type: 'radio',
                    key: 'color',
                  },
                ]}
                filterData={setFilterData}
                data={advancedData}
                sortOptions={sort}
                className='mb-4'
              >
                {filterData.map((item, i) => (
                  <MDBCol key={i} md='4' className='col-md-4 my-4 justify-content-center text-center'>
                    <MDBAnimation key={Math.random()} animation='fade-in' start='onLoad' tag='div'>
                      <div className='bg-image hover-overlay hover-zoom hover-shadow ripple rounded'>
                        <img src={item.image} className='img-fluid w-100' style={{ height: '325px' }} />
                        <a href='#!'>
                          <div className='mask rounded' style={{ backgroundColor: 'rgba(66, 66, 66, 0.2)' }}></div>
                        </a>
                      </div>
                      <div className='pt-4'>
                        <h5>{item.name}</h5>
                        <strong>${item.price}</strong>
                      </div>
                    </MDBAnimation>
                  </MDBCol>
                ))}
              </MDBFilters>
            </MDBCol>
          </MDBRow>
        </MDBContainer>
      </main>

      <MDBFooter className='bg-dark text-white text-lg-left'>
        <div className='bg-primary text-center p-3'>
          <MDBRow>
            <MDBCol md='6'>
              <span className='font-weight-bold'>Get connected with us on social networks!</span>
            </MDBCol>
            <MDBCol md='6'>
              <MDBIcon fab icon='instagram' />
              <MDBIcon fab icon='linkedin-in' style={{ marginLeft: '1.5rem' }} />
              <MDBIcon fab icon='twitter' style={{ marginLeft: '1.5rem' }} />
              <MDBIcon fab icon='facebook-f' style={{ marginLeft: '1.5rem' }} />
            </MDBCol>
          </MDBRow>
        </div>

        <div className='container p-5'>
          <div className='row p-2'>
            <div className='col-md-3 mx-auto py-4'>
              <h5 className='text-uppercase'>About me</h5>
              <hr className='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>

            <div className='col-md-3 mx-auto py-4'>
              <h5 className='text-uppercase'>Products</h5>
              <hr className='mb-4 mt-0' />

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

            <div className='col-md-3 mx-auto py-4'>
              <h5 className='text-uppercase'>Useful links</h5>
              <hr className='mb-4 mt-0' />

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

            <div className='col-md-3 mx-auto py-4'>
              <h5 className='text-uppercase'>Contacts</h5>
              <hr className='mb-4 mt-0' />

              <ul className='list-unstyled'>
                <li className='mb-2'>
                  <a href='#!' className='text-white'>
                    <i className='far fa-map mr-1'></i> New York, Avenue Street 10
                  </a>
                </li>
                <li className='mb-2'>
                  <a href='#!' className='text-white'>
                    <i className='fas fa-phone-alt mr-1'></i> 042 876 836 908
                  </a>
                </li>
                <li className='mb-2'>
                  <a href='#!' className='text-white'>
                    <i className='far fa-envelope mr-1'></i> company@example.com
                  </a>
                </li>
                <li>
                  <a href='#!' className='text-white'>
                    <i className='far fa-clock mr-1'></i> Monday - Friday: 10-17
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
          © 2020 Copyright:
          <a className='text-white' href='https://mdbootstrap.com/'>
            MDBootstrap.com
          </a>
        </div>
      </MDBFooter>
    </>
  );
}

Filters - API

Import

import { MDBFilters } from 'mdb-react-filters';

Properties

Filters

Name Type Default Description Example
data Array<any> - Array with the original data. <MDBFilters data={exampleData} />
filterData React.SetStateAction<any> Intented to set the state of the filtered data. <MDBFilters filterData={setData} />
filterOptions Array<FilterOptionsObject> Defines the filter options. <MDBFilters filterOptions={options} />
filters any Defines the active filters <MDBFilters filters={exampleFilters} />
sortOptions SortOptionsObject - Defines the sort options. <MDBFilters sortOptions={options} />

Advanced types

FilterOptionsObject

type FilterOptionsObject = {
  key: string;
  type: 'custom' | 'radio' | 'checkbox';
  custom?: (data: Array<any>, key: string, filter: number | string | boolean | any) => Array<any>;
};

SortOptionsObject

type SortOptionsObject = {
  sortProperty: string;
  order: string;
  customSort?: (firstItem: string, secondItem: string) => 1 | 0 | -1;
};