How to specify (fixed) width for columns in a data grid ?

[MBNSoftware]

Hello,

I'm using a data grid to display data from a SQLite database (with random generated data for now) and it's working as expected.

But the grid changes its size or its columns sizes when I go to "next page" :

Some columns, like the first one with a check box does not need to be that large, but the size of other columns seems to vary according to the length of the cells content.
The size of the grid does change accordingly and either expand or shrink, which is not nice as the pagination buttons don't stay at the same location :(

How could I specify fixed columns width and fixed grid size ?

Edit :
Here is the code behind, if it can help :

<FluentDataGrid Pagination="@pagination" Items="@Articles" Virtualize="true" TGridItem="Product" OnRowFocus="HandleRowFocus" RowClass="@rowClass">
    <TemplateColumn Align="Align.Start">
        <FluentCheckbox Id="checkActif" Value="@context.IsActive" ThreeState="false" ReadOnly="true" Embedded="true"/>
    </TemplateColumn>
        <PropertyColumn Align="Align.Start" Property="@(p => p.Id)" Sortable="true" />
        <PropertyColumn Align="Align.Start" Property="@(p => p.Name)" Sortable="true" />
        <PropertyColumn Align="Align.Start" Property="@(p => p.Designation)" Sortable="false" />
</FluentDataGrid>
<FluentPaginator State="@pagination">
        <SummaryTemplate>
            <strong>@(pagination.TotalItemCount ?? 0)</strong> articles
        </SummaryTemplate>
        <PaginationTextTemplate>
            Page <strong>@(pagination.CurrentPageIndex + 1)</strong> sur <strong>@(pagination.LastPageIndex + 1)</strong>
        </PaginationTextTemplate>
</FluentPaginator>

Regards,
Christophe

[vnbaaij]

Hard to say exactly what is happening without seeing the code. You can specify the widths of the columns by setting the GridTemplateColumn parameter on the grid component like this:

GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"

(adjusted to your number of columns of course)

[MBNSoftware]

Thanks for you reply. (I had added the code meanwhile ;))

You have answered my question.
Using the GridTemplateColumns parameter does indeed solve my issue but only if I use pixels units and not fr units.

GridTemplateColumns="50px 80px 200px 300px" is fine but as soon as I add a "fr" value, in the last column for example, then its width will again vary depending on data (at least I suppose) and then the paginator will change its location.

But I think I can go with that :)

Thank you very much,
Christophe