Pass through arbitrary attributes to QuickGrid

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt

@@ -115,6 +115,8 @@ Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Theme.get -> stri
 Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Theme.set -> void
 Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Virtualize.get -> bool
 Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.Virtualize.set -> void
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.AdditionalAttributes.get -> System.Collections.Generic.IReadOnlyDictionary<string!, object!>?
+Microsoft.AspNetCore.Components.QuickGrid.QuickGrid<TGridItem>.AdditionalAttributes.set -> void
 Microsoft.AspNetCore.Components.QuickGrid.SortDirection
 Microsoft.AspNetCore.Components.QuickGrid.SortDirection.Ascending = 1 -> Microsoft.AspNetCore.Components.QuickGrid.SortDirection
 Microsoft.AspNetCore.Components.QuickGrid.SortDirection.Auto = 0 -> Microsoft.AspNetCore.Components.QuickGrid.SortDirection

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor

@@ -10,7 +10,7 @@
         @{ FinishCollectingColumns(); }
         <ColumnsCollectedNotifier TGridItem="TGridItem" />
 
-        <table class="@GridClass()" theme="@Theme" aria-rowcount="@(_ariaBodyRowCount + 1)" @ref="_tableReference" @onclosecolumnoptions="CloseColumnOptions">
+        <table theme="@Theme" aria-rowcount="@(_ariaBodyRowCount + 1)" @ref="_tableReference" @onclosecolumnoptions="CloseColumnOptions" @attributes="AdditionalAttributes" class="@GridClass()">
             <thead>
                 <tr>
                     @_renderColumnHeaders
@@ -39,7 +39,7 @@
     private void RenderNonVirtualizedRows(RenderTreeBuilder __builder)
     {
         var initialRowIndex = 2; // aria-rowindex is 1-based, plus the first row is the header
-        var rowIndex = initialRowIndex; 
+        var rowIndex = initialRowIndex;
         foreach (var item in _currentNonVirtualizedViewItems)
         {
             RenderRow(__builder, rowIndex++, item);

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs

@@ -5,6 +5,7 @@
 using Microsoft.AspNetCore.Components.QuickGrid.Infrastructure;
 using Microsoft.AspNetCore.Components.Web.Virtualization;
 using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components.Forms;
 
 namespace Microsoft.AspNetCore.Components.QuickGrid;
 
@@ -90,6 +91,11 @@ public partial class QuickGrid<TGridItem> : IAsyncDisposable
     /// </summary>
     [Parameter] public PaginationState? Pagination { get; set; }
 
+    /// <summary>
+    /// Gets or sets a collection of additional attributes that will be applied to the created element.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
+
     [Inject] private IServiceProvider Services { get; set; } = default!;
     [Inject] private IJSRuntime JS { get; set; } = default!;
 
@@ -387,7 +393,10 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
         : ColumnClass(column);
 
     private string GridClass()
-        => $"quickgrid {Class} {(_pendingDataLoadCancellationTokenSource is null ? null : "loading")}";
+    {
+        var gridClass = $"quickgrid {Class} {(_pendingDataLoadCancellationTokenSource is null ? null : "loading")}";
+        return AttributeUtilities.CombineClassNames(AdditionalAttributes, gridClass) ?? string.Empty;
+    }
 
     private static string? ColumnClass(ColumnBase<TGridItem> column) => column.Align switch
     {

src/Components/test/E2ETest/Tests/QuickGridTest.cs

@@ -113,4 +113,18 @@ public void PaginatorDisplaysCorrectItemCount()
         Assert.Equal("1", currentPageNumber);
         Assert.Equal("5", totalPageNumber);
     }
+
+    [Fact]
+    public void AdditionalAttributesApplied()
+    {
+        var grid = app.FindElement(By.CssSelector("#grid > table"));
+
+        var idValue = grid.GetAttribute("id");
+        var styleValue = grid.GetAttribute("style");
+        var classList = grid.GetAttribute("class")?.Split(" ");
+
+        Assert.Equal("quick-grid", idValue);
+        Assert.Equal("color:red;", styleValue);
+        Assert.Contains("custom-class", classList);
+    }
 }

src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor

@@ -3,7 +3,7 @@
 <h3>Sample QuickGrid Component</h3>
 
 <div id="grid">
-    <QuickGrid Items="@FilteredPeople" Pagination="@pagination">
+    <QuickGrid Items="@FilteredPeople" Pagination="@pagination" id="quick-grid" style="color:red;" class="custom-css">
         <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
         <PropertyColumn Property="@(p => p.firstName)" Sortable="true">
                 <ColumnOptions>