FilterBuilder.Components
0.1.0
dotnet add package FilterBuilder.Components --version 0.1.0
NuGet\Install-Package FilterBuilder.Components -Version 0.1.0
<PackageReference Include="FilterBuilder.Components" Version="0.1.0" />
<PackageVersion Include="FilterBuilder.Components" Version="0.1.0" />
<PackageReference Include="FilterBuilder.Components" />
paket add FilterBuilder.Components --version 0.1.0
#r "nuget: FilterBuilder.Components, 0.1.0"
#:package FilterBuilder.Components@0.1.0
#addin nuget:?package=FilterBuilder.Components&version=0.1.0
#tool nuget:?package=FilterBuilder.Components&version=0.1.0
FilterBuilder.Components
A Blazor condition/filter builder with no external UI dependencies. Supports drag-and-drop reordering, nested groups, custom themes, and extensible field/operator/value types.
Quick start
1. Install
dotnet add package FilterBuilder.Components
2. Add CSS and JS
Blazor Web App — in App.razor, inside <head>:
<link rel="stylesheet" href="_content/FilterBuilder.Components/css/filter-builder.css" />
And before </body>:
<script src="_content/FilterBuilder.Components/js/filter-builder.js"></script>
Blazor WASM — same lines in wwwroot/index.html.
3. Use the component
@using FilterBuilder.Components
<ConditionEditor Condition="@_condition"
Fields="@_fields"
ConditionChanged="@(c => _condition = c)" />
@code {
private static readonly IReadOnlyList<FieldDef> _fields =
[
new FieldDef("Name", "Name", FactValueKind.Text),
new FieldDef("Category", "Category", FactValueKind.Text),
new FieldDef("Price", "Price", FactValueKind.Number),
new FieldDef("InStock", "In Stock", FactValueKind.Bool),
];
private Condition _condition = new Condition.All([]);
}
Blazor Server / interactive render mode — add
@rendermode InteractiveServerto the page or component.
No DI registration required.
Optional node labels
Any node can be given a human-readable name via the Label property. A labelled node renders as a collapsed pill; clicking the chevron expands the full detail view. Labels round-trip through JsonSerializer with no extra setup.
private Condition _condition = new Condition.All(
[
new Condition.All([ /* … */ ]) { Label = "normal medium-value Q1 spend" },
new Condition.Atom("category", Operator.Neq, new FactValue.Text("internal")),
]);
To set a label interactively: open the + menu on any group and choose Set label, or hover an atom row and click the tag icon.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Microsoft.AspNetCore.Components.Web (>= 10.0.7)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.