DataGrid
BitDataGrid is a feature-rich, native Blazor data grid: sorting, filtering, paging, virtualization, selection, inline editing, grouping, aggregates, tree-view, master-detail and theming.
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras
NuGet package, as described in the Optional steps of the
Getting started page.
Usage
Basic & sorting
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.
Filtering & paging
A quick-filter row sits under the header; the pager controls page size and navigation.
Type in any filter box to narrow results (case-insensitive contains).
1–10 of 200
Selection
Single or multiple selection with a select-all header checkbox and two-way binding.
0 selected
1–10 of 60
Inline editing
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.
1–10 of 25
Grouping & aggregates
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.
Templates & detail rows
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.
Resize, reorder & freeze columns
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.
Column header groups
Set
Group on consecutive columns to render them under a single spanning header cell.
Column spanning
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.
Virtualization
Render very large datasets smoothly — only visible rows hit the DOM.
Virtualization requires a fixed
Height and RowHeight.
10,000 rows
Server-side data
Set the
OnRead callback to take over sorting/filtering/paging (e.g. against a database).
This example simulates a backend with a small delay.
1–10 of 523
Last request → skip 0, take 10, sorts: 0, filters: 0, total: 523
Infinite scrolling
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.
Batch #1 → loaded rows 1–40 (40 rows)
Tree view (hierarchical rows)
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.
Master detail
The
DetailTemplate can render anything — including another BitDataGrid.
Each supplier expands to show a nested, sortable grid of the products it provides.
Row reordering
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.
Cell events & context menu
The grid raises
OnCellClick, OnCellDoubleClick and OnCellContextMenu
with the row, column and the underlying mouse event.
Click, double-click or right-click any cell.
Keyboard cell navigation
Set
CellNavigation="true" to enable a roving tab stop. Use arrow keys, Home/End,
Ctrl+Home/End, PageUp/PageDown to move, and Enter/F2 to edit (Esc to cancel).
Variable row height
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.
Empty state
Supply an
EmptyTemplate to customize the placeholder shown when there is no data,
or rely on the built-in "No records to display" message.
Borders & Striping
Toggle column/row borders and alternate-row striping using the
Bordered and Striped parameters.
1–8 of 60
RTL
Render the grid in a right-to-left layout by setting the
Direction parameter to BitDir.Rtl.
1–8 of 60
API
BitDataGrid parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Items | IEnumerable<TItem>? | null | The data source bound to the grid for client-side processing. |
| OnRead | Func<BitDataGridReadRequest, Task<BitDataGridReadResult<TItem>>>? | null | Server-side data callback. When set, the grid delegates sort/filter/page to the caller. |
| OnLoadMore | Func<BitDataGridReadRequest, Task<BitDataGridReadResult<TItem>>>? | null | Infinite-scrolling data callback. Loads rows in batches and appends the next batch as the user scrolls toward the end. |
| LoadMoreBatchSize | int | 50 | Number of rows fetched per batch in infinite-scrolling mode. |
| ChildContent | RenderFragment? | null | Column definitions and other declarative children. |
| Loading | bool | false | Shows a loading overlay while data is being fetched. |
| KeyField | Func<TItem, object>? | null | Optional key selector used for selection/edit identity. Defaults to reference equality. |
| ChildrenSelector | Func<TItem, IEnumerable<TItem>?>? | null | Child selector that turns the grid into a hierarchical tree grid. |
| TreeInitiallyExpanded | bool | false | When tree mode is active, controls whether nodes start expanded. |
| Class | string? | null | Custom CSS class for the root element. |
| Style | string? | null | Custom inline style for the root element. |
| Height | string? | null | Height of the scroll viewport, e.g. "480px". Required for virtualization and infinite scrolling. |
| Striped | bool | true | Renders alternate-row striping. |
| Hoverable | bool | true | Highlights the row under the pointer. |
| Bordered | bool | true | Renders cell borders. |
| ShowHeader | bool | true | Renders the header row. |
| ShowFooter | bool | false | Renders the footer/aggregate row. |
| Direction | BitDir | BitDir.Ltr | Text direction (LTR/RTL). |
| Sortable | bool | true | Enables column sorting by clicking headers. |
| MultiSort | bool | true | Enables multi-column sorting via Ctrl/⌘+click with priority badges. |
| Filterable | bool | false | Renders a per-column quick-filter row. |
| Resizable | bool | false | Enables column resizing by dragging header edges. |
| Reorderable | bool | false | Enables column reordering via native drag-and-drop. |
| Groupable | bool | false | Enables grouping via a header button on groupable columns. |
| ShowToolbar | bool | false | Renders the toolbar area. |
| ShowColumnChooser | bool | false | Renders a column show/hide chooser in the toolbar. |
| ShowCsvExport | bool | false | Renders a CSV export link of the current view. |
| CellNavigation | bool | false | Enables keyboard cell navigation with a roving tabindex. |
| RowReorderable | bool | false | Enables drag-and-drop row reordering. |
| OnRowReorder | EventCallback<BitDataGridRowReorderEventArgs<TItem>> | Raised when a row is dropped onto another row during reordering. | |
| SelectionMode | BitDataGridSelectionMode | BitDataGridSelectionMode.None | How rows can be selected (None/Single/Multiple). |
| SelectedItems | IReadOnlyList<TItem>? | null | The selected items (supports two-way binding). |
| SelectedItemsChanged | EventCallback<IReadOnlyList<TItem>> | Raised when the selection changes. | |
| OnRowClick | EventCallback<TItem> | Raised when a row is clicked. | |
| OnCellClick | EventCallback<BitDataGridCellEventArgs<TItem>> | Raised when a data cell is clicked. | |
| OnCellDoubleClick | EventCallback<BitDataGridCellEventArgs<TItem>> | Raised when a data cell is double-clicked. | |
| OnCellContextMenu | EventCallback<BitDataGridCellEventArgs<TItem>> | Raised when a data cell is right-clicked. | |
| IsRowSelectionDisabled | Func<TItem, bool>? | null | Predicate returning true when a given row may not be selected. |
| Pageable | bool | false | Enables paging with a pager UI. |
| PageSize | int | 20 | The number of rows per page. |
| PageSizeOptions | int[] | { 10, 20, 50, 100 } | The page-size options offered in the pager dropdown. |
| PagerPosition | BitDataGridPagerPosition | BitDataGridPagerPosition.Bottom | Where the pager renders relative to the grid. |
| Virtualize | bool | false | Renders only the visible rows for large datasets. Requires a fixed Height and RowHeight. |
| RowHeight | float | 36 | Uniform row height in pixels (required when virtualizing). |
| RowHeightSelector | Func<TItem, float>? | null | Optional per-row height selector (ignored while virtualizing). |
| Editable | bool | false | Enables inline editing with a command column. |
| NewItemFactory | Func<TItem>? | null | Factory used by the toolbar Add button to create a new row. |
| OnRowSave | EventCallback<TItem> | Raised when an edited row is saved. | |
| OnRowCancel | EventCallback<TItem> | Raised when an edit is cancelled. | |
| OnRowDelete | EventCallback<TItem> | Raised when a row is deleted. | |
| OnRowCreate | EventCallback<TItem> | Raised when a new row is created. | |
| EmptyTemplate | RenderFragment? | null | Custom content rendered when there is no data. |
| ToolbarTemplate | RenderFragment? | null | Custom content rendered in the toolbar's start area. |
| DetailTemplate | RenderFragment<TItem>? | null | Expandable master-detail content rendered under a row. |
BitDataGrid public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| RefreshAsync | Task | Recomputes the data view (filter → sort → group → page) and re-renders the grid. | |
| ClearFiltersAsync | Task | Clears all active column filters and refreshes. | |
| ClearGroupsAsync | Task | Removes all active groupings and refreshes. | |
| ExpandAllAsync | Task | Expands every node in the tree. No-op outside tree mode. | |
| CollapseAllAsync | Task | Collapses every node in the tree. No-op outside tree mode. |
BitDataGridColumn properties
Defines a column inside a BitDataGrid. Place these as child content of the grid.
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Field | string? | null | Name of the property this column is bound to. Supports nested paths ("Address.City"). |
| ColumnId | string? | null | Stable identifier for the column. Defaults to Field. |
| Title | string? | null | Header text. Defaults to a humanized Field. |
| Width | string? | null | CSS width, e.g. "120px" or "20%". When null the column shares remaining space. |
| MinWidth | int | 60 | Minimum width in pixels the column can be resized to. |
| MaxWidth | int? | null | Maximum width in pixels the column can be resized to. |
| Sortable | bool? | null | Overrides the grid-level Sortable for this column. |
| SortDescendingFirst | bool | false | When true, the first click on the header sorts descending instead of ascending. |
| Filterable | bool? | null | Overrides the grid-level Filterable for this column. |
| Resizable | bool? | null | Overrides the grid-level Resizable for this column. |
| Reorderable | bool? | null | Overrides the grid-level Reorderable for this column. |
| Editable | bool? | null | Overrides the grid-level Editable for this column. |
| Groupable | bool? | null | Overrides the grid-level Groupable for this column. |
| Frozen | bool | false | Pins the column to the start edge so it stays visible while scrolling horizontally. |
| Group | string? | null | Optional header group name. Consecutive columns sharing the same value render under a single spanning header cell. |
| ColSpan | Func<TItem, int?>? | null | Optional per-row column span. |
| Visible | bool | true | Whether the column is visible. |
| Align | BitDataGridColumnAlign | BitDataGridColumnAlign.Left | Horizontal alignment of cell content. |
| Format | string? | null | A .NET format string applied to the value (e.g. "C2", "yyyy-MM-dd"). |
| DataType | BitDataGridColumnDataType | BitDataGridColumnDataType.Auto | The data type used to pick the editor/filter. |
| Aggregate | BitDataGridAggregateType | BitDataGridAggregateType.None | The footer/group aggregate function. |
| AggregateFormat | string? | null | Format string for the aggregate value. Falls back to Format. |
| HeaderClass | string? | null | Custom CSS class applied to the header cell. |
| CellClass | string? | null | Custom CSS class applied to each data cell. |
| Template | RenderFragment<TItem>? | null | Custom rendering for a data cell. |
| HeaderTemplate | RenderFragment? | null | Custom rendering for the header cell content. |
| EditTemplate | RenderFragment<TItem>? | null | Custom editor rendered when the row/cell is in edit mode. |
| FooterTemplate | RenderFragment<BitDataGridAggregateResult>? | null | Custom rendering for the footer/aggregate cell. |
BitDataGridReadRequest properties
Describes the data the grid needs from a server-side/infinite source (passed to OnRead/OnLoadMore).
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Skip | int | 0 | Zero-based number of items to skip. |
| Take | int? | null | Maximum number of items to return (null means all). |
| Sorts | IReadOnlyList<BitDataGridSortDescriptor> | [] | The active sort descriptors ordered by priority. |
| Filters | IReadOnlyList<BitDataGridFilterDescriptor> | [] | The active filter descriptors. |
| CancellationToken | CancellationToken | A token that is cancelled when the request is superseded by a newer one. |
BitDataGridReadResult<TItem> properties
Result returned from a grid's OnRead/OnLoadMore callback.
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Items | IReadOnlyList<TItem> | The items for the current page/window. | |
| TotalCount | int | The total number of items matching the current filters (ignored in infinite mode). |
BitDataGridCellEventArgs<TItem> properties
Arguments passed to cell-level event callbacks.
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Item | TItem | The row item. | |
| Column | BitDataGridColumn<TItem> | The column the cell belongs to. | |
| ColumnId | string | The column field/identifier. | |
| ColumnTitle | string | The column's display title. | |
| Value | object? | null | The raw value of the cell. |
| Mouse | MouseEventArgs | The underlying browser mouse event. |
BitDataGridRowReorderEventArgs<TItem> properties
Arguments raised when a row is reordered via drag-and-drop.
Name |
Type |
Default value |
Description |
|---|---|---|---|
| DraggedItem | TItem | The dragged row item. | |
| TargetItem | TItem | The drop-target row item. | |
| FromIndex | int? | The original index of the dragged item, or null when the bound Items is not an indexable list. | |
| ToIndex | int? | The destination index, or null when the bound Items is not an indexable list. |
BitDataGridSortDescriptor properties
Describes the sort state applied to a single column (found on BitDataGridReadRequest.Sorts).
Name |
Type |
Default value |
Description |
|---|---|---|---|
| ColumnId | string | The identifier of the column being sorted. | |
| Direction | BitDataGridSortDirection | BitDataGridSortDirection.Ascending | The sort direction. |
| Priority | int | 0 | Priority for multi-column sorting (1 = primary). |
BitDataGridFilterDescriptor properties
Describes a filter applied to a single column (found on BitDataGridReadRequest.Filters).
Name |
Type |
Default value |
Description |
|---|---|---|---|
| ColumnId | The identifier of the column being filtered. | ||
| Operator | BitDataGridFilterOperator | BitDataGridFilterOperator.Unspecified | The comparison operator applied to the value. |
| Value | object? | null | The value compared against the column's cell value. |
BitDataGridGroupDescriptor properties
Describes a grouping applied to a column.
Name |
Type |
Default value |
Description |
|---|---|---|---|
| ColumnId | string | The identifier of the column being grouped. | |
| Direction | BitDataGridSortDirection | BitDataGridSortDirection.Ascending | The sort direction applied to the group keys. |
BitDataGridAggregateResult properties
Holds the computed aggregate value for a column footer or group (passed to a column's FooterTemplate).
Name |
Type |
Default value |
Description |
|---|---|---|---|
| ColumnId | string | The identifier of the aggregated column. | |
| Type | BitDataGridAggregateType | BitDataGridAggregateType.None | The aggregate function that produced the value. |
| Value | object? | null | The raw aggregate value. |
| FormattedValue | string | string.Empty | The aggregate value formatted using the column's AggregateFormat/Format. |
BitDataGridColumnAlign enum
Name |
Value |
Description |
|---|---|---|
| Left | 0 | |
| Center | 1 | |
| Right | 2 |
BitDataGridSortDirection enum
Name |
Value |
Description |
|---|---|---|
| None | 0 | |
| Ascending | 1 | |
| Descending | 2 |
BitDataGridSelectionMode enum
Name |
Value |
Description |
|---|---|---|
| None | 0 | |
| Single | 1 | |
| Multiple | 2 |
BitDataGridAggregateType enum
Name |
Value |
Description |
|---|---|---|
| None | 0 | |
| Sum | 1 | |
| Average | 2 | |
| Count | 3 | |
| Min | 4 | |
| Max | 5 |
BitDataGridPagerPosition enum
Name |
Value |
Description |
|---|---|---|
| Bottom | 0 | |
| Top | 1 | |
| TopAndBottom | 2 |
BitDir enum
Name |
Value |
Description |
|---|---|---|
| Ltr | 0 | |
| Rtl | 1 | |
| Auto | 2 |
BitDataGridColumnDataType enum
Name |
Value |
Description |
|---|---|---|
| Auto | 0 | |
| Text | 1 | |
| Number | 2 | |
| Boolean | 3 | |
| Date | 4 | |
| DateTime | 5 | |
| Enum | 6 |
BitDataGridFilterOperator enum
Name |
Value |
Description |
|---|---|---|
| Unspecified | 0 | |
| Contains | 1 | |
| DoesNotContain | 2 | |
| StartsWith | 3 | |
| EndsWith | 4 | |
| Equals | 5 | |
| NotEquals | 6 | |
| GreaterThan | 7 | |
| GreaterThanOrEqual | 8 | |
| LessThan | 9 | |
| LessThanOrEqual | 10 | |
| IsEmpty | 11 | |
| IsNotEmpty | 12 |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page