add [Virtualize] to/in [Datagrid] using remote data and pagination about fluentui-blazor HOT 6 CLOSED

<h1>@_ErorMsg</h1>

<FluentCard Width="100%" >
    <h3>Customer</h3>
    <FluentDataGrid ItemsProvider="@_customerProvider" ResizableColumns="false" 
                     Style="width: 100%" Loading="true" Pagination="@_pagination">
        <PropertyColumn Property="@(p=>p.name)" Sortable="true"
                        Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name">
            <ColumnOptions >
                <div class="search-box">
                    <FluentSearch type="search" Autofocus=true @bind-Value="nameFilter"
                                  @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Name"/>
                </div>
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Property="@(c => c.phone)" Sortable="true" Class="multiline-text"/>
        <PropertyColumn Property="@(c => c.address)" Sortable="true" Class="multiline-text"/>

    </FluentDataGrid>

    <FluentPaginator  State="@_pagination"   >
        <SummaryTemplate >
            Total rows :  <strong>@((_pagination.TotalItemCount ?? 0).ToString("N0"))</strong>
            <p>Time to load : @_loadingTime</p>
        </SummaryTemplate>

        <PaginationTextTemplate>
            <strong>@((_pagination.CurrentPageIndex + 1).ToString("N0"))</strong> of <strong>@((_pagination.LastPageIndex + 1).Value.ToString("N0"))</strong>
        </PaginationTextTemplate>
    </FluentPaginator>

</FluentCard>

PaginationState _pagination = new PaginationState { ItemsPerPage = 10 };
string? nameFilter = null; 
private string _loadingTime { get; set; }
private string _ErorMsg { get; set; } 

GridItemsProvider<Shared.Models.Customer>? _customerProvider;

 

 protected override async Task OnInitializedAsync()
{         
   await LoadData(); 
}

private async Task LoadData()
{
    _customerProvider = async req =>
    {
        
        Stopwatch _stopwatch =Stopwatch.StartNew();
        // Construct the URL with query parameters
        bool? sortingByAscending = req.SortByAscending!;
        string? column = string.Empty;
        if (req.SortByColumn is not null)
        {
            column = req.SortByColumn!.Title;
        }
        string apiUrl = $"{_NavigationManager.BaseUri}api/Customer";
        string queryParameters = 
            $"?skip={req.StartIndex}&take={req.Count}&sortingByAscending={sortingByAscending}&column={column.ToLower()}";
        Console.WriteLine("sardar url : "+queryParameters);
        if (!string.IsNullOrEmpty(nameFilter))
        {
            queryParameters += $"&where={Uri.EscapeDataString(nameFilter)}";
        }
        string fullUrl = apiUrl + queryParameters; 
        var response = await  _Http.GetFromJsonAsync<PaginationDTO.MyPaginationDTO>( fullUrl);
        _stopwatch.Stop();
        TimeSpan loadingTime2 = _stopwatch.Elapsed;
        _loadingTime = string.Format("{0:D2}h:{1:D2}m:{2:D2}s:{3:D3}ms",
            loadingTime2.Hours, loadingTime2.Minutes, loadingTime2.Seconds, loadingTime2.Milliseconds);
        // Check if response is successful and contains data 
        if (response != null && response.customers != null)
        {
            if (response.customers.Count <= 0)
            {
                return GridItemsProviderResult.From(Array.Empty<Shared.Models.Customer>(), 0);
            }
            else
            {
                return GridItemsProviderResult.From(items: response.customers, totalItemCount: response.totalCount);
            }
        }
        else
        { 
            return GridItemsProviderResult.From(Array.Empty<Shared.Models.Customer>(), 0);
        }
     
    };
    
}

private async Task HandleCountryFilter(ChangeEventArgs args)
{
    if (args.Value is string value)
    {
        nameFilter = value;
    }

   await LoadData();
}

private async Task HandleClear()
{
    if (string.IsNullOrWhiteSpace(nameFilter))
    {
        nameFilter = string.Empty;
        await LoadData();
    } 
}

 var response = await  _Http.GetFromJsonAsync<PaginationDTO.MyPaginationDTO>( fullUrl);

pagedData = data.Skip(state.Page * state.PageSize).Take(state.PageSize).ToArray();