[DataGrid] Add AutoFit feature to size columns automatically as good as possible

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

@@ -1891,6 +1891,16 @@
             A default fragment is used if loading content is not specified.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.AutoFit">
+            <summary>
+            Sets <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.GridTemplateColumns"/> to automatically fit the columns to the available width as best it can.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SelectColumns">
+            <summary>
+            Gets the first (optional) SelectColumn
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.#ctor">
             <summary>
             Constructs an instance of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.

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

@@ -299,13 +299,41 @@ fluent-data-grid-row:has([row-selected]) {
             Example of using an outside <code>div</code> and the <code>Style</code> parameter to achieve a table like DataGrid with infinite horizontal scrollbars to display all content on all devices.
         </p>
         <p>
-            If you use this in combination with a sticky header, the style of the header will be lost for the columns that are renderded out of the view initially.
+            If you use this in combination with a sticky header, the style of the header will be lost for the columns that are rendered out of the view initially.
             You can fix this by adding the following <code>Style</code> to your data grid: <code>Style="min-width: max-content;"</code>
         </p>
 
     </Description>
 </DemoSection>
 
+<DemoSection Title="Auto Fit" Component="@typeof(FluentUI.Demo.Shared.Pages.DataGrid.Examples.DataGridAutoFit)">
+    <Description>
+        <p>
+            The example and code below show what you need to add to one of your Blazor page components to implement auto-fit.
+        </p>
+        <p>
+            The <code>AutoFit</code> parameter is used to automatically adjust the column widths to fit the content. It only runs on
+            the first render and does not update when the content changes.
+        </p>
+        <p>
+            The column widths are calculated with the process below:
+            <ul>
+                <li>
+                    Loop through the columns and find the biggest width of each cell of the column
+                </li>
+                <li>
+                    Build the <code>GridTemplateColumns</code> string using the <code>fr</code> unit
+                </li>
+            </ul>
+        </p>
+        <p>
+            This does not work
+            when <code>Virtualization</code> is turned on. The <code>GridTemplateColumns</code> parameter is ignored
+            when <code>AutoFit</code> is set to <code>true</code>. This is untested in MAUI.
+        </p>
+    </Description>
+</DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentDataGrid<>)" GenericLabel="TGridItem" />

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

@@ -0,0 +1,57 @@
+@using System.ComponentModel.DataAnnotations
+
+<FluentGrid Spacing="4">
+    <FluentGridItem xs="12">
+        <h4>With auto-fit</h4>
+        <FluentDataGrid Items="@people" AutoFit="true">
+            <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+            <PropertyColumn Property="@(p => p.Bio)" />
+        </FluentDataGrid>
+    </FluentGridItem>
+    <FluentGridItem xs="12">
+        <h4>Without auto-fit</h4>
+        <FluentDataGrid Items="@people">
+            <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
+            <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+            <PropertyColumn Property="@(p => p.Bio)" />
+        </FluentDataGrid>
+    </FluentGridItem>
+</FluentGrid>
+
+@code {
+    public class Person
+    {
+        public Person(int personId, string name, DateOnly birthDate, string bio)
+        {
+            PersonId = personId;
+            Name = name;
+            BirthDate = birthDate;
+            Bio = bio;
+        }
+
+        [Display(Name = "Identity")]
+        public int PersonId { get; set; }
+
+        [Display(Name = "Name")]
+        public string Name { get; set; }
+
+        [Display(Name = "Birth date")]
+        public DateOnly BirthDate { get; set; }
+
+        [Display(Name = "Biography")]
+        public string Bio { get; set; }
+    }
+
+    IQueryable<Person> people = new[]
+    {
+        new Person(10895, "Jean Martin", new DateOnly(1825, 11, 29), "Born on November 29, 1825, in Paris, France, is renowned as the founder of modern neurology."),
+        new Person(10944, "António Langa", new DateOnly(1972, 5, 15), "Born on May 15, 1972, in Columbia, South Carolina, is a distinguished former professional basketball player."),
+        new Person(11203, "Julie Smith", new DateOnly(1944, 11, 25), "Born on November 25, 1944, in Annapolis, Maryland, is an acclaimed American mystery writer celebrated for her rich storytelling."),
+        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27), "Nur Sari is a fictional character known for her extraordinary contributions to the field of renewable energy."),
+        new Person(11898, "Jose Hernandez", new DateOnly(1962, 8, 7), "Born on August 7, 1962, in French Camp, California, is a Mexican-American engineer."),
+        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9), ""),
+    }.AsQueryable();
+}

src/Core/Components/DataGrid/FluentDataGrid.razor

@@ -126,7 +126,6 @@
         </FluentDataGridRow>
     }
 
-
     private void RenderColumnHeaders(RenderTreeBuilder __builder)
     {
         @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)

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

@@ -8,6 +8,7 @@
 using Microsoft.FluentUI.AspNetCore.Components.Extensions;
 using Microsoft.FluentUI.AspNetCore.Components.Infrastructure;
 using Microsoft.JSInterop;
+
 using System.Diagnostics.CodeAnalysis;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -215,6 +216,17 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
     [Parameter]
     public RenderFragment? LoadingContent { get; set; }
 
+    /// <summary>
+    /// Sets <see cref="GridTemplateColumns"/> to automatically fit the columns to the available width as best it can.
+    /// </summary>
+    [Parameter]
+    public bool AutoFit { get; set; }
+
+    /// <summary>
+    /// Gets the first (optional) SelectColumn
+    /// </summary>
+    internal IEnumerable<SelectColumn<TGridItem>> SelectColumns => _columns.Where(col => col is SelectColumn<TGridItem>).Cast<SelectColumn<TGridItem>>();
+
     private ElementReference? _gridReference;
     private Virtualize<(int, TGridItem)>? _virtualizeComponent;
 
@@ -293,7 +305,14 @@ protected override void OnInitialized()
     /// <inheritdoc />
     protected override Task OnParametersSetAsync()
     {
-        _internalGridTemplateColumns = GridTemplateColumns;
+        if (AutoFit)
+        {
+            _internalGridTemplateColumns = "auto-fit";
+        }
+        else
+        {
+            _internalGridTemplateColumns = GridTemplateColumns;
+        }
 
         // The associated pagination state may have been added/removed/replaced
         _currentPageItemsChanged.SubscribeOrMove(Pagination?.CurrentPageItemsChanged);
@@ -337,6 +356,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 Console.WriteLine("[FluentDataGrid] " + ex.Message);
             }
+
+            if (AutoFit && _gridReference is not null)
+            {
+                _ = Module?.InvokeVoidAsync("autoFitGridColumns", _gridReference, _columns.Count).AsTask();
+            }
         }
 
         if (_checkColumnOptionsPosition && _displayOptionsForColumn is not null)
@@ -420,12 +444,7 @@ public Task SortByColumnAsync(string title, SortDirection direction = SortDirect
     {
         var column = _columns.FirstOrDefault(c => c.Title?.Equals(title, StringComparison.InvariantCultureIgnoreCase) ?? false);
 
-        if (column is not null)
-        {
-            return SortByColumnAsync(column, direction);
-        }
-
-        return Task.CompletedTask;
+        return column is not null ? SortByColumnAsync(column, direction) : Task.CompletedTask;
     }
 
     /// <summary>
@@ -435,12 +454,7 @@ public Task SortByColumnAsync(string title, SortDirection direction = SortDirect
     /// <param name="direction">The direction of sorting. The default is <see cref="SortDirection.Auto"/>. If the value is <see cref="SortDirection.Auto"/>, then it will toggle the direction on each call.</param>
     public Task SortByColumnAsync(int index, SortDirection direction = SortDirection.Auto)
     {
-        if (index >= 0 && index < _columns.Count)
-        {
-            return SortByColumnAsync(_columns[index], direction);
-        }
-
-        return Task.CompletedTask;
+        return index >= 0 && index < _columns.Count ? SortByColumnAsync(_columns[index], direction) : Task.CompletedTask;
     }
 
     /// <summary>
@@ -622,14 +636,13 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
     private string? GridClass()
     {
         var value = $"{Class} {(_pendingDataLoadCancellationTokenSource is null ? null : "loading")}".Trim();
-        if (string.IsNullOrEmpty(value))
-        {
-            return null;
-        }
-        else
+
+        if (AutoFit)
         {
-            return value;
+            value += " auto-fit";
         }
+
+        return string.IsNullOrEmpty(value) ? null : value;
     }
 
     private static string? ColumnClass(ColumnBase<TGridItem> column) => column.Align switch

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

@@ -5,15 +5,14 @@ fluent-data-grid {
 ::deep .empty-content-row,
 ::deep .loading-content-row {
     width: 100%;
-    height: 100% !important ;
+    height: 100% !important;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 ::deep .empty-content-cell,
 ::deep .loading-content-cell {
-
     font-weight: 600;
 }
 
@@ -55,7 +54,6 @@ fluent-data-grid {
     align-items: center;
 }
 
-
 ::deep .col-width-draghandle {
     height: auto;
     width: calc(var(--design-unit) * 1px + 2px);

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

@@ -91,7 +91,6 @@ export function checkColumnOptionsPosition(gridElement) {
     }
 }
 
-
 export function enableColumnResizing(gridElement) {
     if (gridElement === latestGridElement)
         return;
@@ -159,7 +158,7 @@ export function enableColumnResizing(gridElement) {
 }
 
 export function resetColumnWidths(gridElement) {
-
+    
     gridElement.gridTemplateColumns = initialColumnsWidths;
 }
 
@@ -216,6 +215,25 @@ export function resizeColumnDiscrete(gridElement, column, change) {
         .join(' ');
 }
 
+export function autoFitGridColumns(gridElement, columnCount) {
+    let gridTemplateColumns = '';
+
+    for (var i = 0; i < columnCount; i++) {
+        const columnWidths = Array
+            .from(gridElement.querySelectorAll(`[grid-column="${i + 1}"]`))
+            .flatMap((x) => x.offsetWidth);
+
+        const maxColumnWidth = Math.max(...columnWidths);
+
+        gridTemplateColumns += ` ${maxColumnWidth}fr`;
+    }
+
+    gridElement.setAttribute("grid-template-columns", gridTemplateColumns);
+    gridElement.classList.remove("auto-fit");
+
+    initialColumnsWidths = gridTemplateColumns;
+}
+
 export function resizeColumnExact(gridElement, column, width) {
 
     let headers = gridElement.querySelectorAll('.column-header.resizable');

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

@@ -2,6 +2,12 @@ fluent-data-grid-cell {
     text-overflow: ellipsis;
 }
 
+.auto-fit fluent-data-grid-cell {
+    text-overflow: unset;
+    overflow: visible;
+    visibility: hidden;
+}
+
 .multiline-text {
     white-space: inherit;
     overflow: auto;
@@ -18,14 +24,12 @@ fluent-data-grid-cell {
 }
 
     .column-header.col-justify-end, .column-header.col-justify-right {
-
         padding-right: 1px;
         padding-left: 1px;
         justify-content: end;
     }
 
     .column-header.col-justify-center {
-
         padding-left: 1px;
         padding-right: 1px;
         justify-content: center;
@@ -36,20 +40,20 @@ fluent-data-grid-cell {
         flex-grow: 1;
     }
 
-    .column-header > ::deep .keycapture .col-sort-container {
-        display: flex;
-        flex-grow: 1;
-    }
+        .column-header > ::deep .keycapture .col-sort-container {
+            display: flex;
+            flex-grow: 1;
+        }
 
-    .column-header > ::deep .keycapture .col-sort-container .col-sort-button {
-        flex-grow: 1;
-        padding-inline-end: 5px;
-    }
+            .column-header > ::deep .keycapture .col-sort-container .col-sort-button {
+                flex-grow: 1;
+                padding-inline-end: 5px;
+            }
 
-        .column-header > ::deep .keycapture .col-sort-container .col-sort-button::part(content) {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+                .column-header > ::deep .keycapture .col-sort-container .col-sort-button::part(content) {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
 
     .column-header.col-justify-end ::deep .col-title-text, .column-header.col-justify-right ::deep .col-title-text {
         text-align: end;
@@ -109,6 +113,3 @@ fluent-data-grid-cell {
     white-space: nowrap;
     font-weight: 600;
 }
-
-
-