Update

.dependabot/dependabot.yaml

@@ -0,0 +1,16 @@
+version: 2
+updates:
+- package-ecosystem: nuget
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "06:00"
+    timezone: America/Vancouver
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: Microsoft.AspNetCore.*
+    versions:
+    - 5.x
+  - dependency-name: System.Net.Http.Json
+    versions:
+    - 5.x

BlazorTable.sln

@@ -11,6 +11,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 	ProjectSection(SolutionItems) = preProject
 		.github\workflows\build.yml = .github\workflows\build.yml
 		.github\workflows\cicd.yml = .github\workflows\cicd.yml
+		.dependabot\dependabot.yaml = .dependabot\dependabot.yaml
 		README.md = README.md
 		.github\workflows\release.yml = .github\workflows\release.yml
 	EndProjectSection

README.md

@@ -15,6 +15,8 @@ Blazor Table Component with Sorting, Paging and Filtering
   - 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();
 
 ## Features
 - Column Reordering

src/BlazorTable.Sample.Server/Startup.cs

@@ -42,6 +42,7 @@ public void ConfigureServices(IServiceCollection services)
                     };
                 });
             }
+            services.AddBlazorTable();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

src/BlazorTable.Sample.Shared/BlazorTable.Sample.Shared.csproj

@@ -6,8 +6,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.8" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.8" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.10" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.10" />
     <PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
     <PackageReference Include="System.Net.Http.Json" Version="3.2.1" />
   </ItemGroup>

src/BlazorTable.Sample.Shared/NavMenu.razor

@@ -67,6 +67,11 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Dynamic Columns
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="ToggleColumnVisibility" Match="NavLinkMatch.All">
+                <span class="oi oi-eye" aria-hidden="true"></span> Column Visibility
+            </NavLink>
+        </li>
     </ul>
 </div>
 

src/BlazorTable.Sample.Shared/Pages/ToggleColumnVisibility.razor

@@ -0,0 +1,69 @@
+@page "/ToggleColumnVisibility"
+@inject HttpClient Http
+@using BlazorTable
+@using System.ComponentModel
+
+<h1>Toggle Column Visibility</h1>
+
+<button class="btn btn-primary mb-2" @onclick="@(_ => showSearchBar = !showSearchBar)">Toggle Search Bar</button>
+
+<Table TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true" ShowSearchBar="showSearchBar">
+    <Column Hideable="true" TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" />
+    <Column Hideable="true" TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Filterable="true" Width="20%" />
+    <Column Hideable="true" TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
+        <Template>
+            <a href="mailto:@context.email">@context.email</a>
+        </Template>
+    </Column>
+    <Column TableItem="PersonData" Title="Paid" Field="@(x => x.paid)" Sortable="true" Filterable="true" Width="10%">
+        <Template>
+            @context.paid.ToString()
+        </Template>
+    </Column>
+    <Column Hideable="true" TableItem="PersonData" Title="Price" Field="@(x => x.price)" Sortable="true" Filterable="true" Width="10%" Format="C" Align="Align.Right" />
+    <Column TableItem="PersonData" Title="Created Date" Field="@(x => x.created_date)" Sortable="true" Filterable="true" Width="10%">
+        <Template>
+            @(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
+        </Template>
+    </Column>
+    <Column Hideable="true" TableItem="PersonData" Title="Enum" Field="@(x => x.cc_type)" Sortable="true" Filterable="true" Width="10%">
+        <Template>
+            @context.cc_type
+        </Template>
+    </Column>
+    <Pager ShowPageNumber="true" ShowTotalCount="true" />
+</Table>
+
+@code
+{ 
+    [Inject]
+    private HttpClient httpClient { get; set; }
+
+    private PersonData[] data;
+
+    private bool showSearchBar;
+
+    protected override async Task OnInitializedAsync()
+    {
+        data = await httpClient.GetFromJsonAsync<PersonData[]>("sample-data/MOCK_DATA.json");
+    }
+
+    public class PersonData
+    {
+        public int? id { get; set; }
+        public string full_name { get; set; }
+        public string email { get; set; }
+        public bool? paid { get; set; }
+        public decimal? price { get; set; }
+        public CreditCard? cc_type { get; set; }
+        public DateTime? created_date { get; set; }
+    }
+
+    public enum CreditCard
+    {
+        none = 0,
+        [Description("MasterCard")]
+        MasterCard = 1,
+        Visa = 2
+    }
+}

src/BlazorTable.Sample.Wasm/Program.cs

@@ -16,6 +16,7 @@ public static async Task Main(string[] args)
             builder.RootComponents.Add<App>("app");
 
             builder.Services.AddSingleton(new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+            builder.Services.AddBlazorTable();
 
             await builder.Build().RunAsync();
         }

src/BlazorTable.Tests/BlazorTable.Tests.csproj

@@ -7,10 +7,10 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.7.1" />
+    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.8.0" />
     <PackageReference Include="PuppeteerSharp" Version="2.0.4" />
     <PackageReference Include="PuppeteerSharp.Contrib.Extensions" Version="3.0.0" />
-    <PackageReference Include="Shouldly" Version="3.0.2" />
+    <PackageReference Include="Shouldly" Version="4.0.1" />
     <PackageReference Include="xunit" Version="2.4.1" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
       <PrivateAssets>all</PrivateAssets>

src/BlazorTable/BlazorTable.csproj

@@ -27,10 +27,11 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="LINQKit.Core" Version="1.1.17" />
-    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.8" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.8" />
-    <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.3.0">
+    <PackageReference Include="LINQKit.Core" Version="1.1.21" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.10" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.10" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="3.1.10" />
+    <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.3.1">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
@@ -42,5 +43,20 @@
       <!-- We use the value of AssemblyName to declare the value of the attribute -->
     </AssemblyAttribute>
   </ItemGroup>
+
+  <ItemGroup>
+    <Compile Update="Components\Localization.Designer.cs">
+      <DesignTime>True</DesignTime>
+      <AutoGen>True</AutoGen>
+      <DependentUpon>Localization.resx</DependentUpon>
+    </Compile>
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Update="Components\Localization.resx">
+      <Generator>ResXFileCodeGenerator</Generator>
+      <LastGenOutput>Localization.Designer.cs</LastGenOutput>
+    </EmbeddedResource>
+  </ItemGroup>
 
 </Project>

src/BlazorTable/Components/Column.razor.cs

@@ -48,6 +48,12 @@ public string Title
         [Parameter]
         public bool Filterable { get; set; }
 
+        /// <summary>
+        /// Column can be hidden
+        /// </summary>
+        [Parameter]
+        public bool Hideable { get; set; }
+
         /// <summary>
         /// Normal Item Template
         /// </summary>
@@ -142,6 +148,22 @@ public string Title
         /// </summary>
         public bool FilterOpen { get; private set; }
 
+        private bool _visible = true;
+
+        /// <summary>
+        /// Column visibility
+        /// True if current column is visible else false.
+        /// </summary>
+        public bool Visible
+        {
+            get { return _visible; }
+            set 
+            {
+                _visible = value;
+                Table.Refresh();
+            }
+        }
+
         /// <summary>
         /// Column Data Type
         /// </summary>

src/BlazorTable/Components/FilterManager.razor

@@ -1,13 +1,14 @@
 @namespace BlazorTable
 @typeparam TableItem
+@inject Microsoft.Extensions.Localization.IStringLocalizer<BlazorTable.Components.Localization> Localization
 
 <CascadingValue Value="(IColumn<TableItem>)this.Column" Name="Column">
     @ChildContent
 </CascadingValue>
 <br />
 
 <div class="justify-content-md-center">
-    <button type="button" class="btn btn-danger btn-xs" role="button" @onclick="@((x) => Column.ToggleFilter())">Close</button>
-    <button type="button" class="btn btn-secondary btn-xs" role="button" @onclick="@((x) => ClearFilter())">Clear</button>
-    <button type="button" class="btn btn-primary btn-xs" role="button" @onclick="@((x) => ApplyFilter())">Apply</button>
+    <button type="button" class="btn btn-danger btn-xs" role="button" @onclick="@((x) => Column.ToggleFilter())">@Localization["FilterManagerClose"]</button>
+    <button type="button" class="btn btn-secondary btn-xs" role="button" @onclick="@((x) => ClearFilter())">@Localization["FilterManagerClear"]</button>
+    <button type="button" class="btn btn-primary btn-xs" role="button" @onclick="@((x) => ApplyFilter())">@Localization["FilterManagerApply"]</button>
 </div>