Example

Bootstrap Style

This example is ported from akumatus/FilterBuilder.

AndOr

+ add+ ( group )

IDNameCreated AtStatus✕

AndOr

+ add+ ( group )✖

IDNameCreated AtStatus✕

View source code View the source code for this component on GitHub.

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.

IDNameCreated AtStatusAnd

⚠

✕

And

IDNameCreated AtStatusAnd

⚠

✕

Or

IDNameCreated AtStatusAndOr

⚠

✕

View source code View the source code for this component on GitHub.

Backend Integration

Filter Sphere is easy to integrate with backend systems. This example demonstrates integration with Meilisearch. You can try it out by typing in the search box below.

AndAdd RuleAdd Group

TitleAuthorTagsContentPublication DateLinkContent LengthIDcontainsnot containsstarts withequalsnot equalis emptyis not emptyDelete

OrAdd RuleAdd GroupDelete Group

TitleAuthorTagsContentPublication DateLinkContent LengthIDcontainsnot containsDelete

Meilisearch query:

(title CONTAINS "Filter Sphere" AND (author NOT CONTAINS "Author Name"))

View source code View the source code for this component on GitHub.

Real-world Example

• 

  Yjs Inspector

• 

  Uglysearch