MudDataGrid: Fix Loading Indicator scrolls out of view with FixedHeader (MudBlazor#10838)

Author: versile2

src/MudBlazor.Docs/Pages/Components/DataGrid/DataGridPage.razor

@@ -369,5 +369,23 @@
             </SectionContent>
         </DocsPageSection>
 
+        <DocsPageSection>
+            <SectionHeader Title="Other Options">
+                <Description>
+                    There are many options available for the <CodeInline>&lt;MudDataGrid></CodeInline> that are not covered in the examples above.
+                    The <CodeInline>&lt;ColGroup></CodeInline> component allows you to apply a span or style property to multiple columns. However, 
+                    the available styles are limited to a few CSS properties, including width, visibility, background, and border. Additionally, the 
+                    `span` property enables a column to extend across multiple columns. The <CodeInline>Loading</CodeInline> property displays a loading 
+                    indicator while the data grid is retrieving data. You can bind this attribute to a `bool` variable set to `true` when initializing 
+                    the page and toggle it once the data has loaded. The <CodeInline>FixedHeader</CodeInline> property ensures that the header remains
+                    fixed at the top of the grid, even when scrolling. These are just a few of the many available options. For a complete list and 
+                    additional details, refer to the <MudLink Href="components/datagrid#api">API</MudLink> documentation above.
+                </Description>
+            </SectionHeader>
+            <SectionContent DarkenBackground="true" Code="@nameof(DataGridOtherOptionsExample)" ShowCode="false" Block="true" FullWidth="true">
+                <DataGridOtherOptionsExample />
+            </SectionContent>
+        </DocsPageSection>
+
     </DocsPageContent>
 </DocsPage>

src/MudBlazor.Docs/Pages/Components/DataGrid/Examples/DataGridOtherOptionsExample.razor

@@ -0,0 +1,46 @@
+@namespace MudBlazor.Docs.Examples
+
+<MudDataGrid Items="@_persons" T="Person" Loading="_loading"
+             Filterable Dense="@_dense" FixedHeader ShowMenuIcon Height="350px">
+    <ToolBarContent>
+        <MudSwitch Class="ml-auto" @bind-Value="@_dense" Label="Dense" />
+        <MudSwitch Class="ml-2 mr-auto" @bind-Value="@_loading" Label="Loading" /> 
+    </ToolBarContent>
+    <ColGroup>
+        <col style="width: 50px; background: var(--mud-palette-tertiary);" />
+        <col />
+    </ColGroup>
+    <Columns>
+        <PropertyColumn Property="x => x.Id" Title="Id" />
+        <PropertyColumn Property="x => x.Name" Title="Name" />
+    </Columns>
+    <PagerContent>
+        <MudDataGridPager T="Person" PageSizeOptions="new int[] {10, 1000}" />
+    </PagerContent>
+</MudDataGrid>
+
+@code {
+    private bool _dense = false;
+    private bool _loading = true;
+    List<Person> _persons = Enumerable.Repeat(0, 100)
+                .Select((_, i) => new Person { Id = i, Name = $"Name{i}" })
+                .ToList();
+
+    private async Task<GridData<Person>> ServerReload(GridState<Person> state)
+    {
+        await Task.CompletedTask;
+
+        return new GridData<Person>
+            {
+                TotalItems = _persons.Count,
+                Items = _persons
+            };
+    }
+
+    public class Person
+    {
+        public int Id { get; set; }
+
+        public string Name { get; set; } = default!;
+    }
+}

src/MudBlazor.UnitTests.Viewer/TestComponents/DataGrid/DataGridFixedHeaderFilterTest.razor

@@ -1,24 +1,22 @@
 <MudCard Style="height:300px">
 </MudCard>
 
-
-<MudDataGrid Items="@_persons" T="Person"
-Filterable Dense="@_dense" FixedHeader ShowMenuIcon Height="350px">
+<MudDataGrid Items="@_persons" T="Person" Loading="true"
+             Filterable Dense="@_dense" FixedHeader ShowMenuIcon Height="350px">
     <Columns>
         <PropertyColumn Property="x => x.Id" Title="Id" />
         <PropertyColumn Property="x => x.Name" Title="Name" />
-
     </Columns>
     <PagerContent>
-        <MudDataGridPager T="Person" SetRowsPerPage="new int[] {10, 1000}" />
+        <MudDataGridPager T="Person" PageSizeOptions="new int[] {10, 1000}" />
     </PagerContent>
 </MudDataGrid>
 
 <MudSwitch @bind-Value="@_dense" Label="Dense" />
 
 @code {
     private bool _dense = false;
-    public static string __description__ = " Filter popover positioning when DataGrid FixedHeader is true ";
+    public static string __description__ = " Filter popover positioning when DataGrid FixedHeader is true as well as loading indicator ";
     List<Person> _persons = [];
 
     protected override void OnInitialized()
@@ -46,4 +44,4 @@ Filterable Dense="@_dense" FixedHeader ShowMenuIcon Height="350px">
 
         public string Name { get; set; } = default!;
     }
-}
+}

src/MudBlazor/Styles/components/_table.scss

@@ -280,8 +280,19 @@
         top: 0;
       }
 
+      & * .mud-table-loading {
+        background-color: var(--mud-palette-surface);
+        position: sticky;
+        z-index: 2;
+        top: 59px;
+      }
+
       & * .mud-filter-panel-cell {
-        top: 58px;
+        top: 59px;
+      }
+      // If .mud-table-loading exists, move .mud-filter-panel-cell down
+      table:has(.mud-table-loading) & * .mud-filter-panel-cell {
+        top: 63px;
       }
 
       & * .mud-table-cell.sticky-left,
@@ -296,9 +307,18 @@
 .mud-table-sticky-header.mud-table-dense {
   & * .mud-table-root {
     .mud-table-head {
+
+      & * .mud-table-loading {
+        top: 39px;
+      }
+
       & * .mud-filter-panel-cell {
         top: 39px;
       }
+
+      table:has(.mud-table-loading) & * .mud-filter-panel-cell {
+        top: 43px;
+      }
     }
   }
 }