<Grid TItem="Employee1"
 AllowFiltering="true"
 AllowPaging="true"
 AllowSorting="true"
 Class="table table-hover"
 DataProvider="EmployeesDataProvider"
 FiltersRowCssClass="bg-dark text-white bg-opacity-25 border-bottom-0"
 FiltersTranslationProvider="GridFiltersTranslationProvider"
 HeaderRowCssClass="bg-dark text-white border-bottom-0"
 PageSize="10"
 PageSizeSelectorVisible="true"
 PageSizeSelectorItems="@(new int[] { 5,10,20 })"
 PaginationItemsTextFormat="{0} - {1} van {2} artikelen"
 ItemsPerPageText="Artikelen per pagina"
 Responsive="true">
 <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>
</Grid>
@code {
 private IEnumerable<Employee1> employees = default!;
 private async Task<IEnumerable<FilterOperatorInfo>> GridFiltersTranslationProvider()
 {
 var filtersTranslation = new List<FilterOperatorInfo>();
 // number/date/boolean
 filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));
 filtersTranslation.Add(new("!=", "Niet gelijk", FilterOperator.NotEquals));
 // number/date
 filtersTranslation.Add(new("<", "Minder dan", FilterOperator.LessThan));
 filtersTranslation.Add(new("<=", "Kleiner dan of gelijk aan", FilterOperator.LessThanOrEquals));
 filtersTranslation.Add(new(">", "Groter dan", FilterOperator.GreaterThan));
 filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals));
 // string
 filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains));
 filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith));
 filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith));
 filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));
 // common
 filtersTranslation.Add(new("x", "Duidelijk", FilterOperator.Clear));
 return await Task.FromResult(filtersTranslation);
 }
 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 },
 };
 }
}