CODEWITHSUNDEEP
blazormudblazor
user14535297
user14535297

Reputation: 103

How to adjust the column width of a table in MudBlazor

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.

Upvotes: 10

Views: 22537

Answers (3)

Joon Joon
Joon Joon

Reputation: 31

I tried to make width wide using col group but it doesn't work at all, whether it's reduced or stretched.

-- I solve it (using min-width)

        <ColGroup>
            <col style="min-width:100px;" />
            @foreach (var column in Columns)
            {
                <col style="min-width:200px;" />
            }

        </ColGroup>

Upvotes: 0

henon
henon

Reputation: 2501

It is possible, ColGroup was added to MudBlazor by a contributor. It's documented here. An example is 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.

Upvotes: 8

P2A3W4E5
P2A3W4E5

Reputation: 39

Instead of using Style use Class

<MudTd Class="clm-row-small"

Upvotes: 1

Related Questions