Grid Filter Button CSS #688 (#730)

Author: gvreddy04

blazorbootstrap/Components/Grid/Grid.razor

@@ -50,10 +50,12 @@
                             <th class="@string.Join(" ", columnClassList)" style="@string.Join(";", columnStyleList)">
                                 @if (column.Filterable)
                                 {
-                                    <GridColumnFilter FilterOperator="@column.FilterOperator"
+                                    <GridColumnFilter FilterButtonColor="@column.FilterButtonColor"
+                                                      FilterButtonCSSClass="@column.FilterButtonCSSClass"
+                                                      FilterOperator="@column.FilterOperator"
                                                       FilterValue="@column.FilterValue"
                                                       FilterWidth="@column.FilterTextboxWidth"
-                                                      FiltersTranslationProvider="GridFiltersTranslationProviderAsync"
+                                                      FiltersTranslationProvider="GridFiltersTranslationProviderAsync!"
                                                       FixedHeader="@FixedHeader"
                                                       GridColumnFilterChanged="async args => await column.OnFilterChangedAsync(args, column)"
                                                       PropertyType="@column.GetPropertyType()"

blazorbootstrap/Components/Grid/GridColumn.razor.cs

@@ -212,6 +212,24 @@ private async Task OnSortClickAsync()
     [Parameter]
     public bool Filterable { get; set; } = true;
 
+    /// <summary>
+    /// Gets or sets the filter button color.
+    /// </summary>
+    /// <remarks>
+    /// Default value is <see cref="ButtonColor.Light" />.
+    /// </remarks>
+    [Parameter]
+    public ButtonColor FilterButtonColor { get; set; } = ButtonColor.Light;
+
+    /// <summary>
+    /// Gets or sets the filter button CSS class.
+    /// </summary>
+    /// <remarks>
+    /// Default value is null.
+    /// </remarks>
+    [Parameter]
+    public string? FilterButtonCSSClass { get; set; }
+
     /// <summary>
     /// Gets or sets the filter operator.
     /// </summary>

blazorbootstrap/Components/Grid/GridColumnFilter.razor

@@ -2,7 +2,7 @@
 @inherits BlazorBootstrapComponentBase
 
 <div class="d-flex">
-    <button type="button" class="btn btn-light me-1 d-flex dropdown-toggle bb-grid-filter" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn @filterButtonColorString me-1 d-flex dropdown-toggle bb-grid-filter @FilterButtonCSSClass" data-bs-toggle="dropdown" aria-expanded="false">
         @if (string.IsNullOrWhiteSpace(filterValue))
         {
             <span class="me-2">

blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs

@@ -147,6 +147,26 @@ or StringConstants.PropertyTypeNameDecimal
 
     #region Properties, Indexers
 
+    /// <summary>
+    /// Gets or sets the filter button color.
+    /// </summary>
+    /// <remarks>
+    /// Default value is <see cref="ButtonColor.Light" />.
+    /// </remarks>
+    [Parameter]
+    public ButtonColor FilterButtonColor { get; set; } = ButtonColor.Light;
+
+    /// <summary>
+    /// Gets or sets the filter button CSS class.
+    /// </summary>
+    /// <remarks>
+    /// Default value is null.
+    /// </remarks>
+    [Parameter]
+    public string? FilterButtonCSSClass { get; set; }
+
+    private string filterButtonColorString => FilterButtonColor.ToButtonColorClass();
+
     /// <summary>
     /// Gets or sets filter operator.
     /// </summary>

docs/docs/05-components/grid.mdx

@@ -78,6 +78,8 @@ Grid requires either `Data` or `DataProvider` parameter, but not both.
 | ChildContent | RenderFragment | null | ✔️ | Gets or sets the content to be rendered within the component. | 1.0.0 |
 | ColumnClass | `Func<TItem, string>?` | | | Gets or sets the column class. | 1.6.0 |
 | Filterable | bool | true | | If true, filter is enabled. The filter is enabled or disabled based on the grid `AllowFiltering` parameter. | 1.0.0 |
+| FilterButtonColor | `ButtonColor` | `ButtonColor.Light` | | Gets or sets the filter button color. | 3.0.0 |
+| FilterButtonCSSClass | `string?` | null | | Gets or sets the filter button CSS class. | 3.0.0 |
 | FilterOperator | `FilterOperator` | `FilterOperator.None` | | Gets or sets the filter operator. | 1.0.0 |
 | FilterTextboxWidth | int | 0 | | Gets or sets the filter textbox width in pixels. | 1.0.0 |
 | FilterValue | string | null | | Gets or sets the filter value. | 1.0.0 |