Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Fixed header function

When scrolling data, the header is fixed to facilitate viewing the header information of each column

The fixed header of this component adopts the double header method. When there is a common problem, the column is not aligned. Please add some styles according to your actual situation.
Please set the width of each column as much as possible to avoid the problem of misalignment of column width

Width adaptive

Set Height=200 and IsFixedHeader="true" fixed header

Demo

Example of vertical scroll bar after more data is loaded

Please set a column width, allow a column width not set, auto-fill

@inject IStringLocalizer<Foo> FooLocalizer

<div>
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200" IsBordered="true" IsFixedHeader="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.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 List<Foo>? Items { get; set; }

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

        Items = Foo.GenerateFoo(FooLocalizer);
    }
}

FixedWidth

Set the Height=200 and IsFixedHeader="true" fixed header, when the displayed data on each page is 10 rows, the height exceeds the set value 200, A vertical scroll bar appears on the Table component

Demo

All columns are set to width, and a horizontal scroll bar will automatically appear when the screen is too small

@inject IStringLocalizer<Foo> FooLocalizer

<div>
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" IsBordered="true" IsMultipleSelect="true" Height="200" IsFixedHeader="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </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(FooLocalizer);
    }
}

Width Adjustable

Set the AllowResizing property while fixing the header so that the column width can be adjusted

Demo

By setting the Height parameter to fix the header,
, by setting AllowResizing , the parameter allows the column width to be adjusted

@inject IStringLocalizer<Foo> FooLocalizer

<div>
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table"
           IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true"
           Height="200" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </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(FooLocalizer);
    }
}

Automatic Height

Do not set the Height value to adapt the height through the parent container

Demo

In this example, the Table table component cannot set the height because the height may not be known. The parent container may get the height through the style. At this time, the Table component will try to Use adaptive fill to fill the height, this application scenario is the most in actual combat, in this example, the simulated parent height is 300px

@inject IStringLocalizer<Foo> FooLocalizer

<div style="height: 300px;">
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
           IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </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(FooLocalizer);
    }
}

In Dialog

Table inside Dialog

Demo

Tips for using theTable with a fixed header in the Dialog:

The Dialog should assign values to theClass parameter of DialogOption. In this example, it is set todialog-table. This operation is to enable us to customize the style to locate theTable component's parent container in the Dialog and set its height, Here you can use the writing method of adaptive height height: calc (100vh - 400px);; When the parent container of a Tablecomponent has a height, the component itself will perform adaptive height adaptation through calculation

<style>
    .dialog-table .modal-body {
        height: calc(100vh - 400px);
        overflow: hidden;
    }
</style>

@inject IStringLocalizer<TablesFixedHeaderDialog> Localizer
@inject IStringLocalizer<Foo> FooLocalizer
@inject DialogService DialogService

<style>
    .dialog-table .modal-body {
        height: calc(100vh - 400px);
        overflow: hidden;
    }
</style>

<Button Text="@Localizer["DialogButtonText"]" OnClick="OnClickDialog" class="mt-3"></Button>

@code {
    [NotNull]
    private List<Foo>? Items { get; set; }

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

        Items = Foo.GenerateFoo(FooLocalizer);
    }

    private async Task OnClickDialog()
    {
        var op = new DialogOption
                {
                    Class = "dialog-table",
                    Title = Localizer["DialogTitle"],
                    BodyTemplate = RenderTable()
                };

        await DialogService.Show(op);
    }

    RenderFragment RenderTable() =>
    @<Table TItem="Foo" Items="@Items" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
       IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true" AllowResizing="true" RenderMode="TableRenderMode.Table">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </TableColumns>
    </Table>;
}

B station related video link

[portal]

交流群

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

Fixed header function

When scrolling data, the header is fixed to facilitate viewing the header information of each column

Demo

Demo

Demo

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.4-beta01