[DataGrid] Add MinWidth parameter to ColumnBase

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1300,6 +1300,14 @@
             Needs to be a valid CSS width value like '100px', '10%' or '0.5fr'.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.MinWidth">
+            <summary>
+            Gets or sets the minimal width of the column.
+            Defaults to 100px for a regular column and 50px for a select column.
+            When resizing a column, the user will not be able to make it smaller than this value.
+            Needs to be a valid CSS width value like '100px', '10%' or '0.5fr'.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1.Grid">
             <summary>
             Gets a reference to the enclosing <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1" />.

src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs

@@ -151,6 +151,15 @@ public abstract partial class ColumnBase<TGridItem>
     [Parameter]
     public string? Width { get; set; }
 
+    /// <summary>
+    /// Gets or sets the minimal width of the column.
+    /// Defaults to 100px for a regular column and 50px for a select column.
+    /// When resizing a column, the user will not be able to make it smaller than this value.
+    /// Needs to be a valid CSS width value like '100px', '10%' or '0.5fr'.
+    /// </summary>
+    [Parameter]
+    public string MinWidth { get; set; } = "100px";
+
     /// <summary>
     /// Gets a reference to the enclosing <see cref="FluentDataGrid{TGridItem}" />.
     /// </summary>

src/Core/Components/DataGrid/Columns/SelectColumn.cs

@@ -36,6 +36,7 @@ public class SelectColumn<TGridItem> : ColumnBase<TGridItem>, IDisposable
     public SelectColumn()
     {
         Width = "50px";
+        MinWidth = "50px";
         ChildContent = GetDefaultChildContent();
 
         _itemsChanged = new(EventCallback.Factory.Create<object?>(this, UpdateSelectedItemsAsync));

src/Core/Components/DataGrid/FluentDataGrid.razor.js

@@ -1,5 +1,4 @@
 let grids = [];
-const minWidth = 100;
 
 export function init(gridElement, autoFocus) {
     if (gridElement === undefined || gridElement === null) {
@@ -255,7 +254,7 @@ export function enableColumnResizing(gridElement, resizeColumnOnAllRows = true)
                     const diffX = isRTL ? pageX - e.pageX : e.pageX - pageX;
                     const column = columns.find(({ header }) => header === curCol);
 
-                    column.size = parseInt(Math.max(minWidth, curColWidth + diffX), 10) + 'px';
+                    column.size = parseInt(Math.max(parseInt(column.header.style.minWidth), curColWidth + diffX), 10) + 'px';
 
                     columns.forEach((col) => {
                         if (col.size.startsWith('minmax')) {
@@ -373,7 +372,7 @@ export function resizeColumnDiscrete(gridElement, column, change) {
             const width = headerBeingResized.getBoundingClientRect().width + change;
 
             if (change < 0) {
-                column.size = Math.max(minWidth, width) + 'px';
+                column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
             }
             else {
                 column.size = width + 'px';
@@ -400,7 +399,7 @@ export function resizeColumnExact(gridElement, column, width) {
 
     grids.find(({ id }) => id === gridElement.id).columns.forEach(column => {
         if (column.header === headerBeingResized) {
-            column.size = Math.max(minWidth, width) + 'px';
+            column.size = Math.max(parseInt(column.header.style.minWidth), width) + 'px';
         }
         else {
             if (column.size.startsWith('minmax')) {

src/Core/Components/DataGrid/FluentDataGridCell.razor.cs

@@ -71,6 +71,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("grid-column", GridColumn.ToString(), () => !Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null) && Grid.DisplayMode == DataGridDisplayMode.Grid)
         .AddStyle("text-align", "center", Column is SelectColumn<TGridItem>)
         .AddStyle("align-content", "center", Column is SelectColumn<TGridItem>)
+        .AddStyle("min-width", Column?.MinWidth, Owner.RowType == DataGridRowType.Header)
         .AddStyle("padding-inline-start", "calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px)", Column is SelectColumn<TGridItem> && Owner.RowType == DataGridRowType.Default)
         .AddStyle("padding-top", "calc(var(--design-unit) * 2.5px)", Column is SelectColumn<TGridItem> && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header))
         .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn<TGridItem> && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html

@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html

@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html

@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html

@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <span class="keycapture" style="width: 100%;" blazor:oncontextmenu="57" blazor:elementreference="">
             <fluent-button class="col-sort-button" style="width: calc(100% - 10px);" type="button" appearance="stealth" blazor:onclick="58" b-x1200685t0="" blazor:elementreference="">
@@ -14,7 +14,7 @@
           </span>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>

tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html

@@ -2,10 +2,10 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="cursor: pointer; margin-left: 12px;" blazor:onclick="26" blazor:onkeydown="27">➖</div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Name</div>

tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html

@@ -2,14 +2,14 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 50px auto;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
   <thead b-ppmhrkw1mj="">
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
-      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="1" class="column-header select-all col-justify-center" style="grid-column: 1; text-align: center; align-content: center; min-width: 50px; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <svg style="width: 20px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="47" blazor:onkeydown="48">
           <title>Some rows are selected.</title>
           <path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
           <path d="M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z"></path>
         </svg>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; min-width: 100px; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div style="display: flex; justify-content: flex-start;" b-pxhtqoo8qd="">
           <div class="col-title" style="width: calc(100% - 10px);" b-pxhtqoo8qd="">
             <div class="col-title-text" b-pxhtqoo8qd="">Name</div>