Blazorise DataGrid component

The DataGrid component allows you to display and manage data in a tabular (rows/columns) format.

API

Parameters

Parameter Description TypeDefault
AggregateData

Specifies the aggregate data shown when using manual read mode.

Remarks

Used only in manual read mode along with the ReadData handler.

IEnumerable<TItem>null
AggregateRowPosition

Specifies the position of the aggregate row.

Possible values:Top, Bottom, TopAndBottom

DataGridAggregateRowPositionDataGridAggregateRowPosition.Bottom
AggregateRowStyling

Custom styles for aggregate row.

DataGridRowStylingnull
Attributes

Captures all the custom attribute that are not part of Blazorise component.

Dictionary<string, object>null
AutoGenerateColumns

Determines whether the DataGrid should automatically generate columns.

Columns will only be automatically generated if no columns have been provided.

Defaults to true.

booltrue
BatchEdit

Whether the DataGrid will be in batch edit mode. This will make it so every change will only be saved when Save is called.

boolfalse
Bordered

Adds borders to all the cells.

boolfalse
Borderless

Makes the table without any borders.

boolfalse
ButtonRowTemplate

Defines content of button row of pager.

RenderFragment<ButtonRowContext<TItem>>null
Caption

Specifies the caption of the table, usually used to describe the table content.

string
CaptionSide

Specifies the placement of the Caption element.

Possible values:Default, Top, Bottom

TableCaptionSideDefault
ChildContent

Specifies the content to be rendered inside this DataGrid.

RenderFragmentnull
Class

Custom css classname.

string
Classes

Supplies additional CSS classes for DataGrid elements.

DataGridClassesnull
ColumnChooserTemplate

Defines content of column chooser of pager.

RenderFragment<ColumnChooserContext<TItem>>null
CommandMode

Specifies the grid command mode.

Possible values:Default, Commands, ButtonRow

DataGridCommandModeDataGridCommandMode.Default
CustomFilter

Handler for custom filtering on datagrid item.

DataGridCustomFilter<TItem>null
Data

Specifies the data source displayed by the data grid.

IEnumerable<TItem>null
DataGridAggregates

Template for holding the datagrid aggregate columns.

RenderFragmentnull
DataGridColumns

Template for holding the datagrid columns.

RenderFragmentnull
DetailRowStartsVisible

Controls whether DetailRow will start visible if DetailRowTemplate is set. DetailRowTrigger will be evaluated if set.

booltrue
DetailRowTemplate

Template for displaying detail or nested row.

RenderFragment<DetailRowContext<TItem>>null
Editable

Determines whether users can edit datagrid rows.

boolfalse
EditMode

Specifies the grid editing modes.

Possible values:Form, Inline, Popup, Cell

DataGridEditModeDataGridEditMode.Form
EditModeOptions

Specifies DataGridEditMode options, allowing to customize how the edit mode will work.

DataGridEditModeOptionsnull
ElementId

Specifies the datagrid element id.

string
EmptyCellTemplate

Defines content of cell body for empty DisplayData.

RenderFragment<CellDisplayContext<TItem>>null
EmptyFilterTemplate

Defines content of table body for the empty filter DisplayData.

RenderFragmentnull
EmptyTemplate

Defines content of table body for empty DisplayData.

RenderFragmentnull
ExpandedRows

Specifies the currently expanded self-reference rows.

IList<TItem>null
ExpandMode

Specifies row expand mode.

Possible values:Single, Multiple

DataGridExpandModeDataGridExpandMode.Multiple
ExpandOptions

Specifies row expand related behavior options.

DataGridExpandOptionsnull
ExpandTrigger

Specifies how a row expansion can be triggered.

Possible values:ToggleClick, RowClick, RowAndToggleClick

DataGridExpandTriggerDataGridExpandTrigger.ToggleClick
Filterable

Determines whether users can filter rows by its cell values.

boolfalse
FilterMenuTemplate

Template for the filter column. When filter mode is set to DataGridFilterMode.Menu, this template will be used to render the filter content.

RenderFragment<FilterColumnContext<TItem>>null
FilterMethod

Specifies the filter method to be applied when filtering data in the grid.

Possible values:Default, Contains, StartsWith, EndsWith, Equals, NotEquals

DataGridFilterMethodDataGridFilterMethod.Default
FilterMode

Specifies the filter mode.

Possible values:Default, Menu

DataGridFilterModeDataGridFilterMode.Default
FilterRowStyling

Custom styles for filter row.

DataGridRowStylingnull
FirstPageButtonTemplate

Defines content of first button of pager.

RenderFragmentnull
FixedColumns

Makes Datagrid have a fixed set of columns. This will make it so that the table columns could be fixed to the side of the table.

boolfalse
FixedColumnsPositionSync

Determines whether the FixedColumns feature automatically resynchronizes the columns positions when they are added or removed.

Remarks

Enabling this feature may impact performance due to constant recalculations of fixed column positions.

boolfalse
FixedHeader

Makes Datagrid have a fixed header and enabling a scrollbar in the Datagrid body.

boolfalse
FixedHeaderDataGridHeight

Sets the Datagrid height when FixedHeader feature is enabled (defaults to 500px).

string"500px"
FixedHeaderDataGridMaxHeight

Sets the Datagrid max height when FixedHeader feature is enabled (defaults to 500px).

string"500px"
Groupable

Determines whether the data will be grouped. Column groups need to be configured.

boolfalse
HeaderGroupCaptionTemplate

Template for header group caption.

Suggested usage: rendering content conditionally according to the defined HeaderGroupCaption

RenderFragment<HeaderGroupContext>null
HeaderRowStyling

Custom styles for header row.

DataGridRowStylingnull
HeaderThemeContrast

Sets the Datagrid's table header ThemeContrast.

Possible values:None, Light, Dark

ThemeContrastNone
Hoverable

Adds a hover effect when mousing over rows.

boolfalse
ItemsPerPageTemplate

Defines content of items per page of grid.

RenderFragmentnull
LastPageButtonTemplate

Defines content of last button of pager.

RenderFragmentnull
LoadingTemplate

Defines content of table body for handle ReadData.

RenderFragmentnull
Localizers

Custom localizer handlers to override default DataGrid localization.

DataGridLocalizersnull
Margin

Specifies the element margin spacing.

IFluentSpacingnull
MaxPaginationLinks

Specifies the maximum number of visible pagination links. It has to be odd for well look.

int0
Narrow

Makes the table more compact by cutting cell padding in half.

boolfalse
NavigationMode

Specifies the DataGrid navigation mode, allowing to control the navigation via keyboard.

Possible values:Default, Cell, Row

DataGridNavigationModeDataGridNavigationMode.Default
NextPageButtonTemplate

Defines content of next button of pager.

RenderFragmentnull
Padding

Specifies the element padding spacing.

IFluentSpacingnull
Page

Specifies the current page number.

int0
PageButtonTemplate

Defines content of page buttons of pager.

RenderFragment<PageButtonContext>null
PagerOptions

Specifies Pager options.

DataGridPagerOptionsnull
PagerPosition

Specifies the position of the pager.

Possible values:Top, Bottom, TopAndBottom

DataGridPagerPositionDataGridPagerPosition.Bottom
PageSelectorTemplate

Defines content of the page selector. The selector is only displayed under the tablets breakpoint. You will have to construct it using the provided pagination context.

RenderFragment<PaginationContext<TItem>>null
PageSize

Specifies the maximum number of items for each page.

int0
PageSizes

Specifies the chooseable page sizes of the datagrid.

IEnumerable<int>null
PageSizesTemplate

Defines content of the page sizes selector. You will have to construct it using the provided pagination context.

RenderFragment<PaginationContext<TItem>>null
PopupSize

Specifies the size of popup dialog.

Possible values:Default, Small, Large, ExtraLarge, Fullscreen

ModalSizeDefault
PopupTitleTemplate

Gets template for title of popup modal.

RenderFragment<PopupTitleContext<TItem>>context => { return builder => { builder.AddContent( 0, context.EditState == DataGridEditState.Edit ? "Row Edit" : "Row Create" ); }; }
PreviousPageButtonTemplate

Defines content of previous button of pager.

RenderFragmentnull
Resizable

Determines whether users can resize datagrid columns.

boolfalse
ResizeMode

Determines whether the user can resize on header or columns.

Possible values:Header, Columns

TableResizeModeHeader
Responsive

Makes table responsive by adding the horizontal scroll bar.

Remarks

In some cases Dropdown component placed inside of a table marked with Responsive flag might not show dropdown menu properly. To make it work you might need to add some additional CSS rules.

boolfalse
ResponsiveMode

Specifies the Table's responsive mode.

Possible values:Default, Mobile

TableResponsiveModeDefault
RowContextMenuPreventDefault

Used to prevent the default action for an RowContextMenu event.

boolfalse
RowOverlayBackground

Specifies the background of the row overlay.

BackgroundLight
RowOverlayPosition

Specifies the position of the row overlay.

Possible values:Start, End

DataGridRowOverlayPositionDataGridRowOverlayPosition.End
RowOverlayTemplate

Template for mouse hover overlay display formatting.

RenderFragment<RowOverlayContext<TItem>>null
SelectedCell

Specifies the currently selected cell in the data grid.

Remarks

This property is only applicable when NavigationMode is set to Cell.

DataGridCellInfo<TItem>null
SelectedRow

Specifies the currently selected tree row item.

TItemnull
SelectedRows

Specifies the currently selected rows.

List<TItem>null
SelectionMode

Specifies the current selection mode.

Possible values:Single, Multiple

DataGridSelectionModeDataGridSelectionMode.Single
ShowCaptions

Determines whether user can see a column captions.

booltrue
ShowColumnChooser

Determines whether the column chooser is visible.

boolfalse
ShowDefaultSortIcon

Determines whether default sort icon should display.

boolfalse
ShowGrouping

Determines whether user can see and edit column grouping.

boolfalse
ShowHeaderGroupCaptions

Determines whether user can see defined header group captions.

boolfalse
ShowPager

Determines whether users can navigate datagrid by using pagination controls.

boolfalse
ShowPageSizes

Determines whether users can adjust the page size of the datagrid.

boolfalse
ShowValidationFeedback

If true, shows feedbacks for all validations.

boolfalse
ShowValidationsSummary

If true, shows summary for all validations.

booltrue
Sortable

Determines whether end-users can sort data by the column's values.

booltrue
SortMode

Determines whether the user can sort only by one column or by multiple.

Possible values:Single, Multiple

DataGridSortModeDataGridSortMode.Multiple
Striped

Adds stripes to the table.

boolfalse
Style

Custom html style.

string
Styles

Supplies additional CSS styles for DataGrid elements.

DataGridStylesnull
SubmitFormOnEnter

If true, the edit form will have the Save button as type="submit", and it will react to Enter keys being pressed.

booltrue
TotalItems

Specifies the total number of items available when data is loaded through ReadData.

Remarks

This field must be set only when ReadData is used to load the data.

int?null
TotalItemsShortTemplate

Defines content of total items grid for small devices.

RenderFragment<PaginationContext<TItem>>null
TotalItemsTemplate

Defines content of total items grid.

RenderFragment<PaginationContext<TItem>>null
UseInternalEditing

Specifies the behaviour of datagrid editing.

Remarks

Disabling this option will send all changes to the RowInserted and RowUpdated but nothing will be saved unless the user manually update the item values.

booltrue
UseValidation

If true, DataGrid will use validation when editing the fields.

boolfalse
ValidationsHandlerType

Specifies the default handler type that will be used by the validation, unless it is overriden by HandlerType property.

Typenull
ValidationsSummaryErrors

List of custom error messages for the validations summary.

string[]null
ValidationsSummaryLabel

Label for validations summary.

string
Virtualize

Determines whether the datagrid will use the Virtualize functionality.

boolfalse
VirtualizeOptions

Specifies Virtualize options when using the Virtualize functionality.

VirtualizeOptionsnull

Events

Event Description Type
BatchChange

Event called after a batch change is made.

EventCallback<DataGridBatchChangeEventArgs<TItem>>
BatchEditCellStyling

Custom handler for the cell styling when the cell has batch edit changes.

Action<DataGridBatchEditItem<TItem>, DataGridColumn<TItem>, DataGridCellStyling>
BatchSaved

Event called after the batch edit is saved.

EventCallback<DataGridBatchSavedEventArgs<TItem>>
BatchSaving

Cancelable event before batch edit is saved.

EventCallback<DataGridBatchSavingEventArgs<TItem>>
CellStyling

Custom handler for the cell styling. Prefer this when provider-specific table CSS overrides row-level styling.

Action<TItem, DataGridColumn<TItem>, DataGridCellStyling>
CloneItemCreator

Function that, if set, is called to clone an instance of the saving item. If left null the built-in DeepClone method will be used.

Func<TItem, TItem>
ColumnDisplayingChanged

Event called after a column display change is made.

EventCallback<ColumnDisplayChangedEventArgs<TItem>>
ColumnDisplayOrderChanged

Event called after a column display order change is made.

EventCallback<ColumnDisplayOrderChangedEventArgs<TItem>>
DetailRowTrigger

A trigger function used to handle the visibility of detail row.

Func<DetailRowTriggerEventArgs<TItem>, bool>
EditItemCreator

Function that, if set, is called to create a instance of the selected item to edit. If left null the selected item will be used.

Func<TItem, TItem>
ExpandedRowsChanged

Occurs after ExpandedRows has changed.

EventCallback<IList<TItem>>
ExpandRowTrigger

A trigger function used to determine whether a row can be expanded in self-reference mode.

Func<DataGridExpandRowTriggerEventArgs<TItem>, bool>
FilteredDataChanged

Raises an event every time that filtered data is refreshed.

Action<DataGridFilteredDataEventArgs<TItem>>
GroupBy

Defines a custom GroupBy function. Groupable needs to be active. If this is defined at the DataGrid level, column grouping will not be considered.

Func<TItem, object>
GroupingChanged

Occurs after grouped columns have changed.

EventCallback<DataGridGroupingChangedEventArgs<TItem>>
NewItemCreator

Function that, if set, is called to create new instance of an item. If left null a default constructor will be used.

Func<TItem>
NewItemDefaultSetter

Function, that is called, when a new item is created for inserting new entry.

Action<TItem>
PageChanged

Occurs after the selected page has changed.

EventCallback<int>
PageSizeChanged

Occurs after the PageSize has changed.

EventCallback<int>
PopupClosing

Occurs before the popup dialog is closed.

Func<ModalClosingEventArgs, Task>
ReadChildData

Event handler used to load children for a self-reference row.

EventCallback<DataGridReadChildDataEventArgs<TItem>>
ReadData

Event handler used to load data manually based on the current page and filter data settings.

EventCallback<DataGridReadDataEventArgs<TItem>>
RowBatchEditStyling

Custom handler for the row that has batch edit changes.

Action<DataGridBatchEditItem<TItem>, DataGridRowStyling>
RowClicked

Event called after the row is clicked.

EventCallback<DataGridRowMouseEventArgs<TItem>>
RowCollapsed

Event called after a self-reference row is collapsed.

EventCallback<DataGridExpandRowEventArgs<TItem>>
RowContextMenu

Event called after the row has requested a context menu.

EventCallback<DataGridRowMouseEventArgs<TItem>>
RowDoubleClicked

Event called after the row is double clicked.

EventCallback<DataGridRowMouseEventArgs<TItem>>
RowExpanded

Event called after a self-reference row is expanded.

EventCallback<DataGridExpandRowEventArgs<TItem>>
RowHoverCursor

Handles the selection of the cursor for a hovered row. If not set, Default will be used.

Func<TItem, Cursor>
RowInserted

Event called after the row is inserted.

EventCallback<SavedRowItem<TItem, Dictionary<string, object>>>
RowInserting

Cancelable event called before the row is inserted.

EventCallback<CancellableRowChange<TItem, Dictionary<string, object>>>
RowMouseLeave

Event called after the mouse leaves the row.

EventCallback<DataGridRowMouseEventArgs<TItem>>
RowMouseOver

Event called after the mouse is over the row.

EventCallback<DataGridRowMouseEventArgs<TItem>>
RowRemoved

Event called after the row is removed.

EventCallback<TItem>
RowRemoving

Cancelable event called before the row is removed.

EventCallback<CancellableRowChange<TItem>>
RowSelectable

Handles the selection of the DataGrid row. If not set it will default to always true.

Func<RowSelectableEventArgs<TItem>, bool>
RowStyling

Custom handler for each row in the datagrid. Applied to the tr element, so provider table CSS may still override text or background styles on the row cells.

Action<TItem, DataGridRowStyling>
RowUpdated

Event called after the row is updated.

EventCallback<SavedRowItem<TItem, Dictionary<string, object>>>
RowUpdating

Cancelable event called before the row is updated.

EventCallback<CancellableRowChange<TItem, Dictionary<string, object>>>
SelectedCellChanged

Occurs after the selected cell has changed in the data grid.

Remarks

This event is triggered when NavigationMode is set to Cell, indicating that cell-level navigation is enabled. Make sure to handle this event if you need to respond to cell selection changes.

EventCallback<DataGridCellInfo<TItem>>
SelectedCellStyling

Custom handler for the selected cell styling. Prefer this when provider-specific table CSS overrides selected row styling.

Action<TItem, DataGridColumn<TItem>, DataGridCellStyling>
SelectedRowChanged

Occurs after the selected row has changed.

EventCallback<TItem>
SelectedRowsChanged

Occurs after multi selection has changed.

EventCallback<List<TItem>>
SelectedRowStyling

Custom handler for currently selected row. Applied to the tr element, so provider table CSS may still override text or background styles on the row cells.

Action<TItem, DataGridRowStyling>
SortChanged

Occurs after the sort direction of a single column has changed.

EventCallback<DataGridSortChangedEventArgs>
ValidationItemCreator

Function that, if set, is called to create a validation instance of an item that it's used as a separate instance for Datagrid's internal processing of validation. If left null, Datagrid will try to use it's own implementation to instantiate.

Func<TItem>

Methods

Method DescriptionReturnParameters
AddAggregate Links the child column with this datagrid. voidDataGridAggregate<TItem> aggregate
AddColumn Links the child column with this datagrid. voidDataGridColumn<TItem> column
AddGroupColumn Adds a new column to grouping. voidDataGridColumn<TItem> column
ApplySorting Applies a new sort to the datagrid using the provided columns, sort order, and sort direction. Replaces the current sorting.
Remarks

Note that Sortable and Sortable must be enabled to be able to sort! If more than one column is specified, SortMode must be Multiple

TaskDataGridSortColumnInfo[] columns
Cancel Cancels any edit operation in progress. Task
ClearFilter Clears all filters from the grid. Task
ClearFilter Clears the corresponding column filters. Taskstring[] fieldNames
CollapseAllGroups Collapses all groups. Task
CollapseAllRows Collapses all rows. Task
CollapseGroups Collapses the specified groups.

For regular single column groups, the group key should be easy to determine, i.e: for a column grouped by Gender the key could be something like : "Male"

For complex GroupBy operations, you will need to specify the full group key, i.e: for a group composed of Childrens and Gender, the group key would be something like: "{ Childrens = 1, Gender = M }"

GroupedData : DisplayGroupedData | GroupKey: Key

Taskstring[] groupKeys
CollapseRow Collapses a row. TaskTItem item
Delete Deletes the specified item from the Data source. TaskTItem item
Edit Sets the DataGrid into the Edit state mode for the specified item. TaskTItem item
ExpandAllGroups Expands all groups. Task
ExpandAllRows Expands all rows for the current root view. Task
ExpandGroups Expands the specified groups.

For regular single column groups, the group key should be easy to determine, i.e: for a column grouped by Gender the key could be something like : "Male"

For complex GroupBy operations, you will need to specify the full group key, i.e: for a group composed of Childrens and Gender, the group key would be something like: "{ Childrens = 1, Gender = M }"

GroupedData : DisplayGroupedData | GroupKey: Key

Taskstring[] groupKeys
ExpandRow Expands a row. TaskTItem item
FilterData Forces the internal DataGrid data to be filtered.
Remarks

Keep in mind that this command will always trigger FilteredDataChanged even though not any data is actually changed.

void
GetBatchEditItemByLastEditItem Gets the corresponding batch edit item by the last edited item if it exists. DataGridBatchEditItem<TItem>TItem item
GetBatchEditItemByOriginal Gets the corresponding batch edit item by the original if it exists. DataGridBatchEditItem<TItem>TItem item
GetColumns Returns a list of all the columns that are currently associated with this datagrid. IReadOnlyList<DataGridColumn<TItem>>
GetRowInfo No documentation available - no XML comment
Remarks

No documentation available - no XML comment

DataGridRowInfo<TItem>TItem item
GetSortByColumns Returns a list of all columns currently used to sort this datagrid's data. IReadOnlyList<DataGridColumn<TItem>>
GetState Gets the current state of the DataGrid. Task<DataGridState<TItem>>
LoadState Loads the state of the DataGrid. TaskDataGridState<TItem> dataGridState
New Sets the DataGrid into the New state mode. Task
New Adds a new item to the DataGrid, either by opening it in edit mode or by adding the batch edit collection, depending on whether batch editing is enabled. TaskTItem newItem
Paginate Triggers the DataGrid to change data source page.
Remarks

Valid values are: 1-n: Number of the page. prev: Go to first page. next: Go to next page. first: Go to first page. last: Go to last page.

Taskstring paginationCommandOrNumber
ReadCellEditValue Reads the cell value of the current editing item that matches the . objectstring fieldName
Refresh Notifies the DataGrid to refresh. Task
Reload Triggers the reload of the DataGrid data. Makes sure not to reload if the DataGrid is in a loading state. TaskCancellationToken cancellationToken
RemoveColumn Removes an existing link of a child column with this datagrid.

Returns: true if item is successfully removed; otherwise, false.

boolDataGridColumn<TItem> column
RemoveGroupColumn Removes a column from grouping. voidDataGridColumn<TItem> column
RemoveRow Links the child row with this datagrid. boolDataGridRowInfo<TItem> row
ResetDisplayOrder Resets the display order of all columns to their default state.
Remarks

This method sets the internal display order of each column to , effectively clearing any custom display order. If the Columns collection is empty or , the method performs no action.

Task
Save Save the internal state of the editing items. Task
ScrollToPixels If FixedHeader or Virtualize is enabled, it will scroll position to the provided pixels. ValueTaskint pixels
ScrollToRow If FixedHeader or Virtualize is enabled, it will scroll position to the provided row. ValueTaskint row
Select Selects the specified item. TaskTItem item
SetLoading Sets the DataGrid into the loading state.

Makes sure to invoke the StateHasChanged method.

voidbool isLoading
Sort Sorts the Data for the specified column. Note that Sortable must be enabled to be able to sort! TaskDataGridColumn<TItem> column, SortDirection? sortDirection
Sort Sorts the Data for the specified column. Note that Sortable must be enabled to be able to sort! Taskstring fieldName, SortDirection? sortDirection
ToggleDetailRow Toggles DetailRow while evaluating the DetailRowTrigger if provided. Use to ignore DetailRowTrigger and toggle the DetailRow. TaskTItem item, bool forceDetailRow
ToggleGroups Toggles the specified groups.

For regular single column groups, the group key should be easy to determine, i.e: for a column grouped by Gender the key could be something like : "Male"

For complex GroupBy operations, you will need to specify the full group key, i.e: for a group composed of Childrens and Gender, the group key would be something like: "{ Childrens = 1, Gender = M }"

GroupedData : DisplayGroupedData | GroupKey: Key

Taskstring[] groupKeys
ToggleRow Toggles a row. TaskTItem item
UpdateCellEditValue Updates the cell of the current editing item that matches the . voidstring fieldName, object value
ValidateAll Validates the current edit operation. Task<bool>
On this page