Enterprise-level component library based on Bootstrap and BlazorHeader grouping function
When the data structure is complex, multi-level headers can be used to show the hierarchical relationship of the data
Basic usage
Set the MultiHeaderTemplate template
Demo
by setting
ShowMultiFilterHeader value to control whether to display the filter headerPay attention to the details. After the first column of cells is merged, there will be no cells in the first column of the last row header, so you need to set the style yourself
border-bottom consistent with other cellsLoading...
@page "/tables/multi-header"
<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="MultiHeaderTemplate">
<p>
<div>@Localizer["P3"] <code>ShowMultiFilterHeader</code> @Localizer["P4"]</div>
<div>@Localizer["P5"] <code>border-bottom</code> @Localizer["P6"]</div>
</p>
<Table TItem="Foo" OnQueryAsync="@OnQueryAsync" IsBordered="true" IsStriped="true" ShowMultiFilterHeader="false">
<MultiHeaderTemplate>
<tr>
<th rowspan="2" class="table-header-group-th1"><div class="table-cell">@Localizer["P7"]</div></th>
<th colspan="2" class="table-header-group-th2"><div class="table-cell">@Localizer["P8"]</div></th>
</tr>
<tr>
<th><div class="table-cell">@Localizer["P9"]</div></th>
<th><div class="table-cell">@Localizer["P10"]</div></th>
</tr>
</MultiHeaderTemplate>
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
<TableColumn @bind-Field="@context.Name" Width="100" Filterable="true" Sortable="true" />
<TableColumn @bind-Field="@context.Address" Filterable="true" Sortable="true" />
</TableColumns>
</Table>
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
///
/// </summary>
public partial class TablesHeader
{
[NotNull]
private List<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<TablesHeader>? Localizer { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
/// <summary>
/// OnInitialized
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(LocalizerFoo, 4);
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
IEnumerable<Foo> items = Items;
var isFiltered = false;
if (options.Filters.Any())
{
items = items.Where(options.Filters.GetFilterFunc<Foo>());
isFiltered = true;
}
var isSorted = false;
if (!string.IsNullOrEmpty(options.SortName))
{
var invoker = Foo.GetNameSortFunc();
items = invoker(items, options.SortName, options.SortOrder);
isSorted = true;
}
var total = items.Count();
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
IsSorted = isSorted,
IsFiltered = isFiltered,
IsSearch = true
});
}
}
