Custom Paging Ui Example positions column values incorrectly

[chigivigi]

🐛 Bug Report

On the Blazor fast demo page under the Datagrid examples exists a Custom paging UI Example.
Inside the example the number of the pages inside the Datagrid is displayed as buttons.
When accessing the data on another page the the positions of column values are incorrect. All column values are displayed on the far right and squished together.

💻 Repro or Code Sample

The code snipped are copied from the demo page:
Razor:

<div class="grid">
    <FluentDataGrid RowsData="@itemsQueryable" Pagination="@pagination">
        <PropertyColumn Property="@(c => c.Name)" Sortable="true" Class="country-name" />
        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Right" />
        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Right" />
        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" Align="Align.Right" />
    </FluentDataGrid>
</div>

<div class="page-buttons">
    Page:
    @if (pagination.TotalItemCount.HasValue)
    {
        for (var pageIndex = 0; pageIndex <= pagination.LastPageIndex; pageIndex++)
        {
            var capturedIndex = pageIndex;
            <FluentButton @onclick="@(() => GoToPageAsync(capturedIndex))"
                    Appearance="@PageButtonAppearance(capturedIndex)"
                    aria-current="@AriaCurrentValue(capturedIndex)"
                  aria-label="@AriaLabel(pageIndex + 1)">
                @(capturedIndex + 1)
            </FluentButton>
        }
    }
</div>

@code {
    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
    IQueryable<Country>? itemsQueryable;

    protected override async Task OnInitializedAsync()
    {
        itemsQueryable = (await Data.GetCountriesAsync()).AsQueryable();
        pagination.TotalItemCountChanged += (sender, eventArgs) => StateHasChanged();
    }

    private async Task GoToPageAsync(int pageIndex)
    {
        await pagination.SetCurrentPageIndexAsync(pageIndex);
    }

    private Appearance PageButtonAppearance(int pageIndex)
        => pagination.CurrentPageIndex == pageIndex ? Appearance.Accent : Appearance.Neutral;

    private string? AriaCurrentValue(int pageIndex)
        => pagination.CurrentPageIndex == pageIndex ? "page" : null;

    private string AriaLabel(int pageIndex)
        => $"Go to page {pageIndex}";
}

CSS:

/* Fix height and enable scrolling */
.grid {
    height: 24.5rem;
    overflow-y: auto;
}


/* Style the custom page links*/
.page-buttons {
    margin: 1rem 0;
    align-items: center;
}

    .page-buttons button {
        background: #d6d7d8;
        color: black;
        padding: 0.25rem 0.75rem;
        border-radius: 0.4rem;
        transition: transform 0.3s ease-out;
        margin: 0.25rem;
    }

        .page-buttons button:active {
            background: #a7c1ff !important;
            color: white;
            transform: scale(0.95) translateY(-0.15rem);
            transition-duration: 0.05s;
        }

        .page-buttons button:hover:not(.current) {
            background: #c0c9dc;
        }

        .page-buttons button.current {
            background: #3771f4;
            color: white;
        }

🤔 Expected Behavior

The column values should be aligned with the column title.

😯 Current Behavior

When the page in the Datagrid is changed the values in the column are no longer aligned with column title and are squished together on the right side of the Datagrid .

🔦 Context

When changing the page inside the Datagrid the displayed row values are squished together and for multiple rows. It makes it more difficult to associate the values to their respective rows and makes the data harder to read and use the information.

🌍 Your Environment

Windows 11
net6.0 framework
visual studio 2022
Microsoft Edge latest version

[chigivigi]

Link to demo page: https://brave-cliff-0c0c93310.azurestaticapps.net/DataGrid

[vnbaaij]

Check fixed version here: https://brave-cliff-0c0c93310-302.centralus.azurestaticapps.net/DataGrid