Enterprise-level component library based on Bootstrap and BlazorFixed header function
When scrolling data, the header is fixed to facilitate viewing the header information of each column
The fixed header of this component adopts the double header method. When there is a common problem, the column is not aligned. Please add some styles according to your actual situation.
,Please set the width of each column as much as possible to avoid the problem of misalignment of column width
Set Height=200 fixed header
Demo
Example of vertical scroll bar after more data is loaded
Please set a column width, allow a column width not set, auto-fill
Set the Height=200 fixed header, when the displayed data on each page is 10 rows, the height exceeds the set value 200, A vertical scroll bar appears on the Table component
Demo
All columns are set to width, and a horizontal scroll bar will automatically appear when the screen is too small
Set the AllowResizing property while fixing the header so that the column width can be adjusted
Demo
By setting the Height parameter to fix the header,
, by setting AllowResizing , the parameter allows the column width to be adjusted
Do not set the Height value to adapt the height through the parent container
Demo
In this example, the Table table component cannot set the height because the height may not be known. The parent container may get the height through the style. At this time, the Table component will try to Use adaptive fill to fill the height, this application scenario is the most in actual combat, in this example, the simulated parent height is 300px
Table inside Dialog
Demo
Tips for using theTable with a fixed header in the Dialog:
Dialog should assign values to theClass parameter of DialogOption. In this example, it is set todialog-table. This operation is to enable us to customize the style to locate theTable component's parent container in the Dialog and set its height, Here you can use the writing method of adaptive height height: calc (100vh - 200px);; When the parent container of a Tablecomponent has a height, the component itself will perform adaptive height adaptation through calculation<style>
.dialog-table .modal-body {
height: calc(100vh - 400px);
overflow: hidden;
}
</style>@page "/tables/header"
<h3>@Localizer["Title"]</h3>
<h4>@Localizer["Desc"]</h4>
<p>@((MarkupString)Localizer["DescP"].Value)</p>
<DemoBlock Title="@Localizer["FixedHeaderTitle"]" Introduction="@Localizer["FixedHeaderIntro"]" Name="FixedHeader">
<p>@Localizer["FixedHeaderP"]</p>
<p>@Localizer["FixedHeaderP1"]</p>
<Table TItem="Foo" Items="@Items.Take(10)" Height="200" IsBordered="true" IsFixedHeader="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["FixedWidthTitle"]" Introduction="@Localizer["FixedWidthIntro"]" Name="FixedWidth">
<p>@Localizer["FixedWidthP"]</p>
<Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsMultipleSelect="true" Height="200" IsFixedHeader="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" Width="900" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["AllowResizingTitle"]" Introduction="@Localizer["AllowResizingIntro"]" Name="AllowResizing">
<p>@((MarkupString)Localizer["AllowResizingP"].Value)</p>
<Table TItem="Foo" Items="@Items.Take(10)"
IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true"
Height="200" AllowResizing="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" Width="900" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["AutoHeightTitle"]" Introduction="@Localizer["AutoHeightIntro"]" Name="AutoHeight">
<p>@((MarkupString)Localizer["AutoHeightP"].Value)</p>
<div style="height: 300px;">
<Table TItem="Foo" Items="@Items.Take(10)" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true" AllowResizing="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" Width="900" />
</TableColumns>
</Table>
</div>
</DemoBlock>
<DemoBlock Title="@Localizer["DialogTitle"]" Introduction="@Localizer["DialogIntro"]" Name="Dialog">
<p>@((MarkupString)Localizer["DialogDesc"].Value)</p>
<Pre><style>
.dialog-table .modal-body {
height: calc(100vh - 400px);
overflow: hidden;
}
</style></Pre>
<Button Text="@Localizer["DialogButtonText"]" OnClick="OnClickDialog" />
</DemoBlock>
<style>
.dialog-table .modal-body {
height: calc(100vh - 400px);
overflow: hidden;
}
</style>
@code {
RenderFragment RenderTable() =>
@<Table TItem="Foo" Items="@Items" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true" AllowResizing="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" Width="900" />
</TableColumns>
</Table>;
}
// 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>
/// Table 组件固定表头示例
/// </summary>
public partial class TablesFixedHeader
{
[NotNull]
private List<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? FooLocalizer { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<TablesFixedHeader>? Localizer { get; set; }
[Inject]
[NotNull]
private DialogService? DialogService { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(FooLocalizer);
}
private async Task OnClickDialog()
{
var op = new DialogOption
{
Class = "dialog-table",
Title = Localizer["DialogTitle"],
BodyTemplate = RenderTable()
};
await DialogService.Show(op);
}
}
