Blazorise DataGrid: Fixed Columns

This feature allows users to anchor cells or columns to either the left (Start) or right (End) side of the DataGrid. This ensures that the fixed cells or columns remain visible and in place as users scroll through the table. To utilize this feature, set the FixedPosition attribute to TableColumnFixedPosition.Start for left-side anchoring or TableColumnFixedPosition.End for right-side anchoring on a cell. Additionally, you must enable fixed columns on a table with the FixedColumns attribute.

The functionality is particularly useful for financial tables, reports, and dashboards, where key information needs to remain visible while scrolling through large amounts of data.

Fixed Columns

#
First Name
Last Name
Email
City
Zip
Date Of Birth
Childrens
Gender
Salary
Active
1SamuelCollierSamuel.Collier62@gmail.comNew Lura91848-471426.08.19703M86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.comModestomouth16505-840525.05.19743M61 781,31 €
3GeraldPollichGerald82@yahoo.comTheresashire2861229.04.19691M58 810,75 €
4CoraConnCora27@yahoo.comNorth Art10437-225312.02.19845D84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.comEast Carolefort87912-393306.11.19835F69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.comMayrafurt3430602.10.19954M78 566,12 €
7GregoryRennerGregory63@hotmail.comWest Marcelleside5789515.03.19781F57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.comBoehmview38859-036801.07.19705D89 153,38 €
9MerlePacochaMerle3@gmail.comNorth Erlingport48154-303424.06.19935F55 349,94 €
10AngelinaWardAngelina42@gmail.comMelyssaview72291-114618.09.19923D73 625,86 €
1 - 10 of 499 items
499 items
<DataGrid TItem="Employee"
          Data="@employeeList"
          FixedColumns
          ShowPager
          ShowPageSizes
          @bind-SelectedRow="@selectedEmployee">
    <DataGridColumns>
        <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" FixedPosition="TableColumnFixedPosition.Start" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name" Width="150px" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" Width="150px" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" Width="250px" FixedPosition="TableColumnFixedPosition.Start" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City" Width="150px" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" Caption="Zip" Width="100px" />
        <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Width="100px" />
        <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" Filterable="false" Width="100px" />
        <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" Width="100px" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End" Width="100px" FixedPosition="TableColumnFixedPosition.End" />
        <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Filterable="false" Width="100px" />
    </DataGridColumns>
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page