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

Installation

NuGet

Install extension from NuGet.
Install-Package Blazorise.DataGrid

Imports

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

Usage

DataGrid

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

Columns

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. And you should be able to omit this on recent versions of Blazorise
  • 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.

API

Attributes

DataGrid

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 10
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
SelectedRows Gets or sets currently selected rows. List<TItem>
SelectedRowChanged Occurs after the selected row has changed. EventCallback
SelectedRowsChanged Occurs after multi selection has changed. EventCallback<List<TItem>>
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>
PopupSize Defines the size of popup modal. ModalSize Default
PopupClosing Occurs before the popup dialog is closed. Func<ModalClosingEventArgs, Task>
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>
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
ValidationsHandlerType Defines the default handler type that will be used by the validation, unless it is overriden by Validation.HandlerType property. Type null
SortChanged Occurs after the sort direction of a single column has changed. EventCallback<DataGridSortChangedEventArgs> 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
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. 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
PagerOptions Gets or sets Pager options. DataGridPagerOptions null
RowContextMenu Event called after the row has requested a context menu. EventCallback<DataGridRowMouseEventArgs<TItem>>
RowContextMenuPreventDefault Used to prevent the default action for an RowContextMenu event. bool false
RowStyling Custom handler for each row in the datagrid. Action<TItem, DataGridRowStyling>
SelectedRowStyling Custom handler for currently selected row. Action<TItem, DataGridRowStyling>
CustomFilter Handler for custom filtering on datagrid item. DataGridCustomFilter<TItem>
HeaderRowStyling Custom styles for header row. DataGridRowStyling
FilterRowStyling Custom styles for filter row. DataGridRowStyling
GroupRowStyling Custom styles for aggregate row. The GroupRowStyling parameter is deprecated, please use the AggregateRowStyling parameter instead. DataGridRowStyling
AggregateRowStyling Custom styles for aggregate row. DataGridRowStyling
RowOverlayPosition Defines the position of the row overlay. DataGridRowOverlayPosition End
RowOverlayBackground Defines the background of the row overlay. Background Light
Padding Defines the element padding spacing. IFluentSpacing
Margin Defines the element margin spacing. IFluentSpacing
Style Custom html style. string
Class Custom css classname. string
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>
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>
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>
RowDoubleClicked Event called after the row is double clicked. EventCallback<DataGridRowMouseEventArgs<TItem>>
RowClicked Event called after the row is clicked. EventCallback<DataGridRowMouseEventArgs<TItem>>
RowMouseOver Event called after the mouse is over the row. EventCallback<DataGridRowMouseEventArgs<TItem>>
RowMouseLeave Event called after the mouse leaves the row. EventCallback<DataGridRowMouseEventArgs<TItem>>
MaxPaginationLinks Gets or sets the maximum number of visible pagination links. It has to be odd for well look. int
PageSizes Gets or sets the chooseable page sizes of the datagrid. IEnumerable<int>
Groupable Gets or sets whether the data will be grouped. Column groups need to be configured. bool false
GroupBy Gets or sets 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>
FilterMode Gets or sets the filter mode. DataGridFilterMode Default
FilteredDataChanged Raises an event every time that filtered data is refreshed. Action<DataGridFilteredDataEventArgs<TItem>>
TotalItems Gets or sets the total number of items. Used only when ReadData is used to load the data. This field must be set only when ReadData is used to load the data. int?
AggregateData Gets or sets the calculated aggregate data. Used only in manual read mode along with the ReadData handler. IEnumerable<TItem>
Navigable Gets or sets whether the Datagrid is Navigable, users will be able to navigate the Grid by pressing the Keyboard's ArrowUp and ArrowDown keys. bool false
FilterMethod Defines the filter method when searching the cell values. DataGridFilterMethod DataGridFilterMethod.Contains
ShowHeaderGroupCaptions Gets or sets whether user can see defined header group captions. bool false
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. bool false
BatchSaving Cancelable event before batch edit is saved. EventCallback<DataGridBatchSavingEventArgs<TItem>>
BatchSaved Event called after the batch edit is saved. EventCallback<DataGridBatchSavedEventArgs<TItem>>
BatchChange Event called after a batch change is made. EventCallback<DataGridBatchChangeEventArgs<TItem>>
CellStyling Custom handler for the cell styling. Action<TItem, DataGridColumn<TItem>, DataGridCellStyling>
SelectedCellStyling Custom handler for the selected cell styling. Action<TItem, DataGridColumn<TItem>, DataGridCellStyling>
BatchEditCellStyling Custom handler for the cell styling when the cell has batch edit changes. Action<DataGridBatchEditItem<TItem>, DataGridColumn<TItem>, DataGridCellStyling>
RowBatchEditStyling Custom handler for the row that has batch edit changes. Action<DataGridBatchEditItem<TItem>, DataGridRowStyling>
ShowColumnChooser Gets or sets whether the column chooser is visible. bool false
ColumnChooserTemplate Gets or sets content of column chooser of pager. RenderFragment<ColumnChooserContext<TItem>>

DataGrid Templates

Name Description Type Default
DataGridColumns Template for holding the datagrid columns. RenderFragment
DataGridAggregates Template for holding the datagrid aggregate columns. RenderFragment
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
ButtonRowTemplate Gets or sets content of button row of pager. RenderFragment<ButtonRowContext<TItem>>
FirstPageButtonTemplate Gets or sets content of first button of pager. RenderFragment
LastPageButtonTemplate Gets or sets content of last button of pager. RenderFragment
PreviousPageButtonTemplate Gets or sets content of previous button of pager. RenderFragment
NextPageButtonTemplate Gets or sets content of next button of pager. RenderFragment
PageButtonTemplate Gets or sets content of page buttons of pager. RenderFragment<PageButtonContext>
ItemsPerPageTemplate Gets or sets content of items per page of grid. RenderFragment
TotalItemsShortTemplate Gets or sets content of total items grid for small devices. RenderFragment<PaginationContext<TItem>>
TotalItemsTemplate Gets or sets content of total items grid. RenderFragment<PaginationContext<TItem>>
DetailRowTemplate Gets or sets content of total items grid. RenderFragment<TItem>
PopupTitleTemplate Template for custom title of edit popup dialog RenderFragment<PopupTitleContext<TItem>>
PageSelectorTemplate Gets or sets 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>>
PageSizesTemplate Gets or sets content of the page sizes selector. You will have to construct it using the provided pagination context. RenderFragment<PaginationContext<TItem>>
Navigable Gets or sets whether the Datagrid is Navigable, users will be able to navigate the Grid by pressing the Keyboard's ArrowUp and ArrowDown keys. bool false
FilterMethod Defines the filter method when searching the cell values. DataGridFilterMethod DataGridFilterMethod.Contains
ShowHeaderGroupCaptions Gets or sets whether user can see defined header group captions. bool false
HeaderGroupCaptionTemplate Template for header group caption. Suggested usage: rendering content conditionally according to the defined HeaderGroupCaption. RenderFragment<HeaderGroupContext>
FilterMode Gets or sets the filter mode. DataGridFilterMode DataGridFilterMode.Default
FilterMenuTemplate Template for the filter menu. When filter mode is set to DataGridFilterMode.Menu, this template will be used to render the filter content. FilterColumnContext<TItem>
RowOverlayTemplate Template for mouse hover overlay display formatting. RenderFragment<RowOverlayContext<TItem>>

VirtualizeOptions

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
ScrollRowOnEdit If DataGrid goes into DataGridEditMode.Inline or DataGridEditMode.Form, scrolls the row to the top. bool true

DataGridPagerOptions

Name Description Type Default
ButtonSize Configures the pager buttons size. Size Size.Default
ButtonRowPosition Button Row Position. PagerElementPosition PagerElementPosition.Default
PaginationPosition Pagination Position. PagerElementPosition PagerElementPosition.Default
TotalItemsPosition Total Items Position. PagerElementPosition PagerElementPosition.Default

DataGridColumn

Name Description Type Default
Field TItem data field name. string
SortField The name of the field that will be used to sort data, overriding the 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
ReverseSorting Whether the sort direction will be reversed. bool false
TextAlignment Defines the alignment for display cell. TextAlignment? Default
HeaderTextAlignment Defines the alignment for column header cell. TextAlignment? null
FilterTextAlignment Defines the alignment for column filter cell. TextAlignment? null
AggregateTextAlignment Defines the alignment for column the aggregate cell. TextAlignment? null
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
AggregateCellClass Custom classname for the aggregate cell. string
AggregateCellStyle Custom style for the aggregate 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>
EditFieldColumnSize Defines the size of an edit field for popup modal and edit form. 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 null
HeaderDisplay Specifies the display behavior of a header cell. IFluentDisplay null
FilterDisplay Specifies the display behavior of a filter cell. IFluentDisplay null
AggregateDisplay Specifies the display behavior of the aggregate cell. IFluentDisplay null
Flex Specifies the flex utility of a cell. IFluentFlex null
HeaderFlex Specifies the flex utility of a header cell. IFluentFlex null
FilterFlex Specifies the flex utility of a filter cell. IFluentFlex null
AggregateFlex Specifies the flex utility of the aggregate cell. IFluentFlex null
Gap Specifies the gap utility of a cell. IFluentGap null
HeaderGap Specifies the gap utility of a header cell. IFluentGap null
FilterGap Specifies the gap utility of a filter cell. IFluentGap null
AggregateGap Specifies the gap utility of the aggregate cell. IFluentGap null
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>
ShowDefaultSortIcon Gets or sets whether default sort icon should display. bool false
SortOrder Gets or sets the order for sorting when Sorting is set to multiple. int
SortOrderChanged Raises an event every time that SortOrder is changed. EventCallback<int>
Groupable Gets or sets whether the data will be grouped. Column groups need to be configured. bool false
GroupBy Gets or sets 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>
ShowGrouping Gets or sets whether user can see and edit column grouping. bool false
FilterMethod Sets the filter method to be used for filtering the column. If null, uses the DataGrid's FilterMethod. DataGridColumnFilterMethod? null
HeaderGroupCaption Defines the caption to be displayed for a group header. If set, all the column headers that are part of the group will be grouped under this caption. string
HelpText Sets the help-text positioned below the field input when editing. string
FilterMode Gets or sets the filter mode for the column. If set, this overrides the DataGrid FilterMethod. DataGridFilterMode DataGridFilterMode.Default

Methods

Name Description Return Parameters
New Sets the DataGrid into the New state mode. Task
Edit Sets the DataGrid into the Edit state mode for the specified item. Task TItem item
Delete Deletes the specified item from the Data source. Task TItem item
Save Save the internal state of the editing items. Task
Cancel Cancels the editing of DataGrid item. Task
Select Selects the specified item. Task TItem item
Sort Sorts the Data for the specified column. Note that Sortable must be enabled to be able to sort! Task string fieldName, SortDirection? sortDirection = null
Sort Sorts the Data for the specified column. Note that Sortable must be enabled to be able to sort! Task DataGridColumn<TItem> column, SortDirection? sortDirection = null
ApplySorting Applies a new sort to the datagrid using the provided columns, sort order, and sort direction. Replaces the current sorting. Note that Sortable must be enabled to be able to sort! Task params DataGridSortColumnInfo[] columns
Paginate Triggers the DataGrid to change data source page. Task string paginationCommandOrNumber
ClearFilter Clears all filters from the grid. Task
ClearFilter Clears the corresponding column filters. Task params string[] fieldNames
FilterData Forces the internal DataGrid data to be filtered. void
UpdateCellEditValue Updates the cell of the current editing item that matches the fieldName. void string fieldName, object value
ReadCellEditValue Reads the cell value of the current editing item that matches the fieldName. object string fieldName
ToggleDetailRow Toggles DetailRow while evaluating the DetailRowTrigger if provided. Use forceDetailRow to ignore DetailRowTrigger and toggle the DetailRow. Task TItem item, bool forceDetailRow = false
ScrollToPixels If FixedHeader or Virtualize is enabled, it will scroll position to the provided pixels. ValueTask int pixels
ScrollToRow If FixedHeader or Virtualize is enabled, it will scroll position to the provided row. ValueTask int row
ExpandAllGroups Expands all groups. Task
CollapseAllGroups Collapses all groups. Task
GetColumns Returns a read-only list of all the columns that are currently associated with this datagrid. IReadOnlyList<DataGridColumn<TItem>>
GetSortByColumns Returns a read-only list of all columns currently used to sort this datagrid's data. IReadOnlyList<DataGridColumn<TItem>>
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 }" Task params string[] groupKeys
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 }" Task params string[] groupKeys
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 }" Task params string[] groupKeys
ValidateAll Validates the current edit operation. Task<bool>
GetBatchEditItemByOriginal Gets the corresponding batch edit item by the original if it exists. DataGridBatchEditItem<TItem>
GetBatchEditItemByLastEditItem Gets the corresponding batch edit item by the last edited item if it exists. DataGridBatchEditItem<TItem>
GetState Gets the current state of the DataGrid. Task<DataGridState<TItem>>
LoadState Loads the state of the DataGrid. Task DataGridState<TItem> dataGridState
On this page