Blazorise DataGrid: Fixed Header
Fixed Header
<DataGrid TItem="Employee" Data="" @bind-SelectedRow="" Responsive PageSize="100" FixedHeader FixedHeaderDataGridMaxHeight="300px"> <DataGridCommandColumn /> <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable /> <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> <EditTemplate> <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </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(); } }
Scroll To
Scroll to API is available when theDataGrid FixedHeader or Virtualize is set.
<Button Size="Size.Small" Color="Color.Primary" Clicked="">Scroll To Row</Button> <Button Size="Size.Small" Color="Color.Primary" Clicked="">Scroll To Pixels</Button> <DataGrid @ref="dataGridRef" TItem="Employee" Data="" @bind-SelectedRow="" Responsive ShowPager FixedHeader FixedHeaderDataGridMaxHeight="250px" PageSize="50"> <DataGridCommandColumn /> <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable /> <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> <EditTemplate> <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </DataGrid>
@code { [Inject] public EmployeeData EmployeeData { get; set; } private List<Employee> employeeList; private Employee selectedEmployee; private DataGrid<Employee> dataGridRef; protected override async Task OnInitializedAsync() { employeeList = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } private Task ScrollToRow() => dataGridRef.ScrollToRow(30).AsTask(); private Task ScrollToPixels() => dataGridRef.ScrollToPixels(500).AsTask(); }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.