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.
<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>
{
[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.