Currently I have a form that displays a list on a MudTable and freezes the first column on the left, everything is working fine.

<style>
    .sticky-left {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: white; 
    }
</style>

<MudTable Items="@GetEmployees()" Breakpoint="Breakpoint.None" Striped="true" Bordered="true" Height="400px" FixedHeader="true">
    <HeaderContent>
        <MudTh Class="sticky-left">First Name</MudTh>
        <MudTh>Last Name</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>
        <MudTh>Value</MudTh>

    </HeaderContent>
    <RowTemplate>
        <MudTd Class="sticky-left" DataLabel="FirstName">@context.FirstName</MudTd>
        <MudTd DataLabel="LastName">@context.LastName</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
        <MudTd DataLabel="Value">@context.Value</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private Employee employee = new Employee();
    private List<Employee> employees = new List<Employee>();

    private List<Employee> GetEmployees()
    {
        employees = employee.GetAll();
        return employees;
    }
}

public class Employee
{
    public int ID { get; set; } = 0;
    public string FirstName { get; set; } = "";
    public string LastName { get; set; } = "";
    public string Value { get; set; } = "10000";

    public List<Employee> GetAll()
    {
        List<Employee> list = new List<Employee>();
        Employee obj;

        for (int i = 1; i <= 50; i++)
        {
            obj = new Employee
            {
                ID = i,
                FirstName = "First name " + i,
                LastName = "Last name " + i
            };
            list.Add(obj);
        }

        return list;
    }
}

But when I set the FixedHeader property=”true” in the MudTable, when I drag the slider to the right, the remaining column headers are overlaid on the fixed column header.

Do you have any solution to fix the first column header and always stay on top when dragging the slider to the right? Please help me. Thank you everyone for your interest in the article.