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.

henon · Accepted Answer · 2020-10-30T11:56:33.047

6

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.

edited Oct 30 '20 at 11:56

answered Oct 29 '20 at 10:27

henon

2,022
21
23

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) – woaksie Mar 10 '21 at 21:25
I added the Style value to the MudTh element and it worked that way. I am guessing that got added since your original post. – woaksie Mar 10 '21 at 21:32
1

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". – Damn Vegetables Dec 09 '22 at 15:06
@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. – henon Dec 10 '22 at 14:35

score 1 · Answer 2 · edited May 13 '21 at 13:31

1

Instead of using Style use Class

<MudTd Class="clm-row-small"

edited May 13 '21 at 13:31

Paul Roub

36,322
27
84
93

answered May 13 '21 at 13:22

P2A3W4E5

29
1

4

Can you explain the difference between `Style` and `Class` for the future generations? – Simas Joneliunas May 14 '21 at 02:38
Style it's pure css on the tag, Class it's css utilities pre configured (like the bootstrap ones) – Leandro Toloza Mar 17 '22 at 14:06

How to adjust the column width of a table in MudBlazor

2 Answers2

Linked