Having items per page in FluentPaginator

[thieng101]

Hello, I want to ask if FluentPaginator includes item-per-page properties. Or if I can create item-per-page component using FluentSelect as provided code below:

<FluentPaginator State="_paginationState" /> <FluentStack HorizontalAlignment="HorizontalAlignment.Right" HorizontalGap="20"> <div style="display: inline-flex; align-items: center; border: 1px solid #e8ecef; border-radius: 7px;"> <FluentSelect Width="fit-content;" Value="@selValue" ValueChanged="OnValueChanged" TOption="string"> <FluentOption Value="10">10 Items</FluentOption> <FluentOption Value="25">25 Items</FluentOption> <FluentOption Value="50">50 Items</FluentOption> <FluentOption Value="100">100 Items</FluentOption> </FluentSelect> <FluentLabel Style="padding: 0 12px"> Per Page </FluentLabel> </div> </FluentStack>

It looks like in the picture:

But what I want to achieve is the items per page will be right next to the page selector where the red mark is:

Is there any way to achieve that ?

[vnbaaij]

For now you will have to position the select yourself.
It is on our backlog to make that easier.

[hml-coder]

Here's the start of a small wrapper component as maybe an option for now but more work would be needed to support the pagination templates etc.

@inject IJSRuntime JS

<div id="paginator-container" style="width: 100%; position:relative;">
    <FluentPaginator State="@PaginationState" Style="width: 100%;" />

    <FluentStack Id="paginator-stack" Style="@GetPaginatorStackStyle()"
                 HorizontalGap="0"
                 HorizontalAlignment="HorizontalAlignment.Right"
                 VerticalAlignment="VerticalAlignment.Top">
        <FluentSelect Width="fit-content;" Value="@itemsPerPage" ValueChanged="OnValueChanged" TOption="string" Style="margin: -1px;">
            <FluentOption Value="10" Selected="true">10 Items</FluentOption>
            <FluentOption Value="25">25 Items</FluentOption>
            <FluentOption Value="50">50 Items</FluentOption>
            <FluentOption Value="100">100 Items</FluentOption>
        </FluentSelect>
        <FluentLabel Style="padding: 0 12px; white-space:nowrap;margin-block:auto">Per Page</FluentLabel>
    </FluentStack>

</div>

@code {
    [Parameter, EditorRequired]
    public PaginationState PaginationState { get; set; }

    string itemsPerPage = "10";
    public int paginatorButtonsWidth { get; set; }

    protected override void OnInitialized()
    {
        PaginationState.ItemsPerPage = Convert.ToInt32(itemsPerPage);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await GetPaginatorWidth();
        }
    }

    private async Task GetPaginatorWidth()
    {
        paginatorButtonsWidth = await JS.InvokeAsync<int>("getPaginatorWidth", ".paginator-nav");
        await InvokeAsync(StateHasChanged);
    }

    private async Task OnValueChanged(string newValue)
    {
        PaginationState.ItemsPerPage = Convert.ToInt32(newValue);
        await PaginationState.SetCurrentPageIndexAsync(0);
    }

    private string GetPaginatorStackStyle()
    {
        return $"position: absolute; right: {paginatorButtonsWidth + 12}px; top: 0; margin-top: 3px; width: auto; border: 1px solid #f1f1f1; border-radius: 5px;";
    }
}

<script>
    window.getPaginatorWidth = (selector) => {
        const element = document.querySelector(selector);
        return element ? element.offsetWidth : null;
    };
</script>