Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Table Cell

Cell related operation example

Merge Cells

Basic table display usage

Demo

In this example, by setting the OnCellRenderHandler callback delegate, the cell merge operation is performed on the two columns Name and Address through the judgment condition, And set the background color of the merged cell by setting the TableCellArgs attribute Class value to cell-demo style sheet name

.cell-demo {
    --bs-table-bg: ##e9ecef;
}

@inject IStringLocalizer<Foo> Localizer

<div>
    <Table TItem="Foo" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="140" />
            <TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
            <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);
    }

    private static void OnCellRenderHandler(TableCellArgs args)
    {
        if (args.Row is Foo foo && args.ColumnName == "Name")
        {
            if (foo.Name == "张三 0002" || foo.Name == "Zhangsan 0002")
            {
                args.Colspan = 2;
                args.Class = "cell-demo";
                args.Value = $"{foo.Name} -- {foo.Address} -- {foo.Count}";
            }
        }
    }
}

Double-click cell

Set the double-click event of the current cell by setting the OnDoubleClickColumn callback

Demo

Tips

After setting the double-click cell callback, a subscript horizontal line appears in the cell after the mouse hovers over the cell, as a reminder, which can be overridden by the .table-cell .is-dbcell style

@inject ToastService ToastService
@inject IStringLocalizer<Foo> FooLocalizer
@inject IStringLocalizer<TableCellOnDoubleClickCell> Localizer

<div>
    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" OnDoubleClickCellCallback="@OnDoubleClickCellCallback">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Complete" />
        </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(FooLocalizer);
    }

    private async Task OnDoubleClickCellCallback(string columnName, object row, object value)
    {
        var displayName = Utility.GetDisplayName(typeof(Foo), columnName);
        await ToastService.Show(new ToastOption()
        {
            Title = Localizer["TableCellOnDoubleClickCellToastTitle"],
            Content = $"{Localizer["TableCellOnDoubleClickCellCurrentCellName"]}{displayName} {Localizer["TableCellOnDoubleClickCellCurrentValue"]}{value}"
        });
    }
}

TableCellArgs

@page "/tables/cell"
@inject IStringLocalizer<TablesCell> CellLocalizer

<style>
    .cell-demo {
        --bs-table-bg: ##e9ecef;
    }
</style>

<h3>@CellLocalizer["TablesCellTitle"]</h3>

<h4>@CellLocalizer["TablesCellDescription"]</h4>

<DemoBlock Title="@CellLocalizer["TableCellMergeCellTitle"]" Introduction="@CellLocalizer["TableCellMergeCellIntro"]" Name="MergeCell" Demo="typeof(Demos.Table.Cell.TableCellMergeCell)">
    <p>@((MarkupString)CellLocalizer["TableCellMergeCellTip"].Value)</p>
    <Pre>.cell-demo {
    --bs-table-bg: ##e9ecef;
}</Pre>
</DemoBlock>

<DemoBlock Title="@CellLocalizer["TableCellOnDoubleClickCellTitle"]" Introduction="@CellLocalizer["TableCellOnDoubleClickCellIntro"]" Name="OnDoubleClickCell" Demo="typeof(Demos.Table.Cell.TableCellOnDoubleClickCell)">
    <Tips>
        <p>@((MarkupString)CellLocalizer["TableCellOnDoubleClickCellTip"].Value)</p>
    </Tips>
</DemoBlock>

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

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

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// TablesCell
/// </summary>
public partial class TablesCell
{
    private IEnumerable<AttributeItem> GetAttributes()
    {
        return new[]
        {
            new AttributeItem() {
                Name = "Row",
                Description = CellLocalizer["RowAttr"],
                Type = "object",
                ValueList = " — ",
                DefaultValue = "<TModel>"
            },
            new AttributeItem() {
                Name = "ColumnName",
                Description = CellLocalizer["ColumnNameAttr"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Colspan",
                Description = CellLocalizer["ColspanAttr"],
                Type = "int",
                ValueList = " — ",
                DefaultValue = "0"
            },
            new AttributeItem() {
                Name = "Class",
                Description = CellLocalizer["ClassAttr"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Value",
                Description = CellLocalizer["ValueAttr"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

Table Cell

Cell related operation example

Demo

Demo

Tips

TableCellArgs

Bootstrap Blazor Component library updated to 7.2.5-beta02