Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Table 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

@inject IStringLocalizer<TablesWrapNormal> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<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["TablesWrapNormalColumHeaderText_DateTime"]" />
            <TableColumn @bind-Field="@context.Name" Width="100" Text="@Localizer["TablesWrapNormalColumHeaderText_Name"]" ShowHeaderTooltip="true" HeaderTextEllipsis="true" />
            <TableColumn @bind-Field="@context.Address" Text="@Localizer["TablesWrapNormalColumHeaderText_Address"]" />
        </TableColumns>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private IEnumerable<Foo>? CellItems { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        CellItems = Foo.GenerateFoo(LocalizerFoo, 4);
    }
}

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.

@inject IStringLocalizer<TablesWrapHeaderTextWrap> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" HeaderTextWrap="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["TablesWrapHeaderTextWrapColumHeaderText_DateTime"]" TextWrap="true" />
            <TableColumn @bind-Field="@context.Name" Text="@Localizer["TablesWrapHeaderTextWrapColumHeaderText_Name"]" TextWrap="true" />
            <TableColumn @bind-Field="@context.Address" Text="@Localizer["TablesWrapHeaderTextWrapColumHeaderText_Address"]" TextWrap="true" />
        </TableColumns>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private IEnumerable<Foo>? CellItems { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        CellItems = Foo.GenerateFoo(LocalizerFoo, 4);
    }
}

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 Width to set the column width

@inject IStringLocalizer<TablesWrapLongData> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["TablesWrapLongDataColumHeaderText_DateTime"]" />
            <TableColumn @bind-Field="@context.Name" Text="@Localizer["TablesWrapLongDataColumHeaderText_Name"]" />
            <TableColumn @bind-Field="@context.Address" Text="@Localizer["TablesWrapLongDataColumHeaderText_Address"]" Width="200" TextWrap="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private IEnumerable<Foo>? CellItems { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        CellItems = Foo.GenerateFoo(LocalizerFoo, 4);
    }
}

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 Width to 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 ShowTips property to control whether to display all the text on mouse hover, the default is false
Drag the address column, the cell display content will automatically increase and decrease

@inject IStringLocalizer<TablesWrapDataResizing> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <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["TablesWrapDataResizingColumHeaderText_DateTime"]" />
            <TableColumn @bind-Field="@context.Name" Text="@Localizer["TablesWrapDataResizingColumHeaderText_Name"]" />
            <TableColumn @bind-Field="@context.Address" Text="@Localizer["TablesWrapDataResizingColumHeaderText_Address"]" Width="200" TextEllipsis="true" ShowTips="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private IEnumerable<Foo>? CellItems { 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
        });
    }
}

Custom in-cell typography

Use templates for special layout of in-cell data

Demo

@inject IStringLocalizer<TablesWrapCustomCell> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["TablesWrapCustomCellColumHeaderText_DateTime"]" />
            <TableColumn @bind-Field="@context.Name" Text="@Localizer["TablesWrapCustomCellColumHeaderText_Name"]" />
            <TableColumn @bind-Field="@context.Address" Text="@Localizer["TablesWrapCustomCellColumHeaderText_Address"]" 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["TablesWrapCustomCellTemplate_State"]:@v.Value</div>
                        <div>@Localizer["TablesWrapCustomCellTemplate_Time"]:@v.Row.DateTime</div>
                    </div>
                </Template>
            </TableColumn>
        </TableColumns>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private IEnumerable<Foo>? CellItems { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        CellItems = Foo.GenerateFoo(LocalizerFoo, 4);
    }
}

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Table 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

Demo

Demo

Demo

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.4-beta01