lux/Lux.UI/Components/Compo/Config/ProfDataDetail.razor

<div class="modal" tabindex="-1" style="display:block; background-color: rgba(10,10,10,.6);" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="d-flex justify-content-between w-100">
                    <div class="px-0 fs-5">
                        <h3>Dizionario Parametri</h3>
                    </div>
                    <div class="px-0">
                        <div class="input-group">
                            <button class="btn btn-lg" @onclick="DoClose"><i class="fa-solid fa-xmark" title="Close Preview"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                @if (isLoading)
                {
                    <LoadingData></LoadingData>
                }
                else if (ListRecords == null || totalCount == 0)
                {
                    <div class="alert alert-warning fs-4">Nessun record trovato</div>
                }
                else
                {
                    <table class="table table-sm table-striped">
                        <thead>
                            <tr>
                                <th class="text-nowrap">Name</th>
                                <th class="text-nowrap">Value</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach (var item in ListRecords)
                            {
                                <tr>
                                    <td class="">@item.Key</td>
                                    <td class="">@item.Value</td>
                                </tr>
                            }
                        </tbody>
                        @if (totalCount >= numRecord)
                        {
                            <tfoot>
                                <tr>
                                    <td colspan="15">
                                        <EgwCoreLib.Razor.DataPager currPage="@currPage" PageSize="@numRecord" totalCount="@totalCount" numPageChanged="SavePage" numRecordChanged="SaveNumRec"></EgwCoreLib.Razor.DataPager>
                                    </td>
                                </tr>
                            </tfoot>
                        }
                    </table>
                }
            </div>
        </div>
    </div>
</div>

@code {

    [Parameter]
    public Dictionary<string, double> AllRecords { get; set; } = null!;

    [Parameter]
    public EventCallback<bool> EC_ReqClose { get; set; }

    protected override void OnParametersSet()
    {
        isLoading = true;
        UpdateTable();
    }

    protected void UpdateTable()
    {
        totalCount = AllRecords.Count;
        ListRecords = AllRecords
                        .OrderBy(x => x.Key)
                        .Skip(numRecord * (currPage - 1))
                        .Take(numRecord)
                        .ToDictionary(x => x.Key, x => x.Value);

        isLoading = false;
    }
    protected void SaveNumRec(int newNum)
    {
        isLoading = true;
        numRecord = newNum;
        UpdateTable();
    }

    protected void SavePage(int newNum)
    {
        isLoading = true;
        currPage = newNum;
        UpdateTable();
    }
    protected Dictionary<string, double>? ListRecords = null;

    private bool isLoading = false;
    private int currPage = 1;
    private int totalCount = 0;
    private int numRecord = 10;

    private async Task DoClose(MouseEventArgs args)
    {
        await EC_ReqClose.InvokeAsync(true);
    }
}