Basic Usage

Bind Items to your collection and declare BnGridColumn children inside the Columns fragment. Columns auto-detect their display value from the Property expression.

Default Sort

Use DefaultSortBy to pre-sort the grid on mount. Click any column header to sort by that column.

Custom Column Templates

Replace the default cell renderer with a ColumnTemplate to display arbitrary markup. The template receives the row item as context.

Virtualization

For large collections, set Virtualize="true" to only render visible rows. This dramatically improves performance with thousands of items. Use VirtualItemSize to hint the estimated row height in pixels (default 37).

Column Resizing

All columns are resizable by dragging the divider at the right edge of any header. Set AllowResize="false" on a column to lock its width.

<!-- Resizable (default) -->
<BnGridColumn TItem="Person" Header="Name" Property="x => x.Name" />

<!-- Fixed width, no resize handle -->
<BnGridColumn TItem="Person" Header="Id" Property="x => x.Id" Width="60px" AllowResize="false" />

Row Selection

Set SelectionMode to enable row-click selection. Single allows one selected row at a time; Multiple toggles each row independently. Clicking a selected row deselects it. Selected rows are visually highlighted.

Combine with IncludeSelectionColumn="true" for both checkbox and click selection. The checkbox reflects the current selection state.

<BnGrid TItem="Person" Items="_people"
        SelectionMode="GridSelectionMode.Multiple"
        IncludeSelectionColumn="true"
        OnSelectionChanged="items => _selected = items">
    <Columns>
        <BnGridColumn TItem="Person" Header="Name" Property="x => x.Name" />
    </Columns>
</BnGrid>

Toolbar

Add, Edit, and Delete buttons appear automatically when their corresponding EventCallback is set. Edit is enabled when exactly 1 row is selected; Delete is enabled when 1 or more rows are selected. Use ToolbarContent for custom buttons. Set ShowToolbar="false" to hide the entire header bar.

Use ToolbarContent to add custom buttons on the left and RightToolbarContent for the right side. Set ShowSearch="false" to hide the search box.

Adaptive Mode

By default the grid uses AdaptiveMode="GridAdaptiveMode.Responsive", which automatically switches to a stacked card layout when the container width drops below AdaptiveBreakpoint (default BlazorNovaBreakpoint.MD / 768px). Set AdaptiveMode="GridAdaptiveMode.Always" to force card layout, or GridAdaptiveMode.None to disable it entirely.

Override the breakpoint with a named value or an exact pixel width:

<!-- Use a named breakpoint -->
<BnGrid TItem="Person" Items="_people"
        AdaptiveBreakpoint="BlazorNovaBreakpoint.SM" />

<!-- Or an exact pixel value -->
<BnGrid TItem="Person" Items="_people"
        AdaptiveBreakpointPx="500" />

<!-- Disable adaptive mode entirely -->
<BnGrid TItem="Person" Items="_people"
        AdaptiveMode="GridAdaptiveMode.None" />

Parameters