CODEWITHSUNDEEP
c#csshtml-tablemudblazor
Deto24
Deto24

Reputation: 93

How to add second row to ToolBarContent in MudTable

I'm currently trying to add a second row with MudChipSet for my Filter in ToolBarContent of MudTable, but I'm facing problems to implement it so that the first row doesn't get pushed away. Here is my current code, any suggestions how to add a second row with some buttons? It's main purpose is to enable/disable Filter functions.

<MudGrid Spacing="3" Justify="Justify.Center">
    <MudItem>
        <MudPaper>
            <MudTable Items="@_crashInformations" MultiSelection="true" Filter="new Func<CrashInformation,bool>(FilterFunc1)" @bind-SelectedItems="_selectedItems"
                  Hover="true" Striped="true" Dense="true">
                <ToolBarContent>
                    <MudText Typo="Typo.h6">Test</MudText>
                    <MudSpacer />
                    <MudTextField @bind-Value="_searchString" Placeholder="Search" Immediate="true" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0" />
                </ToolBarContent>
                <HeaderContent>
                    <MudTh>Analyse</MudTh>
                    <MudTh>Bearbeiten</MudTh>
                    <MudTh>Name</MudTh>
                    <MudTh>Crashpointer</MudTh>
                    <MudTh>Date</MudTh>
                    <MudTh>Affected Version</MudTh>
                    <MudTh>State</MudTh>
                    <MudTh>Assignee</MudTh>
                    <MudTh>Fixed Version</MudTh>
                    <MudTh>Fixed Date</MudTh>
                    <MudTh>Description</MudTh>
                </HeaderContent>

Here is how it looks right now: current

In the end it should look something like that: wish to be

Upvotes: 1

Views: 2124

Answers (1)

iwis
iwis

Reputation: 1722

ToolBarContent has flexbox layout. To get two rows enable wrapping of flex items, and push MudChipSet to the separate line by telling it to occupy the full width of the flexbox. You also need to reset the height of flexbox, because now it is set to some nondefault value.

<style>
  .mud-table-toolbar              { flex-wrap: wrap;
                                    height: inherit; }
  .mud-table-toolbar .mud-chipset { flex-basis: 100%; }
</style>

Here is the code of ToolBarContent:

<ToolBarContent>
    <MudText Typo="Typo.h6">Test</MudText>
    <MudSpacer />
    <MudTextField @bind-Value="searchString1" Placeholder="Search" Adornment="Adornment.Start"
                  AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0" />
    <MudChipSet MultiSelection Filter>
        <MudChip Text="Chip1" />
        <MudChip Text="Chip2" />
        <MudChip Text="Chip3" />
    </MudChipSet>
</ToolBarContent>

Upvotes: 3

Related Questions