Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Table virtual scroll row

When the Table component displays large data, it usually uses paging to load data. There is also a virtual row technology similar to the automatic loading of data in the background when the mobile phone scrolls to the bottom.

Normal use

Background on-demand loading when scrolling data without paging

Demo

Need to set ScrollMode Height RowHeight PageItems parameters to set virtual scrolling

@inject IStringLocalizer<Foo> LocalizerFoo

<div class="table-virtualize-demo">
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="Items" ScrollMode="ScrollMode.Virtual">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" Readonly="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" Editable="false" />
            <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 List<Foo>? Items { get; set; }

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

        Items = Foo.GenerateFoo(LocalizerFoo);
    }
}

Get data dynamically

Background on-demand loading when scrolling data without paging

Demo

VirtualizationDynamicDescription

@inject IStringLocalizer<Foo> LocalizerFoo

<div class="table-virtualize-demo">
    <Table TItem="Foo" IsBordered="true" IsStriped="true" ScrollMode="ScrollMode.Virtual" OnQueryAsync="OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" Readonly="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" Editable="false" />
            <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 List<Foo>? Items { get; set; }

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

        Items = Foo.GenerateFoo(LocalizerFoo);
    }

    private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        await Task.Delay(200);
        var items = Items.Skip(options.StartIndex).Take(options.PageItems);
        return new QueryData<Foo>()
        {
            Items = items,
            TotalCount = Items.Count
        };
    }
}

@inherits BootstrapComponentBase
@page "/tables/virtualization"
@inject IStringLocalizer<TablesVirtualization> Localizer

<h3>@Localizer["TablesVirtualizationTitle"]</h3>
<h4>@Localizer["TablesVirtualizationDescription"]</h4>

<DemoBlock Title="@Localizer["VirtualizationNormalTitle"]" Introduction="@Localizer["VirtualizationNormalIntro"]" Name="Normal" Demo="typeof(Demos.Table.Virtualization.VirtualizationNormal)">
    <p>@((MarkupString)Localizer["VirtualizationNormalDescription"].Value)</p>
</DemoBlock>

<DemoBlock Title="@Localizer["VirtualizationDynamicTitle"]" Introduction="@Localizer["VirtualizationDynamicIntro"]" Name="Dynamic" Demo="typeof(Demos.Table.Virtualization.VirtualizationDynamic)">
    <p>@Localizer["VirtualizationDynamicDescription"]</p>
</DemoBlock>

Table virtual scroll row

When the Table component displays large data, it usually uses paging to load data. There is also a virtual row technology similar to the automatic loading of data in the background when the mobile phone scrolls to the bottom.

Demo

Demo

Bootstrap Blazor Component library updated to 7.2.5-beta02