Skip to content
This repository was archived by the owner on Jul 10, 2024. It is now read-only.

Commit 54d8667

Browse files
IvanJosipovicIvanJosipovic
authored
Merge pull request #251 from IvanJosipovic/dev
New Features - Server side data loading! (thanks @nadais) - Toggle detail template programmatically (thanks @NilsPur) - Custom Row (thanks @NilsPur) - Add property ShowChildContentAtTop (thanks @obie73) Additional Localization - Danish (thanks @KBBA) - Spanish (thanks @ekuhlmann23) - Brasilian Portuguese (thanks @carlos-sergio-carvalho)
2 parents 269d58e + b9ce343 commit 54d8667

36 files changed

+1376
-200
lines changed

‎src/BlazorTable.Sample.Server/wwwroot/css/site.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ app {
4848

4949
.sidebar {
5050
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
51+
overflow: auto;
5152
}
5253

5354
.sidebar .top-row {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
</PropertyGroup>
77

88
<ItemGroup>
9-
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.10" />
10-
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.10" />
9+
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.11" />
10+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.11" />
1111
<PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
1212
<PackageReference Include="System.Net.Http.Json" Version="3.2.1" />
1313
</ItemGroup>

‎src/BlazorTable.Sample.Shared/NavMenu.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,21 @@
6767
<span class="oi oi-home" aria-hidden="true"></span> Dynamic Columns
6868
</NavLink>
6969
</li>
70+
<li class="nav-item px-3">
71+
<NavLink class="nav-link" href="ServerSideData" Match="NavLinkMatch.All">
72+
<span class="oi oi-home" aria-hidden="true"></span> Server side data
73+
</NavLink>
74+
</li>
7075
<li class="nav-item px-3">
7176
<NavLink class="nav-link" href="ToggleColumnVisibility" Match="NavLinkMatch.All">
7277
<span class="oi oi-eye" aria-hidden="true"></span> Column Visibility
7378
</NavLink>
7479
</li>
80+
<li class="nav-item px-3">
81+
<NavLink class="nav-link" href="CustomRow" Match="NavLinkMatch.All">
82+
<span class="oi oi-align-center" aria-hidden="true"></span> Custom Row
83+
</NavLink>
84+
</li>
7585
</ul>
7686
</div>
7787

‎src/BlazorTable.Sample.Shared/Pages/Detail.razor‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,28 @@
66

77
<p>The <code>DetailTemplate</code> can be used to display additional details below an item.</p>
88
<br />
9-
<Table TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true">
9+
<div class="btn-toolbar mb-3">
10+
<div class="btn-group mr-2">
11+
<button class="btn btn-primary" @onclick="_ => Try(() => table.ToggleAllDetailsView(open: true))">Open All</button>
12+
<button class="btn btn-danger" @onclick="_ => Try(() => table.ToggleAllDetailsView(open: false))">Close All</button>
13+
</div>
14+
<div class="input-group mr-1">
15+
<div class="input-group-prepend">
16+
<div class="input-group-text">Row Number:</div>
17+
</div>
18+
<input type="number" @bind="rowNumber" class="form-control">
19+
</div>
20+
<div class="btn-group">
21+
<button class="btn btn-primary" @onclick="_ => Try(() => table.ToggleDetailView(rowNumber, open: true))">Open</button>
22+
<button class="btn btn-danger" @onclick="_ => Try(() => table.ToggleDetailView(rowNumber, open: false))">Close</button>
23+
</div>
24+
</div>
25+
<br />
26+
@if (errorMessage != "")
27+
{
28+
<label>@errorMessage</label>
29+
}
30+
<Table @ref="table" TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true">
1031
<Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" />
1132
<Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Filterable="true" Width="20%" />
1233
<Column TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
@@ -46,8 +67,14 @@
4667
[Inject]
4768
private HttpClient Http { get; set; }
4869

70+
private ITable<PersonData> table;
71+
4972
private PersonData[] data;
5073

74+
private int rowNumber;
75+
76+
private string errorMessage = "";
77+
5178
protected override async Task OnInitializedAsync()
5279
{
5380
data = await Http.GetFromJsonAsync<PersonData[]>("sample-data/MOCK_DATA.json");
@@ -71,4 +98,17 @@
7198
MasterCard = 1,
7299
Visa = 2
73100
}
101+
102+
private void Try(Action action)
103+
{
104+
try
105+
{
106+
errorMessage = "";
107+
action();
108+
}
109+
catch (Exception e)
110+
{
111+
errorMessage = e.Message;
112+
}
113+
}
74114
}

‎src/BlazorTable.Sample.Shared/Pages/RowTemplate.razor‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@page "/CustomRow"
2+
@inject HttpClient Http
3+
@using BlazorTable
4+
@using System.ComponentModel
5+
6+
<h1>Row Template - Custom Row</h1>
7+
8+
<p></p>
9+
10+
<p>Use</p>
11+
12+
<Table @ref="table" TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true" ShowSearchBar="true">
13+
<Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" />
14+
<Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Filterable="true" Width="20%" />
15+
<Column TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
16+
<Template>
17+
<a href="mailto:@context.email">@context.email</a>
18+
</Template>
19+
</Column>
20+
<Column TableItem="PersonData" Title="Paid" Field="@(x => x.paid)" Sortable="true" Filterable="true" Width="10%">
21+
<Template>
22+
@context.paid.ToString()
23+
</Template>
24+
</Column>
25+
<Column TableItem="PersonData" Title="Price" Field="@(x => x.price)" Sortable="true" Filterable="true" Width="10%" Format="C" Align="Align.Right" />
26+
<Column TableItem="PersonData" Title="Created Date" Field="@(x => x.created_date)" Sortable="true" Filterable="true" Width="10%">
27+
<Template>
28+
@(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
29+
</Template>
30+
</Column>
31+
<Column TableItem="PersonData" Title="Enum" Field="@(x => x.cc_type)" Sortable="true" Filterable="true" Width="10%">
32+
<Template>
33+
@context.cc_type
34+
</Template>
35+
</Column>
36+
<CustomRow TableItem="PersonData" IsActiveForItem="x => (x.id % 4) == 0">
37+
<tr>
38+
<td colspan="@(table.Columns.Count)">
39+
<div class="text-center w-100"><b>Custom Row</b></div>
40+
</td>
41+
</tr>
42+
</CustomRow>
43+
<Pager ShowPageNumber="true" ShowTotalCount="true" />
44+
</Table>
45+
46+
@code
47+
{
48+
[Inject]
49+
private HttpClient httpClient { get; set; }
50+
51+
private ITable<PersonData> table;
52+
53+
private PersonData[] data;
54+
55+
private int i = 0;
56+
57+
protected override async Task OnInitializedAsync()
58+
{
59+
data = await httpClient.GetFromJsonAsync<PersonData[]>("sample-data/MOCK_DATA.json");
60+
}
61+
62+
public class PersonData
63+
{
64+
public int? id { get; set; }
65+
public string full_name { get; set; }
66+
public string email { get; set; }
67+
public bool? paid { get; set; }
68+
public decimal? price { get; set; }
69+
public CreditCard? cc_type { get; set; }
70+
public DateTime? created_date { get; set; }
71+
}
72+
73+
public enum CreditCard
74+
{
75+
none = 0,
76+
[Description("MasterCard")]
77+
MasterCard = 1,
78+
Visa = 2
79+
}
80+
}

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@page "/ServerSideData"
2+
@inject HttpClient Http
3+
@using BlazorTable
4+
@using BlazorTable.Interfaces
5+
@using BlazorTable.Components.ServerSide
6+
7+
<h1>Server side data</h1>
8+
9+
<Table TableItem="PersonData" DataLoader="_loader" Items="data" PageSize="15" ShowSearchBar="true">
10+
<Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Width="10%" DefaultSortColumn="true" />
11+
<Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Width="20%" />
12+
<Column TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Width="20%">
13+
<Template>
14+
<a href="mailto:@context.email">@context.email</a>
15+
</Template>
16+
</Column>
17+
<Column TableItem="PersonData" Title="Paid" Field="@(x => x.paid)" Sortable="true" Width="10%">
18+
<Template>
19+
@context.paid.ToString()
20+
</Template>
21+
</Column>
22+
<Column TableItem="PersonData" Title="Price" Field="@(x => x.price)" Sortable="true" Width="10%" Format="C" Align="Align.Right" />
23+
<Column TableItem="PersonData" Title="Created Date" Field="@(x => x.created_date)" Sortable="true" Width="10%">
24+
<Template>
25+
@(context.created_date.HasValue ? context.created_date.Value.ToShortDateString() : string.Empty)
26+
</Template>
27+
</Column>
28+
<Pager ShowPageNumber="true" ShowTotalCount="true" />
29+
</Table>
30+
31+
@code
32+
{
33+
[Inject]
34+
private HttpClient httpClient { get; set; }
35+
36+
public class PersonData
37+
{
38+
public int? id { get; set; }
39+
public string full_name { get; set; }
40+
public string email { get; set; }
41+
public bool? paid { get; set; }
42+
public decimal? price { get; set; }
43+
public DateTime? created_date { get; set; }
44+
}
45+
46+
private IDataLoader<PersonData> _loader;
47+
48+
private IEnumerable<PersonData> data;
49+
50+
protected override async Task OnInitializedAsync()
51+
{
52+
_loader = new PersonDataLoader(httpClient);
53+
data = (await _loader.LoadDataAsync(null)).Records;
54+
}
55+
56+
public class PersonDataLoader : IDataLoader<PersonData>
57+
{
58+
private readonly HttpClient _client;
59+
public PersonDataLoader(HttpClient client)
60+
{
61+
_client = client;
62+
}
63+
public async Task<PaginationResult<PersonData>> LoadDataAsync(FilterData parameters)
64+
{
65+
66+
var data = await _client.GetFromJsonAsync<PersonData[]>("sample-data/MOCK_DATA.json");
67+
IQueryable<PersonData> query = data.AsQueryable();
68+
if (parameters?.Query != null)
69+
{
70+
query = query.Where(
71+
x => x.email.ToLowerInvariant().Contains(parameters.Query.ToLowerInvariant()) ||
72+
x.full_name.ToLowerInvariant().Contains(parameters.Query.ToLowerInvariant()));
73+
}
74+
if (parameters?.OrderBy != null)
75+
{
76+
var orderBy = parameters.OrderBy.Split(" ");
77+
if (orderBy.Length == 2)
78+
{
79+
var isSortDescending = orderBy[1] == "desc";
80+
var prop = typeof(PersonData).GetProperty(orderBy[0]);
81+
query = isSortDescending ? query.OrderByDescending(x => prop.GetValue(x, null))
82+
: query.OrderBy(x => prop.GetValue(x, null));
83+
}
84+
}
85+
var results = parameters?.Top.HasValue ?? false ?
86+
query.Skip(parameters.Skip.GetValueOrDefault())
87+
.Take(parameters.Top.Value).ToArray() :
88+
query.ToArray();
89+
90+
return new PaginationResult<PersonData>
91+
{
92+
Records = results,
93+
Skip = parameters?.Skip ?? 0,
94+
Total = query.ToList().Count,
95+
Top = parameters?.Top ?? 0
96+
};
97+
}
98+
}
99+
100+
}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55

66
<h1>Toggle Column Visibility</h1>
77

8+
<p>Users can change the visibility of a column if its "Hideable" attribute is set to true.</p>
9+
810
<button class="btn btn-primary mb-2" @onclick="@(_ => showSearchBar = !showSearchBar)">Toggle Search Bar</button>
911

10-
<Table TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true" ShowSearchBar="showSearchBar">
12+
<Table @ref="table" TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true" ShowSearchBar="showSearchBar">
1113
<Column Hideable="true" TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" />
1214
<Column Hideable="true" TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Filterable="true" Width="20%" />
1315
<Column Hideable="true" TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
@@ -35,17 +37,26 @@
3537
</Table>
3638

3739
@code
38-
{
40+
{
3941
[Inject]
4042
private HttpClient httpClient { get; set; }
4143

44+
private ITable<PersonData> table;
45+
4246
private PersonData[] data;
4347

4448
private bool showSearchBar;
4549

4650
protected override async Task OnInitializedAsync()
4751
{
4852
data = await httpClient.GetFromJsonAsync<PersonData[]>("sample-data/MOCK_DATA.json");
53+
54+
Random random = new Random(123);
55+
56+
foreach (IColumn<PersonData> column in table.Columns)
57+
{
58+
column.Visible = random.Next(2) == 1 ? true : false; // column visibility
59+
}
4960
}
5061

5162
public class PersonData

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ app {
4848

4949
.sidebar {
5050
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
51+
overflow: auto;
5152
}
5253

5354
.sidebar .top-row {

‎src/BlazorTable.Tests/BlazorTable.Tests.csproj‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
</PropertyGroup>
88

99
<ItemGroup>
10-
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.8.0" />
10+
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.8.3" />
1111
<PackageReference Include="PuppeteerSharp" Version="2.0.4" />
1212
<PackageReference Include="PuppeteerSharp.Contrib.Extensions" Version="3.0.0" />
13-
<PackageReference Include="Shouldly" Version="4.0.1" />
13+
<PackageReference Include="Shouldly" Version="4.0.3" />
1414
<PackageReference Include="xunit" Version="2.4.1" />
1515
<PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
1616
<PrivateAssets>all</PrivateAssets>
1717
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
1818
</PackageReference>
19-
<PackageReference Include="coverlet.collector" Version="1.3.0">
19+
<PackageReference Include="coverlet.collector" Version="3.0.2">
2020
<PrivateAssets>all</PrivateAssets>
2121
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
2222
</PackageReference>

‎src/BlazorTable/BlazorTable.csproj‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
</ItemGroup>
2828

2929
<ItemGroup>
30-
<PackageReference Include="LINQKit.Core" Version="1.1.21" />
31-
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.10" />
32-
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.10" />
33-
<PackageReference Include="Microsoft.Extensions.Localization" Version="3.1.10" />
34-
<PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.3.1">
30+
<PackageReference Include="LINQKit.Core" Version="1.1.22" />
31+
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.11" />
32+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.11" />
33+
<PackageReference Include="Microsoft.Extensions.Localization" Version="3.1.11" />
34+
<PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.3.2">
3535
<PrivateAssets>all</PrivateAssets>
3636
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
3737
</PackageReference>
@@ -45,15 +45,15 @@
4545
</ItemGroup>
4646

4747
<ItemGroup>
48-
<Compile Update="Components\Localization.Designer.cs">
48+
<Compile Update="Localization\Localization.Designer.cs">
4949
<DesignTime>True</DesignTime>
5050
<AutoGen>True</AutoGen>
5151
<DependentUpon>Localization.resx</DependentUpon>
5252
</Compile>
5353
</ItemGroup>
5454

5555
<ItemGroup>
56-
<EmbeddedResource Update="Components\Localization.resx">
56+
<EmbeddedResource Update="Localization\Localization.resx">
5757
<Generator>ResXFileCodeGenerator</Generator>
5858
<LastGenOutput>Localization.Designer.cs</LastGenOutput>
5959
</EmbeddedResource>

0 commit comments

Comments
 (0)