
Fixed 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
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
Set Height=200
to fix the header, set Fixed
to fix the column
Demo
Set FixedExtendButtonsColumn
to fix the action column
Demo
Set Height=200
to fix the header, set FixedExtendButtonsColumn
to fix the operation column
Demo
@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);
}
}