IvanJosipovic · vinod-vetrivel · Oct 25, 2021
diff --git a/README.md b/README.md
@@ -11,11 +11,14 @@ Blazor Table Component with Sorting, Paging and Filtering
 ## Install
 
 - Add [BlazorTable Nuget](https://www.nuget.org/packages/BlazorTable)
-  - dotnet add package BlazorTable
+  - `dotnet add package BlazorTable`
 - Add to the index.html or _Hosts.cshtml
   - `<script src="_content/BlazorTable/BlazorTable.min.js"></script>`
 - Add call to Program.cs or Startup.cs
-  - Services.AddBlazorTable();
+  - For Bootstrap 4
+    - `Services.AddBlazorTable();`
+  - For Bootstrap 5
+    - `Services.AddBlazorTable(options => options.UseBootstrap5());`
 
 Note: If installing `BlazorTable` in a hosted Blazor WASM application, these steps should be performed in the [WASM Client](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-5.0#blazor-webassembly-1) project.
 

diff --git a/src/BlazorTable.Sample.Wasm/Program.cs b/src/BlazorTable.Sample.Wasm/Program.cs
@@ -16,8 +16,13 @@ public static async Task Main(string[] args)
             builder.RootComponents.Add<App>("app");
 
             builder.Services.AddSingleton(new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+            // To use Bootstrap 4
             builder.Services.AddBlazorTable();
 
+            // To use Bootstrap 5
+            //builder.Services.AddBlazorTable(options => options.UseBootstrap5());
+
             await builder.Build().RunAsync();
         }
     }

diff --git a/src/BlazorTable.Sample.Wasm/libman.json b/src/BlazorTable.Sample.Wasm/libman.json
@@ -0,0 +1,13 @@
+{
+  "version": "1.0",
+  "defaultProvider": "cdnjs",
+  "libraries": [
+    {
+      "library": "[email protected]",
+      "destination": "wwwroot/lib/bootstrap/",
+      "files": [
+        "css/bootstrap.min.css"
+      ]
+    }
+  ]
+}
diff --git a/src/BlazorTable.Sample.Wasm/wwwroot/index.html b/src/BlazorTable.Sample.Wasm/wwwroot/index.html
@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width" />
     <title>BlazorTable.Sample</title>
     <base href="/" />
+    <!-- Bootstrap 4 CSS -->
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
+    <!-- Bootstrap 5 CSS -->
+    <!--<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />-->
     <link href="css/site.css" rel="stylesheet" />
 </head>
 <body>

diff --git a/src/BlazorTable.Sample.Wasm/wwwroot/lib/bootstrap/css/bootstrap.min.css b/src/BlazorTable.Sample.Wasm/wwwroot/lib/bootstrap/css/bootstrap.min.css
diff --git a/src/BlazorTable/BlazorTableOptions.cs b/src/BlazorTable/BlazorTableOptions.cs
@@ -0,0 +1,19 @@
+namespace BlazorTable
+{
+    /// <summary>
+    /// Options to configure BlazorTable
+    /// </summary>
+    public class BlazorTableOptions
+    {
+        internal bool IsBootstrap5 { get; private set; }
+
+        /// <summary>
+        /// Use Bootstrap version 5 instead of the default version 4
+        /// </summary>
+        public BlazorTableOptions UseBootstrap5()
+        {
+            IsBootstrap5 = true;
+            return this;
+        }
+    }
+}
diff --git a/src/BlazorTable/Components/Pager.razor b/src/BlazorTable/Components/Pager.razor
@@ -7,7 +7,7 @@
             @if (ShowPageSizes)
             {
             <li class="page-item" title="Set Page Size">
-                <select class="form-control" value="@Table.PageSize" @onchange="(async ev => await SetPageSizeAsync(ev))">
+                <select class="@(Options.Value.IsBootstrap5 ? "form-select" : "form-control")" value="@Table.PageSize" @onchange="(async ev => await SetPageSizeAsync(ev))">
                     @foreach (int option in PageSizes)
                     {
                         <option value="@option">@option</option>
@@ -33,7 +33,7 @@
                     <a class="page-link" href="#" tabindex="-1" aria-disabled="true">&nbsp;</a>
                 </li>
             }
-
+            
             <li class="page-item @(Table.PageNumber == 0 ? "disabled": "")" @onclick="@(() => Table.FirstPageAsync())" title="@Localization["PagerFirst"]">
                 <a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber == 0 ? "true": null)">@Localization["PagerFirst"]</a>
             </li>

diff --git a/src/BlazorTable/Components/Pager.razor.cs b/src/BlazorTable/Components/Pager.razor.cs
@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
 using System.Collections.Generic;
 using System.Threading.Tasks;
 
@@ -42,10 +43,13 @@ public partial class Pager
         /// </summary>
         [Parameter]
         public bool ShowPageSizes { get; set; }
-
+        
         [Inject]
         IStringLocalizer<Localization.Localization> Localization { get; set; }
 
+        [Inject]
+        IOptions<BlazorTableOptions> Options { get; set; }
+
         private async Task SetPageSizeAsync(ChangeEventArgs args)
         {
             if (int.TryParse(args.Value.ToString(), out int result))

diff --git a/src/BlazorTable/Components/Table.razor b/src/BlazorTable/Components/Table.razor
@@ -21,11 +21,11 @@
                         <th colspan="@columnCount">
                             @if (ShowSearchBar)
                             {
-                                <input type="text" class="form-control form-control-sm float-right ml-3" style="width:33%" value="@GlobalSearch" @onchange="@(x => { GlobalSearch = x.Value.ToString(); UpdateAsync(); })" placeholder="@Localization["TableGlobalSearch"]" />
+                                <input type="text" class="form-control form-control-sm @FloatRightClass ml-3" style="width:33%" value="@GlobalSearch" @onchange="@(x => { GlobalSearch = x.Value.ToString(); UpdateAsync(); })" placeholder="@Localization["TableGlobalSearch"]" />
                             }
                             @if (Columns.Exists(column => !column.Visible))
                             {
-                                <div class="float-right" @onclick="@(_ => VisibilityMenuOpen = !VisibilityMenuOpen)">
+                                <div class="@FloatRightClass" @onclick="@(_ => VisibilityMenuOpen = !VisibilityMenuOpen)">
                                     <a href="javascript:;" @ref="VisibilityMenuIconRef">
                                         <span aria-hidden="true">
                                             <img src="_content/BlazorTable/images/plus.png" />
@@ -43,7 +43,7 @@
                                                         @(column.Title)
                                                     </td>
                                                     <td>
-                                                        <div class="float-right" @onclick="@(_ => { column.Visible = true; if (!Columns.Exists(column => !column.Visible)) VisibilityMenuOpen = false;})">
+                                                        <div class="@FloatRightClass" @onclick="@(_ => { column.Visible = true; if (!Columns.Exists(column => !column.Visible)) VisibilityMenuOpen = false;})">
                                                             <a href="javascript:;">
                                                                 <span aria-hidden="true">
                                                                     <img src="_content/BlazorTable/images/plus.png" />
@@ -98,7 +98,7 @@
 
                                     @if (column.Filterable)
                                     {
-                                        <div class="float-right" @onclick="@(_ => column.ToggleFilter())" @onclick:stopPropagation>
+                                        <div class="@FloatRightClass" @onclick="@(_ => column.ToggleFilter())" @onclick:stopPropagation>
                                             <a href="javascript:;" @ref="column.FilterRef" aria-expanded="@(column.FilterOpen ? "true" : "false")" style="text-decoration: none" aria-label="@(column.Filter == null ? "unfiltered" : "filtered")">
                                                 <span aria-hidden="true" style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">
                                                     <img src="_content/BlazorTable/images/filter.png" />
@@ -127,7 +127,7 @@
 
                                     @if (column.Hideable)
                                     {
-                                        <div class="float-right mr-1" @onclick="@(_ => column.Visible = false)" @onclick:stopPropagation>
+                                        <div class="@FloatRightClass mr-1" @onclick="@(_ => column.Visible = false)" @onclick:stopPropagation>
                                             <span aria-hidden="true">
                                                 <img src="_content/BlazorTable/images/minus.png" />
                                             </span>

diff --git a/src/BlazorTable/Components/Table.razor.cs b/src/BlazorTable/Components/Table.razor.cs
@@ -10,6 +10,7 @@
 using System.Threading.Tasks;
 using BlazorTable.Components.ServerSide;
 using BlazorTable.Interfaces;
+using Microsoft.Extensions.Options;
 
 namespace BlazorTable
 {
@@ -95,6 +96,9 @@ public partial class Table<TableItem> : ITable<TableItem>
         [Inject]
         IStringLocalizer<Localization.Localization> Localization { get; set; }
 
+        [Inject]
+        IOptions<BlazorTableOptions> Options { get; set; }
+
         /// <summary>
         /// Ref to visibility menu icon for popover display
         /// </summary>
@@ -140,6 +144,11 @@ public partial class Table<TableItem> : ITable<TableItem>
         /// </summary>
         private List<CustomRow<TableItem>> CustomRows { get; set; } = new List<CustomRow<TableItem>>();
 
+        /// <summary>
+        /// Switch between float-right and float-end based on bootstrap version
+        /// </summary>
+        public string FloatRightClass => Options.Value.IsBootstrap5 ? "float-end" : "float-right";
+
         protected override async Task OnParametersSetAsync()
         {
             await UpdateAsync().ConfigureAwait(false);

diff --git a/src/BlazorTable/IServiceCollectionExtensions.cs b/src/BlazorTable/IServiceCollectionExtensions.cs
@@ -1,11 +1,16 @@
 using Microsoft.Extensions.DependencyInjection;
+using System;
 
 namespace BlazorTable
 {
     public static class IServiceCollectionExtensions
     {
-        public static IServiceCollection AddBlazorTable(this IServiceCollection services)
+        public static IServiceCollection AddBlazorTable(this IServiceCollection services, Action<BlazorTableOptions> configureOptions = default)
         {
+            if (configureOptions != default)
+            {
+                services.Configure(configureOptions);
+            }
             return services.AddLocalization();
         }
     }