-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
TableMultiGroupingExample.razor
84 lines (73 loc) · 3.02 KB
/
TableMultiGroupingExample.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient
<style>
.mud-table-cell-custom-group {
font-weight: 500;
}
.mud-table-cell-custom-group-footer {
padding-bottom: 50px;
text-align: right;
}
</style>
<MudText>Total items: @Elements?.Count() - Selected items: @selectedItems?.Count</MudText>
<MudTable Hover="true" Breakpoint="Breakpoint.Sm" Height="500px" FixedHeader="true"
Items="@Elements"
GroupBy="@_groupDefinition"
GroupHeaderStyle="background-color:var(--mud-palette-background-gray)"
GroupFooterClass="mb-4"
Dense="_dense"
MultiSelection="_multiSelect"
@bind-SelectedItems="selectedItems">
<HeaderContent>
<MudTh>Nr</MudTh>
<MudTh>Sign</MudTh>
<MudTh>Name</MudTh>
<MudTh>Group</MudTh>
<MudTh>Position</MudTh>
<MudTh>Molar mass</MudTh>
</HeaderContent>
<GroupHeaderTemplate>
<MudTh Class="mud-table-cell-custom-group" colspan="6">@($"{context.GroupName}: {context.Key}")</MudTh>
</GroupHeaderTemplate>
<RowTemplate>
<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Sign</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Group">@context.Group</MudTd>
<MudTd DataLabel="Position">@context.Position</MudTd>
<MudTd Style="text-align:right" DataLabel="Molar mass">@context.Molar</MudTd>
</RowTemplate>
<GroupFooterTemplate>
<MudTh Class="mud-table-cell-custom-group mud-table-cell-custom-group-footer" colspan="6">Total Mass: @context.Items.Sum((e) => e.Molar)</MudTh>
</GroupFooterTemplate>
</MudTable>
<MudSwitch @bind-Value="_dense" Color="Color.Primary">Dense</MudSwitch>
<MudSwitch @bind-Value="_multiSelect" Color="Color.Primary">MultiSelect</MudSwitch>
<MudSwitch @bind-Value="_groupDefinition.Indentation" Color="Color.Primary">Indentation</MudSwitch>
<MudSwitch @bind-Value="_groupDefinition.Expandable" Color="Color.Primary">Expandable (Root Level)</MudSwitch>
<MudSwitch @bind-Value="_groupDefinition.InnerGroup.Expandable" Color="Color.Primary">Expandable (Second Level)</MudSwitch>
@code {
private bool _dense = false;
private bool _multiSelect = true;
private HashSet<Element> selectedItems = new HashSet<Element>();
private TableGroupDefinition<Element> _groupDefinition = new TableGroupDefinition<Element>()
{
GroupName = "Group",
Indentation = false,
Expandable = false,
Selector = (e) => e.Group,
InnerGroup = new TableGroupDefinition<Element>()
{
GroupName = "Position",
Expandable = false,
Selector = (e) => e.Position
}
};
private IEnumerable<Element> Elements = new List<Element>();
protected override async Task OnInitializedAsync()
{
Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
}
}