Blazor Grid

Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.

Grid Parameters

Name	Type	Default	Required	Description	Added Version
AllowDetailView	bool	false		Gets or sets a value indicating whether the grid detail view is enabled.	3.0.0
AllowFiltering	bool	false		Gets or sets the grid filtering.	1.0.0
AllowPaging	bool	false		Gets or sets the grid paging.	1.0.0
AllowRowClick	bool	false		Gets or sets the allow row click.	1.9.5
AllowSelection	bool	false		Gets or sets the grid selection.	1.8.0
AllowSorting	bool	false		Gets or sets the grid sorting.	1.0.0
AutoHidePaging	bool	false		Automatically hides the paging controls when the grid item count is less than or equal to the PageSize and this property is set to true.	1.10.5
ChildContent	RenderFragment	null	✔️	Gets or sets the content to be rendered within the component.	1.0.0
Data	IEnumerable<TItem>	null		Gets or sets the grid data.	1.4.3
DataProvider	GridDataProviderDelegate<TItem>	null		DataProvider is for items to render. The provider should always return an instance of GridDataProviderResult, and null is not allowed.	1.0.0
DisableAllRowsSelection	Func<IEnumerable<TItem>, bool>?			Enable or disable the header checkbox selection.	1.8.0
DisableRowSelection	Func<TItem, bool>?			Enable or disable the row level checkbox selection.	1.8.0
EmptyDataTemplate	RenderFragment	null	✔️	Template to render when there are no rows to display.	1.0.0
EmptyText	string	No records to display		Shows text on no records.	1.0.0
FiltersRowCssClass	string	null		Gets or sets the filters row css class.	1.9.2
FiltersTranslationProvider	GridFiltersTranslationDelegate	null		Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed.	1.10.0
FixedHeader	bool	false		Gets or sets the grid fixed header.	1.10.3
GridContainerClass	string	null		Gets or sets the grid container css class.	3.0.0
GridContainerStyle	string	null		Gets or sets the grid container css style.	3.0.0
HeaderRowCssClass	string	null		Gets or sets the header row css class but not the thead tag class.	1.9.2
Height	float	320 pixels		Gets or sets the grid height.	1.10.3
ItemsPerPageText	string	Items per page	✔️	Gets or sets the items per page text.	1.9.5
PageSize	int	10		Gets or sets the page size.	1.0.0
PageSizeSelectorItems	int[]	new int[] { 10, 20, 50 }	✔️	Gets or sets the page size selector items.	1.8.0
PageSizeSelectorVisible	bool	false		Gets or sets the page size selector visible.	1.8.0
PaginationItemsTextFormat	string	{0} - {1} of {2} items	✔️	Gets or sets the pagination items text format.	1.8.0
Responsive	bool	false		Gets or sets a value indicating whether Grid is responsive.	1.0.0
RowClass	Func<TItem, string>?			Gets or sets the row class.	1.6.0
SelectionMode	GridSelectionMode	GridSelectionMode.Single		Gets or sets the grid selection mode.	1.8.0
SettingsProvider	GridSettingsProviderDelegate	null		Settings are for the grid to render. The provider should always return an instance of 'GridSettings', and 'null' is not allowed.	1.0.0
THeadCssClass	string?	null		Gets or sets the thead css class.	1.10.3
Unit	Unit	Unit.px		Gets or sets the units.	1.10.3

IMPORTANT

Grid requires either Data or DataProvider parameter, but not both.

Grid Callback Events

Name	Type	Description	Added Version
GridSettingsChanged	EventCallback<GridSettings>	This event is fired when the grid state is changed.	1.0.0
OnRowClick	EventCallback<GridRowEventArgs<TItem>>	This event is triggered when the user clicks on the row. Set AllowRowClick to true to enable row clicking.	1.9.5
OnRowDoubleClick	EventCallback<GridRowEventArgs<TItem>>	This event is triggered when the user double clicks on the row. Set AllowRowClick to true to enable row double clicking.	1.9.5
SelectedItemsChanged	EventCallback<HashSet<TItem>>	This event is fired when the items selection changed.	1.8.0

Grid Methods

Name	Return Type	Description	Added Version
GetFilters()	IEnumerable<FilterItem>	Get filters.	1.0.0
RefreshDataAsync(CancellationToken cancellationToken = default)	Task	Refresh the grid data.	1.0.0
ResetPageNumber()	ValueTask	Reset the page number to 1 and refresh the grid.	1.4.3

GridColumn Parameters

Name	Type	Default	Required	Description	Added Version
ChildContent	RenderFragment	null	✔️	Gets or sets the content to be rendered within the component.	1.0.0
ColumnClass	Func<TItem, string>?			Gets or sets the column class.	1.6.0
Filterable	bool	true		If true, filter is enabled. The filter is enabled or disabled based on the grid AllowFiltering parameter.	1.0.0
FilterButtonColor	ButtonColor	ButtonColor.Light		Gets or sets the filter button color.	3.0.0
FilterButtonCSSClass	string?	null		Gets or sets the filter button CSS class.	3.0.0
FilterOperator	FilterOperator	FilterOperator.None		Gets or sets the filter operator.	1.0.0
FilterTextboxWidth	int	0		Gets or sets the filter textbox width in pixels.	1.0.0
FilterValue	string	null		Gets or sets the filter value.	1.0.0
Freeze	bool	false		Indicates whether the column is frozen.	1.10.4
FreezeDirection	FreezeDirection	FreezeDirection.Left		Gets or sets the freeze direction of the column.	1.10.4
FreezeLeftPosition	double	0		Gets or sets the horizontal position of the column from left. It has no effect on non-positioned columns.	1.10.4
FreezeRightPosition	double	0		Gets or sets the horizontal position of the column from right. It has no effect on non-positioned columns.	1.10.4
HeaderContent	RenderFragment	null		Gets or sets the header content.	1.7.3
HeaderText	string	null		Gets or sets the table column header text.	1.0.0
HeaderTextAlignment	enum	Alignment.Start		Gets or sets the header text alignment. Use Alignment.Start or Alignment.Center or Alignment.End.	1.0.0
IsDefaultSortColumn	bool	false		Gets or sets the default sort column.	1.0.0
PropertyName	string	null		Gets or sets the property name. This is required when AllowFiltering is true.	1.0.0
Sortable	bool	true		Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the grid AllowSorting parameter.	1.0.0
SortDirection	SortDirection	SortDirection.None		Gets or sets the default sort direction of a column. Use SortDirection.Ascending or SortDirection.Descending	1.0.0
SortKeySelector	Expression<Func<TItem, IComparable>>			Expression used for sorting.	1.0.0
SortString	string	null		Gets or sets the column sort string. This string is passed to the backend/API for sorting. And it is ignored for client-side sorting.	1.0.0
StringComparison	StringComparison	StringComparison.OrdinalIgnoreCase		Gets or sets the StringComparison. Use StringComparison.CurrentCulture or StringComparison.CurrentCultureIgnoreCase or StringComparison.InvariantCulture or StringComparison.InvariantCultureIgnoreCase or StringComparison.Ordinal or StringComparison.OrdinalIgnoreCase.	1.0.0
TextAlignment	Alignment	Alignment.Start		Gets or sets the text alignment. Use Alignment.Start or Alignment.Center or Alignment.End.	1.0.0
TextNoWrap	bool	false		Gets or sets text nowrap.	1.0.0

GridSettings Properties

Name	Type	Default	Required	Description	Added Version
PageNumber	int			Page number.	1.0.0
PageSize	int			Size of the page.	1.0.0
Filters	IEnumerable<FilterItem>			Current filters.	1.0.0

Examples

Client side filtering

For filtering, AllowFiltering and PropertyName parameters are required. Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.

<Grid @ref="grid"
      TItem="Employee4"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee4" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee4" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee4" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1> employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        return await Task.FromResult(request.ApplyTo(employees));
    }
}

See demo here

Client side filtering with string comparision

In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.

info

By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" StringComparison="StringComparison.Ordinal">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1> employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        return await Task.FromResult(request.ApplyTo(employees));
    }
}

See demo here

Client side paging

For paging, AllowPaging and PageSize parameters are required. Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.

INFO

The default page size is 10.

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowPaging="true"
      PageSize="5"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1> employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        return await Task.FromResult(request.ApplyTo(employees));
    }
}

See demo here

Client side sorting

For sorting, AllowSorting and SortKeySelector parameters are required. Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
            @context.Id
        </GridColumn>

        <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
            @context.Name
        </GridColumn>

        <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
            @context.Designation
        </GridColumn>

        <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
            @context.DOJ
        </GridColumn>

        <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1> employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        return await Task.FromResult(request.ApplyTo(employees));
    }
}

See demo here

Client side filtering, paging, and sorting

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      PageSize="5"
      AllowSorting="true"
      AllowSelection="true"
      SelectionMode="GridSelectionMode.Multiple"
      SelectedItemsChanged="OnSelectedItemsChanged"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

<div class="mt-3">
    Selected Items Count: @selectedEmployees.Count
</div>

<div class="mt-2">
    Selected Employees:
    <ul>
        @foreach (var emp in selectedEmployees)
        {
            <li>@emp.Name</li>
        }
    </ul>
</div>

@code {
    private IEnumerable<Employee1> employees = default!;

    private HashSet<Employee1> selectedEmployees = new();

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }

    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
    {
        selectedEmployees = employees is not null && employees.Any() ? employees : new();
        return Task.CompletedTask;
    }
}

See demo here

Set default filter

FilterOperator and FilterValue parameters are required to set the default filter.

TIP

You can set the default filter on more than one GridColumn.

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" FilterOperator="FilterOperator.GreaterThanOrEquals" FilterValue="105">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1>? employees;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }
}

See demo here

Disable specific column filter

Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example.

INFO

By default, Filterable="true" on all the columns if the AllowFiltering parameter is set to true on the grid.

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" Filterable="false">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" Filterable="false">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1>? employees;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }
}

See demo here

Increase filter textbox width

Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.

NOTE

Filter textbox width measured in pixels.

<Grid TItem="Employee3"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee3" HeaderText="Id" PropertyName="Id" FilterTextboxWidth="80">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="First Name" PropertyName="FirstName" FilterTextboxWidth="80">
            @context.FirstName
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Last Name" PropertyName="LastName" FilterTextboxWidth="80">
            @context.LastName
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Email" PropertyName="Email">
            @context.Email
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Company" TextNoWrap="true" PropertyName="Company">
            @context.Company
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Designation" TextNoWrap="true" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End" PropertyName="Salary" FilterTextboxWidth="80">
            @context.Salary.ToString("N2")
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee3>? employees;

    private async Task<GridDataProviderResult<Employee3>> EmployeesDataProvider(GridDataProviderRequest<Employee3> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee3> GetEmployees()
    {
        return new List<Employee3>
        {
            new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
            new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
            new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
            new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
            new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },
            new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
            new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
            new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },
            new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
        };
    }
}

See demo here

Server side filtering, paging and sorting

NOTE

For server-side sorting, we need the SortString parameter on GridColumn along with the SortKeySelector parameter.

<Grid TItem="Customer2"
      Class="table table-hover table-bordered table-striped"
      DataProvider="CustomersDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      AllowSorting="true"
      Responsive="true">

    <GridColumn TItem="Customer2" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
        @context.CustomerId
    </GridColumn>
    <GridColumn TItem="Customer2" 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" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
        @context.Country
    </GridColumn>

</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 });
    }
}

See demo here

Set default sorting

IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn. The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending" to the GridColumn.

INFO

If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column.

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowSorting="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="@(item => item.Id)">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="@(item => item.Name)" IsDefaultSortColumn="true" SortDirection="SortDirection.Descending">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="@(item => item.Designation)">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="@(item => item.DOJ)">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="@(item => item.IsActive)">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1>? employees;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }
}

See demo here

Disable specific column sorting

Add Sortable="false" parameter the GridColumn to disable the sorting.

INFO

If sorting is disabled, then the SortKeySelector parameter is not required.

The sorting is disabled on the Designation column in the below example.

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowSorting="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="@(item => item.Id)">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="@(item => item.Name)">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" Sortable="false">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="@(item => item.DOJ)">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="@(item => item.IsActive)">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1>? employees;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }
}

See demo here

Header text alignment

Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.

<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" HeaderTextAlignment="Alignment.Center">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" HeaderTextAlignment="Alignment.Center">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" HeaderTextAlignment="Alignment.Center">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" HeaderTextAlignment="Alignment.End">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee1>? employees;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }
}

See demo here

Cell alignment

Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.

<Grid TItem="Employee2"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider">

    <GridColumns>
        <GridColumn TItem="Employee2" HeaderText="Id" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Employee Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End">
            @context.Salary
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee2>? employees;

    private async Task<GridDataProviderResult<Employee2>> EmployeesDataProvider(GridDataProviderRequest<Employee2> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee2> GetEmployees()
    {
        return new List<Employee2>
        {
            new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },
            new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },
            new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },
            new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },
            new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },
            new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },
            new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },
            new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },
            new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },
        };
    }
}

See demo here

Cell formating

To format the cell data, use ToString() method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET

EXAMPLE

@context.Salary.ToString("N2")

<Grid TItem="Employee2" class="table table-hover table-bordered table-striped" DataProvider="EmployeesDataProvider">
<Grid TItem="Employee2"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider">

    <GridColumns>
        <GridColumn TItem="Employee2" HeaderText="Id" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Employee Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End">
            @context.Salary.ToString("N2")
        </GridColumn>
        <GridColumn TItem="Employee2" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee2>? employees;

    private async Task<GridDataProviderResult<Employee2>> EmployeesDataProvider(GridDataProviderRequest<Employee2> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee2> GetEmployees()
    {
        return new List<Employee2>
        {
            new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },
            new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },
            new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },
            new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },
            new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },
            new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },
            new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },
            new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },
            new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },
        };
    }
}

See demo here

Cell nowrap

To prevent text from wrapping, add TextNoWrap="true" parameter to the GridColumn.

TIP

Add Responsive="true" parameter to the grid to enable horizontal scrolling.

<Grid TItem="Employee3"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee3" HeaderText="Id" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="First Name">
            @context.FirstName
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="First Name">
            @context.LastName
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Email">
            @context.Email
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Company" TextNoWrap="true">
            @context.Company
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Designation" TextNoWrap="true">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Salary" HeaderTextAlignment="Alignment.End" TextAlignment="Alignment.End">
            @context.Salary.ToString("N2")
        </GridColumn>
        <GridColumn TItem="Employee3" HeaderText="Active" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<Employee3>? employees;

    private async Task<GridDataProviderResult<Employee3>> EmployeesDataProvider(GridDataProviderRequest<Employee3> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee3> GetEmployees()
    {
        return new List<Employee3>
        {
            new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
            new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
            new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
            new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
            new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },
            new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
            new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
            new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },
            new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
        };
    }
}

See demo here

Empty data

If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid.

<Grid TItem="Employee"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      EmptyText="No records to display">

    <GridColumns>
        <GridColumn TItem="Employee" HeaderText="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee" HeaderText="First Name">
            @context.FirstName
        </GridColumn>
        <GridColumn TItem="Employee" HeaderText="Last Name">
            @context.LastName
        </GridColumn>
        <GridColumn TItem="Employee" HeaderText="Designation">
            @context.Designation
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private async Task<GridDataProviderResult<Employee>> EmployeesDataProvider(GridDataProviderRequest<Employee> request)
    {
        await Task.Delay(3000);

        return (new GridDataProviderResult<Employee> { Data = new List<Employee>(), TotalCount = 0 });
    }
}

See demo here

Empty data template

Set the GridEmptyDataTemplate to customize the message displayed when the grid has no records.

<Grid TItem="Employee"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider">

    <GridColumns>
        <GridColumn TItem="Employee" HeaderText="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee" HeaderText="First Name">
            @context.FirstName
        </GridColumn>
        <GridColumn TItem="Employee" HeaderText="Last Name">
            @context.LastName