Server side fixes

azure-pipelines.yml

@@ -0,0 +1,52 @@
+# ASP.NET
+# Build and test ASP.NET projects.
+# Add steps that publish symbols, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/apps/aspnet/build-aspnet-4
+
+pool:
+  vmImage: 'windows-latest'
+
+variables:
+  solution: '**/*.sln'
+  buildPlatform: 'Any CPU'
+  buildConfiguration: 'Release'
+  Parameters.requestedMajorVersion: '1'
+  Parameters.requestedMinorVersion: '17'
+  Parameters.requestedPatchVersion: '3'
+steps:
+
+- task: NuGetToolInstaller@1
+
+- task: DotNetCoreCLI@2
+  inputs:
+    command: 'restore'
+    feedsToUse: 'select'
+
+- task: VSBuild@1
+  inputs:
+    solution: '$(solution)'
+    platform: '$(buildPlatform)'
+    configuration: '$(buildConfiguration)'
+
+- task: VSTest@2
+  inputs:
+    platform: '$(buildPlatform)'
+    configuration: '$(buildConfiguration)'
+
+- task: DotNetCoreCLI@2
+  inputs:
+    command: 'pack'
+    packagesToPack: '**/BlazorTable.csproj'
+    includesymbols: true
+    versioningScheme: 'byPrereleaseNumber'
+    majorVersion: '1'
+    minorVersion: '17'
+    patchVersion: '3'
+  displayName: 'Nuget Push'
+
+- task: NuGetCommand@2
+  inputs:
+    command: 'push'
+    packagesToPush: '$(Build.ArtifactStagingDirectory)/**/*.nupkg;!$(Build.ArtifactStagingDirectory)/**/*.symbols.nupkg'
+    nuGetFeedType: 'internal'
+    publishVstsFeed: '62fc85ae-4447-4b56-a2ea-c6ab74293507/dbfc01ad-afcb-448b-bda5-e0ef32ca9d70'

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

@@ -6,15 +6,27 @@
 
 <h1>Server side data</h1>
 
-<Table TableItem="PersonData" DataLoader="_loader" Items="data" PageSize="15" ShowSearchBar="true">
-    <Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Width="10%" DefaultSortColumn="true" />
-    <Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Width="20%" />
+Selected: @(selectedItems.Any() ? selectedItems.Select(x => x.full_name).Aggregate((c, n) => $"{c},{n}") : "None")
+
+<Table TableItem="PersonData" @ref="Table" DataLoader="_loader" Items="data" PageSize="15" ShowSearchBar="true" SelectionType="SelectionType.Multiple" SelectedItems="selectedItems" RowClickAction="RowClick">
+    <Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Width="10%" DefaultSortColumn="true" Filterable="true" />
+    <Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Width="20%" Filterable="true">
+        <CustomIFilters>
+            <CustomSelect TableItem="PersonData">
+                <CustomSelectOption Key="Astrix Mariette" Value="@("Astrix Mariette")" />
+                <CustomSelectOption Key="Marja Mustill" Value="@("Marja Mustill")" />
+                <CustomSelectOption Key="Creighton Keyzman" Value="@("Creighton Keyzman")" />
+                <CustomSelectOption Key="Jacobo Linton" Value="@("Jacobo Linton")" />
+                <CustomSelectOption Key="Michael O'Dyvoy" Value="@("Michael O'Dyvoy")" />
+            </CustomSelect>
+        </CustomIFilters>
+    </Column>
     <Column TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="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" Width="10%">
+    <Column TableItem="PersonData" Title="Paid" Field="@(x => x.paid)" Sortable="true" Width="10%" Filterable="true">
         <Template>
             @context.paid.ToString()
         </Template>
@@ -25,14 +37,16 @@
             @(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
         </Template>
     </Column>
-    <Pager ShowPageNumber="true" ShowTotalCount="true" />
+    <Pager ShowPageNumber="true" ShowPageNumberSelector="true" ShowPageSizes="true" ShowPageNumberInput="true" />
 </Table>
 
 @code
 {
     [Inject]
     private HttpClient httpClient { get; set; }
 
+    private ITable<PersonData> Table;
+
     public class PersonData
     {
         public int? id { get; set; }
@@ -47,10 +61,33 @@
 
     private IEnumerable<PersonData> data;
 
+    private List<PersonData> selectedItems = new List<PersonData>();
+
     protected override async Task OnInitializedAsync()
     {
         _loader = new PersonDataLoader(httpClient);
         data = (await _loader.LoadDataAsync(null)).Records;
+
+        await Table.SetInitialFiltersAsync(new List<FilterString>()
+        {
+            //new FilterString()
+            //{
+            //    Condition = StringCondition.IsEqualTo.ToString(),
+            //    Field = nameof(PersonData.full_name),
+            //    FilterValue = "Marja Mustill"
+            //},
+            new FilterString()
+            {
+                Condition = BooleanCondition.True.ToString(),
+                Field = nameof(PersonData.paid)
+            } 
+        });
+
+    }
+
+    public void RowClick(PersonData data)
+    {
+        StateHasChanged();
     }
 
     public class PersonDataLoader : IDataLoader<PersonData>
@@ -60,7 +97,7 @@
         {
             _client = client;
         }
-        public async Task<PaginationResult<PersonData>> LoadDataAsync(FilterData parameters)
+        public async Task<PaginationResult<PersonData>> LoadDataAsync(FilterData<PersonData> parameters)
         {
 
             var data = await _client.GetFromJsonAsync<PersonData[]>("sample-data/MOCK_DATA.json");
@@ -82,6 +119,13 @@
                         : query.OrderBy(x => prop.GetValue(x, null));
                 }
             }
+            if(parameters?.Filters != null)
+            {
+                foreach (var filter in parameters?.Filters)
+                {
+                    query = query.Where(filter);
+                }    
+            }
             var results = parameters?.Top.HasValue ?? false ?
                 query.Skip(parameters.Skip.GetValueOrDefault())
                 .Take(parameters.Top.Value).ToArray() :
@@ -97,4 +141,6 @@
         }
     }
 
+
+
 }

src/BlazorTable.Sample.Wasm/wwwroot/css/site.css

@@ -255,4 +255,8 @@ app {
     justify-content: center;
     flex-direction: column;
     --sk-color: white;
+}
+
+.page-link {
+	border: none;
 }

src/BlazorTable.Sample.Wasm/wwwroot/index.html

@@ -7,6 +7,7 @@
     <base href="/" />
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="css/site.css" rel="stylesheet" />
+    <link href="BlazorTable.Sample.Wasm.styles.css" rel="stylesheet">
 </head>
 <body>
     <app>

src/BlazorTable/BlazorTable.csproj

@@ -15,6 +15,8 @@
     <RepositoryType>git</RepositoryType>
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
+    <AssemblyVersion></AssemblyVersion>
+    <Version>1.17.11-preview</Version>
   </PropertyGroup>
 
   <ItemGroup>
@@ -35,6 +37,7 @@
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
+    <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
   </ItemGroup>
 
   <ItemGroup>

src/BlazorTable/Components/Column.razor.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Components;
+using BlazorTable.Components.ServerSide;
+using Microsoft.AspNetCore.Components;
 using System;
 using System.Globalization;
 using System.Linq;
@@ -122,6 +123,16 @@ public string Title
         /// </summary>
         public Expression<Func<TableItem, bool>> Filter { get; set; }
 
+        /// <summary>
+        /// Filter as string
+        /// </summary>
+        public FilterString FilterString { get; set; }
+
+        /// <summary>
+        /// Initial filters
+        /// </summary>
+        public FilterString InitialFilterString { get; set; }
+
         /// <summary>
         /// True if this is the default Sort Column
         /// </summary>
@@ -147,7 +158,7 @@ public string Title
         /// <summary>
         /// Filter Panel is open
         /// </summary>
-        public bool FilterOpen { get; private set; }
+        public bool FilterOpen { get; set; }
 
         private bool _visible = true;
 
@@ -220,6 +231,10 @@ protected override void OnParametersSet()
         public void ToggleFilter()
         {
             FilterOpen = !FilterOpen;
+            foreach (var column in Table.Columns.Where(x => x != this))
+            {
+                column.FilterOpen = false;
+            }
             Table.Refresh();
         }
 

src/BlazorTable/Components/FilterManager.razor.cs

@@ -20,13 +20,13 @@ public partial class FilterManager<TableItem>
         IStringLocalizer<Localization.Localization> Localization { get; set; }
 
         private async Task ApplyFilterAsync()
-
         {
             Column.ToggleFilter();
 
             if (Column.FilterControl != null)
             {
                 Column.Filter = Column.FilterControl.GetFilter();
+                Column.FilterString = Column.FilterControl.GetFilterString();
                 await Column.Table.UpdateAsync().ConfigureAwait(false);
                 await Column.Table.FirstPageAsync().ConfigureAwait(false);
             }

src/BlazorTable/Components/Pager.razor

@@ -2,50 +2,78 @@
 
 @if (AlwaysShow || (Table.TotalPages > 1))
 {
-    <div class="d-flex justify-content-end">
-        <ul class="pagination">
+    <div class="row">
+        <div class="col-1">
             @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="form-control" title="@Localization["SetPageSize"]" value="@Table.ServerPageSize.GetValueOrDefault(Table.PageSize)" @onchange="(async ev => await SetPageSizeAsync(ev))">
                     @foreach (int option in PageSizes)
                     {
                         <option value="@option">@option</option>
                     }
                 </select>
-            </li>
             }
-            @if (ShowPageNumber)
+        </div>
+        <div class="col-2">
+            @if (ShowPageNumberInput)
             {
-                <li class="page-item disabled" @onclick="@(() => Table.FirstPageAsync())" title="Page @(Table.PageNumber + 1)/@(Table.TotalPages)">
-                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">@(Table.PageNumber + 1)/@(Table.TotalPages)</a>
-                </li>
-            }
-            @if (ShowTotalCount)
-            {
-                <li class="page-item disabled" @onclick="@(() => Table.FirstPageAsync())" title="Total Items @Table.TotalCount">
-                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">@Table.TotalCount</a>
-                </li>
-            }
-            @if (ShowPageNumber || ShowTotalCount)
-            {
-                <li aria-hidden="true" class="page-item disabled">
-                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">&nbsp;</a>
-                </li>
+                <div class="d-flex">
+                    <span class="m-auto">@Localization["GoToPage"]</span><input type="number" class="page-link" tabindex="-1" @onkeydown="@SetPageInput" @onblur="@GoToPage" style="width: 75px; text-align:right; border:1px solid #dee2e6;" @bind="inputPage" @bind:event="oninput" />
+                </div>
             }
+        </div>
+        <div class="col-9">
+            <div class="d-flex justify-content-end">
+                <ul class="pagination">
+                    @if (ShowPageNumber)
+                    {
+                        <li class="page-item disabled" @onclick="@(() => Table.FirstPageAsync())" title="Page @(Table.PageNumber + 1)/@(Table.TotalPages)">
+                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">@(Table.PageNumber + 1)-@(Table.TotalPages) of @Table.TotalCount</a>
+                        </li>
+                    }
+                    @if (ShowTotalCount)
+                    {
+                        <li class="page-item disabled" @onclick="@(() => Table.FirstPageAsync())" title="Total Items @Table.TotalCount">
+                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">@Table.TotalCount</a>
+                        </li>
+                    }
+                    @if (ShowPageNumber || ShowTotalCount)
+                    {
+                        <li aria-hidden="true" class="page-item disabled">
+                            <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>
-            <li class="page-item @(Table.PageNumber == 0 ? "disabled": "")" @onclick="@(() => Table.PreviousPageAsync())" title="@Localization["PagerPrevious"]">
-                <a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber == 0 ? "true": null)">@Localization["PagerPrevious"]</a>
-            </li>
-            <li class="page-item @(Table.PageNumber + 1 < Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.NextPageAsync())" title="@Localization["PagerNext"]">
-                <a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber + 1 < Table.TotalPages ? null: "true")">@Localization["PagerNext"]</a>
-            </li>
-            <li class="page-item @(Table.PageNumber + 1 != Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.LastPageAsync())" title="@Localization["PagerLast"]">
-                <a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber + 1 != Table.TotalPages ? null : "true")">@Localization["PagerLast"]</a>
-            </li>
-        </ul>
+                    <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)">&laquo;</a>
+                    </li>
+                    <li class="page-item @(Table.PageNumber == 0 ? "disabled": "")" @onclick="@(() => Table.PreviousPageAsync())" title="@Localization["PagerPrevious"]">
+                        <a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber == 0 ? "true": null)">&lsaquo;</a>
+                    </li>
+
+                    @if (ShowPageNumberSelector)
+                    {
+                        for (var i = 0; i < 9; i++)
+                        {
+                            var page = Table.PageNumber < 5 ? i : Table.PageNumber + i - 4;
+                            if (page <= Table.TotalPages - 1)
+                            {
+                                <li class="page-item @(Table.PageNumber == page ? "active": "")" @onclick="@(() => Table.GoToPageAsync(page))" title="@(page + 1)">
+                                    <a class="page-link" href="javascript:;">@(page + 1)</a>
+                                </li>
+                            }
+                        }
+                    }
+
+                    <li class="page-item @(Table.PageNumber + 1 < Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.NextPageAsync())" title="@Localization["PagerNext"]">
+                        <a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber + 1 < Table.TotalPages ? null: "true")">&rsaquo;</a>
+                    </li>
+                    <li class="page-item @(Table.PageNumber + 1 != Table.TotalPages ? "" : "disabled")" @onclick="@(() => Table.LastPageAsync())" title="@Localization["PagerLast"]">
+                        <a class="page-link" href="javascript:;" aria-disabled="@(Table.PageNumber + 1 != Table.TotalPages ? null : "true")">&raquo;</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
+
 }