logoEnterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

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

Set Height=200 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

Loading...

Set the Height=200 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

Loading...

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

Loading...

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

Loading...

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 - 200px);; 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>
@page "/tables/header"

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["Desc"]</h4>

<p>@((MarkupString)Localizer["DescP"].Value)</p>

<DemoBlock Title="@Localizer["FixedHeaderTitle"]" Introduction="@Localizer["FixedHeaderIntro"]" Name="FixedHeader">
    <p>@Localizer["FixedHeaderP"]</p>
    <p>@Localizer["FixedHeaderP1"]</p>
    <Table TItem="Foo" Items="@Items.Take(10)" 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>
</DemoBlock>

<DemoBlock Title="@Localizer["FixedWidthTitle"]" Introduction="@Localizer["FixedWidthIntro"]" Name="FixedWidth">
    <p>@Localizer["FixedWidthP"]</p>
    <Table TItem="Foo" Items="@Items.Take(10)" 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>
</DemoBlock>

<DemoBlock Title="@Localizer["AllowResizingTitle"]" Introduction="@Localizer["AllowResizingIntro"]" Name="AllowResizing">
    <p>@((MarkupString)Localizer["AllowResizingP"].Value)</p>
    <Table TItem="Foo" Items="@Items.Take(10)"
           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>
</DemoBlock>

<DemoBlock Title="@Localizer["AutoHeightTitle"]" Introduction="@Localizer["AutoHeightIntro"]" Name="AutoHeight">
    <p>@((MarkupString)Localizer["AutoHeightP"].Value)</p>
    <div style="height: 300px;">
        <Table TItem="Foo" Items="@Items.Take(10)" 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>
</DemoBlock>

<DemoBlock Title="@Localizer["DialogTitle"]" Introduction="@Localizer["DialogIntro"]" Name="Dialog">
    <p>@((MarkupString)Localizer["DialogDesc"].Value)</p>
    <Pre><style>
    .dialog-table .modal-body {
        height: calc(100vh - 400px);
        overflow: hidden;
    }
</style></Pre>
    <Button Text="@Localizer["DialogButtonText"]" OnClick="OnClickDialog" />
</DemoBlock>

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

@code {
    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">
            <TableColumns>
                <TableColumn @bind-Field="@context.DateTime" Width="180" />
                <TableColumn @bind-Field="@context.Name" Width="100" />
                <TableColumn @bind-Field="@context.Address" Width="900" />
            </TableColumns>
    </Table>;
}
// 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/

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// Table 组件固定表头示例
/// </summary>
public partial class TablesFixedHeader
{
    [NotNull]
    private List<Foo>? Items { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? FooLocalizer { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<TablesFixedHeader>? Localizer { get; set; }

    [Inject]
    [NotNull]
    private DialogService? DialogService { 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);
    }
}

B station related video link

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor Component library updated to 7.0.8-beta05

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915