Add coulumn Width parameter (#1902)

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

@@ -1340,11 +1340,11 @@
              </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.PropertyColumn`2.Comparer">
-            <summary>
-            Optionally specifies how to compare values in this column when sorting.
+             <summary>
+             Optionally specifies how to compare values in this column when sorting.
 
-            Using this requires the <typeparamref name="TProp"/> type to implement <see cref="T:System.IComparable`1"/>.
-            </summary>
+             Using this requires the <typeparamref name="TProp"/> type to implement <see cref="T:System.IComparable`1"/>.
+             </summary>
         </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.PropertyColumn`2.OnParametersSet">
             <inheritdoc />

examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor

@@ -25,7 +25,7 @@
 <p>
     You can use the <kbd>Arrow</kbd> keys to navigate through a DataGrid. When a header cell is focused and the column is sortable, you can use the <kbd>Tab</kbd> key to select the sort button.
     Pressing the <kbd>Enter</kbd> key will toggle the sorting direction. Pressing <kbd>Ctrl+Enter</kbd> removes the column sorting and restores the default/start situation with regards to sorting.
-    <em>You cannot not remove the default grid sorting with this key combination.</em>
+    <em>You cannot remove the default grid sorting with this key combination.</em>
 </p>
 <p>
     When a header cell is focused and the column allows setting options, you can use the <kbd>Tab</kbd> key to select the options button.
@@ -154,6 +154,10 @@
         <p>
             You can make columns appear conditionally using normal Razor logic such as <code>@@if</code>. Example:
         </p>
+        <p>
+            Also, in this example the columns's Width parameter is being set instead of specifying all widths for all
+            columns in the <code>GridTemplateColumn</code> parameter.
+        </p>
     </Description>
 </DemoSection>
 

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridDynamicColumns.razor

@@ -7,22 +7,26 @@
 </p>
 
 
-    <FluentDataGrid Items="@Data.People" GridTemplateColumns="0.5fr 1fr 1fr" style="width: 500px;">
-        <PropertyColumn Title="ID" Property="@(c => c.PersonId)" Sortable="true" />
+    <FluentDataGrid Items="@Data.People" Style="width: 500px;">
+        <PropertyColumn Title="ID" Property="@(c => c.PersonId)" Sortable="true" Width="100px" />
         @if (showName)
         {
-            <TemplateColumn Title="Name">
+            <TemplateColumn Title="Name" Width="200px">
                 <strong>@context.LastName</strong>, @context.FirstName
             </TemplateColumn>
         }
         @if (showBirthDate)
         {
-            <PropertyColumn Title="Birth date" Property="@(c => c.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+            <PropertyColumn Title="Birth date"
+                            Property="@(c => c.BirthDate)"
+                            Format="yyyy-MM-dd"
+                            Sortable="true"
+                            Width="200px"/>
         }
     </FluentDataGrid>
 
 
 @code {
     bool showName = true;
     bool showBirthDate = false;
-}
+}

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

@@ -100,6 +100,13 @@ public abstract partial class ColumnBase<TGridItem>
     /// </summary>
     [Parameter] public RenderFragment<PlaceholderContext>? PlaceholderTemplate { get; set; }
 
+    /// <summary>
+    /// Gets or sets the width of the column.
+    /// Use either this or the <see cref="FluentDataGrid{TGridItem}"/> GridTemplateColumns parameter but not both.
+    /// Needs to be a valid CSS width value like '100px', '10%' or '0.5fr'.
+    /// </summary>
+    [Parameter] public string? Width { get; set; }
+
     /// <summary>
     /// Gets a reference to the enclosing <see cref="FluentDataGrid{TGridItem}" />.
     /// </summary>

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

@@ -36,7 +36,7 @@ public class PropertyColumn<TGridItem, TProp> : ColumnBase<TGridItem>, IBindable
 
     /// <summary>
     /// Optionally specifies how to compare values in this column when sorting.
-    /// 
+    ///
     /// Using this requires the <typeparamref name="TProp"/> type to implement <see cref="IComparable{T}"/>.
     /// </summary>
     [Parameter] public IComparer<TProp>? Comparer { get; set; } = null;

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -15,7 +15,7 @@
         <fluent-data-grid @ref=_gridReference
                           no-tabbing=@NoTabbing
                           generate-header="none"
-                          grid-template-columns=@GridTemplateColumns
+                          grid-template-columns=@_internalGridTemplateColumns
                           class="@GridClass()"
                           style="@Style"
                           aria-rowcount="@(_ariaBodyRowCount + 1)"
@@ -91,7 +91,7 @@
         var rowClass = RowClass?.Invoke(item) ?? null;
         var rowStyle = RowStyle?.Invoke(item) ?? null;
         Loading = false;
-        <FluentDataGridRow @key="@(ItemKey(item))" GridTemplateColumns=@GridTemplateColumns aria-rowindex="@rowIndex" Class="@rowClass" Style="@rowStyle" TGridItem="TGridItem" Item="@item">
+        <FluentDataGridRow @key="@(ItemKey(item))" GridTemplateColumns=@_internalGridTemplateColumns aria-rowindex="@rowIndex" Class="@rowClass" Style="@rowStyle" TGridItem="TGridItem" Item="@item">
             @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
             {
                 var col = _columns[colIndex];

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

@@ -102,6 +102,8 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
 
     /// <summary>
     /// Gets or sets the value that gets applied to the css gridTemplateColumns attribute of child rows.
+    /// Can be specified here or on the column level with the Width parameter but not both.
+    /// Needs to be a valid CSS string of space-separated values, such as "auto 1fr 2fr 100px".
     /// </summary>
     [Parameter]
     public string? GridTemplateColumns { get; set; } = null;
@@ -181,6 +183,8 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     private readonly RenderFragment _renderEmptyContent;
     private readonly RenderFragment _renderLoadingContent;
 
+    private string? _internalGridTemplateColumns;
+
     // We try to minimize the number of times we query the items provider, since queries may be expensive
     // We only re-query when the developer calls RefreshDataAsync, or if we know something's changed, such
     // as sort order, the pagination state, or the data source itself. These fields help us detect when
@@ -207,6 +211,7 @@ public FluentDataGrid()
         _renderNonVirtualizedRows = RenderNonVirtualizedRows;
         _renderEmptyContent = RenderEmptyContent;
         _renderLoadingContent = RenderLoadingContent;
+        _internalGridTemplateColumns = GridTemplateColumns;
 
         // As a special case, we don't issue the first data load request until we've collected the initial set of columns
         // This is so we can apply default sort order (or any future per-column options) before loading data
@@ -299,6 +304,17 @@ private void FinishCollectingColumns()
     {
         _collectingColumns = false;
         _manualGrid = _columns.Count == 0;
+
+        if (!string.IsNullOrWhiteSpace(GridTemplateColumns) && _columns.Any(x => !string.IsNullOrWhiteSpace(x.Width)))
+        {
+            throw new Exception("You can use either the 'GridTemplateColumns' parameter on the grid or the 'Width' property at the column level, not both.");
+        }
+
+        if (string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && _columns.Any(x => !string.IsNullOrWhiteSpace(x.Width)))
+        {
+            _internalGridTemplateColumns = string.Join(" ", _columns.Select(x => x.Width ?? "auto"));
+        }
+
         if (ResizableColumns)
         {
             _ = Module?.InvokeVoidAsync("enableColumnResizing", _gridReference).AsTask();