Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Data Grid
An enterprise-grade data grid with declarative column definitions, multi-column sorting, pagination, row selection, row grouping with aggregates, row virtualization, column resize/reorder/visibility, pinned columns, expandable detail rows, per-column filtering, state persistence, keyboard navigation, and async data loading.
Sorting
Click column headers to sort with a 3-state cycle: ascending, descending, none. Hold Ctrl and click additional headers for multi-column sorting — a badge shows the sort priority.
Loading example…
Row Selection
Use
SelectionMode with BbDataGridSelectColumn for checkbox-based row selection. Supports None, Single, and Multiple modes with a select-all header checkbox.
Loading example…
Column Reordering
Set
Reorderable to enable drag-and-drop column reordering. Drag any column header to move it to a new position.
Loading example…
Column Resizing
Set
Resizable and optionally Width on columns. Drag the border between column headers to resize. MinColumnWidth prevents columns from becoming too narrow.
Loading example…
Column Visibility
Place
BbDataGridColumnVisibility in the Toolbar slot to add a dropdown that lets users toggle columns on or off.
Loading example…
Pinned Columns
Pin columns to the left or right edge with
Pinned="ColumnPinning.Left" or ColumnPinning.Right. Pinned columns stay visible when scrolling horizontally.
Loading example…
Virtualization (10,000 Rows)
Enable
Virtualize for efficient rendering of large datasets. Only visible rows are rendered in the DOM. Set ItemSize to match your row height for smooth scrolling.
Loading example…
Sticky Header
Set
StickyHeader="true" with a fixed height to keep the header visible while the body scrolls. Combine with ShowPagination="false" for a scrollable list view.
Loading example…
Expandable Rows
Add
BbDataGridExpandColumn and a DetailTemplate to show expandable detail content for each row. Click the chevron to toggle.
Loading example…
Column Filtering
Set
Filterable="true" on any column to add a per-column filter popover in the header. The filter type is auto-detected from the property type — use FilterType and FilterOptions to override. The grid automatically filters in-memory data; for server-side filtering, filters are passed via DataGridRequest.Filters.
Loading example…
With Filter Builder
Combine
BbFilterBuilder with BbDataGrid for powerful client-side filtering. Define filter fields that map to your data properties, then use ToFunc<T>() to compile the filter into a predicate.
Loading example…
State Management
Use
@bind-State for controlled state, then call Save() to capture a serializable snapshot, Restore() to apply a saved snapshot, and Reset() to return to defaults. Snapshots include sorting, pagination, column visibility/order/widths, and filters — ideal for persisting user preferences to local storage or a database.
Loading example…
Async Data Loading
Use
ItemsProvider instead of Items for server-side data fetching. The grid calls the provider whenever sorting, pagination, or filtering changes. The DataGridRequest supplies StartIndex, Count, SortDefinitions, and Filters so the server can apply them.
Loading example…
Row Grouping
Place a
BbDataGridGroupColumn inside Columns to group rows by a property. Groups are collapsible and show a header row with the group key and item count. Add Aggregate to columns to compute Sum, Average, Min, Max, or Count per group.
Loading example…
Grouping — Collapsed by Default
Use
GroupBy on the grid directly with GroupsCollapsedByDefault for a quick grouping setup. Combine with Aggregate on columns to display aggregate values in the collapsed group header, giving users an overview without expanding groups.
Loading example…
Full-Featured
Everything combined: selection, column management (resize, reorder, visibility), sticky header, pinned columns, expandable rows, custom row styling, and action buttons.
Loading example…
Global Search
Enable
ShowSearch to add a debounced search input that filters across all columns with Filterable=true. Combine with Striped for alternating row backgrounds.
Loading example…