Skip to content
IzzyBlazor 0.1.0-alpha.20

Enter all results ↑ ↓ move Esc close

Filtering

Since 0.1.0-alpha.20
A filter on each column, a row of filters, one of your own, and a builder for what they can't hold.

Static server-side rendering: no circuit, no WebAssembly.

Column filters

Use Filterable on a column for a filter in its header, where text, numbers and dates choose an operator above the value, and FilterOperators to limit them; the first is the default. FilterPanel lists what's in use below the rows.

Preview

Orders to filter
Order
Customer
Date
Status
Total
1023Katherine JohnsonSep 12Pending$64.75
1022Margaret HamiltonSep 5Refunded$483.00
1021Ada LovelaceOct 18Failed$441.25
1020Alan TuringOct 11Paid$399.50
1019Linus TorvaldsOct 4Pending$357.75
No filters
1–5 of 23

Code

Filters.razor 
@* A DataGrid's filters choose an operator above the value: Between adds a second, and Is empty needs
   none. An enum's filter is a list of checkboxes. The operators follow the column's type; FilterOperators narrows them,
   as on Customer. FilterPanel lists what's in use below the rows. *@
@using Rows = IzzyBlazor.Site.Examples.Table.Orders
<DataGrid Items="Rows.All" ItemKey="o => o.Number.ToString()" PageSize="5" InitialSort="-number" Caption="Orders to filter" QueryPrefix="filtered-" FilterPanel Grow>
    <PropertyColumn Property="o => o.Number" Title="Order" Align="CellAlign.Start" Sortable Width="6.Rem" />
    <PropertyColumn Property="o => o.Customer" Sortable Filterable MinWidth="12.Rem"
                    FilterOperators="[FilterOperator.Contains, FilterOperator.StartsWith, FilterOperator.Equals, FilterOperator.IsEmpty]" />
    <PropertyColumn Property="o => o.Date" Format="MMM d" Sortable Filterable Width="9.Rem" />
    <PropertyColumn Property="o => o.Status" Sortable Filterable Width="9.Rem" />
    <PropertyColumn Property="o => o.Total" Format="C" Sortable Filterable Width="9.Rem" />
</DataGrid>

Static: A panel's changes wait for Apply or Enter, and closing it any other way drops them.

A row of filters

Use FilterRow for a field under each title, then the column's filter button, which opens its panel, where the operator is chosen. A list, a range or a date shows what it's set to, and opens the panel too. ShadedHeader shades the titles and the row together, setting them apart from the rows.

Preview

Orders by row filter
Order
Customer
Date
Status
Total
1023Katherine JohnsonSep 12Pending$64.75
1022Margaret HamiltonSep 5Refunded$483.00
1021Ada LovelaceOct 18Failed$441.25
1020Alan TuringOct 11Paid$399.50
1019Linus TorvaldsOct 4Pending$357.75
1–5 of 23

Code

FilterRow.razor 
@* A field under each title, then the column's filter button, which opens its panel, where the operator is
   chosen. Date and Status show what they're set to, and open the panel too. ShadedHeader sets the titles and
   the row apart from the rows. *@
@using Rows = IzzyBlazor.Site.Examples.Table.Orders
<DataGrid Items="Rows.All" ItemKey="o => o.Number.ToString()" PageSize="5" InitialSort="-number" Caption="Orders by row filter" QueryPrefix="row-" FilterRow ShadedHeader Grow>
    <PropertyColumn Property="o => o.Number" Title="Order" Align="CellAlign.Start" Sortable Width="6.Rem" />
    <PropertyColumn Property="o => o.Customer" Sortable Filterable MinWidth="12.Rem" />
    <PropertyColumn Property="o => o.Date" Format="MMM d" Sortable Filterable Width="12.Rem" />
    <PropertyColumn Property="o => o.Status" Sortable Filterable Width="12.Rem" />
    <PropertyColumn Property="o => o.Total" Format="C" Sortable Filterable Width="12.Rem" />
</DataGrid>

A column's own filter

Use FilterTemplate for your own controls in a column's filter panel, above Clear and Apply. Spread the context's Attributes on a control, and its value filters by the column's first operator, or several values by Is any of. Add SetAsync as a library field's ValueChanged, FilterText for what the filter says in its row, and Filter if a value means something else.

Preview

Orders by custom filter
Order
Customer
Total
1023Katherine Johnson$64.75
1022Margaret Hamilton$483.00
1021Ada Lovelace$441.25
1020Alan Turing$399.50
1019Linus Torvalds$357.75
1–5 of 23

Code

CustomFilter.razor 
@* A column can bring its own controls to its filter panel. Spread the context's attributes on a control,
   and its value filters by the column's first operator; Clear and Apply stay. Each works with no script. *@
@using Rows = IzzyBlazor.Site.Examples.Table.Orders
<DataGrid Items="Rows.All" ItemKey="o => o.Number.ToString()" PageSize="5" InitialSort="-number" Caption="Orders by custom filter" QueryPrefix="own-" FilterRow Grow>
    <PropertyColumn Property="o => o.Number" Title="Order" Align="CellAlign.Start" Sortable Width="6.Rem" />
    <PropertyColumn Property="o => o.Customer" Sortable Filterable MinWidth="12.Rem">
        <FilterTemplate>
            @foreach (var customer in Pioneers)
            {
                <label class="ib-check">
                    <input class="ib-check-input" @attributes="context.CheckboxAttributes(customer)" />
                    <span>@customer</span>
                </label>
            }
        </FilterTemplate>
    </PropertyColumn>
    <PropertyColumn Property="o => o.Total" Format="C" Sortable Filterable Width="14.Rem"
                    FilterOperators="[FilterOperator.GreaterThanOrEqual]" FilterText="values => Minimums[values[0]!]">
        <FilterTemplate>
            <Select TValue="string" Label="Minimum" HideLabel Items="Minimums.Keys" ItemText="key => Minimums[key]" Placeholder="Any total"
                    Value="@context.Value" ValueChanged="context.SetAsync" ValueExpression="() => context.Value" @attributes="context.Attributes" />
        </FilterTemplate>
    </PropertyColumn>
</DataGrid>

@code {
    private static readonly string[] Pioneers = ["Ada Lovelace", "Grace Hopper", "Alan Turing"];

    private static readonly Dictionary<string, string> Minimums = new()
    {
        ["100"] = "$100 or more",
        ["250"] = "$250 or more",
        ["400"] = "$400 or more",
    };
}

A filter builder

Use FilterBuilder for a button that opens groups of conditions, for what a column's filter can't hold, such as this or that across columns. It applies along with the columns' filters.

Preview

Orders by builder
Order
Customer
Date
Status
Total
1023Katherine JohnsonSep 12Pending$64.75
1022Margaret HamiltonSep 5Refunded$483.00
1021Ada LovelaceOct 18Failed$441.25
1020Alan TuringOct 11Paid$399.50
1019Linus TorvaldsOct 4Pending$357.75
No filters
1–5 of 23

Code

FilterBuilder.razor 
@* The builder holds what a column's filter can't, such as "this or that" across columns. Its filter goes in
   the address and applies along with the columns' own, and FilterPanel lists both. *@
@using Rows = IzzyBlazor.Site.Examples.Table.Orders
<DataGrid Items="Rows.All" ItemKey="o => o.Number.ToString()" PageSize="5" InitialSort="-number" Caption="Orders by builder" QueryPrefix="built-" FilterBuilder FilterPanel Grow>
    <PropertyColumn Property="o => o.Number" Title="Order" Align="CellAlign.Start" Sortable Width="6.Rem" />
    <PropertyColumn Property="o => o.Customer" Sortable Filterable MinWidth="12.Rem" />
    <PropertyColumn Property="o => o.Date" Format="MMM d" Sortable Filterable Width="9.Rem" />
    <PropertyColumn Property="o => o.Status" Sortable Filterable Width="9.Rem" />
    <PropertyColumn Property="o => o.Total" Format="C" Sortable Filterable Width="9.Rem" />
</DataGrid>

Connection lost

Rejoining the server…