FilterForm

@* The page reads the filters from the URL and filters its own list. *@
<Stack Gap="4" MaxWidth="34.Rem" Grow>
    <FilterForm Label="Filter issues">
        <FilterSearch Placeholder="Search issues" />
        <FilterSelect Name="label" Label="Label" Items="Labels" />
        <FilterCheckbox Name="mine" Label="Assigned to me" />
    </FilterForm>
    @* A live region: screen readers hear the new count after each filter. *@
    <TextBlock Size="TextSize.Sm" Color="Color.Muted" aria-live="polite">@Matches.Count() of @All.Length issues</TextBlock>
    @if (Matches.Any())
    {
        <List Plain Gap="3">
            @foreach (var issue in Matches)
            {
                <ListItem>
                    <Row Gap="2" Align="Align.Center">
                        <TextBlock As="span">@issue.Title</TextBlock>
                        <Badge Size="BadgeSize.Sm">@issue.Label</Badge>
                    </Row>
                </ListItem>
            }
        </List>
    }
    else
    {
        <TextBlock Color="Color.Muted">No issues match.</TextBlock>
    }
</Stack>

@code {
    [SupplyParameterFromQuery(Name = "q")] private string? Search { get; set; }
    [SupplyParameterFromQuery(Name = "label")] private string? LabelFilter { get; set; }
    [SupplyParameterFromQuery(Name = "mine")] private bool Mine { get; set; }

    private IEnumerable<Issue> Matches => All
        .Where(i => string.IsNullOrWhiteSpace(Search) || i.Title.Contains(Search, StringComparison.OrdinalIgnoreCase))
        .Where(i => string.IsNullOrEmpty(LabelFilter) || i.Label == LabelFilter)
        .Where(i => !Mine || i.Mine);

}

<Stack Gap="4" MaxWidth="34.Rem" Grow>
    <FilterForm Label="Find people" Live="false" ApplyText="Search">
        <FilterSearch Name="name" Label="Name" Placeholder="Search by name" />
        <FilterSelect Name="team" Label="Team" Items="Teams" />
    </FilterForm>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted" aria-live="polite">@Found.Count() of @People.Length people</TextBlock>
    <List Plain Gap="2">
        @foreach (var person in Found)
        {
            <ListItem>@person.Name, @person.Team</ListItem>
        }
    </List>
</Stack>

@code {
    [SupplyParameterFromQuery(Name = "name")] private string? Query { get; set; }
    [SupplyParameterFromQuery(Name = "team")] private string? Team { get; set; }

    private IEnumerable<Person> Found => People
        .Where(p => string.IsNullOrWhiteSpace(Query) || p.Name.Contains(Query, StringComparison.OrdinalIgnoreCase))
        .Where(p => string.IsNullOrEmpty(Team) || p.Team == Team);

}

@* The filters and the table share the address: filtering keeps the sort and goes back to page 1. *@
<Stack Gap="4" Grow>
    <FilterForm Label="Filter books">
        <FilterSearch Name="title" Label="Title" Placeholder="Search titles" />
        <FilterSelect Name="genre" Label="Genre" Items="Genres" />
    </FilterForm>
    <Table Items="Found" PageSize="4" InitialSort="title" Caption="Books" QueryPrefix="books-"
           EmptyText="No books match these filters" Grow>
        <PropertyColumn Property="b => b.Title" Sortable />
        <PropertyColumn Property="b => b.Author" Sortable />
        <PropertyColumn Property="b => b.Year" Sortable />
    </Table>
</Stack>

@code {
    [SupplyParameterFromQuery(Name = "title")] private string? Title { get; set; }
    [SupplyParameterFromQuery(Name = "genre")] private string? Genre { get; set; }

    // The page filters its own data; the table sorts and pages what it's given.
    private IEnumerable<Book> Found => All
        .Where(b => string.IsNullOrWhiteSpace(Title) || b.Title.Contains(Title, StringComparison.OrdinalIgnoreCase))
        .Where(b => string.IsNullOrEmpty(Genre) || b.Genre == Genre);

}