How to adjust the column width of a table in MudBlazor

Question

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.

Kean

Answer 1

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.

Antetype

I get an error with this on the colgroup element. Error RZ9996: Unrecognized child content inside component 'MudTable'. The component 'MudTable' accepts child content through the following top-level items: 'RowTemplate', 'ChildRowContent', 'RowEditingTemplate', 'ToolBarContent', 'HeaderContent', 'ColGroup', 'PagerContent'. (68, 9) – Fog

I added the Style value to the MudTh element and it worked that way. I am guessing that got added since your original post. – Fog

I searched for column resize, not hard-coding. Is that not possible with MudTable? I cannot find resizable column example. I tried to use MudDataGrid, but it seemed to have problems with nested data type and another answer said use MudTable instead because it is "experimental". – Dorelle

@DamnVegetables MudDataGrid still says experimental but it has stabilized and it has been discussed to remove the experimental tag. Create a repro for the problem you have with nested data and post a discussion or issue or here on stackoverflow, probably you'll get help with it. – Antetype

I tried the code above but it does not work. No idea why. Tried with ColGroup & col, then Th and Td but none of them worked in my MudTable. – Pester

@AlexHuynh Execute the TryMudblazor snippet from the documenation page of MudTable by clicking on Run: mudblazor.com/components/table#column-group-and-text-alignment – Antetype

@henon: I tried TryMudblazor and it didn't work either. I realize it worked with percentage like 60% but it didn't work with pixel like 60px. – Pester

@AlexHuynh I just tried myself and I can not reproduce your claim. Changing the first column to 100px for instance clearly makes it wider. I suspect you try to make a column smaller than the space the content needs, which I can reproduce does not work, not even with % so this seems to be an html issue, not a MudBlazor bug. Please try with pure html to confirm. – Antetype

Answer 2

Instead of using Style use Class

<MudTd Class="clm-row-small"

Lawannalawbreaker

Can you explain the difference between Style and Class for the future generations? – Miriam

Style it's pure css on the tag, Class it's css utilities pre configured (like the bootstrap ones) – Lamina

Answer 3

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>

Shellback

same result with you, but i found min-width works, i don't know why, css is really too complicated... – Romaromagna