MudTable - как раскрыть/закрыть группу по имени группы

исходя из документации MudBlazor

вот такой вариант предложу

@page "/"
@using MudBlazor
@rendermode InteractiveServer

<style>
    .mud-table-cell-custom-group {
        font-weight: 500;
    }

    .mud-table-cell-custom-group-footer {
        padding-bottom: 50px;
        text-align: right;
    }
</style>

<MudTable Hover="true" Breakpoint="Breakpoint.Sm" Height="500px" FixedHeader="true"
          Items="@Elements"
          GroupBy="@_groupDefinition"
          GroupHeaderStyle="background-color:var(--mud-palette-background-gray)"
          GroupFooterClass="mb-4"
          Dense="true"
          @ref="_tableRef">
    <ColGroup>
        <col style="width: 60px;" />
        <col />
        <col />
        <col />
        <col />
    </ColGroup>

    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>

    <GroupHeaderTemplate>
        <MudTh Class="mud-table-cell-custom-group" colspan="5">
            @($"{context.GroupName}: {context.Key}")
        </MudTh>
    </GroupHeaderTemplate>

    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd Style="text-align: right" DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>

    <GroupFooterTemplate>
        <MudTh Class="mud-table-cell-custom-group mud-table-cell-custom-group-footer" colspan="5">
            Total Mass: @context.Items.Sum(e => e.Molar)
        </MudTh>
    </GroupFooterTemplate>
</MudTable>

<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-3"
           OnClick="@(() => _tableRef?.ExpandAllGroups())">
    Expand all groups
</MudButton>

<MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="mt-3 ml-3"
           OnClick="@(() => _tableRef?.CollapseAllGroups())">
    Collapse all groups
</MudButton>

@code {
    private MudTable<Element> _tableRef;

    private TableGroupDefinition<Element> _groupDefinition = new()
        {
            GroupName = "Group",
            Indentation = false,
            Expandable = true,
            IsInitiallyExpanded = false,
            Selector = e => e.Group
        };

    private IEnumerable<Element> Elements = new List<Element>
    {
        new Element { Number = 1, Sign = "H", Name = "Hydrogen", Position = "Top", Molar = 1.008, Group = "Nonmetals" },
        new Element { Number = 2, Sign = "He", Name = "Helium", Position = "Top", Molar = 4.0026, Group = "Noble gases" },
        new Element { Number = 3, Sign = "Li", Name = "Lithium", Position = "Left", Molar = 6.94, Group = "Alkali metals" },
        new Element { Number = 4, Sign = "Be", Name = "Beryllium", Position = "Left", Molar = 9.0122, Group = "Alkaline earth metals" },
        new Element { Number = 5, Sign = "B", Name = "Boron", Position = "Top", Molar = 10.81, Group = "Metalloids" },
        new Element { Number = 6, Sign = "C", Name = "Carbon", Position = "Top", Molar = 12.011, Group = "Nonmetals" },
        new Element { Number = 7, Sign = "N", Name = "Nitrogen", Position = "Top", Molar = 14.007, Group = "Nonmetals" },
        new Element { Number = 8, Sign = "O", Name = "Oxygen", Position = "Top", Molar = 15.999, Group = "Nonmetals" },
        new Element { Number = 9, Sign = "F", Name = "Fluorine", Position = "Top", Molar = 18.998, Group = "Halogens" },
        new Element { Number = 10, Sign = "Ne", Name = "Neon", Position = "Top", Molar = 20.180, Group = "Noble gases" }
    };

    public class Element
    {
        public int Number { get; set; }
        public string Sign { get; set; }
        public string Name { get; set; }
        public string Position { get; set; }
        public double Molar { get; set; }
        public string Group { get; set; }
    }
}

upd

Насколько мне стало понятно, в текущей версии MudBlazor невозможно сделать группировку по двум уровням одновременно (вложенные группы) с раскрытием по имени

Но вот такой пример возможно(?) может подойти, (отпишитесь)

1. группировка по подгруппе

2. фильтрация по имени группы => OnClick через StateHasChanged

3. показываем только те элементы, что входят в неё

Почему через MudTextField поиск, потому что вначале я внедрила MudSelect, но приложение крашится, потому что строка изначально пустая, а это не дозволено компонентом. вот демо

@page "/"
@using MudBlazor
@rendermode InteractiveServer

<MudText Typo="Typo.h5">Группировка с раскрытием по имени 1-го уровня</MudText>

<MudTextField Label="Введите имя группы (1 уровень)" @bind-Value="_selectedGroupName" Variant="Variant.Outlined" Class="my-2" />

<MudButton Variant="Variant.Filled" OnClick="StateHasChanged">
    Применить
</MudButton>

<MudTable Items="@FilteredElements"
          GroupBy="@_subgroupGroupDefinition"
          Dense="true"
          FixedHeader="true"
          Height="400px"
          Hover="true"
          Breakpoint="Breakpoint.Sm">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Subgroup</MudTh>
        <MudTh>Molar</MudTh>
    </HeaderContent>

    <GroupHeaderTemplate Context="context">
        <MudTd ColSpan="5">
            <b>@context.GroupName: @context.Key</b>
        </MudTd>
    </GroupHeaderTemplate>

    <RowTemplate>
        <MudTd>@context.Number</MudTd>
        <MudTd>@context.Sign</MudTd>
        <MudTd>@context.Name</MudTd>
        <MudTd>@context.Subgroup</MudTd>
        <MudTd Style="text-align:right">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private string? _selectedGroupName;

    private IEnumerable<Element> FilteredElements =>
        string.IsNullOrWhiteSpace(_selectedGroupName)
            ? Elements
            : Elements.Where(e => e.Group.Equals(_selectedGroupName, StringComparison.OrdinalIgnoreCase));

    private TableGroupDefinition<Element> _subgroupGroupDefinition = new()
        {
            GroupName = "Subgroup",
            Selector = e => e.Subgroup,
            Expandable = true,
            IsInitiallyExpanded = false
        };

    private List<Element> Elements = new()
    {
        new Element { Number = 1, Sign = "H", Name = "Hydrogen", Molar = 1.008, Group = "Nonmetals", Subgroup = "Reactive" },
        new Element { Number = 2, Sign = "He", Name = "Helium", Molar = 4.0026, Group = "Noble gases", Subgroup = "Inert" },
        new Element { Number = 3, Sign = "Li", Name = "Lithium", Molar = 6.94, Group = "Alkali metals", Subgroup = "Reactive" },
        new Element { Number = 4, Sign = "Be", Name = "Beryllium", Molar = 9.0122, Group = "Alkaline earth metals", Subgroup = "Reactive" },
        new Element { Number = 5, Sign = "B", Name = "Boron", Molar = 10.81, Group = "Metalloids", Subgroup = "Semi" },
        new Element { Number = 6, Sign = "C", Name = "Carbon", Molar = 12.011, Group = "Nonmetals", Subgroup = "Reactive" },
        new Element { Number = 7, Sign = "N", Name = "Nitrogen", Molar = 14.007, Group = "Nonmetals", Subgroup = "Reactive" },
        new Element { Number = 8, Sign = "O", Name = "Oxygen", Molar = 15.999, Group = "Nonmetals", Subgroup = "Reactive" },
        new Element { Number = 9, Sign = "F", Name = "Fluorine", Molar = 18.998, Group = "Halogens", Subgroup = "Reactive" },
        new Element { Number = 10, Sign = "Ne", Name = "Neon", Molar = 20.180, Group = "Noble gases", Subgroup = "Inert" }
    };

    public class Element
    {
        public int Number { get; set; }
        public string Sign { get; set; }
        public string Name { get; set; }
        public string Subgroup { get; set; }
        public double Molar { get; set; }
        public string Group { get; set; }
    }
}