Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

固定表头功能

滚动数据时表头固定方便查看各列表头信息

本组件固定表头做法采用的是 双表头 做法,常见问题时出现列不对齐的问题,根据自己实际情况请自行添加部分样式
固定表头用法请尽可能的设置每列宽度,以避免列宽不对齐的问题

宽度自适应

设置 Height=200 固定表头

Demo

数据比较多加载后即出现纵向滚动条示例

请设置个列宽度,允许一列宽度不设置,进行自动填充

Loading...

宽度固定

设置 Height=200 固定表头,当每页显示数据为 10 行时高度超出设置值 200 后,Table 组件出现纵向滚动条

Demo

所有列均设置宽度,当屏幕过小时会自动出现横向滚动条

Loading...

宽度可调整

固定表头的同时设置 AllowResizing 属性,使列宽可以调整

Demo

通过设置 Height 参数固定表头
通过设置 AllowResizing 参数允许调整列宽

Loading...
@page "/tables/header"

<h3>固定表头功能</h3>

<h4>滚动数据时表头固定方便查看各列表头信息</h4>

<p>
    本组件固定表头做法采用的是 <code>双表头</code> 做法,常见问题时出现列不对齐的问题,根据自己实际情况请自行添加部分样式
    <br />
    固定表头用法请尽可能的设置每列宽度,以避免列宽不对齐的问题
</p>

<Block Title="宽度自适应" Introduction="设置 <code>Height=200</code> 固定表头">
    <p>数据比较多加载后即出现纵向滚动条示例</p>
    <p>请设置个列宽度,允许一列宽度不设置,进行自动填充</p>
    <Table TItem="Foo" Items="@Items.Take(10)" Height="200" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="宽度固定" Introduction="设置 <code>Height=200</code> 固定表头,当每页显示数据为 <code>10</code> 行时高度超出设置值 <code>200</code> 后,Table 组件出现纵向滚动条">
    <p>
        所有列均设置宽度,当屏幕过小时会自动出现横向滚动条
    </p>
    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsMultipleSelect="true" Height="200">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </TableColumns>
    </Table>
</Block>

<Block Title="宽度可调整" Introduction="固定表头的同时设置 <code>AllowResizing</code> 属性,使列宽可以调整">
    <p>
        通过设置 <code>Height</code> 参数固定表头
        <br />
        通过设置 <code>AllowResizing</code> 参数允许调整列宽
    </p>
    <Table TItem="Foo" Items="@Items.Take(10)"
           IsBordered="true" IsMultipleSelect="true" IsPagination="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>
</Block>
// 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.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;

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

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

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

            Items = Foo.GenerateFoo(Localizer);
        }
    }
}

B 站相关视频链接

[传送门]

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload