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.
Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
Row Selection
Use
SelectionMode with BbDataGridSelectColumn for checkbox-based row selection. Supports None, Single, and Multiple modes with a select-all header checkbox.Name | Department | Salary | |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | |
| Bob Smith | Design | ¤82,000 | |
| Carol White | Engineering | ¤105,000 | |
| Dave Brown | Marketing | ¤78,000 | |
| Eve Davis | Design | ¤88,000 | |
| Frank Miller | Engineering | ¤92,000 | |
| Grace Lee | Marketing | ¤75,000 | |
| Henry Wilson | Design | ¤86,000 |
Selected: 0
Column Reordering
Set
Reorderable to enable drag-and-drop column reordering. Drag any column header to move it to a new position.Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
Column Resizing
Set
Resizable and optionally Width on columns. Drag the border between column headers to resize. MinColumnWidth prevents columns from becoming too narrow.Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
Column Visibility
Place
BbDataGridColumnVisibility in the Toolbar slot to add a dropdown that lets users toggle columns on or off.Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
Pinned Columns
Pin columns to the left or right edge with
Pinned="ColumnPinning.Left" or ColumnPinning.Right. Pinned columns stay visible when scrolling horizontally.Name
| Department | Email | Location | Salary | Status | Start Date | Actions
|
|---|---|---|---|---|---|---|---|
| Alice Johnson | Engineering | [email protected] | San Francisco | ¤95,000 | Senior | 03/15/2022 | |
| Bob Smith | Design | [email protected] | Austin | ¤82,000 | Senior | 07/01/2021 | |
| Carol White | Engineering | [email protected] | San Francisco | ¤105,000 | Senior | 01/10/2020 | |
| Dave Brown | Marketing | [email protected] | New York | ¤78,000 | Junior | 06/20/2023 | |
| Eve Davis | Design | [email protected] | Austin | ¤88,000 | Senior | 11/05/2022 | |
| Frank Miller | Engineering | [email protected] | San Francisco | ¤92,000 | Senior | 09/12/2021 | |
| Grace Lee | Marketing | [email protected] | New York | ¤75,000 | Junior | 02/01/2023 | |
| Henry Wilson | Design | [email protected] | Austin | ¤86,000 | Senior | 05/18/2022 |
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.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.Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
Expandable Rows
Add
BbDataGridExpandColumn and a DetailTemplate to show expandable detail content for each row. Click the chevron to toggle.Name | Department | Salary | |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | |
| Bob Smith | Design | ¤82,000 | |
| Carol White | Engineering | ¤105,000 | |
| Dave Brown | Marketing | ¤78,000 | |
| Eve Davis | Design | ¤88,000 | |
| Frank Miller | Engineering | ¤92,000 | |
| Grace Lee | Marketing | ¤75,000 | |
| Henry Wilson | Design | ¤86,000 |
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.Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
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.Where
Name | Department | Role | Salary | Start Date | Status |
|---|---|---|---|---|---|
| Alice Johnson | Engineering | Senior Developer | ¤125,000 | 03/15/2020 | Active |
| Bob Smith | Design | UI Designer | ¤82,000 | 07/01/2021 | Active |
| Carol White | Engineering | Tech Lead | ¤145,000 | 01/10/2019 | Active |
| Dave Brown | Marketing | Marketing Manager | ¤98,000 | 06/20/2022 | Active |
| Eve Davis | Design | UX Researcher | ¤88,000 | 11/05/2022 | Inactive |
| Frank Miller | Engineering | DevOps Engineer | ¤110,000 | 09/12/2021 | Active |
| Grace Lee | Marketing | Content Strategist | ¤75,000 | 02/01/2023 | Active |
| Henry Wilson | Design | Design Lead | ¤105,000 | 05/18/2020 | Active |
| Irene Chen | Engineering | Junior Developer | ¤72,000 | 01/08/2024 | Active |
| Jack Taylor | Sales | Account Executive | ¤85,000 | 04/15/2023 | Active |
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.Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
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.Name | Department | Salary | Start Date |
|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 |
| Bob Smith | Design | ¤82,000 | 07/01/2021 |
| Carol White | Engineering | ¤105,000 | 01/10/2020 |
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 |
| Eve Davis | Design | ¤88,000 | 11/05/2022 |
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 |
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 |
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
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.Customer | Product | Total | Quantity |
|---|---|---|---|
| Alice | Laptop | ¤1,299.99 | 1 |
| Bob | Monitor | ¤449.00 | 2 |
| Carol | Jacket | ¤89.99 | 1 |
| Dave | Sneakers | ¤129.50 | 2 |
| Eve | Keyboard | ¤79.99 | 3 |
| Frank | Textbook | ¤45.00 | 4 |
| Grace | Novel | ¤15.99 | 2 |
| Henry | T-Shirt | ¤24.99 | 5 |
| Irene | Reference Guide | ¤59.99 | 1 |
| Jack | Headphones | ¤199.99 | 1 |
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.Name | Salary | Start Date |
|---|---|---|
Department: Design
(3 items) | ||
Department: Engineering
(3 items) | ||
Department: Marketing
(2 items) | ||
Full-Featured
Everything combined: selection, column management (resize, reorder, visibility), sticky header, pinned columns, expandable rows, custom row styling, and action buttons.
Name
| Department | Salary | Start Date | Actions
| ||
|---|---|---|---|---|---|---|
| Alice Johnson | Engineering | ¤95,000 | 03/15/2022 | |||
| Bob Smith | Design | ¤82,000 | 07/01/2021 | |||
| Carol White | Engineering | ¤105,000 | 01/10/2020 | |||
| Dave Brown | Marketing | ¤78,000 | 06/20/2023 | |||
| Eve Davis | Design | ¤88,000 | 11/05/2022 | |||
| Frank Miller | Engineering | ¤92,000 | 09/12/2021 | |||
| Grace Lee | Marketing | ¤75,000 | 02/01/2023 | |||
| Henry Wilson | Design | ¤86,000 | 05/18/2022 |
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.Name | Department | Email |
|---|---|---|
| Alice Smith | Engineering | [email protected] |
| Bob Jones | Marketing | [email protected] |
| Carol White | Engineering | [email protected] |
| Dave Brown | Sales | [email protected] |
| Eve Davis | Marketing | [email protected] |