@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);
        }
    }
}