feat(blazorui): add LoadingTemplate parameter to BitDataGrid #11311 (#11312)

Author: msynk

src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor

@@ -5,7 +5,7 @@
     @{
         StartCollectingColumns();
     }
-    @ChildContent
+    @(Columns ?? ChildContent)
     <BitDataGridDefer>
         @{
             FinishCollectingColumns();
@@ -26,11 +26,22 @@
                                 TItem="(int RowIndex, TGridItem Data)"
                                 ItemsProvider="@ProvideVirtualizedItems"
                                 ItemContent="@(item => builder => RenderRow(builder, item.RowIndex, item.Data))"
-                                Placeholder="@(placeholderContext => builder => RenderPlaceholderRow(builder, placeholderContext))" />
+                    Placeholder="@(placeholderContext => builder => RenderPlaceholderRow(builder, placeholderContext))" />
                 }
                 else
                 {
-                    @_renderNonVirtualizedRows
+                    if (IsLoading && LoadingTemplate is not null)
+                    {
+                        <tr>
+                            <td colspan="100">
+                                @LoadingTemplate
+                            </td>
+                        </tr>
+                    }
+                    else
+                    {
+                        @_renderNonVirtualizedRows
+                    }
                 }
             </tbody>
         </table>

src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor.cs

@@ -76,6 +76,8 @@ public BitDataGrid()
         columnsFirstCollectedSubscriber.SubscribeOrMove(_internalGridContext.ColumnsFirstCollected);
     }
 
+    private bool IsLoading => _pendingDataLoadCancellationTokenSource is not null;
+
 
 
     /// <summary>
@@ -90,15 +92,9 @@ public BitDataGrid()
     [Parameter] public string? Class { get; set; }
 
     /// <summary>
-    /// A queryable source of data for the grid.
-    ///
-    /// This could be in-memory data converted to queryable using the
-    /// <see cref="System.Linq.Queryable.AsQueryable(System.Collections.IEnumerable)"/> extension method,
-    /// or an EntityFramework DataSet or an <see cref="IQueryable"/> derived from it.
-    ///
-    /// You should supply either <see cref="Items"/> or <see cref="ItemsProvider"/>, but not both.
+    /// Alias of the ChildContent parameter.
     /// </summary>
-    [Parameter] public IQueryable<TGridItem>? Items { get; set; }
+    [Parameter] public RenderFragment? Columns { get; set; }
 
     /// <summary>
     /// Optionally defines a value for @key on each rendered row. Typically this should be used to specify a
@@ -113,11 +109,15 @@ public BitDataGrid()
     [Parameter] public Func<TGridItem, object> ItemKey { get; set; } = x => x!;
 
     /// <summary>
-    /// A callback that supplies data for the rid.
+    /// A queryable source of data for the grid.
+    ///
+    /// This could be in-memory data converted to queryable using the
+    /// <see cref="System.Linq.Queryable.AsQueryable(System.Collections.IEnumerable)"/> extension method,
+    /// or an EntityFramework DataSet or an <see cref="IQueryable"/> derived from it.
     ///
     /// You should supply either <see cref="Items"/> or <see cref="ItemsProvider"/>, but not both.
     /// </summary>
-    [Parameter] public BitDataGridItemsProvider<TGridItem>? ItemsProvider { get; set; }
+    [Parameter] public IQueryable<TGridItem>? Items { get; set; }
 
     /// <summary>
     /// This is applicable only when using <see cref="Virtualize"/>. It defines an expected height in pixels for
@@ -126,6 +126,18 @@ public BitDataGrid()
     /// </summary>
     [Parameter] public float ItemSize { get; set; } = 50;
 
+    /// <summary>
+    /// A callback that supplies data for the rid.
+    ///
+    /// You should supply either <see cref="Items"/> or <see cref="ItemsProvider"/>, but not both.
+    /// </summary>
+    [Parameter] public BitDataGridItemsProvider<TGridItem>? ItemsProvider { get; set; }
+
+    /// <summary>
+    /// The custom template to render while loading the new items.
+    /// </summary>
+    [Parameter] public RenderFragment? LoadingTemplate { get; set; }
+
     /// <summary>
     /// Optionally links this <see cref="BitDataGrid{TGridItem}"/> instance with a <see cref="BitDataGridPaginationState"/> model,
     /// causing the grid to fetch and render only the current page of data.
@@ -419,7 +431,7 @@ private string AriaSortValue(BitDataGridColumnBase<TGridItem> column)
         : ColumnClass(column);
 
     private string GridClass()
-        => $"bitdatagrid {Class} {(_pendingDataLoadCancellationTokenSource is null ? null : "loading")}";
+        => $"bitdatagrid {Class} {((IsLoading && LoadingTemplate is null) ? "loading" : null)}".Trim();
 
     private void CloseColumnOptions()
     {

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor

@@ -114,5 +114,27 @@
                               Placeholder="Search on Name" />
             </div>
         </DemoExample>
+
+        <DemoExample Title="LoadingTemplate" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+            <div class="grid3">
+                <BitDataGrid ItemKey="(p => p.Id)" ItemsProvider="@productsItemsProvider" TGridItem="ProductDto" Pagination="pagination3" @ref="productsDataGrid">
+                    <Columns>
+                        <BitDataGridPropertyColumn Property="@(p => p.Id)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending" />
+                        <BitDataGridPropertyColumn Property="@(p => p.Name)" Sortable="true" />
+                        <BitDataGridPropertyColumn Property="@(p => p.Price)" Sortable="true" />
+                    </Columns>
+                    <LoadingTemplate>
+                        <BitStack Alignment="BitAlignment.Center" Style="height:185px">
+                            <b>Loading items...</b>
+                            <BitOrbitingDotsLoading Size="BitSize.Large" />
+                        </BitStack>
+                    </LoadingTemplate>
+                </BitDataGrid>
+            </div>
+            <BitDataGridPaginator Value="@pagination3" SummaryFormat="@(v => $"Total: {v.TotalItemCount?.ToString("N0")}")">
+                <TextTemplate Context="state">@(state.CurrentPageIndex + 1) / @(state.LastPageIndex + 1)</TextTemplate>
+            </BitDataGridPaginator>
+        </DemoExample>
+
     </Examples>
 </DemoPage>