[DataGrid] Fix cell height issue and make header really sticky (#3173)

* Fix #3168

* Fix #3171

* - Update Whatsnew
-Temporarily add global.json to fix sdk version

* Update global.json

.gitignore

@@ -411,5 +411,4 @@ Microsoft.Fast.Components.FluentUI.xml
 /examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
 /tests/TemplateValidation/**/Data/Migrations
 /tests/TemplateValidation/**/Data/*
-/global.json
 /spelling.dic

WHATSNEW.md

@@ -1,11 +1,16 @@
+## V4.11.3
+
+### Components
+- \[DataGrid\] Fix cell height issue and make header really sticky ([#3173](https://github.com/microsoft/fluentui-blazor/pull/3173))
+- \[Tabs\] Remove height compensation ([#3149](https://github.com/microsoft/fluentui-blazor/pull/3149))
+
 ## V4.11.2
 
 ### Components
 - \[DataGrid\] Add SingleSticky selection mode ([#3150](https://github.com/microsoft/fluentui-blazor/pull/3150))
 - \[DataGrid\] Tweak `display: flex` and DataGridDisplayMode.Table ([#3156](https://github.com/microsoft/fluentui-blazor/pull/3156))
 - \[DataGrid\] Make Empty/Loading row not respond to hover and `OnRowClick` ([#3166](https://github.com/microsoft/fluentui-blazor/pull/3166))
 
-
 ## V4.11.1
 
 ### Components

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css

@@ -1,7 +1,7 @@
 /* Ensure all the flags are the same size, and centered */
 .flag {
     height: 1rem;
-    margin-top: 7px;
+    margin-top: 4px;
     border: 1px solid var(--neutral-layer-3);
 }
 .search-box {

examples/Demo/Shared/Pages/Home/Home.razor

@@ -34,7 +34,7 @@
             <br />
             <p>
                 The demo and documentation sites for previous version is available:<br />
-                <a href="https://aka.ms/fluentui-blazor-v3/" target="_blank">Version 3.7.9</a><br />
+                <a href="https://aka.ms/fluentui-blazor-v3/" target="_blank">Version 3.8.0</a><br />
                 Please be aware that this version is no longer supported as both .NET 6 and .NET 7 are out of support now.
             </p>
         </div>

examples/Demo/Shared/Pages/Lab/IssueTester.razor

@@ -1 +1,64 @@
-
+@page "/test"
+
+<style>
+    .column-header {
+        border-right: 2px solid;
+    }
+</style>
+
+
+<div style="height: 200px; overflow-y: scroll;">
+    <FluentDataGrid DisplayMode="DataGridDisplayMode.Table" TGridItem="Testt" Items="testList.AsQueryable()" GenerateHeader="GenerateHeaderOption.Sticky">
+        <TemplateColumn Sortable="true" Title="First Column Header" Align="Align.Center" Width="200px">
+            @context.a
+        </TemplateColumn>
+        <TemplateColumn Sortable="true" Title="Second Column Header" Align="Align.Center" Width="200px">
+            @context.b
+        </TemplateColumn>
+        <TemplateColumn Sortable="true" Title="Third Column Header" Align="Align.Center" Width="200px">
+            @context.c
+        </TemplateColumn>
+    </FluentDataGrid>
+</div>
+
+
+@code {
+    class Testt
+    {
+        public string a = "a";
+        public string b = "b";
+        public string c = "c";
+    }
+
+    private List<Testt> testList = new()
+    {
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+        new(),
+    };
+}

examples/Demo/Shared/wwwroot/docs/WhatsNew.md

@@ -1,3 +1,9 @@
+## V4.11.3
+
+### Components
+- \[DataGrid\] Fix cell height issue and make header really sticky ([#3173](https://github.com/microsoft/fluentui-blazor/pull/3173))
+- \[Tabs\] Remove height compensation ([#3149](https://github.com/microsoft/fluentui-blazor/pull/3149))
+
 ## V4.11.2
 
 ### Components

global.json

@@ -0,0 +1,5 @@
+{
+  "sdk": {
+    "version": "9.0.101"
+  }
+}

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

@@ -802,9 +802,11 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
              : "none";
 
     private string? StyleValue => new StyleBuilder(Style)
-        .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns))
+        .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && DisplayMode == DataGridDisplayMode.Grid)
         .AddStyle("grid-template-rows", "auto 1fr", _internalGridContext.Items.Count == 0 || Items is null)
         .AddStyle("height", $"calc(100% - {(int)RowSize}px)", _internalGridContext.TotalItemCount == 0 || EffectiveLoadingValue)
+        .AddStyle("border-collapse", "separate", GenerateHeader == GenerateHeaderOption.Sticky)
+        .AddStyle("border-spacing", "0", GenerateHeader == GenerateHeaderOption.Sticky)
         .Build();
 
     private string? ColumnHeaderClass(ColumnBase<TGridItem> column)

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

@@ -75,7 +75,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .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)
         .AddStyle("width", Column?.Width, !string.IsNullOrEmpty(Column?.Width) && Grid.DisplayMode == DataGridDisplayMode.Table)
-        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default && CellType == DataGridCellType.ColumnHeader)
+        .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
         .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && Grid.Items is not null && !Grid.MultiLine)
         .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)