Blazorise DataGrid component
The DataGrid component allows you to display and manage data in a tabular (rows/columns) format.
API
Parameters
| Parameter | Description | Type | Default |
|---|---|---|---|
AggregateData |
Gets or sets the calculated aggregate data. RemarksUsed only in manual read mode along with the ReadData handler. |
IEnumerable<TItem> | null |
AggregateRowPosition |
Gets or sets the position of the aggregate row. Possible values: |
DataGridAggregateRowPosition | DataGridAggregateRowPosition.Bottom |
AggregateRowStyling |
Custom styles for aggregate row. |
DataGridRowStyling | null |
Attributes |
Captures all the custom attribute that are not part of Blazorise component. |
Dictionary<string, object> | null |
AutoGenerateColumns |
Gets or sets whether the DataGrid should automatically generate columns. Columns will only be automatically generated if no columns have been provided. Defaults to true. |
bool | true |
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 |
Bordered |
Adds borders to all the cells. |
bool | false |
Borderless |
Makes the table without any borders. |
bool | false |
ButtonRowTemplate |
Gets or sets content of button row of pager. |
RenderFragment<ButtonRowContext<TItem>> | null |
ChildContent |
Specifies the content to be rendered inside this DataGrid. |
RenderFragment | null |
Class |
Custom css classname. |
string | |
ColumnChooserTemplate |
Gets or sets content of column chooser of pager. |
RenderFragment<ColumnChooserContext<TItem>> | null |
CommandMode |
Specifies the grid command mode. Possible values: |
DataGridCommandMode | DataGridCommandMode.Default |
CurrentPage |
Gets or sets the current page number. |
int | 0 |
CustomFilter |
Handler for custom filtering on datagrid item. |
DataGridCustomFilter<TItem> | null |
Data |
Gets or sets the datagrid data-source. |
IEnumerable<TItem> | null |
DataGridAggregates |
Template for holding the datagrid aggregate columns. |
RenderFragment | null |
DataGridColumns |
Template for holding the datagrid columns. |
RenderFragment | null |
DetailRowStartsVisible |
Controls whether DetailRow will start visible if DetailRowTemplate is set. DetailRowTrigger will be evaluated if set. |
bool | true |
DetailRowTemplate |
Template for displaying detail or nested row. |
RenderFragment<TItem> | null |
Editable |
Gets or sets whether users can edit datagrid rows. |
bool | false |
EditMode |
Specifies the grid editing modes. Possible values: |
DataGridEditMode | DataGridEditMode.Form |
EditModeOptions |
Gets or sets DataGridEditMode options, allowing to customize how the edit mode will work. |
DataGridEditModeOptions | null |
ElementId |
Gets or sets the datagrid element id. |
string | |
EmptyCellTemplate |
Gets or sets content of cell body for empty DisplayData. |
RenderFragment<TItem> | null |
EmptyFilterTemplate |
Gets or sets content of table body for the empty filter DisplayData. |
RenderFragment | null |
EmptyTemplate |
Gets or sets content of table body for empty DisplayData. |
RenderFragment | null |
Filterable |
Gets or sets whether users can filter rows by its cell values. |
bool | false |
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 |
Defines the filter method when searching the cell values. Possible values: |
DataGridFilterMethod | DataGridFilterMethod.Contains |
FilterMode |
Gets or sets the filter mode. Possible values: |
DataGridFilterMode | DataGridFilterMode.Default |
FilterRowStyling |
Custom styles for filter row. |
DataGridRowStyling | null |
FirstPageButtonTemplate |
Gets or sets content of first button of pager. |
RenderFragment | null |
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 | false |
FixedColumnsPositionSync |
Gets or sets whether the FixedColumns feature automatically resynchronizes the columns positions when they are added or removed. RemarksEnabling this feature may impact performance due to constant recalculations of fixed column positions. |
bool | false |
FixedHeader |
Makes Datagrid have a fixed header and enabling a scrollbar in the Datagrid body. |
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" |
Groupable |
Gets or sets whether the data will be grouped. Column groups need to be configured. |
bool | false |
GroupRowStyling |
Custom styles for aggregate row. |
DataGridRowStyling | null |
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. |
DataGridRowStyling | null |
HeaderThemeContrast |
Sets the Datagrid's table header ThemeContrast. Possible values: |
ThemeContrast | None |
Hoverable |
Adds a hover effect when mousing over rows. |
bool | false |
ItemsPerPageTemplate |
Gets or sets content of items per page of grid. |
RenderFragment | null |
LastPageButtonTemplate |
Gets or sets content of last button of pager. |
RenderFragment | null |
LoadingTemplate |
Gets or sets content of table body for handle ReadData. |
RenderFragment | null |
Localizers |
Custom localizer handlers to override default DataGrid localization. |
DataGridLocalizers | null |
Margin |
Defines the element margin spacing. |
IFluentSpacing | null |
MaxPaginationLinks |
Gets or sets the maximum number of visible pagination links. It has to be odd for well look. |
int | 0 |
Narrow |
Makes the table more compact by cutting cell padding in half. |
bool | false |
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 |
NavigationMode |
Gets or sets the DataGrid navigation mode, allowing to control the navigation via keyboard. Possible values: |
DataGridNavigationMode | DataGridNavigationMode.Default |
NextPageButtonTemplate |
Gets or sets content of next button of pager. |
RenderFragment | null |
Padding |
Defines the element padding spacing. |
IFluentSpacing | null |
PageButtonTemplate |
Gets or sets content of page buttons of pager. |
RenderFragment<PageButtonContext> | null |
PagerOptions |
Gets or sets Pager options. |
DataGridPagerOptions | null |
PagerPosition |
Gets or sets the position of the pager. Possible values: |
DataGridPagerPosition | DataGridPagerPosition.Bottom |
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>> | null |
PageSize |
Gets or sets the maximum number of items for each page. |
int | 0 |
PageSizes |
Gets or sets the chooseable page sizes of the datagrid. |
IEnumerable<int> | null |
PageSizesTemplate |
Gets or sets content of the page sizes selector. You will have to construct it using the provided pagination context. |
RenderFragment<PaginationContext<TItem>> | null |
PopupSize |
Defines the size of popup dialog. Possible values: |
ModalSize | Default |
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 |
Gets or sets content of previous button of pager. |
RenderFragment | null |
Resizable |
Gets or sets whether users can resize datagrid columns. |
bool | false |
ResizeMode |
Gets or sets whether the user can resize on header or columns. Possible values: |
TableResizeMode | Header |
Responsive |
Makes table responsive by adding the horizontal scroll bar. RemarksIn 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. |
bool | false |
ResponsiveMode |
Gets or sets the Table's responsive mode. Possible values: |
TableResponsiveMode | Default |
RowContextMenuPreventDefault |
Used to prevent the default action for an RowContextMenu event. |
bool | false |
RowOverlayBackground |
Defines the background of the row overlay. |
Background | Light |
RowOverlayPosition |
Defines the position of the row overlay. Possible values: |
DataGridRowOverlayPosition | DataGridRowOverlayPosition.End |
RowOverlayTemplate |
Template for mouse hover overlay display formatting. |
RenderFragment<RowOverlayContext<TItem>> | null |
SelectedCell |
Gets or sets the currently selected cell in the data grid. RemarksThis property is only applicable when NavigationMode is set to Cell. |
DataGridCellInfo<TItem> | null |
SelectedRow |
Gets or sets currently selected row. |
TItem | null |
SelectedRows |
Gets or sets currently selected rows. |
List<TItem> | null |
SelectionMode |
Gets or sets current selection mode. Possible values: |
DataGridSelectionMode | DataGridSelectionMode.Single |
ShowCaptions |
Gets or sets whether user can see a column captions. |
bool | true |
ShowColumnChooser |
Gets or sets whether the column chooser is visible. |
bool | false |
ShowDefaultSortIcon |
Gets or sets whether default sort icon should display. |
bool | false |
ShowGrouping |
Gets or sets whether user can see and edit column grouping. |
bool | false |
ShowHeaderGroupCaptions |
Gets or sets whether user can see defined header group captions. |
bool | false |
ShowPager |
Gets or sets whether users can navigate datagrid by using pagination controls. |
bool | false |
ShowPageSizes |
Gets or sets whether users can adjust the page size of the datagrid. |
bool | false |
ShowValidationFeedback |
If true, shows feedbacks for all validations. |
bool | false |
ShowValidationsSummary |
If true, shows summary for all validations. |
bool | true |
Sortable |
Gets or sets whether end-users can sort data by the column's values. |
bool | true |
SortMode |
Gets or sets whether the user can sort only by one column or by multiple. Possible values: |
DataGridSortMode | DataGridSortMode.Multiple |
Striped |
Adds stripes to the table. |
bool | false |
Style |
Custom html style. |
string | |
SubmitFormOnEnter |
If true, the edit form will have the Save button as |
bool | true |
TotalItems |
Gets or sets the total number of items. Used only when ReadData is used to load the data. RemarksThis field must be set only when ReadData is used to load the data. |
int? | null |
TotalItemsShortTemplate |
Gets or sets content of total items grid for small devices. |
RenderFragment<PaginationContext<TItem>> | null |
TotalItemsTemplate |
Gets or sets content of total items grid. |
RenderFragment<PaginationContext<TItem>> | null |
UseInternalEditing |
Specifies the behaviour of datagrid editing. RemarksDisabling this option will send all changes to the RowInserted and RowUpdated but nothing will be saved unless the user manually update the item values. |
bool | true |
UseValidation |
If true, DataGrid will use validation when editing the fields. |
bool | false |
ValidationsHandlerType |
Defines the default handler type that will be used by the validation, unless it is overriden by HandlerType property. |
Type | null |
ValidationsSummaryErrors |
List of custom error messages for the validations summary. |
string[] | null |
ValidationsSummaryLabel |
Label for validations summary. |
string | |
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 |
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. |
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>> |
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> |
FilteredDataChanged |
Raises an event every time that filtered data is refreshed. |
Action<DataGridFilteredDataEventArgs<TItem>> |
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> |
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<DataGridPageChangedEventArgs> |
PageSizeChanged |
Occurs after the PageSize has changed. |
EventCallback<int> |
PopupClosing |
Occurs before the popup dialog is closed. |
Func<ModalClosingEventArgs, Task> |
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>> |
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>> |
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. |
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. RemarksThis 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. |
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. |
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 | Description | Return | Parameters |
|---|---|---|---|
LoadState |
Loads the state of the DataGrid. | Task | DataGridState<TItem> dataGridState |
GetState |
Gets the current state of the DataGrid. | Task<DataGridState<TItem>> | |
GetColumns |
Returns a list of all the columns that are currently associated with this datagrid. | IReadOnlyList<DataGridColumn<TItem>> | |
GetSortByColumns |
Returns a list of all columns currently used to sort this datagrid's data. | IReadOnlyList<DataGridColumn<TItem>> | |
AddColumn |
Links the child column with this datagrid. | void | DataGridColumn<TItem> column |
AddRow |
Links the child row with this datagrid. | void | DataGridRowInfo<TItem> row |
RemoveColumn |
Removes an existing link of a child column with this datagrid. Returns: true if item is successfully removed; otherwise, false. | bool | DataGridColumn<TItem> column |
RemoveRow |
Links the child row with this datagrid. | bool | DataGridRowInfo<TItem> row |
AddAggregate |
Links the child column with this datagrid. | void | DataGridAggregate<TItem> aggregate |
AddGroupColumn |
Adds a new column to grouping. | void | DataGridColumn<TItem> column |
RemoveGroupColumn |
Removes a column from grouping. | void | DataGridColumn<TItem> column |
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 | Task | string[] groupKeys |
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 | Task | 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 }" GroupedData : DisplayGroupedData | GroupKey: Key | Task | string[] groupKeys |
ExpandAllGroups |
Expands all groups. | Task | |
CollapseAllGroups |
Collapses all groups. | Task | |
SetLoading |
Sets the DataGrid into the loading state. Makes sure to invoke the StateHasChanged method. | void | bool isLoading |
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 |
GetBatchEditItemByOriginal |
Gets the corresponding batch edit item by the original if it exists. | DataGridBatchEditItem<TItem> | TItem item |
GetBatchEditItemByLastEditItem |
Gets the corresponding batch edit item by the last edited item if it exists. | DataGridBatchEditItem<TItem> | TItem item |
Save |
Save the internal state of the editing items. | Task | |
ValidateAll |
Validates the current edit operation. | Task<bool> | |
Cancel |
Cancels any edit operation in progress. | 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 |
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 |
ApplySorting |
Applies a new sort to the datagrid using the provided columns, sort order, and sort direction. Replaces the current sorting.
RemarksNote that Sortable and Sortable must be enabled to be able to sort! If more than one column is specified, SortMode must be Multiple | Task | DataGridSortColumnInfo[] columns |
Paginate |
Triggers the DataGrid to change data source page.
RemarksValid 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. | Task | string paginationCommandOrNumber |
ClearFilter |
Clears all filters from the grid. | Task | |
ClearFilter |
Clears the corresponding column filters. | Task | string[] fieldNames |
FilterData |
Forces the internal DataGrid data to be filtered.
RemarksKeep in mind that this command will always trigger FilteredDataChanged even though not any data is actually changed. | void | |
UpdateCellEditValue |
Updates the cell of the current editing item that matches the . | void | string fieldName, object value |
ReadCellEditValue |
Reads the cell value of the current editing item that matches the . | object | string fieldName |
ToggleDetailRow |
Toggles DetailRow while evaluating the DetailRowTrigger if provided. Use to ignore DetailRowTrigger and toggle the DetailRow. | Task | TItem item, bool forceDetailRow |
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 |
Reload |
Triggers the reload of the DataGrid data. Makes sure not to reload if the DataGrid is in a loading state. | Task | CancellationToken cancellationToken |
Refresh |
Notifies the DataGrid to refresh. | Task |