[DataGrid] Alter rendering to use table elements

Directory.Build.props

@@ -12,8 +12,8 @@
 		<SolutionDir>$(MSBuildThisFileDirectory)</SolutionDir>
 		<AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
 
-		<VersionFile>4.10.1</VersionFile>
-		<VersionPrefix>4.10.1</VersionPrefix>
+		<VersionFile>4.11.0</VersionFile>
+		<VersionPrefix>4.11.0</VersionPrefix>
 		<VersionSuffix></VersionSuffix>
 		<AssemblyVersion>$(VersionFile)</AssemblyVersion>
 		<FileVersion>$(VersionFile)</FileVersion>

eng/pipelines/version.yml

@@ -2,5 +2,5 @@ variables:
   # File and Package version
   # dev  branch: 1.2.4-Preview-23282-1'    (PackageSuffix is always ignored in Dev branch)
   # main branch: 1.2.4-RC.1'               (PackageSuffix is ignored, if empty, in Main branch)
-  FileVersion: '4.10.1'   # Set the next final version here.
+  FileVersion: '4.11.0'   # Set the next final version here.
   PackageSuffix: ''

examples/Demo/Shared/Components/ApiDocumentation.razor

@@ -26,7 +26,7 @@
         string header = Properties.Any(x => x.IsParameter) ? "Parameters" : "Properties";
         <h4 id="@(_id + "_properties")">@header</h4>
         <div class="docgrid">
-            <FluentDataGrid Items="@this.Properties.AsQueryable()" GridTemplateColumns="1fr 1fr 0.7fr 2fr">
+            <FluentDataGrid Items="@this.Properties.AsQueryable()" GridTemplateColumns="1fr 1fr 0.7fr 2fr" MultiLine="true">
                 <TemplateColumn Title="Name"><code>@context.Name</code></TemplateColumn>
                 <TemplateColumn Title="Type">
                     @context.Type
@@ -82,7 +82,7 @@
     {
         <h4 id="@(_id)_callbacks">EventCallbacks</h4>
         <div class="docgrid">
-            <FluentDataGrid Items="@this.Events.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr">
+            <FluentDataGrid Items="@this.Events.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr" MultiLine="true">
                 <TemplateColumn Title="Name"><code>@context.Name</code></TemplateColumn>
                 <PropertyColumn Property="@(c => c.Type)" />
                 <TemplateColumn Title="Description">
@@ -98,7 +98,7 @@
     {
         <h4 id="@(_id)_methods">Methods</h4>
         <div class="docgrid">
-            <FluentDataGrid Items="@this.Methods.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr 1fr">
+            <FluentDataGrid Items="@this.Methods.AsQueryable()" GridTemplateColumns="1fr 1fr 1fr 1fr" MultiLine="true">
                 <TemplateColumn Title="Name"><code>@context.Name</code></TemplateColumn>
                 <TemplateColumn Title="Parameters">
                     @foreach (var param in @context.Parameters)

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

@@ -1838,6 +1838,14 @@
              is small or if you are using pagination.
              </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OverscanCount">
+            <summary>
+            This is applicable only when using <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.Virtualize"/>. It defines how many additional items will be rendered
+            before and after the visible region to reduce rendering frequency during scrolling. While higher values can improve
+            scroll smoothness by rendering more items off-screen, they can also increase initial load times. Finding a balance
+            based on your data set size and user experience requirements is recommended. The default value is 3.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ItemSize">
             <summary>
             This is applicable only when using <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.Virtualize"/>. It defines an expected height in pixels for
@@ -1874,11 +1882,6 @@
             Labels used in the column options UI.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.HeaderCellAsButtonWithMenu">
-            <summary>
-             If true, enables the new style of header cell that includes a button to display all column options through a menu.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.ItemKey">
              <summary>
              Optionally defines a value for @key on each rendered row. Typically this should be used to specify a
@@ -2076,7 +2079,7 @@
             Gets or sets the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> component.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.GridContext">
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.InternalGridContext">
             <summary>
             Gets or sets the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/> component
             </summary>
@@ -2086,6 +2089,11 @@
             Gets a reference to the column that this cell belongs to.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.Grid">
+            <summary>
+            Gets a reference to the enclosing <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1" />.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1.HandleOnCellClickAsync">
             <summary />
         </member>
@@ -2115,11 +2123,16 @@
             Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.Owner">
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.InternalGridContext">
             <summary>
             Gets or sets the owning <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/> component
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.Grid">
+            <summary>
+            Gets a reference to the enclosing <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1" />.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1.HandleOnRowClickAsync(System.String)">
             <summary />
         </member>
@@ -8233,7 +8246,7 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1.JSRuntime">
             <summary />
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1._jsModule">
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1.Module">
             <summary />
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1.Min">
@@ -13232,6 +13245,37 @@
             Resize datagrid columns by exact pixel values
             </summary>
         </member>
+        <member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize">
+            <summary>
+            The height of each <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> in a <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.
+            Values are in pixels.
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Medium">
+            <summary>
+            Medium row height (default)
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Small">
+            <summary>
+            Small row height
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Smaller">
+            <summary>
+            Smaller row height
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Large">
+            <summary>
+            Large row height
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize.Dynamic">
+            <summary>
+            Dynamic row height
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridRowType">
             <summary>
             The type of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> in a <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.

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

@@ -289,7 +289,7 @@ fluent-data-grid-row:has([row-selected]) {
 
 <DemoSection Title="Multiline text content" Component="@typeof(DataGridMultilineText)">
     <Description>
-        Example of using the <code>Class</code> parameter to style parts of the grid. Note that the class used in the example (<code>multiline-text</code>) has been added to the FluentDataGridCell css.
+        Set the grid parameter <code>MultiLine</code> to true when you have cells in your data that will take up more than a single line.
     </Description>
 </DemoSection>
 

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

@@ -3,7 +3,7 @@
 <FluentGrid Spacing="4">
     <FluentGridItem xs="12">
         <h4>With auto-fit</h4>
-        <FluentDataGrid Items="@people" AutoFit="true">
+        <FluentDataGrid Items="@people" Style="width: 100%;" 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" />

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

@@ -1,7 +1,7 @@
-<FluentDataGrid Items="@people">
+<FluentDataGrid Items="@people" MultiLine="true">
     <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
     <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
-    <PropertyColumn Property="@(p => p.Description)" Sortable="true" Class="multiline-text" />
+    <PropertyColumn Property="@(p => p.Description)" Sortable="true" />
 </FluentDataGrid>
 
 @code {
@@ -13,4 +13,4 @@
         new Person(10944, "António Langa", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
         new Person(11203, "Julie Smith","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
     }.AsQueryable();
-}
+}

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

@@ -1,5 +1,5 @@
 <div style="height: 400px; overflow-y: scroll;">
-    <FluentDataGrid @ref="grid" Items=@items GridTemplateColumns="1fr 1fr 1fr 1fr" Style="height: 100%;">
+    <FluentDataGrid @ref="grid" Items=@items GridTemplateColumns="1fr 1fr 1fr 1fr">
         <ChildContent>
             <PropertyColumn Property="@(c => c.Item1)" Sortable="true" />
             <PropertyColumn Property="@(c => c.Item2)" />
@@ -53,7 +53,7 @@
         grid?.SetLoadingState(true);
         items = null;
 
-        await Task.Delay(2500);
+        await Task.Delay(1500);
 
         items = GenerateSampleGridData(100);
         grid?.SetLoadingState(false);

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

@@ -3,7 +3,7 @@
         <FluentDataGrid Style="min-width: max-content;" Items="@people">
             <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
             <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
-            <PropertyColumn Property="@(p => p.Description)" Sortable="true" Class="multiline-text" />
+            <PropertyColumn Property="@(p => p.Description)" Sortable="true" Style="text-overflow: unset; overflow: visible;" />
         </FluentDataGrid>
     </div>
 </div>

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

@@ -1,5 +1,5 @@
 
-<FluentDataGrid id="defaultGrid" Items=RowsGrid.AsQueryable() GridTemplateColumns="1fr 1fr" TGridItem=SampleGridData OnRowFocus="HandleRowFocus" OnCellFocus="HandleCellFocus">
+<FluentDataGrid id="defaultGrid" Items=RowsGrid.AsQueryable() GridTemplateColumns="1fr 1fr" TGridItem=SampleGridData OnRowClick="HandleRowClick" OnCellClick="HandleCellClick">
     <TemplateColumn Title="Name">
         <FluentTextField @bind-Value="@context!.Name"/>
     </TemplateColumn>
@@ -14,7 +14,7 @@
     {
         public string Name { get; set; }
         public int Age { get; set; }
-        
+
         public SampleGridData(string name, int age)
         {
             Name = name;
@@ -30,12 +30,12 @@
         new SampleGridData("Bob", 20 )
     };
 
-    private void HandleRowFocus(FluentDataGridRow<SampleGridData> row)
+    private void HandleRowClick(FluentDataGridRow<SampleGridData> row)
     {
         DemoLogger.WriteLine($"Row focused: {row.RowIndex}");
     }
 
-    private void HandleCellFocus(FluentDataGridCell<SampleGridData> cell)
+    private void HandleCellClick(FluentDataGridCell<SampleGridData> cell)
     {
         DemoLogger.WriteLine($"Cell focused: {cell.GridColumn}");
     }