Enterprise-level component library based on Bootstrap and BlazorFixed column
For data with a large number of columns, you can fix the front and rear columns and scroll horizontally to view other data
For fixed column usage, please set the fixed column width as much as possible. If it is not set, set it according to the default value of 200
Fixed column header and column footer
Set the Fixed attribute to fix the header
Demo
In this example, set Name DateTime Complete The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally
Loading...
Fixed headers and columns
Set Height=200 to fix the header, set Fixed to fix the column
Demo
Loading...
Fixed button action column
Set FixedExtendButtonsColumn to fix the action column
Demo
Loading...
Fixed header and button action columns
Set Height=200 to fix the header, set FixedExtendButtonsColumn to fix the operation column
Demo
Loading...
Loading...
@page "/tables/fix-column"
<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>
<p>@((MarkupString)Localizer["P1"].Value)</p>
<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="FixedColHeader">
<p>@((MarkupString)Localizer["P4"].Value)</p>
<Table TItem="Foo" Items="@Items.Take(4)" RenderMode="TableRenderMode.Table" HeaderStyle="TableHeaderStyle.Light" IsBordered="true" IsStriped="true" class="table-fixed-column-demo">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
<TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" Filterable="true" />
<TableColumn @bind-Field="@context.Address" Width="900" Filterable="true" />
<TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" />
<TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" />
<TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]" Name="FixedColTableHeader">
<Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true" IsStriped="true" IsMultipleSelect="true" Height="200" FixedMultipleColumn="true" class="table-fixed-column-demo2">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" Width="900" />
<TableColumn @bind-Field="@context.Education" Width="100" />
<TableColumn @bind-Field="@context.Count" Width="100" />
<TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P7"]" Introduction="@Localizer["P8"]" Name="FixedExtendButtonsColumn">
<Table TItem="Foo" Items="@Items.Take(4)" IsBordered="true" IsStriped="true" RenderMode="TableRenderMode.Table"
ShowExtendButtons="true" FixedExtendButtonsColumn="true"
class="table-fixed-column-demo">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" Width="900" />
<TableColumn @bind-Field="@context.Education" Width="100" />
<TableColumn @bind-Field="@context.Count" Width="100" />
<TableColumn @bind-Field="@context.Complete" Width="100" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P9"]" Introduction="@Localizer["P10"]" Name="FixedExtendButtonsColumn">
<Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
IsFixedHeader="true" FixedExtendButtonsColumn="true" Height="200" FixedMultipleColumn="true"
ShowExtendButtons="true" RenderMode="TableRenderMode.Table" class="table-fixed-column-demo2">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" Width="900" />
<TableColumn @bind-Field="@context.Education" Width="100" />
<TableColumn @bind-Field="@context.Count" Width="100" />
<TableColumn @bind-Field="@context.Complete" Width="100" />
</TableColumns>
</Table>
<Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
IsFixedHeader="true" FixedExtendButtonsColumn="true" IsExtendButtonsInRowHeader="true" FixedMultipleColumn="true"
ShowExtendButtons="true" RenderMode="TableRenderMode.Table" Height="200" class="table-fixed-column-demo mt-3">
<TableColumns>
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Address" Width="900" />
<TableColumn @bind-Field="@context.Education" Width="100" />
<TableColumn @bind-Field="@context.Count" Width="100" />
<TableColumn @bind-Field="@context.Complete" Width="100" />
</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>
/// Fixed column example
/// </summary>
public partial class TablesFixedColumn
{
[NotNull]
private List<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<TablesFixedColumn>? Localizer { get; set; }
/// <summary>
/// OnInitialized method
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(LocalizerFoo);
}
}
