Example
Bootstrap Style
Section titled “Bootstrap Style”This example is ported from akumatus/FilterBuilder.
View source codeView the source code for this component on GitHub.
Flatten Style
Section titled “Flatten Style”This style is used in scenarios where nested filters are not required. This can be particularly useful in situations where the data structure is simple.
⚠
⚠
⚠
View source codeView the source code for this component on GitHub.
Popover Style
Section titled “Popover Style”Active Filters: {"status":"PENDING"}
API Payload: /api/data?status=PENDING
View source codeView the source code for this component on GitHub.
Workflow Condition Panel
Section titled “Workflow Condition Panel”This example adapts Filter Sphere into a workflow-builder condition panel with nested groups, operator rails, and compact chip inputs.
View source codeView the source code for this component on GitHub.
Backend Integration
Section titled “Backend Integration”Filter Sphere is easy to integrate with backend systems. This example demonstrates converting filter rules into SQL WHERE clauses and Meilisearch queries in real time.
SQL query:
WHERE (title LIKE '%Filter Sphere%')
Meilisearch query:
(title CONTAINS "Filter Sphere" AND (author NOT CONTAINS "Author Name"))
View source codeView the source code for this component on GitHub.
