How to adjust the column width of a table in MudBlazor

user_14535297 0
Viewed 7438

MudTable component really great, look very nice. But I want configure column width. Is possible?

<MudTable Items="@my_users">
    <HeaderContent>
    <MudTh>Nr</MudTh>
        <MudTh>Username</MudTh>
        <MudTh>Email</MudTh>
        <MudTh>Role</MudTh>
        <MudTh>Actions</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Nr</MudTd>
        <MudTd>@context.Username</MudTd>
        <MudTd>@context.Email</MudTd>
        <MudTd>@context.Role</MudTd>
        <MudTd>
       <MudButton @onclick="@(()=> OnEdit(@context))">Edit</MudButton>
        </MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{10, 25, 100}" />
    </PagerContent>
</MudTable>

Problem is, space for columns is same for all column. I want limit first and last column width. I know, I can use normal HTML tabel but not look so good. MudTable can do filter and multiselection. So I know HTML can do with colgroup tag but how to you apply with MudTable? I try add colgroup in HeaderContent but not work. Thanks for help.

mudblazor blazor
2 Answers

It is possible, colgroup was added to MudBlazor by a contributor and is documented here. Your code would look like this with it:

  <MudTable Items="@my_users">
    <ColGroup>
        <col style="width: 60px;" />
        <col />
        <col />
        <col />
        <col style="width: 60px;"/>
    </ColGroup>
    <HeaderContent>
    <MudTh>Nr</MudTh>
        <MudTh>Username</MudTh>
        <MudTh>Email</MudTh>
        <MudTh>Role</MudTh>
        <MudTh>Actions</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Nr</MudTd>
        <MudTd>@context.Username</MudTd>
        <MudTd>@context.Email</MudTd>
        <MudTd>@context.Role</MudTd>
        <MudTd>
       <MudButton @onclick="@(()=> OnEdit(@context))">Edit</MudButton>
        </MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{10, 25, 100}" />
    </PagerContent>
</MudTable>

This limits the first and last column.

user_2417400

Instead of using Style use Class

<MudTd Class="clm-row-small"
user_29459660
Related