如何让MudDataGrid排序图标始终显示且无默认排序

核心思路 #

MudBlazor默认仅在列被排序时显示排序图标，要实现图标始终显示且无默认排序，需通过自定义表头模板或CSS调整实现，同时避免设置任何默认排序相关属性。

具体实现方案 #

方案1：自定义表头模板（无CSS侵入，推荐） #

对每个需要显示排序图标的列，通过HeaderTemplate手动添加排序图标并绑定排序逻辑，同时确保不设置默认排序属性：

<MudDataGrid T="YourModel" Items="@yourDataset" Sortable="true" NoSortLabel="true">
    <Columns>
        <PropertyColumn Property="x => x.Name" Sortable="true">
            <HeaderTemplate>
                <MudIconButton OnClick="@(() => DataGrid.Sort("Name"))" Size="Size.Small" IconColor="Color.Default">
                    <MudIcon Icon="@Icons.Material.Outlined.Sort" />
                </MudIconButton>
                <span>名称</span>
            </HeaderTemplate>
        </PropertyColumn>
        <!-- 其他列按相同逻辑处理 -->
    </Columns>
</MudDataGrid>

关键说明：

• NoSortLabel="true" 用于隐藏默认排序状态文本（如"ASC"/"DESC"）
• 手动添加的MudIcon会始终显示，点击按钮触发对应列的排序
• 不要设置InitialSortBy、SortBy或SortDirection属性，确保无默认排序

方案2：全局CSS强制显示图标 #

若不想逐个列自定义模板，可通过CSS全局控制排序图标显示状态：

/* 未排序时显示半透明图标 */
.mud-table-cell-header .mud-sort-icon {
    display: inline-block !important;
    opacity: 0.6;
}

/* 排序时恢复完全不透明，区分状态 */
.mud-table-cell-header.sort-asc .mud-sort-icon,
.mud-table-cell-header.sort-desc .mud-sort-icon {
    opacity: 1;
}

数据网格配置保持Sortable="true"，且不设置默认排序属性：

<MudDataGrid T="YourModel" Items="@yourDataset" Sortable="true" NoSortLabel="true">
    <Columns>
        <PropertyColumn Property="x => x.Name" Sortable="true" />
        <!-- 其他列 -->
    </Columns>
</MudDataGrid>

注意事项 #

• 务必避免设置InitialSortBy、SortBy等默认排序相关属性，否则会出现初始排序状态
• 使用自定义模板时，DataGrid.Sort("PropertyName")中的属性名需与列的Property定义完全匹配

内容的提问来源于stack exchange，提问作者Charlie