如何自定义MudTable展开/折叠列及解决列宽异常问题

一、缩小分组行第一列宽度 #

可以通过自定义CSS定位分组行的第一列，强制设置固定宽度：

/* 定位分组行的第一个单元格 */
.mud-table-group-row .mud-table-cell:first-child {
    width: 80px; /* 按需调整宽度值 */
    max-width: 80px;
    white-space: nowrap; /* 防止内容换行撑宽列 */
}

如果分组列不是默认第一列，可给目标列添加自定义类名（比如在MudTableColumn中设置Class="custom-group-col"），再针对性设置样式：

.mud-table-group-row .custom-group-col {
    width: 80px;
    max-width: 80px;
}

二、解决展开低层分组时图标列宽度增大的问题 #

该问题源于MudTable对深层分组的单元格自动添加了左侧内边距（padding-left），导致列宽被撑开。可通过以下两种方式解决：

1. 固定图标列宽度 #

给包含展开/折叠图标的列设置固定宽，并锁定最小/最大宽度，避免内边距影响列宽：

/* 定位包含分组图标的列（假设是第一列） */
.mud-table-cell:first-child {
    width: 40px; /* 设置足够容纳图标的宽度 */
    min-width: 40px;
    max-width: 40px;
}

2. 替换默认缩进方式 #

自定义分组模板，用margin-left替代默认的padding-left实现层级缩进，彻底避免内边距撑宽列：

<MudTable>
    <GroupTemplate>
        <div style="margin-left: @(context.Level * 16px);">
            <MudIconButton Icon="@Icons.Material.Filled.ExpandMore" OnClick="..." />
            <span>@context.GroupName</span>
        </div>
    </GroupTemplate>
</MudTable>

额外提示 #

• 若使用Blazor的scoped样式，需用::deep穿透组件默认样式：

::deep .mud-table-group-row .mud-table-cell:first-child {
    width: 80px;
}

• 调整宽度值时，需兼顾图标、分组文本的显示空间，避免内容截断。

内容的提问来源于stack exchange，提问作者А.Терентьев