Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Table

It is used to display multiple pieces of data with similar structure. You can sort, filter, compare or other user-defined operations on the data.

The Table component already supports mobile terminal adaptation. When the screen is smaller than the rendermoderesponsewidth set value, the component will be rendered as a card for easy viewing of data, and its default value is 768

Table component has a rendermode attribute. Its default value is auto and other values are defined as follows

Auto: Use cardview mode when the screen is smaller than 768px, otherwise use Table mode
Table: Table rendering mode, using table elements for data rendering, suitable for viewing data in a wide screen
CardView：Card rendering mode, using div elements for data rendering, which is suitable for viewing data on a narrow screen

Basic table

Basic table presentation usage

Demo

Update data source when clicking button items component Table display data is automatically updated

@inject IStringLocalizer<Foo> Localizer
@inject IStringLocalizer<TableBaseNormal> TablesLocalizer

<div>
    <Button Icon="fa-solid fa-arrows-rotate" Text="@RefreshText" OnClick="OnClick" class="my-2" />
    <Table TItem="Foo" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </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; }

    [NotNull]
    private string? RefreshText { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();
        //获取随机数据
        //Get random data
        Items = Foo.GenerateFoo(Localizer);

        RefreshText ??= TablesLocalizer["TableBaseNormalRefreshText"];
    }

    private void OnClick()
    {
        Items = Foo.GenerateFoo(Localizer);
    }
}

Tables with zebra stripes

Using a table with zebra stripes, it is easier to distinguish data from different rows. Just set istriped = true

Demo

@inject IStringLocalizer<Foo> Localizer

<div>
    <Table TItem="Foo" Items="@Items.Take(3)" IsStriped="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </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
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();
        //获取随机数据
        //Get random data
        Items = Foo.GenerateFoo(Localizer);
    }
}

Bordered tables

Increase the effect of table frame by setting isbordered attribute

Demo

@inject IStringLocalizer<Foo> Localizer

<div>
    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </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
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();
        //获取随机数据
        //Get random data
        Items = Foo.GenerateFoo(Localizer);
    }
}

Compact tables

Set the tablesize attribute to make the gap in the table smaller and suitable for big data display

Demo

Tablesize is an enumeration type of table size, the default value is normal , and the compact value is compact

@inject IStringLocalizer<Foo> Localizer

<div>
    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true" TableSize="TableSize.Compact">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="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
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();
        //获取随机数据
        //Get random data
        Items = Foo.GenerateFoo(Localizer);
    }
}

Header style

By setting headerstyle Properties

Demo

Headerstyle is the table header style, and the default value is none

Light Pattern

Dark Pattern

@inject IStringLocalizer<Foo> Localizer
@inject IStringLocalizer<TableBaseHeaderStyle> TablesLocalizer

<div>
    <div class="code-label"><code>Light</code> @TablesLocalizer["TableBaseHeaderStyleMode"]</div>
    <Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Light" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
    <div class="code-label mt-3"><code>Dark</code> @TablesLocalizer["TableBaseHeaderStyleMode"]</div>
    <Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </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
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();
        //获取随机数据
        //Get random data
        Items = Foo.GenerateFoo(Localizer);
    }
}

Attributes

Methods

Table Attribute

B station related video link

[portal]

交流群

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

Table

It is used to display multiple pieces of data with similar structure. You can sort, filter, compare or other user-defined operations on the data.

Demo

Demo

Demo

Demo

Demo

Attributes

Methods

Table Attribute

Bootstrap Blazor Component library updated to 7.4.4-beta01