GridColumn's ''Class'' does not appear in final render

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/GridDocumentation.razor

@@ -123,22 +123,26 @@
 <div class="mb-3">In the below example, we applied <code>table-danger</code> CSS class to the Active column where the employee is inactive and the <code>table-success</code> CSS class to the Active column where the employee is active.</div>
 <Demo Type="typeof(Grid_Demo_19_Specify_Custom_Column_Class)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Column Class" PageUrl="@pageUrl" HashTagName="colum-class" />
+<div class="mb-3">In the following example, the <code>Class</code> parameter is used to apply the CSS class to an entire grid column, including the header.</div>
+<Demo Type="typeof(Grid_Demo_20_Column_Css_Class)" Tabs="true" />
+
 <SectionHeading Size="HeadingSize.H2" Text="Custom column headers" PageUrl="@pageUrl" HashTagName="custom-column-headers" />
 <div class="mb-3">In the below example, we use <code>&lt;HeaderContent&gt;</code> and <code>&lt;ChildContent&gt;</code> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.</div>
-<Demo Type="typeof(Grid_Demo_20_Specify_Custom_Column_Header)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_21_Specify_Custom_Column_Header)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Selection" PageUrl="@pageUrl" HashTagName="selection" />
 <div class="mb-3">
     Set <code>AllowSelection="true"</code> to enable the selection on the <code>Grid</code>.
     By default, <code>SelectionMode</code> is <b>Single</b>.
 </div>
-<Demo Type="typeof(Grid_Demo_21_Selection)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_22_Selection)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Multiple Selection" PageUrl="@pageUrl" HashTagName="multiple-selection" />
 <div class="mb-3">
     To select multiple rows, set <code>SelectionMode="GridSelectionMode.Multiple"</code>.
 </div>
-<Demo Type="typeof(Grid_Demo_22_Multiple_Selection)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_23_Multiple_Selection)" Tabs="true" />
 <Callout Type="CalloutType.Danger" Heading="Note">
     <p>Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.</p>
 </Callout>
@@ -149,58 +153,58 @@
     For this, we have <code>DisableAllRowsSelection</code> and <code>DisableRowSelection</code> delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105.
     Also, disable check the row level checkbox if the employee Id is less than 105.
 </div>
-<Demo Type="typeof(Grid_Demo_23_Disable_Selection)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_24_Disable_Selection)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Dynamic page size" PageUrl="@pageUrl" HashTagName="dynamic-page-size" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Grid_Demo_24_Dynamic_Page_Size)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_25_Dynamic_Page_Size)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Page size selection" PageUrl="@pageUrl" HashTagName="page-size-selection" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Grid_Demo_25_Page_Size_Selection)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_26_Page_Size_Selection)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Header row css class" PageUrl="@pageUrl" HashTagName="header-row-css-class" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Grid_Demo_26_Header_Row_CSS_Class)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_27_Header_Row_CSS_Class)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Filters row css class" PageUrl="@pageUrl" HashTagName="filters-row-css-class" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Grid_Demo_27_Filters_Row_CSS_Class)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_28_Filters_Row_CSS_Class)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Row click event" PageUrl="@pageUrl" HashTagName="row-click-event" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Grid_Demo_28_Row_Click)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_29_Row_Click)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Row double click event" PageUrl="@pageUrl" HashTagName="row-double-click-event" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Grid_Demo_29_Row_Double_Click)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_30_Row_Double_Click)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Translations" PageUrl="@pageUrl" HashTagName="translations" />
 <div class="mb-3">In the example below, you will see translations related to pagination and filters in <b>Dutch</b>.</div>
-<Demo Type="typeof(Grid_Demo_30_Translations)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_31_Translations)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Fixed header" PageUrl="@pageUrl" HashTagName="fixed-header" />
 <div class="mb-3">
     To set the fixed header, set the <b>FixedHeader</b> parameter to <b>true</b>. The minimum height of the grid is <b>320 pixels</b>.
     You can change the units to em, pt, px, or etc. by setting the <b>Unit</b> parameter.
 </div>
-<Demo Type="typeof(Grid_Demo_31_Fixed_Header_A)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_32_Fixed_Header_A)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Fixed header with filters" PageUrl="@pageUrl" HashTagName="fixed-header-with-filters" />
-<Demo Type="typeof(Grid_Demo_31_Fixed_Header_B_With_Filters)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_32_Fixed_Header_B_With_Filters)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Freeze columns" PageUrl="@pageUrl" HashTagName="freeze-columns" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Grid_Demo_32_Freeze_Column_A_Text_Nowrap)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_33_Freeze_Column_A_Text_Nowrap)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Freeze columns with fixed header" PageUrl="@pageUrl" HashTagName="freeze-columns-with-fixed-header" />
-<Demo Type="typeof(Grid_Demo_32_Freeze_Column_B_Fixed_Header)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_33_Freeze_Column_B_Fixed_Header)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Freeze columns with fixed header and filters" PageUrl="@pageUrl" HashTagName="freeze-columns-with-fixed-header-and-filters" />
-<Demo Type="typeof(Grid_Demo_32_Freeze_Column_C_Fixed_Header_With_Filters)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_33_Freeze_Column_C_Fixed_Header_With_Filters)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Auto hide paging" PageUrl="@pageUrl" HashTagName="auto-hide-paging" />
-<Demo Type="typeof(Grid_Demo_33_AutoHide_Paging)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_34_AutoHide_Paging)" Tabs="true" />
 
 @code {
     private string pageUrl = "/grid";

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/Grid_Demo_20_Column_Css_Class.razor

@@ -0,0 +1,57 @@
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      AllowPaging="true"
+      PageSize="5"
+      AllowSorting="true"
+      Responsive="true">
+
+    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+        @context.Id
+    </GridColumn>
+    <GridColumn TItem="Employee1" Class="text-danger" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
+        @context.Name
+    </GridColumn>
+    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
+        @context.Designation
+    </GridColumn>
+    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
+        @context.DOJ
+    </GridColumn>
+    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
+        @context.IsActive
+    </GridColumn>
+
+</Grid>
+
+@code {
+    private IEnumerable<Employee1>? employees;
+
+    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
+    {
+        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+            employees = GetEmployees(); // call a service or an API to pull the employees
+
+        return await Task.FromResult(request.ApplyTo(employees));
+    }
+
+    private IEnumerable<Employee1> GetEmployees()
+    {
+        return new List<Employee1>
+        {
+            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
+            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
+            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
+            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
+            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
+            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
+        };
+    }
+}

blazorbootstrap/Components/Grid/GridColumn.razor.cs

@@ -133,6 +133,10 @@ private async Task OnSortClickAsync()
 
                                         var classList = new List<string>();
 
+                                        // default class names
+                                        if (!string.IsNullOrWhiteSpace(ClassNames))
+                                            classList.Add(ClassNames);
+
                                         // text alignment
                                         if (TextAlignment != Alignment.None)
                                             classList.Add(BootstrapClassProvider.TextAlignment(TextAlignment));
@@ -250,6 +254,10 @@ private async Task OnSortClickAsync()
 
                                var classList = new List<string>();
 
+                               // default class names
+                               if (!string.IsNullOrWhiteSpace(ClassNames))
+                                   classList.Add(ClassNames);
+
                                if (HeaderContent is null && HeaderTextAlignment != Alignment.None)
                                    classList.Add(BootstrapClassProvider.TextAlignment(HeaderTextAlignment));
 

docs/docs/05-components/grid.mdx

@@ -1502,6 +1502,76 @@ In the below example, we applied `table-danger` CSS class to the Active column w
 
 [See demo here](https://demos.blazorbootstrap.com/grid#conditional-css-class-for-grid-column)
 
+### Column class
+
+In the following example, the `Class` parameter is used to apply the CSS class to an entire grid column, including the header.
+
+<img src="https://i.imgur.com/XG4Wv17.png" alt="Blazor Bootstrap: Grid Component - Column class" />
+
+```cshtml {13} showLineNumbers
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      AllowPaging="true"
+      PageSize="5"
+      AllowSorting="true"
+      Responsive="true">
+
+    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+        @context.Id
+    </GridColumn>
+    <GridColumn TItem="Employee1" Class="text-danger" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
+        @context.Name
+    </GridColumn>
+    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
+        @context.Designation
+    </GridColumn>
+    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
+        @context.DOJ
+    </GridColumn>
+    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
+        @context.IsActive
+    </GridColumn>
+
+</Grid>
+```
+
+```cshtml {} showLineNumbers
+@code {
+    private IEnumerable<Employee1>? employees;
+
+    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
+    {
+        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+            employees = GetEmployees(); // call a service or an API to pull the employees
+
+        return await Task.FromResult(request.ApplyTo(employees));
+    }
+
+    private IEnumerable<Employee1> GetEmployees()
+    {
+        return new List<Employee1>
+        {
+            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
+            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
+            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
+            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
+            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
+            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
+        };
+    }
+}
+```
+
+[See demo here](https://demos.blazorbootstrap.com/grid#colum-class)
+
 ### Custom column headers
 
 In the below example, we use `<HeaderContent>` and `<ChildContent>` tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.