FluentDataGrid - column resizing with additional unwanted effects

[gryzorr]

🐛 Bug Report

When resizing FluentDataGrid column at the beginning width of current column gets smaller and all previous one shrinks also a little.

💻 Repro or Code Sample

See video and attachment.

🤔 Expected Behavior

When starting resize operation previous columns and current one should not shrink.

😯 Current Behavior

Each time user starts resize column (very little move to right to start enlarge column) all columns to the left shrinks causing that current column gets smaller on start (resize cursor doesn't match column separator). When there is more columns and user repeats operation for more than one column sometimes prevoius one need correction and so on.

💁 Possible Solution

beyond my capabilities :-)

🔦 Context

Minor problem (at the moment we use components only for internal app) but nice to have a solution.

🌍 Your Environment

• OS & Device: Windows
• Browser: Microsoft Edge, Google Chrome
• .NET and Fluent UI Blazor library Version: 4.9.1

Nagrywanie.ekranu.2024-07-15.155130.mp4

[gryzorr]

And ofcourse example code.
BlazorAppTest.zip

[michaelc06]

Can confirm noticing the same issues. Repeatable on https://www.fluentui-blazor.net/DataGrid -> Typical usage

[f4n0]

Same here:
Live: https://f4n0.github.io/BlazorGenerator/list
Code: https://github.com/f4n0/BlazorGenerator/tree/master/BlazorGenerator/Components/DataGrid

[f4n0]

Hi, @vnbaaij !
I've tried something. by editing the js function to use % values instead of px values, it seems to work better. but I don't think that could be the real fix to the issue

[vnbaaij]

I think it has to do with conversion of fractions to pixels. Not sure if we can do anything about that.

Considering this as a minimum impact issue which I will not spend too much time on.

I labeled this as a community issue. Someone interested in solving this can pick it up. If no one responds, I will close this in about a week.

[f4n0]

Well, I don't really think that this is a minimum impact issue.
The column resizing of a table it's an essential feature, and this need to work. The end user uses this functionality practically every day!

For my app, if you resize the table multiple times, the select column will disappear!

EDIT:
Why is fluentui-blazor resizing columns via grid template column? why not the width parameter?