URL-Based Filtering
The filter system provides a flexible way to manage filters in your URL, supporting both flat (separate parameters) and structured (single parameter with custom syntax) modes.
Configuration
Configure the filter system once in your main.js:
Flat Mode (Default)
In flat mode, each filter is a separate query parameter. This is the simplest and most common approach.
Basic Usage
Updating Filters
Structured Mode (OData-style)
In structured mode, all filters are combined into a single query parameter with custom syntax. This is useful when integrating with APIs that expect OData-style filters.
Configuration
Usage
The API remains the same regardless of mode:
undefined vs null
Understanding the difference is important for controlling URL parameters:
Practical Examples
Product Search & Filter
Multi-Select Category Filter
Date Range Filter
Merge Behavior
By default, updateFilters() merges with existing filters.
Use merge: false to replace all filters:
TypeScript Support
Define types for full intellisense and type safety:
Best Practices
Provide Default Values
Always provide defaults when reading filters to handle missing values gracefully.
Reset Related Filters
When changing major filters like category, consider resetting pagination or other related filters.
Use undefined to Remove
Set filter values to undefined (not empty string) to remove them from the URL.
Filters vs Querystring
When should you use filters vs querystring helpers?
Use Filters When:
- Building search/filter UIs
- Need structured mode (OData)
- Want semantic separation from routing
- Integrating with backend filter APIs
Use Querystring When:
- General query parameters
- Don't need structured mode
- Simple key-value parameters
- Prefer standard query format
Try It Live
See filters in action with our interactive demo: