Skip to content

Commit 4f709fc

Browse files
PA4WDPA4WD
committed
Use the sort header in the table
1 parent 9e991da commit 4f709fc

File tree

3 files changed

+386
-189
lines changed

3 files changed

+386
-189
lines changed

‎src/MatBlazor.Demo/Demo/DemoTable.razor‎

Lines changed: 185 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
</Content>
5050
<SourceContent>
51-
<BlazorFiddle Template="MatBlazor" Code=@(@"
51+
<BlazorFiddle Template="MatBlazor" Code=@(@"
5252
<MatTable Items=""@cars"" class=""mat-elevation-z5"">
5353
<MatTableHeader>
5454
<th>Name</th>
@@ -99,7 +99,7 @@
9999
<h5 class="mat-h5">Filter Example, Pull Data from API, Single Row Selection / Hover</h5>
100100
<DemoContainer>
101101
<Content>
102-
<MatTable Items="@todos" LoadInitialData="true" Striped="true" RequestApiOnlyOnce="true" AllowSelection="true" RowClass="tester"
102+
<MatTable Items="@todos" LoadInitialData="true" Striped="true" RequestApiOnlyOnce="true" AllowSelection="true" RowClass="tester"
103103
ApiUrl="https://jsonplaceholder.typicode.com/todos" FilterByColumnName="Title" DebounceMilliseconds="150" class="mat-elevation-z5">
104104
<MatTableHeader>
105105
<th>Id</th>
@@ -133,7 +133,7 @@
133133

134134
</Content>
135135
<SourceContent>
136-
<BlazorFiddle Template="MatBlazor" Code=@(@"
136+
<BlazorFiddle Template="MatBlazor" Code=@(@"
137137
<MatTable Items=""@todos"" LoadInitialData=""true"" Striped=""true"" RequestApiOnlyOnce=""true"" AllowSelection=""true"" RowClass=""tester""
138138
ApiUrl=""https://jsonplaceholder.typicode.com/todos"" FilterByColumnName=""Title"" DebounceMilliseconds=""150"" class=""mat-elevation-z5"">
139139
<MatTableHeader>
@@ -169,3 +169,185 @@
169169
")></BlazorFiddle>
170170
</SourceContent>
171171
</DemoContainer>
172+
173+
<h5 class="mat-h5">Example sort header table</h5>
174+
<DemoContainer>
175+
<Content>
176+
<MatTable Items="@sortedData" class="mat-elevation-z5" ShowPaging="false" UseSortHeaderRow="true">
177+
<MatTableHeader >
178+
<MatSortHeaderRow SortChanged="@SortData">
179+
<MatSortHeader SortId="name">Dessert (100g)</MatSortHeader>
180+
<MatSortHeader SortId="calories">Calories</MatSortHeader>
181+
<MatSortHeader SortId="fat">Fat (g)</MatSortHeader>
182+
<MatSortHeader SortId="carbs">Carbs (g)</MatSortHeader>
183+
<MatSortHeader SortId="protein">Protein (g)</MatSortHeader>
184+
</MatSortHeaderRow>
185+
</MatTableHeader>
186+
<MatTableRow>
187+
<td>@context.Name</td>
188+
<td>@context.Calories</td>
189+
<td>@context.Fat</td>
190+
<td>@context.Carbs</td>
191+
<td>@context.Protein</td>
192+
</MatTableRow>
193+
</MatTable>
194+
195+
@code
196+
{
197+
class Dessert
198+
{
199+
public int Calories { get; set; }
200+
public int Carbs { get; set; }
201+
public int Fat { get; set; }
202+
public string Name { get; set; }
203+
public int Protein { get; set; }
204+
}
205+
206+
Dessert[] desserts = new[]
207+
{
208+
new Dessert() {Name = "Frozen yogurt", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
209+
new Dessert() {Name = "Ice cream sandwich", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
210+
new Dessert() {Name = "Eclair", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
211+
new Dessert() {Name = "Cupcake", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
212+
new Dessert() {Name = "Gingerbread", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
213+
};
214+
215+
void SortData(MatSortChangedEvent sort)
216+
{
217+
sortedData = desserts.ToArray();
218+
if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
219+
{
220+
Comparison<Dessert> comparison = null;
221+
switch (sort.SortId)
222+
{
223+
case "name":
224+
comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
225+
break;
226+
case "calories":
227+
comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
228+
break;
229+
case "fat":
230+
comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
231+
break;
232+
case "carbs":
233+
comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
234+
break;
235+
case "protein":
236+
comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
237+
break;
238+
}
239+
if (comparison != null)
240+
{
241+
if (sort.Direction == MatSortDirection.Desc)
242+
{
243+
Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
244+
}
245+
else
246+
{
247+
Array.Sort(sortedData, comparison);
248+
}
249+
}
250+
}
251+
}
252+
253+
Dessert[] sortedData = null;
254+
255+
protected override void OnInitialized()
256+
{
257+
base.OnInitialized();
258+
SortData(null);
259+
}
260+
}
261+
262+
</Content>
263+
<SourceContent>
264+
<BlazorFiddle Template="MatBlazor" Code=@(@"
265+
<MatTable Items=""@sortedData"" class=""mat-elevation-z5"" ShowPaging=""false"" UseSortHeaderRow=""true"">
266+
<MatTableHeader >
267+
<MatSortHeaderRow SortChanged=""@SortData"">
268+
<MatSortHeader SortId=""name"">Dessert (100g)</MatSortHeader>
269+
<MatSortHeader SortId=""calories"">Calories</MatSortHeader>
270+
<MatSortHeader SortId=""fat"">Fat (g)</MatSortHeader>
271+
<MatSortHeader SortId=""carbs"">Carbs (g)</MatSortHeader>
272+
<MatSortHeader SortId=""protein"">Protein (g)</MatSortHeader>
273+
</MatSortHeaderRow>
274+
</MatTableHeader>
275+
<MatTableRow>
276+
<td>@context.Name</td>
277+
<td>@context.Calories</td>
278+
<td>@context.Fat</td>
279+
<td>@context.Carbs</td>
280+
<td>@context.Protein</td>
281+
</MatTableRow>
282+
</MatTable>
283+
284+
@code
285+
{
286+
class Dessert
287+
{
288+
public int Calories { get; set; }
289+
public int Carbs { get; set; }
290+
public int Fat { get; set; }
291+
public string Name { get; set; }
292+
public int Protein { get; set; }
293+
}
294+
295+
Dessert[] desserts = new[]
296+
{
297+
new Dessert() {Name = ""Frozen yogurt"", Calories = 159, Fat = 6, Carbs = 24, Protein = 4},
298+
new Dessert() {Name = ""Ice cream sandwich"", Calories = 237, Fat = 9, Carbs = 37, Protein = 4},
299+
new Dessert() {Name = ""Eclair"", Calories = 262, Fat = 16, Carbs = 24, Protein = 6},
300+
new Dessert() {Name = ""Cupcake"", Calories = 305, Fat = 4, Carbs = 67, Protein = 4},
301+
new Dessert() {Name = ""Gingerbread"", Calories = 356, Fat = 16, Carbs = 49, Protein = 4},
302+
};
303+
304+
void SortData(MatSortChangedEvent sort)
305+
{
306+
sortedData = desserts.ToArray();
307+
if (!(sort == null || sort.Direction == MatSortDirection.None || string.IsNullOrEmpty(sort.SortId)))
308+
{
309+
Comparison<Dessert> comparison = null;
310+
switch (sort.SortId)
311+
{
312+
case ""name"":
313+
comparison = (s1, s2) => string.Compare(s1.Name, s2.Name, StringComparison.InvariantCultureIgnoreCase);
314+
break;
315+
case ""calories"":
316+
comparison = (s1, s2) => s1.Calories.CompareTo(s2.Calories);
317+
break;
318+
case ""fat"":
319+
comparison = (s1, s2) => s1.Fat.CompareTo(s2.Fat);
320+
break;
321+
case ""carbs"":
322+
comparison = (s1, s2) => s1.Carbs.CompareTo(s2.Carbs);
323+
break;
324+
case ""protein"":
325+
comparison = (s1, s2) => s1.Protein.CompareTo(s2.Protein);
326+
break;
327+
}
328+
if (comparison != null)
329+
{
330+
if (sort.Direction == MatSortDirection.Desc)
331+
{
332+
Array.Sort(sortedData, (s1, s2) => -1 * comparison(s1, s2));
333+
}
334+
else
335+
{
336+
Array.Sort(sortedData, comparison);
337+
}
338+
}
339+
}
340+
}
341+
342+
Dessert[] sortedData = null;
343+
344+
protected override void OnInitialized()
345+
{
346+
base.OnInitialized();
347+
SortData(null);
348+
}
349+
}
350+
351+
")></BlazorFiddle>
352+
</SourceContent>
353+
</DemoContainer>

0 commit comments

Comments
 (0)