有什么方法可以在 MudBlazor 的 MudTable 中切换隐藏/显示表列

Question

I have a simple MudBlazor MudTable, but looking through the MudBlazor documentation, and after some Googling, I didn't see anything about being able to show/hide columns for a MudTable or if it's even possible. Does anyone know a way?

Here is an example of the table I am using:

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>
@code { 
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

}

I have tried searching for any possible solution and haven't been able to find anything.

Answer 1

try.mudblazor.com/snippet/QYQwvwbppieauJwP There you have it, but as @Vischi said, the vertical screen size must be large enough. Try dragging the divider to the left to see the table as in examples.

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        @if(!_hidePosition)
        {
            <MudTh>Position</MudTh>
        }
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        @if(!_hidePosition)
        {
            <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        }
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>

@code { 
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>(){new Element(), new Element(), new Element()};

    protected override async Task OnInitializedAsync()
    {
        //Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

}