<div style="height:500px;overflow-y:scroll">
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<Virtualize ItemsProvider="LoadEmployeeDetails" Context="employee">
<ItemContent>
<tr>
<td>
<SfCard>
<CardHeader>Sample Card</CardHeader>
<CardContent>@employee.EmployeeId</CardContent>
</SfCard>
</td>
<td>
<SfCard>
<CardHeader>Sample Card</CardHeader>
<CardContent>@employee.Name</CardContent>
</SfCard>
</td>
<td>
<SfCard>
<CardHeader>Sample Card</CardHeader>
<CardContent>@employee.Role</CardContent>
</SfCard>
</td>
</tr>
</ItemContent>
<Placeholder>
<p>Loading employee details...</p>
</Placeholder>
</Virtualize>
</tbody>
</table>
</div>
@code {
private List<EmployeeDetails> employees;
protected override async Task OnInitializedAsync()
{
employees = await GetEmployeeDetails();
}
private async ValueTask<ItemsProviderResult<EmployeeDetails>> LoadEmployeeDetails(ItemsProviderRequest request)
{
var employees = await GetEmployeeDetails();
return new ItemsProviderResult<EmployeeDetails>(employees.Skip(request.StartIndex).Take(request.Count), employees.Count());
}
private async Task<List<EmployeeDetails>> GetEmployeeDetails()
{
List<EmployeeDetails> employeeList = new List<EmployeeDetails>();
List<string> roleList = new List<string>() { ".Net Developer", "Testing Engineer", "Graphic Designer", "Technical Writer", "Support Coordinator" };
int roleArrayIndex = 0;
int tempCount = 0;
int employeeDataCount = 100;
for (int i = 1; i <= employeeDataCount; i++)
{
if (i > tempCount + employeeDataCount / roleList.Count())
{
roleArrayIndex++;
tempCount = i - 1;
}
var employeeDetails = new EmployeeDetails()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Role = roleList[roleArrayIndex]
};
employeeList.Add(employeeDetails);
}
return await Task.FromResult(employeeList);
}
public class EmployeeDetails
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Role { get; set; }
}
}
<style>
.e-card {
background-color: antiquewhite;
height: 300px;
}
</style>
