Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Fixed column

For data with a large number of columns, you can fix the front and rear columns and scroll horizontally to view other data

For fixed column usage, please set the fixed column width as much as possible

Fixed column header and column footer

Set the Fixed attribute to fix the header

Demo

In this example, set Name DateTime Complete The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally

@inject IStringLocalizer<Foo> LocalizerFoo

<div class="table-fix-column-demo">
    <Table TItem="Foo"
           Items="@Items.Take(4)"
           RenderMode="TableRenderMode.Table"
           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>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
    }
}

Fixed headers and columns

Set IsFixedHeader="true" to fix the header, set Fixed to fix the column

Demo

@inject IStringLocalizer<Foo> LocalizerFoo

<div class="table-fix-column-demo">
    <Table TItem="Foo"
           Items="@Items.Take(10)"
           RenderMode="TableRenderMode.Table"
           HeaderStyle="TableHeaderStyle.Dark"
           IsBordered="true" IsStriped="true"
           IsMultipleSelect="true"
           Height="200"
           FixedMultipleColumn="true"
           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>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
    }
}

Fixed button action column

Set FixedExtendButtonsColumn to fix the action column

Demo

@inject IStringLocalizer<Foo> LocalizerFoo

<div class="table-fix-column-demo">
    <Table TItem="Foo"
           Items="@Items.Take(4)"
           IsBordered="true"
           IsStriped="true"
           RenderMode="TableRenderMode.Table"
           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>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
    }
}

Fixed header and button action columns

Set IsFixedHeader="true" to fix the header, set FixedMultipleColumn to fix the checkbox column, set FixedExtendButtonsColumn to fix the operation column

Demo

@inject IStringLocalizer<Foo> LocalizerFoo

<div class="table-fix-column-demo">
    <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"
           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"
           FixedMultipleColumn="true"
           ShowExtendButtons="true"
           RenderMode="TableRenderMode.Table"
           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>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
    }
}

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Fixed column

For data with a large number of columns, you can fix the front and rear columns and scroll horizontally to view other data

Demo

Demo

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.4-beta01