Grid

This documentation provides a comprehensive reference for the Grid component, guiding you through its configuration options.

Demos

Screenshot #

Blazor Grid Component

Grid Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
AllowFiltering bool False Gets or sets the grid filtering. 1.0.0
AllowPaging bool False Gets or sets the grid paging. 1.0.0
AllowSorting bool False Gets or sets the grid sorting. 1.0.0
AutoHidePaging bool False Automatically hides the paging controls when the grid item count is less than or equal to the PageSize and this property is set to true. 1.0.0
ChildContent RenderFragment null Gets or sets the child content. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
Data IEnumerable<TItem> null Gets or sets the grid data. 1.0.0
DataProvider GridDataProvider<TItem> null DataProvider is for items to render. The provider should always return an instance of GridDataProviderResult, and null is not allowed. 1.0.0
EmptyDataText string No records to display Gets or sets the empty data text. 1.0.0
GridContainerCssClass string null Gets or sets the grid container css class. 1.0.0
GridContainerCssStyle string null Gets or sets the grid container css style. 1.0.0
GridDetailView RenderFragment null Gets or sets the grid detail view. 1.0.0
GridTbodyCssClass string null Gets or sets the tbody element css class. 1.0.0
GridTbodyCssStyle string null Gets or sets the tbody element css style. 1.0.0
GridTheadCssClass string null Gets or sets the thead element css class. 1.0.0
GridTheadCssStyle string null Gets or sets the thead element css style. 1.0.0
GridTheadRowCssClass string null Gets or sets the thead's tr element css class. 1.0.0
GridTheadRowCssStyle string null Gets or sets the thead's tr element css style. 1.0.0
Height float 320 Gets or sets the grid height. Height will be in pixels. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
IsBordered bool False Indicates whether to add borders to all cells. 1.0.0
IsFullWidth bool True Indicates whether to make the table full width. 1.0.0
IsHoverable bool False Indicates whether to add a hover effect to each row. 1.0.0
IsNarrow bool False Indicates whether to make the cells narrower. 1.0.0
IsResponsive bool False Gets or sets a value indicating whether the grid is responsive. 1.0.0
IsStriped bool False Indicates whether to add stripes to the table. 1.0.0
ItemsPerPageText string Items per page Gets or sets the items per page text. 1.0.0
PageSize int 10 Gets or sets the page size. 1.0.0
PageSizeSelectorItems int { 10, 20, 50 } Gets or sets the page size selector items. 1.0.0
PageSizeSelectorVisible bool True Gets or sets the page size selector visible. 1.0.0
PaginationItemsTextFormat string {0} - {1} of {2} items Gets or sets the pagination items text format. 1.0.0
SkeletonBlockMinHeight float 24 Gets or sets the minimum height of the skeleton block. Skeletons are displayed while a request is in progress. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0
Unit Unit Px Gets or sets the units of measurement. 1.0.0

GridColumns Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
ChildContent RenderFragment null Gets or sets the child content. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0

GridColumn Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
CellTemplate RenderFragment<TItem> null Gets or sets the cell template. 1.0.0
ChildContent RenderFragment<TItem> null Gets or sets the child content. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
HeaderTemplate RenderFragment null Gets or sets the header template. 1.0.0
HeaderText string null Gets or sets the table column header text. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
IsDefaultSortColumn bool False Gets or sets the default sort column. 1.0.0
PropertyName string null Gets or sets the property name. This is required when AllowFiltering is true. 1.0.0
Sortable bool True Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the AllowSorting parameter on the grid. 1.0.0
SortDirection SortDirection None Gets or sets the default sort direction of a column. 1.0.0
SortKeySelector Expression<Func<TItem, IComparable>> null Expression used for sorting. 1.0.0
SortString string null Gets or sets the column sort string. This value will be passed to the backend/API for sorting. And this property is ignored for the client-side sorting. 1.0.0
StringComparison StringComparison OrdinalIgnoreCase Gets or sets the StringComparison. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0
ThCssClass string null Gets or sets the CSS class for the table header. 1.0.0
ThCssStyle string null Gets or sets the CSS style for the table header. 1.0.0

GridDetailView Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
ChildContent RenderFragment`1 null Gets or sets the child content. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0

GridEmptyDataTemplate Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
ChildContent RenderFragment null Gets or sets the child content. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0

GridLoadingTemplate Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object> null Gets or sets additional attributes that will be applied to the component. 1.0.0
ChildContent RenderFragment null Gets or sets the child content. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0

Grid EventCallbacks #

Name Return Type Description Added Version
PageSizeValueChanged EventCallback<int> Event fired when the page size value changes. 1.0.0
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!