DataGrid

Bind a collection, declare columns, and you get sorting out of the box. Click a header to sort ascending → descending → unsorted. 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 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 parameter - useful when column definitions come from configuration - instead of the strongly typed Property selector used elsewhere.

Single or multiple selection with a select-all header checkbox and two-way binding.

Add, edit, save, cancel and delete rows with type-aware editors (text, number, checkbox, date, enum). Use EditTemplate on a column to supply your own editor.

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.

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.

Drag column edges to resize, drag headers to reorder, and pin columns in place. The ID and Name columns are frozen, staying visible while you scroll horizontally.

Set Group on consecutive columns to render them under a single spanning header cell.

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/paging (e.g. against a database). 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.

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.

Supply an EmptyTemplate to customize the placeholder shown when there is no data, or rely on the built-in "No records to display" message.

Toggle column/row borders and alternate-row striping using the Bordered and Striped parameters.

Render the grid in a right-to-left layout by setting the Direction parameter to BitDir.Rtl.

Set FilterOperators to let users pick the comparison for each filter instead of the fixed default: text columns offer contains / doesn't contain / starts with / ends with / = / ≠, while number and date columns offer = ≠ > ≥ < ≤. Changing the operator re-applies the current filter text. Individual columns can override the grid-level setting - the Supplier column opts out here, keeping its fixed default filter.

Give a column a Validate function to check proposed edits. While any editor holds an invalid value, the message renders under it and Save is blocked. Edits are buffered - the underlying object is only modified when Save is clicked, so Cancel always leaves the row untouched. Try clearing the Name, or entering a negative Price or Stock.

GetState() captures the user-adjustable state (page, page size, sorts, filters, groups and column layout) as a serializable snapshot; ApplyStateAsync() restores it. Adjust the grid (sort, filter, resize, hide columns, change page), save the state, shuffle things around, then restore.

Combine Virtualize with OnRead (and no paging) to browse an arbitrarily large remote dataset: row windows are fetched on demand as you scroll - this example simulates 100,000 rows. The footer shows server-provided aggregates (via BitDataGridReadResult.Aggregates) computed over the whole filtered dataset, and the Rating column is pinned to the end edge with FrozenEnd.

Every user-visible string - pager, empty/loading texts, filter placeholders, edit buttons, aria-labels and screen-reader announcements - comes from the Strings parameter (a BitDataGridStrings). Assign a customized instance to localize the grid; this example renders a Persian (RTL) grid.

Bind an IQueryable<T> to Items and the grid translates filtering, sorting and paging into expression trees composed onto the queryable - so a remote LINQ provider such as EF Core executes them at the source (SQL WHERE/ORDER BY/OFFSET) and only the current page is ever materialized. This example uses an in-memory queryable; bind dbContext.Products the same way.

ShowExcelExport adds a toolbar button that downloads the full (filtered/sorted) data as a real .xlsx workbook - generated in-process with no external library. Numbers and booleans are written as native cell types so spreadsheet formulas work on them, and the workbook mirrors the grid's layout: a bold, frozen header row, the grid's column widths, frozen columns as Excel freeze panes and ColSpan cells as merged cells. With ExcelExportStyled the workbook also carries the grid's current visual theme - the rendered header/row colors, the striped alternating background, the border color and bold/italic fonts are sampled from the live DOM at export time, so whatever theme is active (light, dark, custom) is what lands in the file. Exports always cover all matching rows, not just the rendered ones: server and infinite-scrolling modes fetch the full set through OnRead/OnLoadMore, and tree mode includes collapsed branches.

This grid combines a master-detail DetailTemplate, frozen ID/Name columns and ColSpan spanning (discontinued rows span Name over Category) - try scrolling, expanding details and filtering, then export. The Excel file mirrors the layout: the frozen ID/Name columns (plus the header row) become a freeze pane and each spanning cell becomes a merged cell. The data stays faithful in both formats: frozen columns keep their declared order, a templated field column (Name) exports the raw field value rather than its markup, detail content is not exported (master rows only), and the template-only Value column (no Field) is skipped. CSV has no layout concepts, so it stays flat - there every column exports its own value, including the Category a span covers.

Set ChildrenProvider (instead of ChildrenSelector) to fetch a node's children asynchronously on first expand - e.g. from a backend - with the results cached for later toggles. Pair it with HasChildrenSelector so unloaded nodes know whether to render an expand toggle. Expanding a folder below simulates a 600 ms backend call.

Row and column reordering work with touch and pen as well as mouse: pointer-event based drag-and-drop drives the same reorder pipeline on devices where native HTML5 drag-and-drop doesn't fire. Try it on a touchscreen - drag the ⠿ handle to move a row, or drag a column header to reorder columns; the drop target is highlighted while dragging.

VirtualizeColumns renders only the columns in (and near) the horizontal viewport, replacing scrolled-out runs with spacer cells - for grids with very many columns. This example declares 40 measurement columns (plus a frozen ID column) but only the visible window exists in the DOM while you scroll horizontally. Combine it with row Virtualize for large datasets in both dimensions. Columns need explicit pixel widths.