Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage



设置 MultiHeaderTemplate 模板即可

@page "/tables/multi-header"



<DemoBlock Title="基础用法" Introduction="设置 <code>MultiHeaderTemplate</code> 模板即可" Name="MultiHeaderTemplate">
    <Table TItem="Foo" OnQueryAsync="@OnQueryAsync" IsBordered="true" IsStriped="true">
                <th rowspan="2"><div class="table-cell" style="height: 94px; justify-content: center;">时间</div></th>
                <th colspan="2"><div class="table-cell" style="justify-content: center">个人信息</div></th>
                <th><div class="table-cell">个人姓名</div></th>
                <th><div class="table-cell">个人地址</div></th>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Filterable="true" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Filterable="true" Sortable="true" />
// 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 BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// </summary>
public partial class TablesHeader
    private List<Foo>? Items { get; set; }

    private IStringLocalizer<Foo>? Localizer { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()

        Items = Foo.GenerateFoo(Localizer);

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
        IEnumerable<Foo> items = Items;

        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
            items = items.Where(options.Filters.GetFilterFunc<Foo>());
            isFiltered = true;

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
            var invoker = Foo.GetNameSortFunc();
            items = invoker(items, options.SortName, options.SortOrder);
            isSorted = true;

        // 设置记录总数
        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 = isSorted,
            IsFiltered = isFiltered,
            IsSearch = true

B 站相关视频链接


QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload