CODEWITHSUNDEEP
c#cssblazormudblazor
user21415940
user21415940

Reputation: 65

MudBlazor/MudTable fix table height

I am using MudBlazor and want to fix the height of the table so the page size footer is anchored to the bottom of the container if the search results show less rows that the page size.

For example, this is a normal table:

Normal

when searching and less than 10 records exist the table appears smaller:

searched table

I've tried using the Height attribute on the MudTable tag but this forces a scroll bar if the user changes the page size.

The behaviour I am looking for is the page size footer remains in the same place if the row number falls below the page size settings.

If there any css I can override to achieve this. It would make the visual look much better.

Edit: Here is a basic code snippet as requested. https://try.mudblazor.com/snippet/waGokwYIcbquRxRe

2nd Edit: Here it is inside a dialog https://try.mudblazor.com/snippet/wOGeuGYImQAWoahb

Here the the table definition (as a razor component):

<MudTable Elevation="1" Striped="false" Bordered="true" Hover="true" Items="@data" T="CountriesDetail" Filter="new Func<CountriesDetail,bool>(SearchFunction)">
    <ToolBarContent>
        <MudText Typo="Typo.h6" Color="Color.Primary">Countries</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="searchString" Immediate="true" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <NoRecordsContent>
        <MudText Typo="Typo.body1" Class="mud-text-secondary mt-6 mb-4">No data to display</MudText>
    </NoRecordsContent>
    <ColGroup>
       <col style="width: 100%" />
    </ColGroup>
    <HeaderContent>
        <MudTh>Country Name</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Name">@context.CountryName</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager/>
    </PagerContent>
</MudTable>

@code {
  public class CountriesDetail
    {   
        public string ID { get; set; } = string.Empty;
        public string CountryName { get; set; } = string.Empty;
    }

    private List<CountriesDetail> data = new();

    private string searchString = string.Empty;

    protected override void OnInitialized()
    {
        data.Add(new() { ID = "1", CountryName = "Country 1" });
        data.Add(new() { ID = "2", CountryName = "Country 2" });
        data.Add(new() { ID = "3", CountryName = "Country 3" });
        data.Add(new() { ID = "4", CountryName = "Country 4" });
        data.Add(new() { ID = "5", CountryName = "Country 5" });
        data.Add(new() { ID = "6", CountryName = "Country 6" });
        data.Add(new() { ID = "7", CountryName = "Country 7" });
        data.Add(new() { ID = "8", CountryName = "Country 8" });
        data.Add(new() { ID = "9", CountryName = "Country 9" });
        data.Add(new() { ID = "10", CountryName = "Country 10" });
        data.Add(new() { ID = "11", CountryName = "Country 11" });
        data.Add(new() { ID = "12", CountryName = "Country 12" });
    }
    private bool SearchFunction(CountriesDetail element) => PerformSearch(element, searchString);
    
    private bool PerformSearch(CountriesDetail element, string searchString)
    {
        if (string.IsNullOrWhiteSpace(searchString)) return true;
        if (element.CountryName.Contains(searchString, StringComparison.OrdinalIgnoreCase)) return true;
        
        return false;
    }

}

Here is the dialog:

<MudDialog>
    <TitleContent>
        <MudText>Country Search</MudText>
    </TitleContent>
    <DialogContent>
            <TableDef></TableDef>
    </DialogContent>
    <DialogActions>
    </DialogActions>
</MudDialog>

And here is how it gets called:

@inject IDialogService DialogService


<MudButton OnClick="@LoadDialog">Go</MudButton>


@code{
  
  private void LoadDialog()
  {
        var options = new DialogOptions { CloseOnEscapeKey = true };
        DialogService.Show<Dialog>("", options);
  }
}

Thanks in advance

Upvotes: 1

Views: 1896

Answers (1)

RBee
RBee

Reputation: 4967

You can add the vh CSS unit in the Height property of MudTable. vh is viewport height, which is the relative to the screen height.

<MudTable Items="@Elements" Height="60vh" ... >
<!--  -->
</MudTable>

Here in the example I set it to 60vh which essentially means 60% of the entire window/screen height. So the scroll bar won't be forced. MudTable on it's own snippet

In the case of the table being in another container, and you want to restrict it to it's parent container and not the screen then, you can use the % unit.

There's a few things you have to do to set this up. % unit is relative to the immediate parent. The Height property of MudTable sets the height css property of the content only, so that means that we need to set the dialog height to a vh unit, the table Style to a % unit and finally the Height of the content to a % unit.

For example,

<div class="my-dialog" style="height:60vh;">
    <div class="my-table" style="height:100%;">
        <div class="my-table-content" style="height:60%;">
        </div>
    </div>
</div>

MudTable in Dialog snippet

Upvotes: 1

Related Questions