Bootstrap Blazor - 一套企业级 UI 组件库

固定列功能

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

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

固定列头与列尾

设置 Fixed 属性固定表头

Demo

本例中设置 Name DateTime Complete 前两列和最后一列为固定列，中间各列进行水平滚动

<Table TItem="BindItem" Items="@Items.Take(4)" IsBordered="true" IsStriped="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Address" Width="800" />
        <TableColumn @bind-Field="@context.Education" Width="100" />
        <TableColumn @bind-Field="@context.Count" Width="100" />
        <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true">
            <Template Context="v">
                <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>

固定表头与列

设置 Height=200 固定表头，设置 Fixed 对列进行固定

Demo

<Table TItem="BindItem" Items="@Items.Take(10)" IsBordered="true" IsStriped="true" IsMultipleSelect="true" IsPagination="true" Height="200">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name" Width="100" Fixed="true" />
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Address" Width="800" />
        <TableColumn @bind-Field="@context.Education" Width="100" />
        <TableColumn @bind-Field="@context.Count" Width="100" />
        <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true">
            <Template Context="v">
                <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>

固定按钮操作列

设置 FixedExtendButtonsColumn 对操作列进行固定

Demo

<Table TItem="BindItem" 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" Fixed="true" />
        <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" />
        <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">
            <Template Context="v">
                <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>

固定表头与按钮操作列

设置 Height=200 固定表头，设置 FixedExtendButtonsColumn 对操作列进行固定

Demo

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>