diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
index a0c7823b3c..58657e2500 100644
--- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -80,6 +80,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
         .AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && (Column is null || (Column!.Sortable.HasValue && !Column!.Sortable.Value)))
+        .AddStyle("z-index", (Grid._columns.Count - Column?.Index).ToString(), CellType == DataGridCellType.ColumnHeader)
         .AddStyle(Owner.Style)
         .Build();
 
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
index 8406eecce0..124b28d50d 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
@@ -2,12 +2,12 @@
 <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;" 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; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" 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; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
index b52279f375..fdfddff736 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
@@ -2,12 +2,12 @@
 <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;" 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; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" 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; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
index 8406eecce0..124b28d50d 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
@@ -2,12 +2,12 @@
 <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;" 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; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" 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; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
index b52279f375..fdfddff736 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
@@ -2,12 +2,12 @@
 <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;" 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; height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="27" blazor:onclick="28" blazor:onfocus="29" scope="col" aria-sort="descending" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
         </div>
       </th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" 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; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="30" blazor:onclick="31" blazor:onfocus="32" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
         </div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html
index b49c8263c9..06544f6fc3 100644
--- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html
+++ b/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;" 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; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 1;" 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;" 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; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="28" blazor:onclick="29" blazor:onfocus="30" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html
index 0e58e97642..3b1402bef1 100644
--- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html
+++ b/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;" 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; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 1;" 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;" 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; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
index 97283710fe..58a066445c 100644
--- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
+++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
@@ -2,8 +2,8 @@
 <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;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" 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; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html
index 97283710fe..58a066445c 100644
--- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html
+++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html
@@ -2,8 +2,8 @@
 <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;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
-      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" 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; padding-top: calc(var(--design-unit) * 2.5px); height: 32px; min-height: 44px; z-index: 1;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy=""></th>
+      <th col-index="2" class="column-header col-justify-start" style="grid-column: 2; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="26" blazor:onclick="27" blazor:onfocus="28" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>
diff --git a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
index 6a5af28273..cfd5bf8e62 100644
--- a/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
+++ b/tests/Core/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html
@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" 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 col-justify-start" style="grid-column: 1; height: 32px; min-height: 44px;" 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 col-justify-start" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 0;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="23" blazor:onclick="24" blazor:onfocus="25" scope="col" aria-sort="none" b-w6qdxfylwy="">
         <div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
           <div class="col-title-text" b-pxhtqoo8qd="">Name</div>
         </div>