@page "/tables/fix-column"

<h3>固定列功能</h3>

<h4>对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据</h4>

<p>
    固定列用法请尽可能的设置固定列宽度，未设置时按照 <code>200</code> 默认值设置
</p>

<DemoBlock Title="固定列头与列尾" Introduction="设置 <code>Fixed</code> 属性固定表头" Name="FixedColHeader">
    <p>本例中设置 <code>Name</code> <code>DateTime</code> <code>Complete</code> 前两列和最后一列为固定列，中间各列进行水平滚动</p>
    <Table TItem="Foo" Items="@Items.Take(4)" HeaderStyle="TableHeaderStyle.Light" IsBordered="true" IsStriped="true" class="table-fixed-column-demo">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Width="900" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="固定表头与列" Introduction="设置 <code>Height=200</code> 固定表头，设置 <code>Fixed</code> 对列进行固定" Name="FixedColTableHeader">
    <Table TItem="Foo" Items="@Items.Take(10)" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true" IsStriped="true" IsMultipleSelect="true" Height="200" class="table-fixed-column-demo2">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="固定按钮操作列" Introduction="设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定" Name="FixedExtendButtonsColumn">
    <Table TItem="Foo" Items="@Items.Take(4)" IsBordered="true" IsStriped="true"
           ShowExtendButtons="true" FixedExtendButtonsColumn="true"
           class="table-fixed-column-demo">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="固定表头与按钮操作列" Introduction="设置 <code>Height=200</code> 固定表头，设置 <code>FixedExtendButtonsColumn</code> 对操作列进行固定" Name="FixedExtendButtonsColumn">
    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
           IsFixedHeader="true" FixedExtendButtonsColumn="true" Height="200"
           ShowExtendButtons="true" class="table-fixed-column-demo2">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" />
        </TableColumns>
    </Table>

    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true"
           IsFixedHeader="true" FixedExtendButtonsColumn="true" IsExtendButtonsInRowHeader="true"
           ShowExtendButtons="true" Height="200" class="table-fixed-column-demo mt-3">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
            <TableColumn @bind-Field="@context.Education" Width="100" />
            <TableColumn @bind-Field="@context.Count" Width="100" />
            <TableColumn @bind-Field="@context.Complete" Width="100" />
        </TableColumns>
    </Table>
</DemoBlock>

// 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 Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// 固定列示例
/// </summary>
public partial class TablesFixedColumn
{
    [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);
    }
}