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> 固定表头" Name="FixedHeader">
    <p>数据比较多加载后即出现纵向滚动条示例</p>
    <p>请设置个列宽度,允许一列宽度不设置,进行自动填充</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>
</Block>

<Block Title="宽度固定" Introduction="设置 <code>Height=200</code> 固定表头,当每页显示数据为 <code>10</code> 行时高度超出设置值 <code>200</code> 后,Table 组件出现纵向滚动条" Name="FixedWidth">
    <p>
        所有列均设置宽度,当屏幕过小时会自动出现横向滚动条
    </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>
</Block>

<Block Title="宽度可调整" Introduction="固定表头的同时设置 <code>AllowResizing</code> 属性,使列宽可以调整" Name="AllowResizing">
    <p>
        通过设置 <code>Height</code> 参数固定表头
        <br />
        通过设置 <code>AllowResizing</code> 参数允许调整列宽
    </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>
</Block>

<Block Title="自适应高度" Introduction="不设置 <code>Height</code> 值通过父容器自适应高度" Name="AutoHeight">
    <p>本例中 <code>Table</code> 表格组件由于可能未知高度,所以无法设置高度,父级容器可能通过样式得到高度,此时 <code>Table</code> 组件会尝试使用自适应填充满高度,实战中这种应用场景是最多的,本例模拟父级高度为 <code>300px</code></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>
</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 Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload