Blazor Grid - Freeze columns
Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.
Freeze columns #
<Grid TItem="Customer2"
Class="table table-hover table-bordered text-nowrap"
DataProvider="CustomersDataProvider"
AllowPaging="true"
AllowSorting="true"
Responsive="true"
Unit="Unit.Px">
<GridColumns>
<GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="0" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.CustomerId
</GridColumn>
<GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="54.98" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
@context.CustomerName
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
@context.Phone
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
@context.Email
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
@context.Address
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
@context.PostalZip
</GridColumn>
<GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="0" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
@context.Country
</GridColumn>
</GridColumns>
</Grid>
@code {
[Inject] public ICustomerService _customerService { get; set; } = default!;
private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
{
string sortString = "";
SortDirection sortDirection = SortDirection.None;
if (request.Sorting is not null && request.Sorting.Any())
{
// Note: Multi column sorting is not supported at this moment
sortString = request.Sorting.FirstOrDefault()!.SortString;
sortDirection = request.Sorting.FirstOrDefault()!.SortDirection;
}
var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
}
}Freeze columns with fixed header #
<Grid TItem="Customer2"
Class="table table-hover table-bordered text-nowrap"
DataProvider="CustomersDataProvider"
AllowPaging="true"
AllowSorting="true"
FixedHeader="true"
Responsive="true"
Unit="Unit.Px">
<GridColumns>
<GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="0" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.CustomerId
</GridColumn>
<GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="54.98" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
@context.CustomerName
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
@context.Phone
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
@context.Email
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
@context.Address
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
@context.PostalZip
</GridColumn>
<GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="0" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
@context.Country
</GridColumn>
</GridColumns>
</Grid>
@code {
[Inject] public ICustomerService _customerService { get; set; } = default!;
private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
{
string sortString = "";
SortDirection sortDirection = SortDirection.None;
if (request.Sorting is not null && request.Sorting.Any())
{
// Note: Multi column sorting is not supported at this moment
sortString = request.Sorting.FirstOrDefault()!.SortString;
sortDirection = request.Sorting.FirstOrDefault()!.SortDirection;
}
var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
}
}Freeze columns with fixed header and filters #
<Grid TItem="Customer2"
Class="table table-hover table-bordered text-nowrap"
DataProvider="CustomersDataProvider"
AllowFiltering="true"
AllowPaging="true"
AllowSorting="true"
FixedHeader="true"
Responsive="true"
Unit="Unit.Px">
<GridColumns>
<GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="0" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.CustomerId
</GridColumn>
<GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="130.35" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
@context.CustomerName
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
@context.Phone
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
@context.Email
</GridColumn>
<GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
@context.Address
</GridColumn>
<GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="171" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
@context.PostalZip
</GridColumn>
<GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="0" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
@context.Country
</GridColumn>
</GridColumns>
</Grid>
@code {
[Inject] public ICustomerService _customerService { get; set; } = default!;
private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
{
string sortString = "";
SortDirection sortDirection = SortDirection.None;
if (request.Sorting is not null && request.Sorting.Any())
{
// Note: Multi column sorting is not supported at this moment
sortString = request.Sorting.FirstOrDefault()!.SortString;
sortDirection = request.Sorting.FirstOrDefault()!.SortDirection;
}
var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
}
}