Basic usage

Declare BOBDataColumn entries for the fields to surface. Cards lay out automatically via MinCardWidth.

Name Aurora Lamp

Category Lighting

Price $89.00

Stock 12

Name Basalt Desk

Category Furniture

Price $349.00

Stock 4

Name Cobalt Chair

Category Furniture

Price $199.00

Stock 0

Name Drift Speaker

Category Audio

Price $129.00

Stock 27

Name Ember Kettle

Category Kitchen

Price $59.00

Stock 8

Name Fjord Mug

Category Kitchen

Price $18.00

Stock 60

<BOBDataCards TItem="Product" Items="_products" MinCardWidth="240px">
    <Columns>
        <BOBDataColumn TItem="Product" Header="Name" Property="@(p => p.Name)" />
        <BOBDataColumn TItem="Product" Header="Category" Property="@(p => p.Category)" />
        <BOBDataColumn TItem="Product" Header="Price" Property="@(p => p.Price)" Format="C" />
        <BOBDataColumn TItem="Product" Header="Stock" Property="@(p => p.Stock)" />
    </Columns>
</BOBDataCards>

Custom card template

Provide a CardTemplate to completely own the card layout per item.

Aurora Lamp

Lighting

$89.00

12 in stock

Basalt Desk

Furniture

$349.00

4 in stock

Cobalt Chair

Furniture

$199.00

Out of stock

Drift Speaker

Audio

$129.00

27 in stock

Ember Kettle

Kitchen

$59.00

8 in stock

Fjord Mug

Kitchen

$18.00

60 in stock

<BOBDataCards TItem="Product" Items="_products" MinCardWidth="220px">
    <Columns>
        <BOBDataColumn TItem="Product" Header="Name" Property="@(p => p.Name)" />
    </Columns>
    <CardTemplate Context="p">
        <div style="padding: 1rem;">
            <h4 style="margin: 0 0 .25rem 0;">@p.Name</h4>
            <span style="opacity:.7;">@p.Category</span>
            <div style="margin-top: .75rem; font-weight: 600;">@p.Price.ToString("C")</div>
            <div style="margin-top: .25rem; font-size: .85em; color: var(--palette-@(p.Stock == 0 ? "error" : "success"));">
                @(p.Stock == 0 ? Loc["Out of stock"].Value : $"{p.Stock} {Loc["in stock"]}")
            </div>
        </div>
    </CardTemplate>
</BOBDataCards>

Filtering & sorting

Enable Filterable and Sortable to get a toolbar with search and sort controls.

Name Aurora Lamp

Category Lighting

Price $89.00

Name Basalt Desk

Category Furniture

Price $349.00

Name Cobalt Chair

Category Furniture

Price $199.00

Name Drift Speaker

Category Audio

Price $129.00

Showing 1 to 4 of 6

<BOBDataCards TItem="Product" Items="_products" Filterable="true" Sortable="true" PageSize="4" MinCardWidth="220px">
    <Columns>
        <BOBDataColumn TItem="Product" Header="Name" Property="@(p => p.Name)" Sortable="true" />
        <BOBDataColumn TItem="Product" Header="Category" Property="@(p => p.Category)" Sortable="true" />
        <BOBDataColumn TItem="Product" Header="Price" Property="@(p => p.Price)" Sortable="true" Format="C" />
    </Columns>
</BOBDataCards>

Selection

SelectionMode.Multiple adds a checkbox per card and exposes the set via @bind-SelectedItems.

<BOBDataCards TItem="Product"
              Items="_products"
              SelectionMode="SelectionMode.Multiple"
              @bind-SelectedItems="_selected"
              MinCardWidth="220px">
    <Columns>
        <BOBDataColumn TItem="Product" Header="Name" Property="@(p => p.Name)" />
        <BOBDataColumn TItem="Product" Header="Price" Property="@(p => p.Price)" Format="C" />
    </Columns>
</BOBDataCards>

Card styling

Use CardBorder, CardShadow, and CardBackground for quick tweaks without CSS.

Name Aurora Lamp

Category Lighting

Price $89.00

Name Basalt Desk

Category Furniture

Price $349.00

Name Cobalt Chair

Category Furniture

Price $199.00

Name Drift Speaker

Category Audio

Price $129.00

Name Ember Kettle

Category Kitchen

Price $59.00

Name Fjord Mug

Category Kitchen

Price $18.00

<BOBDataCards TItem="Product" Items="_products"
              CardBorder="@BOBBorderPresets.RoundedLarge"
              CardShadow="@BOBShadowPresets.Elevation(2)"
              MinCardWidth="220px">
    <Columns>
        <BOBDataColumn TItem="Product" Header="Name" Property="@(p => p.Name)" />
        <BOBDataColumn TItem="Product" Header="Category" Property="@(p => p.Category)" />
        <BOBDataColumn TItem="Product" Header="Price" Property="@(p => p.Price)" Format="C" />
    </Columns>
</BOBDataCards>

Properties

Property	Type	Default	Description
`ColumnsCount`	`int`	`3`	ColumnsCount.
`Gap`	`string`	`"1rem"`	Gap.
`MinCardWidth`	`string?`	`"280px"`	MinCardWidth.
`CardTemplate`	`RenderFragment<TItem>?`		Custom template for rendering the Card.
`CardHeaderTemplate`	`RenderFragment<TItem>?`		Custom template for rendering the CardHeader.
`CardFooterTemplate`	`RenderFragment<TItem>?`		Custom template for rendering the CardFooter.
`CardBorder`	`BorderStyle?`		CardBorder.
`CardShadow`	`ShadowStyle?`		CardShadow.
`CardBackground`	`string?`		CardBackground.
`Columns`	`RenderFragment?`		Column definitions rendered inside the data collection.
`Items`	`IEnumerable<TItem>?`		Data items to display.
`Density`	`BOBDensity`	`BOBDensity.Standard`	Vertical density (gap) of rows.
`Size`	`BOBSize`	`BOBSize.Medium`	Visual size of the data collection.
`Hoverable`	`Boolean`	`true`	When true (default), rows highlight on hover.
`Shadow`	`ShadowStyle?`		Shadow style applied to the container.
`SelectionMode`	`SelectionMode`	`SelectionMode.None`	Row selection mode.
`SelectedItems`	`HashSet<TItem>?`		Currently selected items. Use with two-way binding.
`SelectedItemsChanged`	`EventCallback<HashSet<TItem>>`		Raised when the selection changes.
`Sortable`	`Boolean`		When true, column headers are clickable for sorting.
`DefaultSortColumn`	`String?`		Name of the column to sort by on initial render.
`DefaultSortDirection`	`SortDirection?`		Initial sort direction. Defaults to Ascending.
`Filterable`	`Boolean`		When true, a search box filters the displayed items.
`FilterPlaceholder`	`String`	`"Search..."`	Placeholder text for the filter search box.
`CustomFilter`	`Func<TItem, String, Boolean>?`		Custom predicate used to filter items. Receives the item and the search text.
`PageSize`	`Int32?`		Number of items per page. When null, pagination is disabled.
`PageSizeOptions`	`Int32[]`	`[10, 20, 50, 100]`	Available page sizes shown in the page-size selector.
`ShowPageSizeSelector`	`Boolean`		When true, a dropdown lets the user change the page size.
`EnableVirtualization`	`Boolean`		When true, only visible rows are rendered (improves performance for large lists).
`Height`	`String?`		Fixed height of the container. Required for virtualization and fixed header.
`EmptyContent`	`RenderFragment?`		Custom template rendered when there are no items to display.
`LoadingContent`	`RenderFragment?`		Custom template rendered while Loading is true.
`Loading`	`Boolean`		When true, the loading template is shown.
`Border`	`BorderStyle?`		Border style applied to the container.
`BackgroundColor`	`String?`		Background color of the container. Accepts any valid CSS color value.
`ItemPattern`	`RowStylePattern?`		Alternating row style pattern (e.g. zebra striping).
`OnRowClick`	`EventCallback<TItem>`		Raised when a row is clicked and SelectionMode is not active.
`OnSort`	`EventCallback<DataCollectionSortEventArgs>`		Raised when the sort column or direction changes.
`OnFilter`	`EventCallback<DataCollectionFilterEventArgs>`		Raised when the filter text changes.
`OnPageChange`	`EventCallback<DataCollectionPageChangeEventArgs>`		Raised when the current page changes.
`Variant`	`TVariant?`
`AdditionalAttributes`	`IReadOnlyDictionary<String, Object>?`