@page "/table/fix-column"
@inject IStringLocalizer<NavMenu> NavMenuLocalizer
@inject IStringLocalizer<Tables> BaseLocalizer
@inject IStringLocalizer<TablesFixedColumn> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<h3>@BaseLocalizer["TableBaseTitle"] - @NavMenuLocalizer["TableFixColumn"]</h3>
<h4>@Localizer["TablesFixedColumnDescription"]</h4>

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

<DemoBlock Title="@Localizer["TablesFixedColHeaderTitle"]"
           Introduction="@Localizer["TablesFixedColHeaderIntro"]"
           Name="FixedColHeader">
    <section ignore>@((MarkupString)Localizer["TablesFixedColHeaderDescription"].Value)</section>
    <Table TItem="Foo"
           Items="@Items.Take(4)"
           RenderMode="TableRenderMode.Table" AllowResizing="true"
           IsBordered="true" ScrollWidth="7" ScrollHoverWidth="10"
           IsStriped="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="120" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Width="1400" Filterable="true" />
            <TableColumn @bind-Field="@context.Hobby" Width="140" />
            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" Fixed="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" Fixed="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TablesFixedColTableHeaderTitle"]"
           Introduction="@Localizer["TablesFixedColTableHeaderIntro"]"
           Name="FixedColTableHeader">
    <Table TItem="Foo"
           Items="@Items.Take(10)"
           RenderMode="TableRenderMode.Table" AllowResizing="true"
           IsBordered="true" IsStriped="true"
           IsMultipleSelect="true"
           Height="200"
           FixedMultipleColumn="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="120" Fixed="true" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="1400" />
            <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="@Localizer["TablesFixedExtendButtonsColumnTitle"]"
           Introduction="@Localizer["TablesFixedExtendButtonsColumnIntro"]"
           Name="FixedExtendButtonsColumn">
    <Table TItem="Foo"
           Items="@Items.Take(4)"
           IsBordered="true"
           IsStriped="true"
           RenderMode="TableRenderMode.Table"
           ShowExtendButtons="true"
           FixedExtendButtonsColumn="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="120" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="1400" />
            <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="@Localizer["TablesFixedHeaderAndExtendButtonsColumnTitle"]"
           Introduction="@Localizer["TablesFixedHeaderAndExtendButtonsColumnIntro"]"
           Name="FixedHeaderExtendButtonsColumn">
    <Table TItem="Foo"
           Items="@Items.Take(10)"
           IsBordered="true"
           IsStriped="true"
           IsMultipleSelect="true"
           IsFixedHeader="true"
           FixedExtendButtonsColumn="true"
           Height="200"
           FixedMultipleColumn="true"
           ShowExtendButtons="true"
           RenderMode="TableRenderMode.Table">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="120" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" Width="1400" />
            <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" ScrollWidth="7" ScrollHoverWidth="10"
           FixedExtendButtonsColumn="true"
           IsExtendButtonsInRowHeader="true"
           FixedMultipleColumn="true"
           ShowExtendButtons="true"
           RenderMode="TableRenderMode.Table"
           Height="200"
           class="table-fix-column-demo mt-3">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="120" />
            <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>
