Add filter warning indicator to DataGrid toolbar

Author: pwelter34

src/LoreSoft.Blazor.Controls/Data/DataGridToolbar.razor

@@ -15,6 +15,12 @@
                 <h5 class="toolbar-title-text">@Title</h5>
             }
         </div>
+        @if (ShowFilterWarning && CurrentGrid.IsFilterActive())
+        {
+            <div class="toolbar-filter-warning" title="Results are filtered. Click the filter icon to clear.">
+                @FilterWarning
+            </div>
+        }
         @if (ShowSearch)
         {
             <div class="toolbar-search-box">

src/LoreSoft.Blazor.Controls/Data/DataGridToolbar.razor.cs

@@ -142,6 +142,21 @@ public DataGridToolbar()
     [Parameter]
     public bool ShowColumnPicker { get; set; } = true;
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the filter warning indicator is displayed in the toolbar.
+    /// When true, the <see cref="FilterWarning"/> content is shown whenever the DataGrid has an active filter applied.
+    /// </summary>
+    [Parameter]
+    public bool ShowFilterWarning { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets the content rendered as the active-filter warning indicator.
+    /// Displayed when <see cref="ShowFilterWarning"/> is <c>true</c> and the DataGrid has an active filter.
+    /// Defaults to a <c>"* Filter Applied *"</c> text node.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? FilterWarning { get; set; } = builder => builder.AddContent(0, "* Filter Applied *");
+
     /// <summary>
     /// Gets the current <see cref="DataGrid{TItem}"/> instance in use by the toolbar.
     /// This property is derived from either the <see cref="DataGrid"/> parameter or the

src/LoreSoft.Blazor.Controls/wwwroot/css/data-toolbar.css

@@ -31,6 +31,13 @@
   white-space: nowrap;
 }
 
+.data-toolbar .toolbar-filter-warning {
+  font-size: .80rem;
+  font-style: italic;
+  margin: .5rem;
+  opacity: .75;
+}
+
 .data-toolbar select,
 .data-toolbar button,
 .data-toolbar input,
@@ -125,6 +132,7 @@
   .data-toolbar .toolbar-search-box {
     width: 100%;
   }
+
   .data-toolbar .toolbar-control {
     width: 100%;
   }