Filterable Data Grid

<div class="w-full max-w-5xl">
    <BbDataGrid TData="Order" Items="@orders"
                SelectionMode="DataTableSelectionMode.Multiple"
                Resizable="true"
                InitialPageSize="5"
                ItemKey="@(o => o.Id)">
        <Toolbar>
            <BbDataGridColumnVisibility TData="Order" />
        </Toolbar>
        <Columns>
            <BbDataGridSelectColumn Pinned="ColumnPinning.Left" />
            <BbDataGridExpandColumn Pinned="ColumnPinning.Left" />
            <BbDataGridPropertyColumn Property="@(o => o.Id)" Title="#" Width="80px" Sortable="true" />
            <BbDataGridPropertyColumn Property="@(o => o.Customer)" Sortable="true" Filterable="true" />
            <BbDataGridPropertyColumn Property="@(o => o.Email)" Sortable="true" Filterable="true" />
            <BbDataGridPropertyColumn Property="@(o => o.Total)" Format="C2" Sortable="true" Filterable="true" />
            <BbDataGridPropertyColumn Property="@(o => o.Date)" Format="d" Sortable="true" Filterable="true" />
            <BbDataGridTemplateColumn Title="Status" Sortable="true" SortBy="@(o => o.Status)"
                                       Filterable="true" FilterBy="@(o => o.Status)"
                                       FilterType="FilterFieldType.Enum"
                                       FilterOptions="@statusOptions">
                <ChildContent Context="order">
                    @switch (order.Status)
                    {
                        case "Completed":
                            <BbBadge Variant="BadgeVariant.Default">Completed</BbBadge>
                            break;
                        case "Processing":
                            <BbBadge Variant="BadgeVariant.Secondary">Processing</BbBadge>
                            break;
                        case "Shipped":
                            <BbBadge Variant="BadgeVariant.Outline">Shipped</BbBadge>
                            break;
                        case "Cancelled":
                            <BbBadge Variant="BadgeVariant.Destructive">Cancelled</BbBadge>
                            break;
                    }
                </ChildContent>
            </BbDataGridTemplateColumn>
        </Columns>
        <DetailTemplate Context="order">
            <div class="p-4 space-y-2">
                <p class="text-sm font-medium">Order Details</p>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-muted-foreground">Customer:</span> @order.Customer
                    </div>
                    <div>
                        <span class="text-muted-foreground">Email:</span> @order.Email
                    </div>
                    <div>
                        <span class="text-muted-foreground">Items:</span> @order.ItemCount items
                    </div>
                    <div>
                        <span class="text-muted-foreground">Notes:</span> @order.Notes
                    </div>
                </div>
            </div>
        </DetailTemplate>
    </BbDataGrid>
</div>

@code {
    public class Order
    {
        public int Id { get; set; }
        public string Customer { get; set; } = "";
        public string Email { get; set; } = "";
        public decimal Total { get; set; }
        public DateTime Date { get; set; }
        public string Status { get; set; } = "";
        public int ItemCount { get; set; }
        public string Notes { get; set; } = "";
    }

    private IEnumerable<SelectOption<string>> statusOptions = new[]
    {
        new SelectOption<string>("Completed", "Completed"),
        new SelectOption<string>("Processing", "Processing"),
        new SelectOption<string>("Shipped", "Shipped"),
        new SelectOption<string>("Cancelled", "Cancelled")
    };

    private List<Order> orders = new()
    {
        new() { Id = 1001, Customer = "Alice Johnson", Email = "[email protected]", Total = 299.99m, Date = new(2024, 3, 15), Status = "Completed", ItemCount = 3, Notes = "Express shipping requested" },
        new() { Id = 1002, Customer = "Bob Smith", Email = "[email protected]", Total = 149.50m, Date = new(2024, 3, 14), Status = "Processing", ItemCount = 2, Notes = "Gift wrapping" },
        new() { Id = 1003, Customer = "Carol Williams", Email = "[email protected]", Total = 89.99m, Date = new(2024, 3, 13), Status = "Shipped", ItemCount = 1, Notes = "Standard delivery" },
        new() { Id = 1004, Customer = "David Brown", Email = "[email protected]", Total = 499.00m, Date = new(2024, 3, 12), Status = "Completed", ItemCount = 5, Notes = "" },
        new() { Id = 1005, Customer = "Eve Davis", Email = "[email protected]", Total = 75.00m, Date = new(2024, 3, 11), Status = "Cancelled", ItemCount = 1, Notes = "Customer requested cancellation" },
        new() { Id = 1006, Customer = "Frank Miller", Email = "[email protected]", Total = 220.00m, Date = new(2024, 3, 10), Status = "Completed", ItemCount = 4, Notes = "" },
        new() { Id = 1007, Customer = "Grace Wilson", Email = "[email protected]", Total = 180.75m, Date = new(2024, 3, 9), Status = "Shipped", ItemCount = 2, Notes = "Fragile items" },
        new() { Id = 1008, Customer = "Henry Taylor", Email = "[email protected]", Total = 350.00m, Date = new(2024, 3, 8), Status = "Processing", ItemCount = 3, Notes = "" },
        new() { Id = 1009, Customer = "Ivy Anderson", Email = "[email protected]", Total = 125.50m, Date = new(2024, 3, 7), Status = "Completed", ItemCount = 2, Notes = "Birthday gift" },
        new() { Id = 1010, Customer = "Jack Thomas", Email = "[email protected]", Total = 67.99m, Date = new(2024, 3, 6), Status = "Shipped", ItemCount = 1, Notes = "" }
    };
}