Blazor Grid - Custom CSS Class

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.

Conditional css class for grid row #

In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.
<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      PageSize="5"
      AllowSorting="true"
      Responsive="true"
      RowClass="GetRowClass">

    <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>

@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 string GetRowClass(Employee1 emp)
    {
        if (!emp.IsActive)
            return "table-danger";
        else if (emp.Designation == "Architect")
            return "table-success";

        return string.Empty;
    }

    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 },
        };
    }
}

Conditional css class for grid column #

In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active.
<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      PageSize="5"
      AllowSorting="true"
      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"
                    ColumnClass="@(x => x.IsActive ? "table-success" : "table-danger")">
            @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 = 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 },
        };
    }
}

Column Class #

In the following example, the Class parameter is used to apply the CSS class to an entire grid column, including the header.
<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      PageSize="5"
      AllowSorting="true"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" Class="text-danger" 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>

@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 = 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 },
        };
    }
}

Header row css class #

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-primary text-white border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-primary text-white bg-opacity-75 border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-success text-white border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-success text-white bg-opacity-75 border-bottom-0"
      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 = default!;

    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 = 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 },
        };
    }
}

Filters row css class #

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      FiltersRowCssClass="bg-primary text-white bg-opacity-25 border-bottom-0"
      HeaderRowCssClass="bg-primary text-white border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-warning text-white border-bottom-0"
      FiltersRowCssClass="bg-warning text-white bg-opacity-25 border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-danger text-white border-bottom-0"
      FiltersRowCssClass="bg-danger text-white bg-opacity-25 border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-success text-white border-bottom-0"
      FiltersRowCssClass="bg-success text-white bg-opacity-25 border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-info text-white border-bottom-0"
      FiltersRowCssClass="bg-info text-white bg-opacity-25 border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-dark text-white border-bottom-0"
      FiltersRowCssClass="bg-dark text-white bg-opacity-25 border-bottom-0"
      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>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-secondary text-white border-bottom-0"
      FiltersRowCssClass="bg-secondary text-white bg-opacity-25 border-bottom-0"
      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>

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

    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 = 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 },
        };
    }
}
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.5.0.
  • Powered by .NET 10.0.0
Links
Guides
Community
Blazor Express

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.