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> <NumericInput 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.
1 - 50 of 499 items
499 items
<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> <NumericInput 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.