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
@page "/tables/header"
<h3>@FixheaderLocalizer["Title"]</h3>
<h4>@FixheaderLocalizer["Desc"]</h4>
<p>@((MarkupString)FixheaderLocalizer["DescP"].Value)</p>
<DemoBlock Title="@FixheaderLocalizer["FixedHeaderTitle"]" Introduction="@FixheaderLocalizer["FixedHeaderIntro"]" Name="FixedHeader">
<p>@FixheaderLocalizer["FixedHeaderP"]</p>
<p>@FixheaderLocalizer["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="@FixheaderLocalizer["FixedWidthTitle"]" Introduction="@FixheaderLocalizer["FixedWidthIntro"]" Name="FixedWidth">
<p>@FixheaderLocalizer["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="@FixheaderLocalizer["AllowResizingTitle"]" Introduction="@FixheaderLocalizer["AllowResizingIntro"]" Name="AllowResizing">
<p>@((MarkupString)FixheaderLocalizer["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="@FixheaderLocalizer["AutoHeightTitle"]" Introduction="@FixheaderLocalizer["AutoHeightIntro"]" Name="AutoHeight">
<p>@((MarkupString)FixheaderLocalizer["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>
// 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/
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
/// Table 组件固定表头示例
/// </summary>
public partial class TablesFixedHeader
{
[NotNull]
private List<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<TablesFixedHeader>? FixheaderLocalizer { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(Localizer);
}
}
