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
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.
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: string; sale: boolean | string }>({ color: '', sale: '' });
const [basicData, setBasicData] = useState(exampleData);
const onChangeBasic = (e: any) => {
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.
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: Array<string>; sale: Array<string> }>({
color: [],
sale: [],
});
const [checkboxData, setCheckboxData] = useState(exampleData);
const onChangeCheckbox = (e: { target: { name: keyof typeof checkboxFilters; value: string } }) => {
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
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: string }>({ color: '' });
const [colorData, setColorData] = useState(exampleData);
const onChangeColor = (e: any) => {
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
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: Array<string>; sale: string }>({
size: [],
sale: '',
});
const [checkboxData, setCheckboxData] = useState(sizeData);
const onChangeCheckbox = (e: { target: { name: keyof typeof sizeFilters; value: string } }) => {
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: any) => {
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.
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: string; sale: boolean | string }>({ color: '', sale: '' });
const [basicData, setBasicData] = useState(exampleData);
const onChangeBasic = (e: any) => {
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
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: string; sale: boolean | string }>({ color: '', sale: '' });
const [basicData, setBasicData] = useState(exampleData);
const [sort, setSort] = useState({ sortProperty: '', order: 'asc' });
const onChangeBasic = (e: any) => {
setBasicFilters({ ...basicFilters, [e.target.name]: e.target.value });
};
const handleGetValue = (e: any) => {
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
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: any) => {
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: any) =>
item.salePrice ? item.salePrice >= filter : item.price >= filter
);
},
},
{
type: 'custom',
key: 'max',
custom: (data, key, filter) => {
return data.filter((item: any) =>
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: string, secondItem: string) => {
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
import { MDBFilters } from 'mdb-react-filters';
import {
MDBContainer,
MDBNavbar,
MDBNavbarToggler,
MDBIcon,
MDBCollapse,
MDBDropdownMenu,
MDBNavbarLink,
MDBNavbarItem,
MDBBtn,
MDBDropdownItem,
MDBDropdownToggle,
MDBDropdown,
MDBDropdownLink,
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: Array<string>;
size: Array<string>;
rating: number;
price: { min: number; max: number };
color: string;
}>({ condition: [], rating: 0, price: { min: 0, max: Infinity }, size: [], color: '' });
const handleGetValue = (e: any) => {
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: keyof typeof filters; value: string } }) => {
const containsValue = (filters[e.target.name] as Array<string>).includes(e.target.value);
if (containsValue) {
setFilters({
...filters,
[e.target.name]: (filters[e.target.name] as Array<string>).filter((element) => element !== e.target.value),
});
} else {
const newArray = [...(filters[e.target.name] as Array<string>), e.target.value];
setFilters({ ...filters, [e.target.name]: newArray });
}
};
const onChangeRadio = (e: any) => {
const values = e.target.value.split('-');
setFilters({ ...filters, [e.target.name]: { min: parseInt(values[0]), max: parseInt(values[1]) } });
};
const onChangeColor = (e: any) => {
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='flag-united-kingdom flag m-0'></i>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem>
<MDBDropdownLink>Action</MDBDropdownLink>
</MDBDropdownItem>
<MDBDropdownItem>
<MDBDropdownLink>Another action</MDBDropdownLink>
</MDBDropdownItem>
<MDBDropdownItem>
<MDBDropdownLink>Something else here</MDBDropdownLink>
</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: number) => 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: any) => item.rating === filter) : data;
},
},
{
type: 'custom',
key: 'price',
custom: (data, key, filter) => {
return filter
? data.filter((item: any) => item.price >= filter.min && item.price <= filter.max)
: data;
},
},
{
type: 'custom',
key: 'size',
custom: (data, key, filter) => {
return filter.length
? data.filter((item: any) => item.size.some((size: string) => 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 |
|---|---|---|---|---|
className
|
string | '' |
Adds a custom class to MDBFilters. |
<MDBFilters className="class" />
|
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} />
|
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;
};