Extras

DataGrid

Bit.BlazorUI.Extras

BitDataGrid displays an information-rich data table and gives people the tools to work through it: sorting, quick search and per-column filters, paging, grouping with aggregates, selection, inline editing, resizable/reorderable/frozen columns, master-detail and tree rows, keyboard cell navigation, row and column virtualization, and CSV/Excel export. Bind a list, an IQueryable executed at the source, or a callback for server-side paging or infinite scrolling. Use a data grid when information density is critical.

ForceAnimation (whole page)

Notes

To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) NuGet package, as described in the Optional steps of the Getting started page.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitDataGrid CSS variables

Name	Default value	Description
--bit-DataGrid-background	--bit-clr-bg-pri	Background of the grid and its rows.
--bit-DataGrid-color	--bit-clr-fg-pri	Text color.
--bit-DataGrid-font-family	--bit-tpg-font-family	Font of the whole grid.
--bit-DataGrid-font-size	--bit-tpg-fs-sm	Font size of the whole grid.
--bit-DataGrid-line-height	1.4	Line height of the cells.
--bit-DataGrid-border-color	--bit-clr-brd-ter	Color of the outer border and of every line between rows and columns.
--bit-DataGrid-border-radius	--bit-shp-radius-surface	Corner radius of the grid.
--bit-DataGrid-cell-padding	spacing(1) spacing(1.25)	Padding of every cell; with RowHeight, the density of the grid.
--bit-DataGrid-header-background	--bit-clr-bg-sec	Background of the header rows and the column chooser.
--bit-DataGrid-header-color	The grid's color	Text color of the header rows.
--bit-DataGrid-header-font-weight	--bit-tpg-fw-semibold	Font weight of the column titles.
--bit-DataGrid-stripe-background	--bit-clr-bg-sec	Background of every other row while Striped.
--bit-DataGrid-hover-background	--bit-clr-bg-pri-hover	Background of the row under the pointer while Hoverable.
--bit-DataGrid-selected-background	--bit-clr-pri-tint	Wash laid over a selected row; the row stays opaque underneath, so frozen cells still cover what scrolls by.
--bit-DataGrid-selected-color	The grid's color	Text color of a selected row.
--bit-DataGrid-editing-background	--bit-clr-wrn-tint	Wash laid over the row being edited (in Cell mode, over the cell).
--bit-DataGrid-accent-color	--bit-clr-pri	Sort arrows and priority badges, the active group toggle, the group bar, the checkboxes and the resize handle.
--bit-DataGrid-focus-color	--bit-clr-pri-focus	Focus indicator of the cells, the rows and the controls in the grid.
--bit-DataGrid-group-background	--bit-clr-bg-ter	Background of the group header rows.
--bit-DataGrid-group-indent	spacing(2.5)	Indent of each nested group level.
--bit-DataGrid-tree-indent	spacing(2.25)	Indent of each tree level.
--bit-DataGrid-detail-background	--bit-clr-bg-sec	Background of the expanded detail rows.
--bit-DataGrid-footer-background	--bit-clr-bg-sec	Background of the footer row.
--bit-DataGrid-disabled-color	--bit-clr-fg-dis	Text color of a disabled grid.

API

Every parameter, public member, sub-class and enum this component exposes.

BitDataGrid parameters

Name	Type	Default value	Description
Items	IEnumerable<TItem>?	null	The data source bound to the grid for client-side processing. An IQueryable<T> (e.g. an EF Core DbSet) gets filtering/sorting/paging translated into expression trees the provider executes at the source, materializing only the current page.
OnRead	Func<BitDataGridReadRequest, Task<BitDataGridReadResult<TItem>>>?	null	Server-side data callback. When set, the grid delegates sort/filter/page/group 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. CSV/Excel exports issue a single request with Take = null ("all rows"), so the handler should honor a null Take.
LoadMoreBatchSize	int	50	Number of rows fetched per batch in infinite-scrolling mode.
ChildContent	RenderFragment?	null	Column definitions and other declarative children.
Columns	RenderFragment?	null	Alias of ChildContent, letting column definitions read declaratively as <Columns>...</Columns>. Both fragments are rendered when both are set.
Loading	bool	false	Replaces the grid body with a loading row (LoadingTemplate, or a spinner and the localized loading text) while data is being fetched, and marks the grid aria-busy. Rows are hidden until loading ends.
ShowSearchBox	bool	false	Renders a quick-search box in the toolbar that filters rows across every searchable column at once, matching case-insensitively against the text each column renders. Forwarded as BitDataGridReadRequest.Search in server/infinite modes; translated into an OR of Contains predicates over the string columns for an IQueryable source; a tree grid is pruned to the branches containing a match. Suppressed on a lazily-loaded tree (ChildrenProvider), whose unloaded children cannot be examined.
SearchText	string?	null	The quick-search term (supports two-way binding), so the search can also be driven from an external field.
SearchTextChanged	EventCallback<string?>		Raised whenever the quick-search term changes.
SearchDebounce	int	300	How long (ms) the search box waits after the last keystroke before applying the term, so the grid searches as the user types without re-querying on every character. 0 applies each keystroke immediately.
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.
ChildrenProvider	Func<TItem, Task<IEnumerable<TItem>?>>?	null	Async children provider for a lazily-loaded tree grid: children are fetched on a node's first expand (e.g. from a backend) and cached. Mutually exclusive with ChildrenSelector; pair with HasChildrenSelector.
HasChildrenSelector	Func<TItem, bool>?	null	Tells whether a node can have children before they are loaded, so unloaded lazy nodes render an expand toggle. Only used with ChildrenProvider.
TreeInitiallyExpanded	bool	false	When tree mode is active, controls whether nodes start expanded. Ignored in lazy mode (ChildrenProvider).
Height	string?	null	Height of the scroll viewport, e.g. "480px". Required for virtualization and infinite scrolling.
Classes	BitDataGridClassStyles?	null	Custom CSS classes for the different parts of the grid.
Styles	BitDataGridClassStyles?	null	Custom CSS styles for the different parts of the grid.
Striped	bool	true	Renders alternate-row striping.
Hoverable	bool	true	Highlights the row under the pointer.
Bordered	bool	true	Draws the outer border and the lines between columns; the lines between rows are always drawn.
ShowHeader	bool	true	Renders the header rows (column titles, header groups and the filter row).
AriaLabelledBy	string?	null	The id of the element - a visible heading, say - that names the grid, in place of AriaLabel. Lands on the element with the grid role.
AriaDescribedBy	string?	null	The id of the element that describes the grid - a caption, or how its keyboard works.
ShowFooter	bool	false	Renders the footer/aggregate row.
ShowRowNumbers	bool	false	Renders a narrow leading gutter numbering the rows by their position in the whole dataset, so the count continues across pages, virtualized windows and infinite-scroll batches. It is chrome, not data: exports and clipboard copies never carry it.
ShowCellTooltips	bool	false	Gives every value cell a native tooltip with its full text, so a value the column is too narrow to show stays readable on hover. Overridable per column with ShowTooltip; cells rendered by a Template are excluded.
WrapCellText	bool	false	Lets long headers and cell values wrap onto several lines instead of clipping to one, with each row growing to fit its tallest cell. Overridable per column with WrapText; ignored while Virtualize is on, which requires a uniform row height.
RowClass	Func<TItem, string?>?	null	Per-row CSS class selector, appended after the grid's own row classes - the conditional row styling counterpart of AG Grid's rowClassRules.
RowStyle	Func<TItem, string?>?	null	Per-row inline style selector, appended after the row's layout style.
Sortable	bool	true	Enables column sorting by clicking headers.
MultiSort	bool	true	Enables multi-column sorting via Ctrl/⌘+click with priority badges.
AllowUnsorted	bool	true	Whether a third header click returns the column to its unsorted state (ascending → descending → unsorted). Set false to cycle between ascending and descending only. Overridable per column with AllowUnsorted.
Filterable	bool	false	Renders a per-column quick-filter row. A tree grid filters by pruning the hierarchy to the branches containing a match; the row is suppressed on a lazily-loaded tree (ChildrenProvider).
FilterOperators	bool	false	Shows an operator dropdown next to text/number/date filter editors so users pick the comparison (contains/starts with/=/≠/>/≥/</≤/is blank, and for text and numbers is any of/is none of over a comma-separated list) instead of the fixed default.
FilterDebounce	int	300	How long (ms) a text or number filter box waits after the last keystroke before applying, so the grid filters as the user types. 0 applies each keystroke; a negative value applies only on Enter or blur.
Strings	BitDataGridStrings	new()	All user-visible strings rendered by the grid; assign a customized instance to localize the UI.
Resizable	bool	false	Lets the columns be resized: drag a header's edge, double-click it to fit the content, or focus it (a separator) and use Left/Right, Home/End (MinWidth/MaxWidth) and Enter (fit).
Reorderable	bool	false	Lets the columns be reordered: drag a header (mouse, touch or pen), press Ctrl+Left/Right on it, or use the column chooser's move buttons.
Groupable	bool	false	Enables grouping via a header button on groupable columns.
GroupsInitiallyCollapsed	bool	false	Groups start collapsed instead of expanded, so a grouped grid opens as a compact list of group headers. Flipped at runtime by ExpandAllGroupsAsync/CollapseAllGroupsAsync.
ShowToolbar	bool	false	Renders the toolbar, which hosts the Clear filters button while a filter is on. Search, export, the column chooser, Add and ToolbarTemplate show it on their own; an empty bar takes no room.
ShowColumnChooser	bool	false	Renders the toolbar button that opens the column chooser, which shows and hides columns and, with Reorderable, moves them (the single-pointer and keyboard alternative to dragging a header).
ShowCsvExport	bool	false	Renders a CSV export button. The export covers all matching rows in every data mode, not just the rendered ones.
ShowExcelExport	bool	false	Renders an Excel (.xlsx) export button. The workbook is generated in-process with no external dependency, covers all matching rows in every data mode, and mirrors the grid's layout: bold frozen header row, column widths, leading frozen columns as a freeze pane and ColSpan cells as merged cells.
ExcelExportStyled	bool	false	When true, Excel exports also carry the grid's current visual theme: the rendered header/row colors, striped alternating rows, border color and bold/italic fonts are sampled from the live DOM at export time (so the active theme - including dark mode - lands in the workbook). Falls back to the plain bold-header styling when JS is unavailable (prerendering).
ExportFileName	string?	null	Base name (without extension) of the downloaded export files, e.g. "orders" for orders.csv / orders.xlsx. Defaults to "export".
CellNavigation	bool	false	Makes the data cells the grid's one tab stop, with a roving tabindex: the arrows, Home/End and PageUp/PageDown move; Enter/F2 edit, and typing into a text or number cell edits it with what was typed (Enter otherwise toggles the row's detail); Esc cancels; Space toggles the row's selection (Shift+Space a range) and Ctrl+A selects all; Delete deletes the row when Editable; in a tree, the arrows open and close a node from its first cell. The per-row checkboxes, toggles and command buttons leave the tab order.
ClipboardCopy	bool	false	Enables copying to the system clipboard with Ctrl/⌘+C on a focused cell (requires CellNavigation) and through CopyToClipboardAsync. Copies the selected rows - or the focused one - as tab-separated text with a header line, so it pastes into a spreadsheet as columns.
RowReorderable	bool	false	Enables drag-and-drop row reordering (mouse, touch and pen; plus keyboard via the drag handle's arrow keys).
OnRowReorder	EventCallback<BitDataGridRowReorderEventArgs<TItem>>		Raised when a row is dropped onto another row during reordering.
SelectionMode	BitSelectionMode	BitSelectionMode.None	How rows can be selected: None, Single (a row click, or Space on a focused cell - Single turns CellNavigation on) or Multiple (a checkbox column with a select-all box).
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.
OnRowDoubleClick	EventCallback<TItem>		Raised when a row is double-clicked - the usual hook for "open this record", or for starting an inline edit with BeginEdit.
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.
PagerPlacement	BitPlacement	BitPlacement.Bottom	Where the pager renders relative to the grid. Only Top, Bottom and TopAndBottom are meaningful; any other side leaves the pager under the grid.
Virtualize	bool	false	Renders only the visible rows for large datasets. Requires a fixed Height and RowHeight. In server mode (OnRead) with paging off, row windows are fetched on demand as the user scrolls; with OnLoadMore, the accumulated batches are virtualized so the DOM stays bounded. Requires a uniform row height, so RowHeightSelector and WrapCellText are ignored while it is on and expanded DetailTemplate rows are not accounted for - pair master-detail with paging instead.
RowHeight	float	36	Uniform row height in pixels (required when virtualizing).
RowHeightSelector	Func<TItem, float>?	null	Optional per-row height selector (ignored while virtualizing).
VirtualizeColumns	bool	false	Renders only the columns in (and near) the horizontal viewport, replacing scrolled-out runs with spacers - for grids with very many columns. Requires explicit px column widths; not applied with column header groups or ColSpans.
Editable	bool	false	Enables inline editing with a command column.
EditMode	BitDataGridEditMode	BitDataGridEditMode.Row	Row edits the whole row with Save/Cancel; Cell edits one cell at a time - Enter, F2, a double-click or typing into it (Backspace: empty) opens it, Enter, Tab (opening the next cell) or moving the focus out commits it (raising OnRowSave), Escape cancels. Cell mode makes the cells keyboard-navigable.
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 (via the command column's Delete button or the Delete key in cell navigation).
OnRowCreate	EventCallback<TItem>		Raised when a new row is created.
EmptyTemplate	RenderFragment?	null	Custom content rendered when there is no data.
LoadingTemplate	RenderFragment?	null	Custom content rendered in place of the built-in spinner while Loading is true.
ToolbarTemplate	RenderFragment?	null	Custom content rendered in the toolbar's start area.
DetailTemplate	RenderFragment<TItem>?	null	Expandable master-detail content rendered under a row.
ShowDetailToggle	bool	true	Renders the built-in expand/collapse toggle column while a DetailTemplate is set. Turn it off to drive the detail rows from row clicks (ExpandDetailOnRowClick) or from code; only the toggle column disappears, the detail rows still render.
ExpandDetailOnRowClick	bool	false	Expands (and collapses) a row's detail content when the row itself is clicked. Combines with SelectionMode: a click both selects the row and toggles its detail. Clicks inside the reorder/select/command cells are excluded.
ExpandedDetailItems	IReadOnlyList<TItem>?	null	Rows whose detail content is expanded, as a two-way bindable list. Binding it takes control of the expanded state, letting a parent expand or collapse details declaratively.
ExpandedDetailItemsChanged	EventCallback<IReadOnlyList<TItem>>		Raised with the new set of expanded rows whenever a detail row is expanded or collapsed.
OnDetailToggle	EventCallback<BitDataGridDetailEventArgs<TItem>>		Raised when a single row's detail content is expanded or collapsed.
OnSortChange	EventCallback<IReadOnlyList<BitDataGridSortDescriptor>>		Raised with the new sort descriptors whenever the sorting changes, by header click or through the programmatic API.
OnFilterChange	EventCallback<IReadOnlyList<BitDataGridFilterDescriptor>>		Raised with the new filter descriptors whenever the filtering changes.
OnGroupChange	EventCallback<IReadOnlyList<BitDataGridGroupDescriptor>>		Raised with the new group descriptors whenever the grouping changes.
OnPageChange	EventCallback<int>		Raised with the new 1-based page number whenever the page or the page size changes.
OnStateChange	EventCallback<BitDataGridState>		Raised with a GetState snapshot once the grid has re-rendered after anything it captures changed - sorts, filters, search, groups and their expansion, page, page size, and the columns' order, widths and visibility - by the user or through the API. The hook for persisting the view; ApplyStateAsync does not raise it.

BitDataGrid public members

Name	Type	Default value	Description
RefreshAsync	Task		Recomputes the data view (filter → sort → group → page) and re-renders the grid.
SortByAsync	Task		SortByAsync(columnId, direction, additive) - programmatically sorts by a column; BitDataGridSortDirection.None removes the sort.
ClearSortsAsync	Task		Removes all active sorts and refreshes.
ApplyFilterAsync	Task		ApplyFilterAsync(columnId, operator, value) - programmatically applies a filter, replacing any existing one on the column.
ApplyRangeFilterAsync	Task		ApplyRangeFilterAsync(columnId, from, toExclusive) - applies a half-open range filter (>= from AND < toExclusive), the shape a "between" criterion takes; emitted as two ordinary comparison descriptors so remote and queryable sources need no special handling.
ClearFilterAsync	Task		ClearFilterAsync(columnId) - removes the filter(s) applied to a column.
ClearFiltersAsync	Task		Clears all active column filters and refreshes.
GroupByAsync	Task		GroupByAsync(columnId) - adds the column as the next (nested) grouping level.
UngroupAsync	Task		UngroupAsync(columnId) - removes the column's grouping level.
ClearGroupsAsync	Task		Removes all active groupings and refreshes.
ExpandAllGroupsAsync	Task		Expands every group at every nesting level, and makes newly-built groups expanded (so the choice survives a regrouping or a data refresh).
CollapseAllGroupsAsync	Task		Collapses every group at every nesting level, and makes newly-built groups collapsed.
SearchAsync	Task		SearchAsync(text) - applies the grid-wide quick-search term and resets to the first page; null or empty clears it. Raises SearchTextChanged.
ActiveSearch	string?	null	The active quick-search term, or null when no search is applied.
SelectAllAsync	Task		Selects every selectable row of the current view (the whole filtered set locally; the loaded rows in server, queryable and infinite modes). Requires SelectionMode.Multiple.
ClearSelectionAsync	Task		Clears the row selection.
CopyToClipboardAsync	Task<int>		CopyToClipboardAsync() / CopyToClipboardAsync(fallbackRow) - copies the selected rows (or, in the second overload, the given row when nothing is selected) to the system clipboard as tab-separated text with a header line, and returns how many rows were copied; 0 when the clipboard is unavailable.
AutoFitColumnAsync	Task		AutoFitColumnAsync(columnId) - sizes a column to its widest rendered content, the same result as double-clicking its resize handle.
AutoFitAllColumnsAsync	Task		Auto-fits every visible column to its widest rendered content.
GoToPageAsync	Task		GoToPageAsync(page) - navigates to the given 1-based page (clamped to the valid range).
MoveColumnAsync	Task		MoveColumnAsync(columnId, index) - moves a column to a 0-based position among all the columns (hidden ones included), whatever its Reorderable says. Raises OnStateChange.
SetPageSizeAsync	Task		SetPageSizeAsync(size) - changes the page size and resets to the first page (without mutating the PageSize parameter).
GetState	BitDataGridState		Captures the user-adjustable state (page, page size, quick search, sorts, filters, groups with their expand/collapse state, and column layout) as a serializable snapshot.
ApplyStateAsync	Task		ApplyStateAsync(state) - restores a state snapshot captured by GetState.
ExportCsvAsync	Task		ExportCsvAsync(selectedOnly) - generates the full (filtered/sorted) data as CSV and triggers a client-side download. Covers all matching rows in every data mode - server/infinite modes fetch them through OnRead/OnLoadMore, tree mode includes collapsed branches - or only the selected rows when selectedOnly is true.
ToCsv	string		ToCsv(selectedOnly) - builds a CSV string of the full dataset synchronously - tree mode includes collapsed branches, queryable mode covers all pages. Only server/infinite modes are limited to the loaded rows (their providers are async); use ToCsvAsync there.
ToCsvAsync	Task<string>		ToCsvAsync(selectedOnly) - builds a CSV string of the full dataset (or only the selected rows) - server/infinite modes issue an OnRead/OnLoadMore request with no paging (Take = null), tree mode includes collapsed branches.
ToExcelAsync	Task<byte[]>		ToExcelAsync(selectedOnly) - generates the full (filtered/sorted) dataset, or only the selected rows, as an Excel workbook (.xlsx). Numbers, booleans and dates land as native cell types, so the sheet can sort, filter and compute on them. The workbook mirrors the grid's layout: a bold frozen header row carrying Excel's own AutoFilter, column widths, leading frozen columns as a freeze pane and ColSpan cells as merged cells; with ExcelExportStyled it also carries the grid's rendered theme (colors, striping, borders, fonts).
ExportExcelAsync	Task		ExportExcelAsync(selectedOnly) - generates the .xlsx workbook and triggers a client-side download.
ActiveSorts	IReadOnlyList<BitDataGridSortDescriptor>	[]	The active sort descriptors, in priority order.
ActiveFilters	IReadOnlyList<BitDataGridFilterDescriptor>	[]	The active filter descriptors.
ActiveGroups	IReadOnlyList<BitDataGridGroupDescriptor>	[]	The active group descriptors, in nesting order.
TotalCount	int	0	Total number of rows in the current (filtered) view; the server-reported total in server mode.
TotalPages	int	1	Total number of pages while paging is active.
CurrentPage	int	1	The 1-based current page.
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.
IsDetailExpanded	bool		IsDetailExpanded(item) - true when the given row's DetailTemplate content is currently expanded.
ExpandDetailAsync	Task		ExpandDetailAsync(item) - expands the given row's detail content. No-op without a DetailTemplate.
CollapseDetailAsync	Task		CollapseDetailAsync(item) - collapses the given row's detail content.
ToggleDetailAsync	Task		ToggleDetailAsync(item) - expands the given row's detail content when collapsed, and collapses it otherwise.
SetDetailExpandedAsync	Task		SetDetailExpandedAsync(item, expanded) - expands or collapses a row's detail content.
ExpandAllDetailsAsync	Task		Expands the detail content of every row of the current view - in local mode every row matching the active filters, not only the rendered page; in server, queryable and infinite modes only the rows loaded so far. Raises OnDetailToggle once per newly expanded row.
CollapseAllDetailsAsync	Task		Collapses every expanded detail row, raising OnDetailToggle once per row.
EditingItem	TItem?	null	The row currently in inline-edit mode, or null when no edit is open.
EditingColumnId	string?	null	The column of the cell open for editing in Cell mode, or null.
BeginEditAsync	Task		BeginEditAsync(item, columnId) - opens an edit at a cell and moves the focus into its editor (the whole row in Row mode; in Cell mode only that cell, after committing any other).
BeginEdit	void		BeginEdit(item) - puts a row into inline-edit mode from code, exactly as its Edit button (or Enter/F2 on a navigable cell) does, snapshotting its values so CancelEditAsync can restore them.
CommitEditAsync	Task		Commits the open inline edit (writing the buffered values to the row and raising OnRowSave). Refuses while any editor holds an invalid value.
CancelEditAsync	Task		Abandons the open inline edit, restoring the row to the values it had when the edit began, and raises OnRowCancel.
AddNewRowAsync	Task		Appends a blank row built by NewItemFactory above the view and opens it for editing, exactly as the toolbar Add button does.
DeleteRowAsync	Task		DeleteRowAsync(item) - drops the row from the selection and raises OnRowDelete so the caller can remove it from the data source, then refreshes.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitDataGridClassStyles properties

Defines per-part CSS class/style values for BitDataGrid.

Name	Type	Default value	Description
Root	string?	null	Custom class or style applied to the root element.
Toolbar	string?	null	Custom class or style applied to the toolbar above the grid.
ColumnChooser	string?	null	Custom class or style applied to the column chooser panel.
Viewport	string?	null	Custom class or style applied to the scrolling viewport that holds the rows.
HeaderRow	string?	null	Custom class or style applied to the row of column titles.
HeaderCell	string?	null	Custom class or style applied to each column header cell (the column's HeaderClass comes after it).
FilterRow	string?	null	Custom class or style applied to the row of column filters.
Row	string?	null	Custom class or style applied to each data row (RowClass / RowStyle come after it).
SelectedRow	string?	null	Custom class or style applied to each selected data row, after Row.
Cell	string?	null	Custom class or style applied to each data cell (the column's CellClass comes after it).
GroupRow	string?	null	Custom class or style applied to the cell of each group header row.
DetailRow	string?	null	Custom class or style applied to the content of each expanded detail row.
FooterRow	string?	null	Custom class or style applied to the footer row of aggregates.
Pager	string?	null	Custom class or style applied to the pager.
Empty	string?	null	Custom class or style applied to the cell that shows the empty message.
Loading	string?	null	Custom class or style applied to the cell that shows the loading indicator.

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"). Prefer Property for a strongly typed, refactor-safe alternative.
Property	Expression<Func<TItem, object?>>?	null	Typed selector of the property this column is bound to, e.g. Property="p => p.Name". A strongly typed, refactor-safe alternative to Field that supports nested member chains (p => p.Address.City). Takes precedence over Field when both are set.
ColumnId	string?	null	Stable identifier for the column. Defaults to the resolved Property/Field path.
Title	string?	null	Header text. Defaults to a humanized Property/Field name.
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.
SortBy	Func<TItem, object?>?	null	Custom sort key selector. Enables sorting for template-only columns and overrides the field value as the sort key (client mode).
SortDescendingFirst	bool	false	When true, the first click on the header sorts descending instead of ascending.
AllowUnsorted	bool?	null	Overrides the grid-level AllowUnsorted: whether a third header click returns this column to its unsorted state.
Comparer	IComparer<object?>?	null	Custom comparer applied to this column's sort keys, for orderings the default null-safe value comparer cannot express. Client-side only (server and queryable sources sort at the source).
Validate	Func<TItem, object?, string?>?	null	Validator for inline edits: receives the row and the proposed value, returns an error message to reject it (blocking Save) or null to accept.
Filterable	bool?	null	Overrides the grid-level Filterable for this column.
FilterOperators	bool?	null	Overrides the grid-level FilterOperators (the operator dropdown next to this column's filter editor).
FilterTemplate	RenderFragment<BitDataGridFilterContext>?	null	Replaces this column's built-in filter editor with custom markup (e.g. a multi-select applying In). The context carries the current filter and ApplyAsync/ApplyRangeAsync/ClearAsync.
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.
Searchable	bool?	null	Whether the grid's quick-search box searches this column. Defaults to every field-bound (or ExportValue-backed) column.
Exportable	bool?	null	Whether the column is included in CSV/Excel exports. Defaults to every column that has a value to write (a bound field or an ExportValue selector).
ExportValue	Func<TItem, object?>?	null	Value selector used by exports and the clipboard instead of the bound field - the export counterpart of Template. Gives a template-only column a real exported value (numbers and booleans still land in Excel as native cell types).
ShowTooltip	bool?	null	Overrides the grid-level ShowCellTooltips for this column's cells.
WrapText	bool?	null	Overrides the grid-level WrapCellText: lets this column's header and cells wrap onto several lines instead of clipping to one, with the row growing to fit.
Frozen	bool	false	Pins the column to the start edge so it stays visible while scrolling horizontally.
FrozenEnd	bool	false	Pins the column to the end edge (right in LTR, left in RTL). Typical for action/status columns.
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.
RowHeader	bool	false	Makes the column's cells the headers of their rows (role rowheader) - the column that names a row. Screen readers announce it as the focus moves between rows, and it names the row's selection checkbox.
Align	BitTextAlign	BitTextAlign.Start	Horizontal alignment of cell content. Only Start, Center, End, Left and Right are honoured: Start and End follow the reading direction, Left and Right stay on the same side of the screen in both, and every other value leaves the column at its leading edge. The Left and Right of the former BitDataGridColumnAlign were the leading and trailing edges, so they map to Start and End.
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.
AggregateBy	Func<IReadOnlyList<TItem>, object?>?	null	Custom aggregate function for computations beyond the built-ins (e.g. distinct count). Takes precedence over Aggregate.
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.
CellClassSelector	Func<TItem, string?>?	null	Per-row CSS class for this column's cells, from the row's data (added after CellClass).
CellStyleSelector	Func<TItem, string?>?	null	Per-row inline style for this column's cells, applied last. Prefer color/font over background, which would hide the selection and hover states.
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.
Groups	IReadOnlyList<BitDataGridGroupDescriptor>	[]	The active group descriptors in nesting order, letting a server-side handler reconstruct the grouping. Empty when no grouping is active.
Search	string?	null	The grid-wide quick-search term, or null when no search is active. A free-text term to match across the columns the handler considers searchable, in addition to the per-column Filters.
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).
Aggregates	IReadOnlyList<BitDataGridAggregateResult>?	null	Optional aggregates computed by the data source over the whole filtered dataset; when provided, the footer shows these instead of aggregating the current page locally.

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.

BitDataGridDetailEventArgs<TItem> properties

Arguments raised when a row's master-detail content is expanded or collapsed.

Name	Type	Default value	Description
Item	TItem		The row whose detail content was toggled.
Expanded	bool		True when the detail content was expanded, false when it was collapsed.

BitDataGridRowReorderEventArgs<TItem> properties

Arguments raised when a row is reordered via drag-and-drop.

Name	Type	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	int.MaxValue	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	string		The identifier of the column being filtered.
Operator	BitDataGridFilterOperator	BitDataGridFilterOperator.Unspecified	The comparison operator applied to the value. Unspecified applies no filter.
Value	object?	null	The value compared against the column's cell value; a collection for In/NotIn.

BitDataGridFilterContext properties

The context of a column's FilterTemplate: the column's current filter and the calls that change it, through the same pipeline as the built-in editors.

Name	Type	Default value	Description
ColumnId	string		The identifier of the column being filtered.
Title	string		The column's header text.
Label	string		The accessible name for the editor ("Filter by {Title}"); put it on the control's aria-label.
ValueType	Type?	null	The type of the column's bound member, Nullable<T> unwrapped.
Disabled	bool		Whether the grid is disabled; disable the editor when it is.
Filters	IReadOnlyList<BitDataGridFilterDescriptor>		The descriptors applied to the column: none, one, or the two halves of a range.
IsActive	bool		Whether any filter is applied to the column.
Operator	BitDataGridFilterOperator		The operator of the column's (first) filter, or Unspecified.
Value	object?		The value of the column's (first) filter, or null.
ApplyAsync	Task (BitDataGridFilterOperator, object?)		Replaces the column's filter; a null, blank or empty-set value clears it.
ApplyRangeAsync	Task (object?, object?)		Replaces the column's filter with a half-open range (>= from AND < toExclusive).
ClearAsync	Task ()		Removes the column's filter.

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		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.

BitDataGridState properties

A serializable snapshot of the grid's user-adjustable state, captured with GetState() and restored with ApplyStateAsync(). Enables persisting grid state across sessions.

Name	Type	Default value	Description
CurrentPage	int	1	The 1-based current page.
PageSize	int?	null	The user-selected page size, or null when the grid's PageSize parameter applies.
Search	string?	null	The grid-wide quick-search term, or null when no search was active.
Sorts	List<BitDataGridSortDescriptor>	[]	The active sort descriptors.
Filters	List<BitDataGridFilterDescriptor>	[]	The active filter descriptors.
Groups	List<BitDataGridGroupDescriptor>	[]	The active group descriptors.
GroupsCollapsed	bool	false	Whether groups were collapsed by default when the snapshot was taken.
GroupExpansionOverrides	List<string>	[]	The groups whose expanded state differed from GroupsCollapsed, by their stable paths - so a restored view opens exactly the groups the user had open. Tree-node expansion is not captured (a tree key is not guaranteed to be serializable).
Columns	List<BitDataGridColumnState>	[]	Per-column layout state.

BitDataGridColumnState properties

A per-column layout entry inside BitDataGridState.Columns.

Name	Type	Default value	Description
ColumnId	string	string.Empty	The column's stable identifier (ColumnId or Field).
Visible	bool	true	Whether the column is shown (column-chooser state).
Width	double?	null	The resized width in pixels, or null when the column was never resized.
Order	int	0	The display position among all columns.

BitDataGridStrings properties

All user-visible (and screen-reader) strings rendered by the grid, defaulting to English. Assign a customized instance to the Strings parameter to localize - including empty/loading texts, pager texts, filter placeholders and operators, edit buttons, aggregate labels, aria-labels and live-region announcements.

Name	Type	Default value	Description
GridLabel	string	"Data grid"	Default accessible name of the grid element, used when no AriaLabel is given.
EmptyText	string	"No records to display."	Shown when the grid has no rows to display.
LoadingText	string	"Loading…"	Shown while Loading is true.
PagerRangeFormat	string	"{0}–{1} of {2}"	Pager range summary format.
PagerPageFormat	string	"Page {0} of {1}"	Pager page summary format.
InvalidValueError	string	"Invalid value for {0}."	Error shown when an edited value can't be converted to the column's type.
SearchPlaceholder	string	"Search…"	Placeholder of the toolbar's quick-search box.
…	string		Plus 86 more: toolbar/edit button texts, search and column-chooser labels, the no-matches text, filter placeholders and operator labels, boolean/enum option texts, the names of the special columns, group/detail/tree/reorder/resize/move labels and tooltips, the sort priority, aggregate label formats and aria-live announcements.

BitTextAlign enum

Name	Value	Description
Start	0	Aligns to the leading edge of the text, whichever direction it runs in.
End	1	Aligns to the trailing edge of the text, whichever direction it runs in.
Left	2	Aligns to the left edge, whichever direction the text runs in.
Right	3	Aligns to the right edge, whichever direction the text runs in.
Center	4	Centers the lines inside the box.
Justify	5	Spaces the words of every line but the last so that both edges line up.
JustifyAll	6	Justifies the last line as well. No browser engine implements it yet.
MatchParent	7	Inherits the alignment, resolving a start or an end against the direction of the parent.
Inherit	8	Takes the alignment of the parent.
Initial	9	Takes the initial value of the property.
Revert	10	Reverts to the value the user agent or the user stylesheet sets.
RevertLayer	11	Reverts to the value of the previous cascade layer.
Unset	12	Inherits the alignment, or takes the initial value where it is not inherited.

BitDataGridSortDirection enum

Name	Value	Description
None	0
Ascending	1
Descending	2

BitDataGridEditMode enum

Name	Value	Description
Row	0	The whole row opens at once, with Save/Cancel in the command column.
Cell	1	One cell opens at a time; Enter, Tab (opening the next) or moving the focus out commits it, Escape cancels.

BitSelectionMode enum

Name	Value	Description
None	0	Nothing can be selected: the items act as plain content or as plain action buttons.
Single	1	At most one item can be selected at a time.
Multiple	2	Any number of items can be selected at the same time.

BitDataGridAggregateType enum

Name	Value	Description
None	0
Sum	1
Average	2
Count	3
Min	4
Max	5
Custom	6	The value was produced by the column's custom AggregateBy delegate rather than a built-in function.

BitPlacement enum

Name	Value	Description
Top	0	The top edge.
Bottom	1	The bottom edge.
Start	2	The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top.
End	3	The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom.
Left	4	The left edge, in both reading directions.
Right	5	The right edge, in both reading directions.
Center	6	The middle of the axis, against neither edge.
TopAndBottom	7	Both edges of the block axis at once.
StartAndEnd	8	Both edges of the inline axis at once, following the reading direction the way Start and End do.

BitDataGridColumnDataType enum

Name	Value	Description
Auto	0
Text	1
Number	2
Boolean	3
Date	4
DateTime	5
DateTimeOffset	6
Enum	7

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
In	13	Equals any member of the collection in Value.
NotIn	14	Equals no member of the collection in Value.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component

Notes

Usage

Basic & sorting

Filtering & paging

Quick search

Selection

Keyboard & clipboard

Inline editing

Grouping & aggregates

Templates

Detail rows

Column layout

Column spanning

Borders, striping & row numbers

Row & cell styling

Text wrapping & row height

Empty & loading states

Nothing here yet

Tree data

Virtualization

Server-side data

Infinite scrolling

IQueryable data source

Export

Row reordering

Cell events & context menu

Programmatic control

State persistence

Localization

Disabled

Cascading parameters

Style & Class

RTL