Blazorise DataGrid: Getting Started

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

📊 The Community License has a limitation of 1000 items. Unlock full access to all features with our premium plans.

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

Caption

Throughout our examples you may see the usage of nameof when defining the Field Parameter. Note that nameof produces only the name of the variable, type or member as the string constant. It is used as a way to strongly type the string that represents our field. Please note, that this is not mandatory. And you may provide a regular string that represents the path to the field you want to be binding.

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.

Note: DataGrid supports the CascadingTypeParameter feature. We've found out, that there might be a few caveats when using the feature. For most cases you'll be just fine with removing the explicit references to the Generic Type on the children component. But for the very few cases that Blazor complains that it cannot compile, just explicitly define the Generic Type. Here's an example:

This will not work:

<DataGridAggregate Field="@nameof( Employee.IsActive )" AggregationFunction=@(DataGridAggregate<Employee>.TrueCount) />

These will work:

<DataGridAggregate Field="@nameof( Employee.IsActive )" AggregationFunction=@((x,y) => DataGridAggregate<Employee>.TrueCount(x,y)) />

<DataGridAggregate TItem="Employee" Field="@nameof( Employee.IsActive )" AggregationFunction=@(DataGridAggregate<Employee>.TrueCount) />

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`
`FixedColumnsPositionSync`	Gets or sets whether the `FixedColumns` feature automatically resynchronizes the columns positions when they are added or removed. Enabling this feature may impact performance due to constant recalculations of fixed column positions.	`bool`	`false`
`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>>`
`AutoGenerateColumns`	Gets or sets whether the DataGrid should automatically generate columns. Columns will only be automatically generated if no columns have been provided.	`bool`	`true`
`EditModeOptions`	Gets or sets DataGridEditMode options, allowing to customize how the edit mode will work.	`DataGridEditModeOptions`
`NavigationMode`	Gets or sets the DataGrid navigation mode, allowing to control the navigation via keyboard.	`DataGridNavigationMode`	`DataGridNavigationMode.Default`
`ResponsiveMode`	Gets or sets the Table's responsive mode.	`TableResponsiveMode`	`TableResponsiveMode.Default`
`SelectedCell`	Gets or sets the currently selected cell in the data grid. `NavigationMode` must be set to `DataGridNavigationMode.Cell`.	`DataGridCellInfo<TItem>`
`SelectedCellChanged`	Occurs after the selected cell has changed in the data grid. `NavigationMode` must be set to `DataGridNavigationMode.Cell`.	`EventCallback<DataGridCellInfo<TItem>>`
`Caption`	Defines the caption of the table, usually used to describe the table content.	`string`
`CaptionSide`	Defines the placement of the `Caption` element.	`TableCaptionSide`	`TableCaptionSide.Default`
`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>>`

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`
`ColumnChooserPosition`	Column Chooser 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`
`SortComparer`	Gets or sets the custom comparer used for sorting the items in this column. Note that this comparer can only be used with in-memory data.	`IComparer<TItem>`	`null`
`ReverseSorting`	Whether the sort direction will be reversed.	`bool`	`false`
`TextAlignment`	Defines the alignment for the table cell.	`TextAlignment`	`Default`
`TextTransform`	Gets or sets the text transformation for the table cell.	`TextTransform`	`Default`
`TextDecoration`	Gets or sets the text decoration for the table cell.	`TextDecoration`	`Default`
`TextWeight`	Gets or sets the text weight for the table cell.	`TextWeight`	`Default`
`TextOverflow`	Determines how the text will behave when it is larger than a parent container for the table cell.	`TextOverflow`	`Default`
`TextSize`	Determines the font size of an element for the table cell.	`IFluentTextSize`	`null`
`HeaderTextAlignment`	Defines the alignment for column header cell. If undefined, the `TextAlignment` will be used.	`TextAlignment?`	`null`
`HeaderTextTransform`	Gets or sets the text transformation for column header cell. If undefined, the `TextTransform` will be used.	`TextTransform?`	`null`
`HeaderTextDecoration`	Gets or sets the text decoration for column header cell. If undefined, the `TextDecoration` will be used.	`TextDecoration?`	`null`
`HeaderTextWeight`	Gets or sets the text weight for column header cell. If undefined, the `TextWeight` will be used.	`TextWeight?`	`null`
`HeaderTextOverflow`	Determines how the text will behave when it is larger than a parent container for column header cell. If undefined, the `TextOverflow` will be used.	`TextOverflow?`	`null`
`HeaderTextSize`	Determines the font size of an element for column header cell. If undefined, the `TextSize` will be used.	`IFluentTextSize`	`null`
`FilterTextAlignment`	Defines the alignment for column filter cell. If undefined, the `TextAlignment` will be used.	`TextAlignment?`	`null`
`FilterTextTransform`	Gets or sets the text transformation for column filter cell. If undefined, the `TextTransform` will be used.	`TextTransform?`	`null`
`FilterTextDecoration`	Gets or sets the text decoration for column filter cell. If undefined, the `TextDecoration` will be used.	`TextDecoration?`	`null`
`FilterTextWeight`	Gets or sets the text weight for column filter cell. If undefined, the `TextWeight` will be used.	`TextWeight?`	`null`
`FilterTextOverflow`	Determines how the text will behave when it is larger than a parent container for column filter cell. If undefined, the `TextOverflow` will be used.	`TextOverflow?`	`null`
`FilterTextSize`	Determines the font size of an element for column filter cell. If undefined, the `TextSize` will be used.	`IFluentTextSize`	`null`
`AggregateTextAlignment`	Defines the alignment for column the aggregate cell. If undefined, the `TextAlignment` will be used.	`TextAlignment?`	`null`
`AggregateTextTransform`	Gets or sets the text transformation for column aggregate cell. If undefined, the `TextTransform` will be used.	`TextTransform?`	`null`
`AggregateTextDecoration`	Gets or sets the text decoration for column aggregate cell. If undefined, the `TextDecoration` will be used.	`TextDecoration?`	`null`
`AggregateTextWeight`	Gets or sets the text weight for column aggregate cell. If undefined, the `TextWeight` will be used.	`TextWeight?`	`null`
`AggregateTextOverflow`	Determines how the text will behave when it is larger than a parent container for column aggregate cell. If undefined, the `TextOverflow` will be used.	`TextOverflow?`	`null`
`AggregateTextSize`	Determines the font size of an element for column aggregate cell. If undefined, the `TextSize` will be used.	`IFluentTextSize`	`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`
`AggregateTemplate`	Template for aggregate values.	`RenderFragment<AggregateContext<TItem>>`
`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`
`Reorderable`	Gets or sets a value indicating whether the column can be reordered by the user.	`bool`	`false`

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`
`SetLoading`	Sets the DataGrid into the loading state. Makes sure to invoke the StateHasChanged method.	`void`	`bool isLoading`

Blazorise DataGrid: Getting Started

Installation

NuGet

Imports

Usage

DataGrid

Columns

Nested fields

API

Attributes

DataGrid

DataGrid Templates

VirtualizeOptions

DataGridPagerOptions

DataGridColumn

Methods

On this page