[dev-v5][DataGrid] width issues (#4588)

vnbaaij · web-flow · commit d92c6362d582 · 2026-03-06T16:53:32.000Z
* First fixes

* - Tweak col-sort-button width
- Update verified files
- Set table-layout:fixed when in DisplayMode table

* Process review comments
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/FluentDataGrid.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/FluentDataGrid.md
@@ -45,6 +45,8 @@ again will toggle the sort direction. When `HeaderCellAsButtonWithMenu` is true,
 A sort can be removed by right clicking (or by pressing <kbd>Shift</kbd> + <kbd>r</kbd>) on the header column (with exception of
 the default sort).
 
+_The minimal width for a sortable column is 75 pixels._
+
 ## Row size
 
 The DataGrid offers a `RowSize` parameter which allows you to use different preset row heights. The value uses the `DataGridRowSize`
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
@@ -118,9 +118,7 @@
 
                 @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
                 {
-
-                    // <FluentButton Appearance="ButtonAppearance.Subtle" Class="col-sort-button" Style="@($"width: calc(100% - {wdelta});")" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
-                    <FluentButton Appearance="ButtonAppearance.Subtle" Class="col-sort-button" Style="width: 100%;" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
+                    <FluentButton Appearance="ButtonAppearance.Subtle" Class="col-sort-button" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">
                         <div class="col-title-text" title="@tooltip">
                             @HeaderTitleContent
                         </div>
@@ -145,7 +143,7 @@
                 }
                 else
                 {
-					<div class="col-title" style="width: 100%;">
+					<div class="col-title">
                         <div class="col-title-text" title="@tooltip">
                             @HeaderTitleContent
                             @if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue)
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -1031,6 +1031,7 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
         .AddStyle("border-collapse", "separate", GenerateHeader == DataGridGeneratedHeaderType.Sticky)
         .AddStyle("border-spacing", "0", GenerateHeader == DataGridGeneratedHeaderType.Sticky)
         .AddStyle("width", "100%", DisplayMode == DataGridDisplayMode.Table)
+        .AddStyle("table-layout", "fixed", DisplayMode == DataGridDisplayMode.Table)
         .Build();
 
     private string? GridClass => DefaultClassBuilder
diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css
@@ -57,9 +57,10 @@
 }
 
 .fluent-data-grid .col-sort-button {
-  width: calc(100% - 20px);
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-width: 75px;
 }
 
 .fluent-data-grid .col-sort-button {
@@ -69,19 +70,23 @@
 .fluent-data-grid .col-justify-start .col-sort-button {
   justify-content: start;
   overflow: hidden;
-  opacity: 1
+  opacity: 1;
+  min-width: 75px;
 }
 
 .fluent-data-grid .col-justify-center .col-sort-button {
   justify-content: center;
   overflow: hidden;
-  opacity: 1
+  opacity: 1;
+  min-width: 75px;
 }
 
 .fluent-data-grid .col-justify-end .col-sort-button  {
   justify-content: end;
   overflow: hidden;
-  opacity: 1
+  opacity: 1;
+  min-width: 75px;
+
 }
 
 
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_IsFixed.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_IsFixed.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start col-sort-asc" style="min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="16" scope="col" aria-sort="ascending">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="sticky-header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StripedRows.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StripedRows.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/HierarchicalSelectColumnTests.HierarchicalSelectColumnTests_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/HierarchicalSelectColumnTests.HierarchicalSelectColumnTests_Rendering.verified.razor.html
@@ -6,7 +6,7 @@
 				<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
 					<th col-index="1" class="column-header col-justify-start" style="grid-column: 1; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="21" scope="col" aria-sort="none">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Id</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html
@@ -9,7 +9,7 @@
 					</th>
 					<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="30" scope="col" aria-sort="none">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html
@@ -13,7 +13,7 @@
 					</th>
 					<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html
@@ -7,7 +7,7 @@
 					<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
 					<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>
diff --git a/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html b/tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html
@@ -7,7 +7,7 @@
 					<th col-index="1" class="column-header select-all col-justify-center col-select" style="grid-column: 1; text-align: center; align-content: center; padding-top: 10px; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="none"></th>
 					<th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 40px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28" scope="col" aria-sort="none">
 						<div style="display: flex; justify-content: flex-start; padding: 0 6px; ">
-							<div class="col-title" style="width: 100%;">
+							<div class="col-title">
 								<div class="col-title-text">Name</div>
 							</div>
 						</div>

Original file line number	Diff line number	Diff line change
`@@ -118,9 +118,7 @@`
`118`	`118`
`119`	`119`	`@if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())`
`120`	`120`	`{`
`121`		`-`
`122`		`- // <FluentButton Appearance="ButtonAppearance.Subtle" Class="col-sort-button" Style="@($"width: calc(100% - {wdelta});")" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">`
`123`		`- <FluentButton Appearance="ButtonAppearance.Subtle" Class="col-sort-button" Style="width: 100%;" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">`
	`121`	`+ <FluentButton Appearance="ButtonAppearance.Subtle" Class="col-sort-button" @onclick="@(() => Grid.SortByColumnAsync(this))" aria-label="@tooltip" title="@tooltip" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(this))">`
`124`	`122`	`<div class="col-title-text" title="@tooltip">`
`125`	`123`	`@HeaderTitleContent`
`126`	`124`	`</div>`
`@@ -145,7 +143,7 @@`
`145`	`143`	`}`
`146`	`144`	`else`
`147`	`145`	`{`
`148`		`- <div class="col-title" style="width: 100%;">`
	`146`	`+ <div class="col-title">`
`149`	`147`	`<div class="col-title-text" title="@tooltip">`
`150`	`148`	`@HeaderTitleContent`
`151`	`149`	`@if (ColumnOptions is not null && Filtered.GetValueOrDefault() && Grid.ResizeType.HasValue)`