DataGrid

Bind a collection, declare columns, and you get sorting out of the box. Click a header to sort ascending → descending → unsorted - or set AllowUnsorted="false" (on the grid or on one column) to cycle between ascending and descending only, for data whose source order means nothing. Hold Ctrl (or ⌘) and click additional headers for multi-column sorting.

The item type flows from the grid to its columns automatically (no per-column TItem needed), a column binds to its property with the strongly typed Property selector (the string-based Field parameter also remains available), and columns can be wrapped in an optional Columns element.

A quick-filter row sits under the header; the pager controls page size and navigation. Typed filters are used for numeric, date, boolean and enum columns (like Price, Stock and Category), while text columns (like Name and Supplier) use case-insensitive text filtering.

This example binds columns with the string-based Field parameter - useful when column definitions come from configuration - instead of the strongly typed Property selector used elsewhere.

SelectionMode picks between single-row selection (a click anywhere on the row) and multiple selection with per-row checkboxes and a select-all box in the header, which covers the rows of the current page and shows the indeterminate state while only some are selected. SelectedItems is two-way bindable, and the selection is tracked by the row's KeyField rather than by object reference, so it survives a refresh that re-materializes the rows. Switching modes drops a selection the new mode can't hold; IsRowSelectionDisabled excludes individual rows (select-all skips them).

Add, edit, save, cancel and delete rows through a command column, with the editor picked from each column's type: text, number, checkbox (a tri-state select for a nullable bool?), date, date-and-time (offsets and sub-minute precision preserved) and enum. Edits are buffered and only written to the row on Save, so Cancel always leaves it untouched. Editable="false" keeps a column read-only while the rest of the row is edited, and EditTemplate supplies your own editor for a column.

Click the ⊞ button in a groupable column header to group by it (click again to ungroup). Each group is collapsible and shows its own aggregates; the footer shows grand totals. Group by both Category and Supplier to see multi-level grouping. Beyond the built-in Aggregate types, AggregateBy computes a custom aggregate - here the Supplier column counts distinct suppliers per group and overall. GroupsInitiallyCollapsed opens a grouped grid as a compact list of headers to drill into, and ExpandAllGroupsAsync/CollapseAllGroupsAsync flip every level at once - including groups that don't exist yet, so the choice survives a regrouping or a data refresh.

Customize any cell, header or footer, and expand rows to reveal detail content. Click the ▸ toggle on the left of a row to expand its detail panel. A template-only column (no Field) is not sortable by default - give it a SortBy key selector to sort it, like the computed Value column here. When the ordering itself is the unusual part rather than the key, a column can also supply its own Comparer - the Stock column sorts in-stock rows ahead of out-of-stock ones instead of by the raw number.

Drag column edges to resize, drag headers to reorder, and pin columns in place. Double-click a column edge to auto-fit the column to its widest rendered content (also available from code as AutoFitColumnAsync / AutoFitAllColumnsAsync). MinWidth and MaxWidth bound both the drag and the fit. The ID and Name columns are frozen, staying visible while you scroll horizontally; FrozenEnd pins to the opposite edge instead.

Set Group on consecutive columns to render them under a single spanning header cell - a second header row that banners related columns together. Only adjacent columns sharing the same name join one span, so reordering the columns reshapes the banners; a column with no Group simply leaves a gap above it.

Provide a ColSpan function on a column to let a single cell span several columns based on its row. Discontinued rows span the Name cell over Category; premium rows span Price over Stock.

Render very large datasets smoothly - only visible rows hit the DOM. Virtualization requires a fixed Height and RowHeight.

Set the OnRead callback to take over sorting, filtering, searching and paging (e.g. against a database). Each request carries the page window, the active sort, filter and group descriptors, the quick-search term and a CancellationToken the grid cancels when a newer request supersedes it - so a stale response can never overwrite fresher data. Return the page plus the grand TotalCount, and optionally Aggregates computed over the whole matching set so the footer shows real totals rather than per-page numbers. This example simulates a backend with a small delay.

Set OnLoadMore instead of binding Items. The grid appends the next batch automatically as the user scrolls toward the end - with no total count or paging UI. A fixed Height is required. CSV/Excel exports issue a single request with Take = null ("all rows"), so the handler should honor a null Take.

Set the ChildrenSelector parameter to a function that returns each item's direct children. The grid then treats Items as the root nodes and renders expand/collapse toggles with indentation, and reports itself to assistive tech as a treegrid whose rows carry their own depth (aria-level) and expanded state. TreeInitiallyExpanded decides how it opens, and ExpandAllAsync/CollapseAllAsync drive it from code. Sorting applies within each set of siblings, so the hierarchy is preserved. Searching and filtering work on the hierarchy rather than flattening it: the tree is pruned to the branches that contain a match, those branches open themselves so nothing hides behind a collapsed ancestor, and a folder that matches keeps its whole subtree. Clearing the term restores the expand state you had - the grid never writes to it.

The DetailTemplate can render anything - including another BitDataGrid. Each supplier expands to show a nested, sortable grid of the products it provides.

Set RowReorderable="true" to show a drag handle on each row. Grab the ⠿ handle and drop it onto another row. The grid reorders the bound list in place and raises OnRowReorder.

The grid raises OnCellClick, OnCellDoubleClick and OnCellContextMenu with the row, column and the underlying mouse event. Here OnCellContextMenu opens a custom context menu at the pointer position (right-click any cell).

Set CellNavigation="true" to enable a roving tab stop. Use arrow keys, Home/End, Ctrl+Home/End, PageUp/PageDown to move, Enter/F2 to edit (Esc to cancel), and Delete to delete the focused row (requires Editable).

Pass RowHeightSelector a function that returns the desired height (in pixels) for a given row. Here premium products (price over $500) get a taller row.