Filters are the best way to select data that meets your requirements - they affect your search results by filtrating and sorting the dataset you pass to our component.
Note: Read the API tab to find all available options and advanced customization
View full screen demo Basic example - DOM ElementsUse the items prop to define a container with data to filter. This is required for proper component initialization.
Add data-mdb-filter-property to every item you want to be filtrable. If you want to handle your filters by inputs, make a container for them, and add data-mdb-filter-property to it.
Note: You must have at least one filtrable element for a component to work properly.
Filter: ColorBlack
Red
Blue
Gray
Checkbox exampleNote: If there is more than one option, the result of filtering will show items that match both of them.
Filter: ColorRed
Blue
Black
Gray
Color example Size example Animations with DOM ElementsAdd data-mdb-filter-animation attribute with animation type to filtrable elements to animate them. The full list of available animations you can find here.
Black
Red
Blue
Gray
Data structure - arrayNote: Your items dataset can be an array of items. We made this solution for backend needs.
Black
Red
Blue
Gray
Spinner & Asynchronous Data example Animations - Array of ItemsAdd data-mdb-filter-animation attribute with animation type to filtrable elements to animate them. The full list of available animations you can find here.
Black
Red
Blue
Gray
Filter and sort Filter: ColorBlack
Red
Blue
Gray
Customization - custom filterPass an arrow function as the value of the filter key at the filter object to define your custom filter.
Price:
MinCurrent: 80$
MaxCurrent: 120$
Custom sort Full screen exampleRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4