دیتاگرید

@using BzCore.Components.Grid
@using BzCore.Enums

<BzGrid TItem="Order" Items="_orders" Pageable PageSize="5" Selectable
        OnRowClick="@(o => Log($"کلیک ردیف #{o.Id}"))"
        OnSortChanged="@(e => Log($"مرتب سازی: {e.Field}"))"
        OnPageChanged="@(e => Log($"صفحه {e.Page}"))">
    <Columns>
        <BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Sortable Width="90px" />
        <BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Sortable Filterable />
        <BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Amount)" Format="N0" Align="end" Sortable />
    </Columns>
</BzGrid>

@code {
    private readonly List<string> _log = new();

    public class Order
    {
        public int Id { get; set; }
        public string Customer { get; set; } = "";
        public decimal Amount { get; set; }
        public bool Paid { get; set; }
    }

    private List<Order> _orders = new()
    {
        new Order { Id = 1001, Customer = "علی رضایی", Amount = 2_500_000, Paid = true },
        new Order { Id = 1002, Customer = "مریم احمدی", Amount = 1_200_000, Paid = false },
        new Order { Id = 1003, Customer = "حسن کریمی", Amount = 3_800_000, Paid = true },
    };

    private void Log(string msg)
    {
        _log.Insert(0, $"{DateTime.Now:HH:mm:ss} — {msg}");
        if (_log.Count > 6) _log.RemoveAt(_log.Count - 1);
        StateHasChanged();
    }
}

@using BzCore.Components.Grid
@using BzCore.Components.Button
@using BzCore.Enums

<BzGrid TItem="Order" Items="_orders" Pageable PageSize="5"
        ShowExport ExportFileName="orders.csv"
        Selectable MultiSelect @bind-SelectedItems="_selected">
    <Columns>
        <BzColumn TItem="Order" Title="کد" Field="@(o => o.Id)" Filterable Width="90px" />
        <BzColumn TItem="Order" Title="مشتری" Field="@(o => o.Customer)" Filterable />
        <BzColumn TItem="Order" Title="مبلغ" Field="@(o => o.Amount)" Format="N0" Align="end" />

        @* A column with no Field renders whatever you put in Template. *@
        <BzColumn TItem="Order" Title="وضعیت" Sortable="false" Align="center">
            <Template Context="o">
                <BzButton Size="BzSize.Small" Variant="BzButtonVariant.Soft"
                          Color="@(o.Paid ? BzColor.Success : BzColor.Warning)"
                          Text="@(o.Paid ? "پرداخت شده" : "در انتظار")" />
            </Template>
        </BzColumn>
    </Columns>

    @* Expandable row — here it holds a second, nested grid. *@
    <DetailTemplate Context="o">
        <h4>اقلام سفارش @o.Id</h4>
        <BzGrid TItem="OrderLine" Items="o.Lines" Pageable="false" ShowToolbar="false" Dense>
            <Columns>
                <BzColumn TItem="OrderLine" Title="کالا" Field="@(l => l.Product)" />
                <BzColumn TItem="OrderLine" Title="تعداد" Field="@(l => l.Qty)" Align="center" />
            </Columns>
        </BzGrid>
    </DetailTemplate>
</BzGrid>

<p>انتخاب شده: @string.Join("، ", _selected.Select(s => s.Id))</p>

@code {
    private IReadOnlyCollection<Order> _selected = new List<Order>();

    public class Order
    {
        public int Id { get; set; }
        public string Customer { get; set; } = "";
        public decimal Amount { get; set; }
        public bool Paid { get; set; }
        public List<OrderLine> Lines { get; set; } = new();
    }

    public class OrderLine
    {
        public string Product { get; set; } = "";
        public int Qty { get; set; }
    }

    private List<Order> _orders = new()
    {
        new Order { Id = 1001, Customer = "علی رضایی", Amount = 2_500_000, Paid = true, Lines =
        {
            new OrderLine { Product = "کیبورد", Qty = 2 },
            new OrderLine { Product = "ماوس", Qty = 1 },
        }},
        new Order { Id = 1002, Customer = "مریم احمدی", Amount = 1_200_000, Paid = false, Lines =
        {
            new OrderLine { Product = "مانیتور", Qty = 1 },
        }},
    };
}