Skip to content
IzzyBlazor Demos · latest

Enter all results ↑ ↓ move Esc close

Filtered order list

An orders page: a search, a status menu and a checkbox above a sortable, paged table. The filters live in the URL, so a filtered view can be bookmarked, and filtering keeps the sort and starts again at page 1.

Orders
Preview width
OrderList.razor
<Stack Gap="4">
    <Row Gap="3" Align="Align.Center" Wrap>
        <Heading Level="2" Size="TextSize.Xl">Orders</Heading>
        <Spacer />
        <Button StartIcon="Lucide.Download" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Export</Button>
    </Row>
    <FilterForm Label="Filter orders">
        <FilterSearch Placeholder="Search customers" />
        <FilterSelect Name="status" Label="Status" EnumType="typeof(OrderStatus)" />
        <FilterCheckbox Name="large" Label="Over $300" />
    </FilterForm>
    <Table Items="Filtered" PageSize="6" InitialSort="-date" Caption="Orders" EmptyText="No orders match these filters">
        <PropertyColumn Property="o => o.Number" Title="Order" />
        <PropertyColumn Property="o => o.Customer" Sortable />
        <PropertyColumn Property="o => o.Date" Format="MMM d, yyyy" Sortable />
        <TemplateColumn Title="Status" SortBy="o => o.Status" SortKey="status" Sortable>
            <Badge Status="Orders.StatusOf(context.Status)" Dot>@context.Status</Badge>
        </TemplateColumn>
        <PropertyColumn Property="o => o.Total" Format="C" Sortable />
    </Table>
</Stack>

@code {
    [SupplyParameterFromQuery(Name = "q")] private string? Search { get; set; }
    [SupplyParameterFromQuery(Name = "status")] private string? StatusFilter { get; set; }
    [SupplyParameterFromQuery(Name = "large")] private bool Large { get; set; }

    // The page filters its own data; the table sorts and pages what it's given.
    private IEnumerable<Order> Filtered => Orders.All
        .Where(o => string.IsNullOrWhiteSpace(Search) || o.Customer.Contains(Search, StringComparison.OrdinalIgnoreCase))
        .Where(o => !Enum.TryParse<OrderStatus>(StatusFilter, out var status) || o.Status == status)
        .Where(o => !Large || o.Total > 300);
}

Static: Filters apply as you type, without a full reload.