Enterprise-level component library based on Bootstrap and BlazorTable wrapping example
When the content of the header or the cell in the row is too long, the effect of omitting, wrapping, etc. can be realized by changing the style
Note:Because the Table component has realized the function of adapting to the mobile terminal, this demo needs to be viewed on the computer side
Example of super long header
In some special cases, the header may be relatively long, and the header needs to be controlled within a fixed width. When the mouse moves over the header, Tooltip is displayed to display the complete header information.
Demo
You can drag the window size, and the horizontal scroll bar will automatically appear when the window is too small
Loading...
The header is too long to wrap
Wrap the super long header by setting HeaderTextWrap
Demo
You can drag the window size. When the window is too small, the horizontal scroll bar will automatically appear, and the header will automatically wrap.
Loading...
Example of extra-long wrapping of cell data
In some special cases, the cell content may be long and need to be wrapped
Demo
- You can drag the window size, the address column will be automatically wrapped when the window is too small
- Enable word wrapping by setting
TextWrap - Note: It is recommended to use
Widthto set the column width
Loading...
Example of over-length omission of cell data
In some special cases, the content of the cell may be relatively long, and it needs to be omitted.
Demo
- You can drag the window size, and the address column will be automatically omitted if the window is too small
- Enable text ellipsis by setting
TextEllipsis - Note: It is recommended to use
Widthto set the column width. If the column width is not set, it will automatically use 200px width inside - After the text in the cell is omitted, you can use the
ShowTipsproperty to control whether to display all the text on mouse hover, the default isfalse - Drag the address column, the cell display content will automatically increase and decrease
Loading...
Custom in-cell typography
Use templates for special layout of in-cell data
Demo
Loading...
@inherits BootstrapComponentBase
@page "/tables/wrap"
@inject IStringLocalizer<TablesWrap> Localizer
<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>
<p>@((MarkupString)Localizer["P1"].Value)</p>
<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="WarpHeader">
<p>@Localizer["P4"]</p>
<div class="table-wrap-header-demo">
<Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["P5"]" />
<TableColumn @bind-Field="@context.Name" Text="@Localizer["P6"]" />
<TableColumn @bind-Field="@context.Address" Text="@Localizer["P7"]" />
</TableColumns>
</Table>
</div>
</DemoBlock>
<DemoBlock Title="@Localizer["P8"]" Introduction="@Localizer["P9"]" Name="HeaderTextWrap">
<p>@Localizer["P10"]</p>
<Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" HeaderTextWrap="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["P11"]" />
<TableColumn @bind-Field="@context.Name" Text="@Localizer["P12"]" />
<TableColumn @bind-Field="@context.Address" Text="@Localizer["P13"]" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P14"]" Introduction="@Localizer["P15"]" Name="LongData">
<ul class="ul-demo mb-3">
<li>@((MarkupString)Localizer["P16"].Value)</li>
<li>@((MarkupString)Localizer["P17"].Value)</li>
<li>@((MarkupString)Localizer["P18"].Value)</li>
</ul>
<Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["P19"]" />
<TableColumn @bind-Field="@context.Name" Text="@Localizer["P20"]" />
<TableColumn @bind-Field="@context.Address" Text="@Localizer["P21"]" Width="200" TextWrap="true" />
<TableColumn @bind-Field="@context.Education" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P22"]" Introduction="@Localizer["P23"]" Name="DataResizing">
<ul class="ul-demo mb-3">
<li>@((MarkupString)Localizer["P24"].Value)</li>
<li>@((MarkupString)Localizer["P25"].Value)</li>
<li>@((MarkupString)Localizer["P26"].Value)</li>
<li>@((MarkupString)Localizer["P27"].Value)</li>
<li>@((MarkupString)Localizer["P28"].Value)</li>
</ul>
<Table TItem="Foo" IsBordered="true" IsStriped="true" AllowResizing="true" IsPagination="true"
OnQueryAsync="OnQueryAsync" PageItemsSource="new int[] {4, 8, 20}">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["P29"]" />
<TableColumn @bind-Field="@context.Name" Text="@Localizer["P30"]" />
<TableColumn @bind-Field="@context.Address" Text="@Localizer["P31"]" Width="200" TextEllipsis="true" ShowTips="true" />
<TableColumn @bind-Field="@context.Education" />
<TableColumn @bind-Field="@context.Count" />
<TableColumn @bind-Field="@context.Complete" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="@Localizer["P32"]" Introduction="@Localizer["P33"]" Name="CustomCell">
<Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["P34"]" />
<TableColumn @bind-Field="@context.Name" Text="@Localizer["P35"]" />
<TableColumn @bind-Field="@context.Address" Text="@Localizer["P36"]" Width="200" TextEllipsis="true" ShowTips="true" />
<TableColumn @bind-Field="@context.Education" />
<TableColumn @bind-Field="@context.Count" />
<TableColumn @bind-Field="@context.Complete">
<Template Context="v">
<div>
<div>@Localizer["P37"]:@v.Value</div>
<div>@Localizer["P38"]:@v.Row.DateTime</div>
</div>
</Template>
</TableColumn>
</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/
using Microsoft.JSInterop;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
/// 折行演示示例代码
/// </summary>
public partial class TablesWrap
{
[NotNull]
private IEnumerable<Foo>? CellItems { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
CellItems = Foo.GenerateFoo(LocalizerFoo, 4);
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
var items = Foo.GenerateFoo(LocalizerFoo);
// 设置记录总数
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 = true,
IsFiltered = true,
IsSearch = true
});
}
}
