v0.0.5-alpha

README.md

@@ -1,66 +1,71 @@
 # BlazorTable
+[![Demo](https://img.shields.io/badge/Live-Demo-Blue?style=flat-square)](https://BlazorTable.netlify.com/)
+[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/BlazorTable.svg?style=flat-square)](https://www.nuget.org/packages/BlazorTable)
+![](https://github.com/IvanJosipovic/BlazorTable/workflows/CI/CD/badge.svg)
 
 **Work in progress!**
 
 A simple Table Control for Blazor
 
-[Demo Site](https://BlazorTable.netlify.com/)
 
-[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/BlazorTable.svg)](https://www.nuget.org/packages/BlazorTable)
 
-![](https://github.com/IvanJosipovic/BlazorTable/workflows/CI/CD/badge.svg)
 
-### Features
+## Features
 - Edit Mode ([Template Switching](/src/BlazorTable.Sample/Pages/EditMode.razor))
 - Client Side
 	- Paging
 	- Sorting
     - Filtering
-      	- String
-### Todo
+      	- Strings
+        - Numbers
+## Todo
 - Client Side
     - Filtering
-      	- Numbers (WIP)
         - Dates
         - Custom Filter
 - Remove dependency on Bootstrap + BlazorStrap
 
 
-### Sample
+## Sample
 [Example](/src/BlazorTable.Sample/Pages/Index.razor)
 
 ```csharp
 <Table TableItem="PersonData" Items="data" PageSize="15">
-    <Column TableItem="PersonData" Title="Id" Property="@(x => x.id)" Sortable="true">
+    <Column TableItem="PersonData" Title="Id" Property="@(x => x.id)" Sortable="true" Filterable="true" Width="10%">
         <Template>
             @context.id
         </Template>
     </Column>
-    <Column TableItem="PersonData" Title="First Name" Property="@(x => x.first_name)" Sortable="true">
+    <Column TableItem="PersonData" Title="First Name" Property="@(x => x.first_name)" Sortable="true" Filterable="true" Width="20%">
         <Template>
             @context.first_name
         </Template>
     </Column>
-    <Column TableItem="PersonData" Title="Last Name" Property="@(x => x.last_name)" Sortable="true">
+    <Column TableItem="PersonData" Title="Last Name" Property="@(x => x.last_name)" Sortable="true" Filterable="true" Width="20%">
         <Template>
             @context.last_name
         </Template>
     </Column>
-    <Column TableItem="PersonData" Title="Email" Property="@(x => x.email)" Sortable="true">
+    <Column TableItem="PersonData" Title="Email" Property="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
         <Template>
             <a href="mailto:@context.email">@context.email</a>
         </Template>
     </Column>
-    <Column TableItem="PersonData" Title="Gender" Property="@(x => x.gender)" Sortable="true">
+    <Column TableItem="PersonData" Title="Confirmed" Property="@(x => x.confirmed)" Sortable="true" Filterable="true" Width="10%">
+        <Template>
+            @context.confirmed.ToString()
+        </Template>
+    </Column>
+    <Column TableItem="PersonData" Title="Fund" Property="@(x => x.fund)" Sortable="true" Filterable="true" Width="10%">
         <Template>
-            @context.gender
+            $@context.fund
         </Template>
     </Column>
-    <Column TableItem="PersonData" Title="IP" Property="@(x => x.ip_address)" Sortable="true">
+    <Column TableItem="PersonData" Title="Created Date" Property="@(x => x.created_date)" Sortable="true" Width="10%">
         <Template>
-            @context.ip_address
+            @context.created_date.ToShortDateString()
         </Template>
     </Column>
-    <Pager TableItem="PersonData" />
+    <Pager TableItem="PersonData" ShowPageNumber="true" ShowTotalCount="true" />
 </Table>
 ```

src/BlazorTable.Sample/Pages/EditMode.razor

@@ -8,7 +8,7 @@
 <br />
 <br />
 <Table TableItem="PersonData" Items="data" PageSize="15" @ref="Table">
-    <Column TableItem="PersonData" Title="Id" Property="@(x => x.id)" Sortable="true" Filterable="false" Width="10%">
+    <Column TableItem="PersonData" Title="Id" Property="@(x => x.id)" Sortable="true" Filterable="true" Width="10%">
         <Template>
             @context.id
         </Template>
@@ -40,27 +40,35 @@
             <input type="email" @bind-value="@context.email" class="form-control form-control-sm" />
         </EditorTemplate>
     </Column>
-    <Column TableItem="PersonData" Title="Gender" Property="@(x => x.gender)" Sortable="true" Filterable="true" Width="10%">
+    <Column TableItem="PersonData" Title="Confirmed" Property="@(x => x.confirmed)" Sortable="true" Filterable="true" Width="10%">
         <Template>
-            @context.gender
+            @context.confirmed.ToString()
         </Template>
         <EditorTemplate>
-            <input type="text" @bind-value="@context.gender" class="form-control form-control-sm" />
+            <input type="checkbox" @bind-value="@context.confirmed" class="form-control form-control-sm" checked="@(context.confirmed)"/>
         </EditorTemplate>
     </Column>
-    <Column TableItem="PersonData" Title="IP" Property="@(x => x.ip_address)" Sortable="true" Filterable="true" Width="20%">
+    <Column TableItem="PersonData" Title="Fund" Property="@(x => x.fund)" Sortable="true" Filterable="true" Width="10%">
         <Template>
-            @context.ip_address
+            @(context.fund.HasValue ? context.fund.Value.ToString("C") : string.Empty)
         </Template>
         <EditorTemplate>
-            <input type="text" @bind-value="@context.ip_address" class="form-control form-control-sm" />
+            <input type="number" step=".01" @bind-value="@context.fund" class="form-control form-control-sm" />
         </EditorTemplate>
     </Column>
-    <Pager TableItem="PersonData" />
+    <Column TableItem="PersonData" Title="Created Date" Property="@(x => x.created_date)" Sortable="true" Width="10%">
+        <Template>
+            @(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
+        </Template>
+        <EditorTemplate>
+            <input type="date" @bind-value="@context.created_date" class="form-control form-control-sm" />
+        </EditorTemplate>
+    </Column>
+    <Pager TableItem="PersonData" ShowPageNumber="true" ShowTotalCount="true" />
 </Table>
 
-@code {
-
+@code 
+{
     private ITable<PersonData> Table;
 
     private PersonData[] data;
@@ -72,12 +80,13 @@
 
     public class PersonData
     {
-        public int id { get; set; }
+        public int? id { get; set; }
         public string first_name { get; set; }
         public string last_name { get; set; }
         public string email { get; set; }
-        public string gender { get; set; }
-        public string ip_address { get; set; }
+        public bool? confirmed { get; set; }
+        public float? fund { get; set; }
+        public DateTime? created_date { get; set; }
     }
 
     private void ToggleEdit()

src/BlazorTable.Sample/Pages/Index.razor

@@ -4,15 +4,14 @@
 
 <h1>BlazorTable</h1>
 
-<a href="https://github.com/IvanJosipovic/BlazorTable">Github</a>
-<a href="https://github.com/IvanJosipovic/BlazorTable"><img src="https://img.shields.io/github/stars/IvanJosipovic/BlazorTable"/></a>
+<a href="https://github.com/IvanJosipovic/BlazorTable"><img alt="GitHub stars" src="https://img.shields.io/github/stars/IvanJosipovic/BlazorTable?style=social"></a>
 &nbsp;
-<a href="https://www.nuget.org/packages/BlazorTable"><img src="https://img.shields.io/nuget/vpre/BlazorTable.svg"/></a>
+<a href="https://www.nuget.org/packages/BlazorTable"><img src="https://img.shields.io/nuget/vpre/BlazorTable.svg?style=flat-square" /></a>
 <br />
 <br />
 
 <Table TableItem="PersonData" Items="data" PageSize="15">
-    <Column TableItem="PersonData" Title="Id" Property="@(x => x.id)" Sortable="true" Filterable="false" Width="10%">
+    <Column TableItem="PersonData" Title="Id" Property="@(x => x.id)" Sortable="true" Filterable="true" Width="10%">
         <Template>
             @context.id
         </Template>
@@ -32,20 +31,26 @@
             <a href="mailto:@context.email">@context.email</a>
         </Template>
     </Column>
-    <Column TableItem="PersonData" Title="Gender" Property="@(x => x.gender)" Sortable="true" Filterable="true" Width="10%">
+    <Column TableItem="PersonData" Title="Confirmed" Property="@(x => x.confirmed)" Sortable="true" Filterable="true" Width="10%">
         <Template>
-            @context.gender
+            @context.confirmed.ToString()
         </Template>
     </Column>
-    <Column TableItem="PersonData" Title="IP" Property="@(x => x.ip_address)" Sortable="true" Filterable="true" Width="20%">
+    <Column TableItem="PersonData" Title="Fund" Property="@(x => x.fund)" Sortable="true" Filterable="true" Width="10%">
         <Template>
-            @context.ip_address
+            @(context.fund.HasValue ? context.fund.Value.ToString("C") : string.Empty)
         </Template>
     </Column>
-    <Pager TableItem="PersonData" />
+    <Column TableItem="PersonData" Title="Created Date" Property="@(x => x.created_date)" Sortable="true" Width="10%">
+        <Template>
+            @(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
+        </Template>
+    </Column>
+    <Pager TableItem="PersonData" ShowPageNumber="true" ShowTotalCount="true" />
 </Table>
 
-@code {
+@code
+{
     private PersonData[] data;
 
     protected override async Task OnInitializedAsync()
@@ -55,11 +60,12 @@
 
     public class PersonData
     {
-        public int id { get; set; }
+        public int? id { get; set; }
         public string first_name { get; set; }
         public string last_name { get; set; }
         public string email { get; set; }
-        public string gender { get; set; }
-        public string ip_address { get; set; }
+        public bool? confirmed { get; set; }
+        public float? fund { get; set; }
+        public DateTime? created_date { get; set; }
     }
 }

src/BlazorTable.Sample/Properties/launchSettings.json

@@ -10,7 +10,6 @@
   "profiles": {
     "IIS Express": {
       "commandName": "IISExpress",
-      "launchBrowser": true,
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }