Blazorise DataGrid: Getting Started

The DataGrid component is used for displaying tabular data. Features include sorting, searching, pagination, content-editing, and row selection.

To create a basic grid in Blazorise you need to set the Column that will define the grid structure and behavior.

  • <DataGrid> the main container
    • <DataGridColumns> container for datagrid columns
      • <DataGridColumn> column template for text editor
      • <DataGridNumericColumn> column template for numeric values
      • <DataGridDateColumn> column template for datetime values
      • <DataGridCheckColumn> column template for boolean values
      • <DataGridSelectColumn> column template for selectable values
      • <DataGridCommandColumn> column template for editing commands like Edit, Save, Cancel, etc.
    • <DataGridAggregates> container for datagrid aggregates
      • <DataGridAggregate> defines the column and aggregation function type



Install extension from NuGet.
Install-Package Blazorise.DataGrid


In your main _Imports.razor add:
@using Blazorise.DataGrid



For DataGrid the required fields are TItem typeparam and Data attribute. Other attributes on the DataGrid are optional.


Next you must set the Columns that you want to see in the grid. When defining the columns the required fields are: TItem this is always the same model as on DataGrid. Field name of the field in the supplied model. Caption the column caption text.

Nested fields

Field attribute also supports nested fields. You can define a column with field name like "City.Country.Name" and it will work. Just keep in mind that when editing nested fields they must be initialized first or otherwise they will raise an exception.



Name Description Type Default
Data Grid data-source. IEnumerable<TItem>
EditMode Specifies the grid editing modes. EditMode Form
UseInternalEditing Specifies the behavior of DataGrid editing. bool true
Editable Whether users can edit DataGrid rows. bool false
Resizable Whether users can resize DataGrid columns. bool false
ResizeMode Defines the resize mode of the data grid columns. TableResizeMode Header
Sortable Whether end-users can sort data by the column’s values. bool true
ShowCaptions Gets or sets whether user can see a column captions. bool true
Filterable Whether users can filter rows by its cell values. bool false
ShowPager Whether users can navigate DataGrid by using pagination controls. bool false
CurrentPage Current page number. int 1
PageSize Maximum number of items for each page. int 5
Striped Adds stripes to the table. bool false
Bordered Adds borders to all the cells. bool false
Borderless Makes the table without any borders. bool false
Hoverable Adds a hover effect when moussing over rows. bool false
Narrow Makes the table more compact by cutting cell padding in half. bool false
Responsive Makes table responsive by adding the horizontal scroll bar. bool false
ReadData Handles the manual loading of large data sets. EventCallback
SelectedRow Currently selected row. TItem
SelectedRowChanged Occurs after the selected row has changed. EventCallback
RowSelectable Handles the selection of the DataGrid row. If not set it will default to always true. Func<TItem,bool>
RowHoverCursor Handles the selection of the cursor for a hovered row. If not set, Blazorise.Cursor.Pointer` will be used. Func<TItem,Blazorise.Cursor>
DetailRowTrigger A trigger function used to handle the visibility of detail row. Func<DetailRowTriggerEventArgs<TItem>, bool>
RowInserting Cancelable event called before the row is inserted. EventCallback<CancellableRowChange<TItem, Dictionary<string, object>>>
RowUpdating Cancelable event called before the row is updated. EventCallback<CancellableRowChange<TItem, Dictionary<string, object>>>
RowRemoving Cancelable event called before the row is removed. EventCallback<CancellableRowChange<TItem>>
RowInserted Event called after the row is inserted. EventCallback<SavedRowItem<TItem, Dictionary<string, object>>>
RowUpdated Event called after the row is updated. EventCallback<SavedRowItem<TItem, Dictionary<string, object>>>
RowRemoved Event called after the row is removed. EventCallback<TItem>
PageChanged Occurs after the selected page has changed. EventCallback
PageSizeChanged Occurs after the page size has changed. EventCallback<int>
EmptyCellTemplate Define the display template for empty data cell. RenderFragment
EmptyTemplate Define the display template for empty data collection. RenderFragment
EmptyFilterTemplate Define the display template for empty filter data collection. RenderFragment
LoadingTemplate Define the display template for empty filter data collection. RenderFragment
PopupSize Defines the size of popup modal. ModalSize Default
PopupClosing Occurs before the popup dialog is closed. Func<ModalClosingEventArgs, Task>
PopupTitleTemplate Template for custom title of edit popup dialog RenderFragment<PopupTitleContext<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 Action will be called for setting default values of property, when create new entry Action<TItem>
PageButtonTemplate Define the format a pagination button RenderTemplate<PageButtonContext>
UseValidation If true, validation will be used when editing the fields bool false
ShowValidationFeedback Hide or show feedback for validation bool false
ShowValidationsSummary Hide or show validations summary bool true
ValidationsSummaryLabel Label for validations summary. string null
ValidationsSummaryErrors List of custom error messages for the validations summary. string[] null
SortMode Defines whether the user can sort only by one column or by multiple. DataGridSortMode Multiple
SelectionMode Defines whether the datagrid is set to single or multiple selection mode DataGridSelectionMode Single
Localizers Custom localizer handlers to override default localization. DataGridLocalizers
CommandMode Defines whether the datagrid renders both commands and button row or just either one of them. DataGridCommandMode Default
PagerPosition Defines the position of the pager. DataGridPagerPosition Bottom
AggregateRowPosition Gets or sets the position of the aggregate row. DataGridAggregateRowPosition Bottom
ShowPageSizes Defines whether users can adjust the page size of the datagrid. bool false
Virtualize Gets or sets whether the datagrid will use the Virtualize functionality. bool false
VirtualizeOptions Gets or sets Virtualize options when using the Virtualize functionality. VirtualizeOptions null
SubmitFormOnEnter If true, the edit form will have the Save button as type="submit", and it will react to Enter keys being pressed. bool true
HeaderThemeContrast Sets the Datagrid's table header ThemeContrast. ThemeContrast
FixedHeader Makes Datagrid have a fixed header and enabling a scrollbar in the Datagrid body. bool
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
DetailRowStartsVisible Controls whether DetailRow will start visible if DetailRowTemplate is set. DetailRowTrigger will be evaluated if set. bool true


Name Description Type Default
DataGridHeight Sets the DataGrid height when Virtualize feature is enabled (defaults to 500px). string 500px
DataGridMaxHeight Sets the DataGrid height when Virtualize feature is enabled (defaults to 500px). string 500px
OverscanCount Gets or sets a value that determines how many additional items will be rendered before and after the visible region. This help to reduce the frequency of rendering during scrolling. However, higher values mean that more elements will be present in the page. int


Name Description Type Default
Field TItem data field name. string
Caption Column’s display caption. It will be displayed, if ColumnTemplate is not set. string
Filter Filter value for this column. FilterContext
SortDirection Column initial sort direction. SortDirection Default
TextAlignment Defines the alignment for display cell. TextAlignment Default
HeaderTextAlignment Defines the alignment for column header cell. TextAlignment Default
Editable Whether users can edit cell values under this column. bool false
Displayable Whether column can be displayed on a grid. bool true
DisplayOrder Where column will be displayed on a grid. int 0
Sortable Whether end-users can sort data by the column’s values. bool true
Readonly Whether end-users are prevented from editing the column’s cell values. bool false
ShowCaption Whether the column’s caption is displayed within the column header. bool true
Filterable Whether users can filter rows by its cell values. bool true
Width The width of the column. string null
DisplayFormat Defines the format for display value. string
DisplayFormatProvider Defines the format provider info for display value. IFormatProvider
CellClass Custom classname handler for cell based on the current row item. Func<TItem, string>
CellStyle Custom style handler for cell based on the current row item. Func<TItem, string>
HeaderCellClass Custom classname for header cell. string
HeaderCellStyle Custom style for header cell. string
FilterCellClass Custom classname for filter cell. string
FilterCellStyle Custom style for filter cell. string
GroupCellClass Custom classname for group cell. string
GroupCellStyle Custom style for group cell. string
DisplayTemplate Template for custom cell display formating. RenderFragment<TItem>
EditTemplate Template for custom cell editing. RenderFragment<CellEditContext>
FilterTemplate Template for custom column filter rendering. RenderFragment<FilterContext>
PopupFieldColumnSize Defines the size of field for popup modal. IFluentColumn IsHalf.OnDesktop
CaptionTemplate Template for custom caption. CaptionTemplate will block caption template. RenderFragment<DataGridColumn<TItem>>
SortDirectionTemplate Template for custom sort direction icon. RenderFragment<SortDirection>
Validator Validates the input value after trying to save. Action<ValidatorEventArgs>
ValidationPattern Forces validation to use regex pattern matching instead of default validator handler. string
CustomFilter Custom filter function used to override internal filtering. DataGridColumnCustomFilter
Display Specifies the display behavior of a cell. IFluentDisplay
HeaderDisplay Specifies the display behavior of a header cell. IFluentDisplay
PreventRowClick Will set @onclick:StopProgration to true, stopping the RowClick and consequent events from triggering. bool
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>