MudBlazor DataGrid固定表头下首列表头横向滚动不固定问题求助

当你同时开启DataGrid的FixedHeader和首列Fixed="true"时，默认情况下首列的表头不会跟随列体固定，会随横向滚动偏移。以下是两种可行的修复方案：

方案1：自定义首列表头模板（快速生效） #

直接给固定的首列添加HeaderTemplate，手动设置表头单元格的粘性定位样式，确保它在横向滚动时固定在左侧：

<MudDataGrid T="Employee" FixedHeader="true" Style="width: 800px;" Items="@employees">
    <Columns>
        <!-- 首列添加自定义表头模板 -->
        <MudDataGridColumn T="Employee" Field="Name" Title="姓名" Fixed="true">
            <HeaderTemplate>
                <div style="position: sticky; left: 0; background: var(--mud-palette-background); z-index: 1;">姓名</div>
            </HeaderTemplate>
        </MudDataGridColumn>
        <!-- 其他列保持不变 -->
        <MudDataGridColumn T="Employee" Field="Age" Title="年龄" />
        <MudDataGridColumn T="Employee" Field="Email" Title="邮箱" />
        <MudDataGridColumn T="Employee" Field="Phone" Title="电话" />
        <MudDataGridColumn T="Employee" Field="Address" Title="地址" />
        <MudDataGridColumn T="Employee" Field="Department" Title="部门" />
    </Columns>
</MudDataGrid>

方案2：全局CSS样式（批量处理） #

如果有多个固定列需要处理，推荐添加全局CSS规则，自动给所有固定列的表头应用固定样式：

/* 针对固定在左侧的列的表头 */
.mud-data-grid .mud-table-row-header .mud-table-cell.mud-data-grid-fixed-left {
    position: sticky;
    left: 0;
    background-color: var(--mud-palette-background);
    z-index: 2;
    /* 可选：添加边框避免滚动时和其他表头重叠 */
    border-right: 1px solid var(--mud-palette-divider);
}

关键说明 #

• 两种方案都依赖position: sticky属性，需要确保表头单元格的背景色和DataGrid背景一致，避免滚动时透出下方内容。
• 设置z-index是为了让固定表头在普通表头的上方，防止被遮挡。
• 必须保证DataGrid设置了FixedHeader="true"，同时整体宽度足够小（或列足够多）触发横向滚动，否则无法看到效果。

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