Bootstrap Blazor
Download
Bootstrap Blazor
Bootstrap Blazor
Enterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage
ExampleRazorC#Video

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

Table component has a usecomponentwidth attribute. Its default value is false , which means that the window width is used for judgment. When the setting value is true , it means that the component's own width is used for judgment

Basic table presentation usage

Demo
Update data source when clicking button items component Table display data is automatically updated
<div>@((MarkupString)TablesLocalizer["NormalDiv"].Value)</div>
<Button Icon="fa fa-refresh" 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>

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

Demo
<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>

Increase the effect of table frame by setting isbordered attribute

Demo
<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>

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 

<p>@((MarkupString)TablesLocalizer["SizeP"].Value)</p>
<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>

By setting headerstyle Properties

Demo

HeaderStyleP

Light Pattern
Dark Pattern
<p>@((MarkupString)TablesLocalizer["HeaderStyleP"].Value)</p>
<div class="code-label"><code>Light</code> @TablesLocalizer["HeaderStyleMode"]</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["HeaderStyleMode"]</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>

Attributes

Methods

Table Attribute

@page "/tables"

<h3>@TablesLocalizer["TableTitle"]</h3>

<h4>@TablesLocalizer["H4"]</h4>

<p>@((MarkupString)TablesLocalizer["TableP1"].Value)</p>

<p>@((MarkupString)TablesLocalizer["TableP2"].Value)</p>

<ul class="ul-demo">
    <li>@((MarkupString)TablesLocalizer["TableLi1"].Value)</li>
    <li>@((MarkupString)TablesLocalizer["TableLi2"].Value)</li>
    <li>@((MarkupString)TablesLocalizer["TableLi3"].Value)</li>
</ul>

<p>@((MarkupString)TablesLocalizer["TableP3"].Value)</p>

<DemoBlock Title="@TablesLocalizer["NormalTitle"]" Introduction="@TablesLocalizer["NormalIntro"]" Name="Normal">
    <div>@((MarkupString)TablesLocalizer["NormalDiv"].Value)</div>
    <Button Icon="fa fa-refresh" 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>
</DemoBlock>

<DemoBlock Title="@TablesLocalizer["StripedTitle"]" Introduction="@TablesLocalizer["StripedIntro"]" Name="Striped">
    <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>
</DemoBlock>

<DemoBlock Title="@TablesLocalizer["BorderedTitle"]" Introduction="@TablesLocalizer["BorderedIntro"]" Name="Bordered">
    <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>
</DemoBlock>

<DemoBlock Title="@TablesLocalizer["SizeTitle"]" Introduction="@TablesLocalizer["SizeIntro"]" Name="Size">
    <p>@((MarkupString)TablesLocalizer["SizeP"].Value)</p>
    <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>
</DemoBlock>

<DemoBlock Title="@TablesLocalizer["HeaderStyleTitle"]" Introduction="@TablesLocalizer["HeaderStyleIntro"]" Name="HeaderStyle">
    <p>@((MarkupString)TablesLocalizer["HeaderStyleP"].Value)</p>
    <div class="code-label"><code>Light</code> @TablesLocalizer["HeaderStyleMode"]</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["HeaderStyleMode"]</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>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>

<MethodTable Items="GetMethods()"></MethodTable>

<AttributeTable Items="GetTableColumnAttributes()" Title="@TablesLocalizer["AttributeTitle"]" />

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

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// 表格示例代码
/// </summary>
public partial class Tables
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Tables>? TablesLocalizer { get; set; }

    [NotNull]
    private List<Foo>? Items { get; set; }

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

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

        Items = Foo.GenerateFoo(Localizer);

        RefreshText ??= TablesLocalizer[nameof(RefreshText)];
    }

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

    private IEnumerable<AttributeItem> GetTableColumnAttributes() => new AttributeItem[]
    {
        new()
        {
            Name = "TextWrap",
            Description = TablesLocalizer["TextWrapAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "AutoGenerateColumns",
            Description = TablesLocalizer["AutoGenerateColumnsAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "CssClass",
            Description = TablesLocalizer["CssClassAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Editable",
            Description = TablesLocalizer["EditableAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "EditTemplate",
            Description = TablesLocalizer["EditTemplateColumnAttr"],
            Type = "RenderFragment<object>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Filterable",
            Description = TablesLocalizer["FilterableAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "FilterTemplate",
            Description = TablesLocalizer["FilterTemplateAttr"],
            Type = "RenderFragment?",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Filter",
            Description = TablesLocalizer["FilterAttr"],
            Type = "IFilter?",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "HeaderTemplate",
            Description = TablesLocalizer["HeaderTemplateAttr"],
            Type = "RenderFragment<ITableColumn>?",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(IEditorItem.IsReadonlyWhenAdd),
            Description = TablesLocalizer["IsReadonlyWhenAddAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(IEditorItem.IsReadonlyWhenEdit),
            Description = TablesLocalizer["IsReadonlyWhenEditAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(IEditorItem.Lookup),
            Description = TablesLocalizer["LookupAttr"],
            Type = "IEnumerable<SelectedItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(IEditorItem.LookupStringComparison),
            Description = TablesLocalizer["LookupStringComparisonAttr"],
            Type = "StringComparison",
            ValueList = " — ",
            DefaultValue = "OrdinalIgnoreCase"
        },
        new()
        {
            Name = nameof(IEditorItem.LookupServiceKey),
            Description = TablesLocalizer["LookupServiceKeyAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Readonly",
            Description = TablesLocalizer["ReadonlyAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "SearchTemplate",
            Description = TablesLocalizer["SearchTemplateColumnAttr"],
            Type = "RenderFragment<object>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "ShowTips",
            Description = TablesLocalizer["ShowTipsAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "Searchable",
            Description = TablesLocalizer["SearchableAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "Sortable",
            Description = TablesLocalizer["SortableAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "DefaultSort",
            Description = TablesLocalizer["DefaultSortAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "DefaultSortOrder",
            Description = TablesLocalizer["DefaultSortOrderAttr"],
            Type = "SortOrder",
            ValueList = "Unset|Asc|Desc",
            DefaultValue = "Unset"
        },
        new()
        {
            Name = "Text",
            Description = TablesLocalizer["TextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "TextEllipsis",
            Description = TablesLocalizer["TextEllipsisAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "Template",
            Description = TablesLocalizer["TemplateAttr"],
            Type = "RenderFragment<TableColumnContext<object, TItem>>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Visible",
            Description = TablesLocalizer["VisibleAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "Width",
            Description = TablesLocalizer["WidthAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Fixed",
            Description = TablesLocalizer["FixedAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(TableColumn<Foo, string>.GroupName),
            Description = TablesLocalizer["GroupNameAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(TableColumn<Foo, string>.GroupOrder),
            Description = TablesLocalizer["GroupOrderAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "ShownWithBreakPoint",
            Description = TablesLocalizer["ShownWithBreakPointAttr"],
            Type = "BreakPoint",
            ValueList = "None|ExtraSmall|...",
            DefaultValue = "None"
        },
        new()
        {
            Name = "FormatString",
            Description = TablesLocalizer["FormatStringAttr"],
            Type = "string?",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Formatter",
            Description = TablesLocalizer["FormatterAttr"],
            Type = "Func<object?, Task<string>>?",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "Align",
            Description = TablesLocalizer["AlignAttr"],
            Type = "Alignment",
            ValueList = "None|Left|Center|Right",
            DefaultValue = "None"
        },
        new()
        {
            Name = "Order",
            Description = TablesLocalizer["OrderAttr"],
            Type = "int",
            ValueList = " - ",
            DefaultValue = " - "
        },
        new()
        {
            Name = "OnCellRender",
            Description = TablesLocalizer["OnCellRenderAttr"],
            Type = "Action<TableCellArgs>?",
            ValueList = " - ",
            DefaultValue = " - "
        },
    };

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new()
        {
            Name = "TableSize",
            Description = TablesLocalizer["TableSizeAttr"],
            Type = "TableSize",
            ValueList = "Normal|Compact",
            DefaultValue = "Normal"
        },
        new()
        {
            Name = "HeaderStyle",
            Description = TablesLocalizer["HeaderStyleAttr"],
            Type = "TableHeaderStyle",
            ValueList = "None|Light|Dark",
            DefaultValue = "None"
        },
        new()
        {
            Name = "HeaderTextWrap",
            Description = TablesLocalizer["HeaderTextWrap"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "Height",
            Description = TablesLocalizer["HeightAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "PageItems",
            Description = TablesLocalizer["PageItemsAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "AutoRefreshInterval",
            Description = TablesLocalizer["AutoRefreshIntervalAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "2000"
        },
        new()
        {
            Name = "ExtendButtonColumnWidth",
            Description = TablesLocalizer["ExtendButtonColumnWidthAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "130"
        },
        new()
        {
            Name = "RenderModeResponsiveWidth",
            Description = TablesLocalizer["RenderModeResponsiveWidthAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "768"
        },
        new()
        {
            Name = "IndentSize",
            Description = TablesLocalizer["IndentSizeAttr"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "16"
        },
        new()
        {
            Name = "Items",
            Description = TablesLocalizer["ItemsAttr"],
            Type = "IEnumerable<TItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "PageItemsSource",
            Description = TablesLocalizer["PageItemsSourceAttr"],
            Type = "IEnumerable<int>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "EditMode",
            Description = TablesLocalizer["EditModeAttr"],
            Type = "EditMode",
            ValueList = "Popup|Inline|InCell",
            DefaultValue = "Popup"
        },
        new()
        {
            Name = "MultiHeaderTemplate",
            Description = TablesLocalizer["MultiHeaderTemplateAttr"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "TableFooter",
            Description = TablesLocalizer["TableFooterAttr"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "TableToolbarTemplate",
            Description = TablesLocalizer["TableToolbarTemplateAttr"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "EditTemplate",
            Description = TablesLocalizer["EditTemplateAttr"],
            Type = "RenderFragment<TItem?>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "ShowAdvancedSearch",
            Description = TablesLocalizer["ShowAdvancedSearchAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "SearchTemplate",
            Description = TablesLocalizer["SearchTemplateAttr"],
            Type = "RenderFragment<TItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "BeforeRowButtonTemplate",
            Description = TablesLocalizer["BeforeRowButtonTemplateAttr"],
            Type = "RenderFragment<TItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "RowButtonTemplate",
            Description = TablesLocalizer["RowButtonTemplateAttr"],
            Type = "RenderFragment<TItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "DetailRowTemplate",
            Description = TablesLocalizer["DetailRowTemplateAttr"],
            Type = "RenderFragment<TItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "IsAutoCollapsedToolbarButton",
            Description = TablesLocalizer["IsAutoCollapsedToolbarButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "IsBordered",
            Description = TablesLocalizer["IsBorderedAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = " — "
        },
        new()
        {
            Name = "IsPagination",
            Description = TablesLocalizer["IsPaginationAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = " — "
        },
        new()
        {
            Name = "IsStriped",
            Description = TablesLocalizer["IsStripedAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = " — "
        },
        new()
        {
            Name = "IsRendered",
            Description = TablesLocalizer["IsRenderedAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "IsMultipleSelect",
            Description = TablesLocalizer["IsMultipleSelectAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "IsAutoRefresh",
            Description = TablesLocalizer["IsAutoRefreshAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "IsTree",
            Description = TablesLocalizer["IsTreeAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "IsDetails",
            Description = TablesLocalizer["IsDetailsAttr"],
            Type = "boolean",
            ValueList = "true / false / null",
            DefaultValue = "null"
        },
        new()
        {
            Name = nameof(Table<Foo>.IsHideFooterWhenNoData),
            Description = TablesLocalizer["IsHideFooterWhenNoDataAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ClickToSelect",
            Description = TablesLocalizer["ClickToSelectAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowCheckboxText",
            Description = TablesLocalizer["ShowCheckboxTextAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = " — "
        },
        new()
        {
            Name = "ShowFooter",
            Description = TablesLocalizer["ShowFooterAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(Table<Foo>.ShowFilterHeader),
            Description = TablesLocalizer["ShowFilterHeaderAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(Table<Foo>.ShowMultiFilterHeader),
            Description = TablesLocalizer["ShowMultiFilterHeaderAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowSearch",
            Description = TablesLocalizer["ShowSearchAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowSearchText",
            Description = TablesLocalizer["ShowSearchTextAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowSearchTextTooltip",
            Description = TablesLocalizer["ShowSearchTextTooltipAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowResetButton",
            Description = TablesLocalizer["ShowResetButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowSearchButton",
            Description = TablesLocalizer["ShowSearchButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "SearchMode",
            Description = TablesLocalizer["SearchModeAttr"],
            Type = "SearchMode",
            ValueList = "Popup / Top",
            DefaultValue = "Popup"
        },
        new()
        {
            Name = nameof(Table<Foo>.CollapsedTopSearch),
            Description = TablesLocalizer["CollapsedTopSearchAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowToolbar",
            Description = TablesLocalizer["ShowToolbarAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowLineNo",
            Description = TablesLocalizer["ShowLineNoAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowDefaultButtons",
            Description = TablesLocalizer["ShowDefaultButtonsAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowAddButton",
            Description = TablesLocalizer["ShowAddButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowEditButton",
            Description = TablesLocalizer["ShowEditButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowEditButtonCallback",
            Description = TablesLocalizer["ShowEditButtonCallbackAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowDeleteButton",
            Description = TablesLocalizer["ShowDeleteButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowDeleteButtonCallback",
            Description = TablesLocalizer["ShowDeleteButtonCallbackAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowExtendButtons",
            Description = TablesLocalizer["ShowExtendButtonsAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(Table<Foo>.ShowExtendEditButton),
            Description = TablesLocalizer["ShowExtendEditButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = nameof(Table<Foo>.ShowExtendDeleteButton),
            Description = TablesLocalizer["ShowExtendDeleteButtonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = nameof(Table<Foo>.ShowUnsetGroupItemsOnTop),
            Description = TablesLocalizer["ShowUnsetGroupItemsOnTopAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowSkeleton",
            Description = TablesLocalizer["ShowSkeletonAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowLoadingInFirstRender",
            Description = TablesLocalizer["ShowLoadingInFirstRenderAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "ShowColumnList",
            Description = TablesLocalizer["ShowColumnListAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "OnColumnVisibleChanged",
            Description = TablesLocalizer["OnColumnVisibleChangedAttr"],
            Type = "Func<string, bool>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "ShowEmpty",
            Description = TablesLocalizer["ShowEmptyAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ShowToastAfterSaveOrDeleteModel",
            Description = TablesLocalizer["ShowToastAfterSaveOrDeleteModelAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "TreeIcon",
            Description = TablesLocalizer["TreeIconAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "fa-caret-right"
        },
        new()
        {
            Name = "UseComponentWidth",
            Description = TablesLocalizer["UseComponentWidthAttr"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "ScrollingDialogContent",
            Description = TablesLocalizer["ScrollingDialogContentAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "FixedExtendButtonsColumn",
            Description = TablesLocalizer["FixedExtendButtonsColumnAttr"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new()
        {
            Name = "OnQueryAsync",
            Description = TablesLocalizer["OnQueryAsyncAttr"],
            Type = "Func<QueryPageOptions, Task<QueryData<TItem>>>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnAddAsync",
            Description = TablesLocalizer["OnAddAsyncAttr"],
            Type = "Func<Task<TItem>>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(Table<Foo>.OnColumnCreating),
            Description = TablesLocalizer["OnColumnCreatingAttr"],
            Type = "Func<List<ITableColumn>,Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(Table<Foo>.OnDoubleClickCellCallback),
            Description = TablesLocalizer["OnDoubleClickCellCallbackAttr"],
            Type = "Func<string, object, object?, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnDeleteAsync",
            Description = TablesLocalizer["OnDeleteAsyncAttr"],
            Type = "Func<IEnumerable<TItem>, Task<bool>>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnEditAsync",
            Description = TablesLocalizer["OnEditAsyncAttr"],
            Type = "Func<TItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnSaveAsync",
            Description = TablesLocalizer["OnSaveAsyncAttr"],
            Type = "Func<TItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnResetSearchAsync",
            Description = TablesLocalizer["OnResetSearchAsyncAttr"],
            Type = "Func<TItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnClickRowCallback",
            Description = TablesLocalizer["OnClickRowCallbackAttr"],
            Type = "Func<TItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnAfterSaveAsync",
            Description = TablesLocalizer["OnAfterSaveAsyncAttr"],
            Type = "Func<TItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(Table<Foo>.OnAfterRenderCallback),
            Description = TablesLocalizer["OnAfterRenderCallbackAttr"],
            Type = "Func<Table<TItem>, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnTreeExpand",
            Description = TablesLocalizer["OnTreeExpandAttr"],
            Type = "Func<TItem, Task<IEnumerable<TItem>>>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "OnDoubleClickRowCallback",
            Description = TablesLocalizer["OnDoubleClickRowCallbackAttr"],
            Type = "Func<TItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "SortIcon",
            Description = TablesLocalizer["SortIconAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "fa fa-sort"
        },
        new()
        {
            Name = "SortIconAsc",
            Description = TablesLocalizer["SortIconAscAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "fa fa-sort-asc"
        },
        new()
        {
            Name = "SortIconDesc",
            Description = TablesLocalizer["SortIconDescAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "fa fa-sort-desc"
        },
        new()
        {
            Name = "EditDialogSaveButtonText",
            Description = TablesLocalizer["EditDialogSaveButtonTextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(Table<Foo>.EditDialogIsDraggable),
            Description = TablesLocalizer["EditDialogIsDraggableAttr"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(Table<Foo>.EditDialogShowMaximizeButton),
            Description = TablesLocalizer["EditDialogShowMaximizeButtonAttr"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "EditDialogSize",
            Description = TablesLocalizer["EditDialogSizeAttr"],
            Type = "Size",
            ValueList = " — ",
            DefaultValue = "Large"
        },
        new()
        {
            Name = "ExportButtonDropdownTemplate",
            Description = TablesLocalizer["ExportButtonDropdownTemplateAttr"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(Table<Foo>.SearchDialogIsDraggable),
            Description = TablesLocalizer["SearchDialogIsDraggableAttr"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new()
        {
            Name = nameof(Table<Foo>.SearchDialogShowMaximizeButton),
            Description = TablesLocalizer["SearchDialogShowMaximizeButtonAttr"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new()
        {
            Name = "SearchDialogSize",
            Description = TablesLocalizer["SearchDialogSizeAttr"],
            Type = "Size",
            ValueList = " — ",
            DefaultValue = "Large"
        },
        new()
        {
            Name = "AddModalTitle",
            Description = TablesLocalizer["AddModalTitleAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "EditModalTitle",
            Description = TablesLocalizer["EditModalTitleAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "UnsetText",
            Description = TablesLocalizer["UnsetTextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = TablesLocalizer["UnsetTextValue"]
        },
        new()
        {
            Name = "SortAscText",
            Description = TablesLocalizer["SortAscTextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = TablesLocalizer["SortAscTextValue"]
        },
        new()
        {
            Name = "SortDescText",
            Description = TablesLocalizer["SortDescTextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = TablesLocalizer["SortDescTextValue"]
        },
        new()
        {
            Name = "RenderMode",
            Description = TablesLocalizer["RenderModeAttr"],
            Type = "TableRenderMode",
            ValueList = "Auto|Table|CardView",
            DefaultValue = "Auto"
        },
        new()
        {
            Name = "EmptyText",
            Description = TablesLocalizer["EmptyTextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = nameof(Table<MethodItem>.EmptyImage),
            Description = TablesLocalizer["EmptyImageAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "EmptyTemplate",
            Description = TablesLocalizer["EmptyTemplateAttr"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "EditDialogItemsPerRow",
            Description = TablesLocalizer["EditDialogItemsPerRowAttr"],
            Type = "int?",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new()
        {
            Name = "EditDialogRowType",
            Description = TablesLocalizer["EditDialogRowTypeAttr"],
            Type = "RowType",
            ValueList = "Row|Inline",
            DefaultValue = "Row"
        },
        new()
        {
            Name = "EditDialogLabelAlign",
            Description = TablesLocalizer["EditDialogLabelAlignAttr"],
            Type = "Alignment",
            ValueList = "None|Left|Center|Right",
            DefaultValue = "None"
        }
    };

    private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
    {
        new()
        {
            Name = nameof(Table<MethodItem>.AddAsync),
            Description = TablesLocalizer["AddAsyncMethod"],
            Parameters = " — ",
            ReturnValue = "Task"
        },
        new()
        {
            Name = nameof(Table<MethodItem>.EditAsync),
            Description = TablesLocalizer["EditAsyncMethod"],
            Parameters = " — ",
            ReturnValue = " — "
        },
        new()
        {
            Name = nameof(Table<MethodItem>.QueryAsync),
            Description = TablesLocalizer["QueryAsyncMethod"],
            Parameters = " — ",
            ReturnValue = "Task"
        }
    };
}

B 站相关视频链接

[传送门]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor 组件库 更新到 6.6.0

首先感谢您对本套组件的关注，本目前本套组件已经拥有超过 120 个组件，本组件是基于 Bootstrap 风格的 Blazor 企业级组件库，提供如布局、导航、表单、数据、通知、图标、语音等几大类通用组件，每一个组件都经过静心设计，具有模块化、响应式和优秀的性能。从更多实际场景出发，满足多种场景的需求，极大的减少开发者时间成本，大大缩短开发周期，大幅提高开发效率，并提供了一套 通用权限管理系统 示例工程。Bootstrap Blazor 产品是由一支专业的全职技术团队进行维护，高效的响应速度，多元化的解决方案，长期提供支持，并提供企业级支持。目前已在多家知名国企内部使用，项目最高在线 1200 人稳定运行。右侧为国内人数最多的中文 Blazor QQ 社区二维码，欢迎扫描加群。

组件更新到 6.6.0 更新日志 [传送门] 如果组件给您带来了方便，请您帮忙给项目点亮 Star github gitee

QQGroup
QQ 795206915