MatBlazor - Material Design components for Blazor and Razor Components


Mat Table display a table data.

Name Type Description
TableItem Generic argument
AllowSelection Boolean Specifies weather you can select a single row.
ApiUrl String Specifies the API Url form for the table data
Attributes Dictionary<String,Object> Gets or sets a collection of additional attributes that will be applied to the created element.
Class String Specifies one or more classnames for an DOM element.
DebounceMilliseconds Int32 Specifies the delay duration between user input on the Search Term Field. Default 800
Descending Boolean
DescendingParamName String
FilterByColumnName String Specifies which column is used for the filter / search term. If this is populated the Search Textbox will be visible.
HeaderRowClass String Specifies a custom class for the MatTableHeader row
Id String
Items IEnumerable<TableItem> Specifies the data for the table.
LoadInitialData Boolean Specifies where to Load the Initial Table Data
MatTableHeader RenderFragment
MatTableRow RenderFragment<TableItem>
PageLabel String
PageParamName String
PageRecordCountLabel String
PageSize Int32 The number of rows per page.
PageSizeParamName String
PageSizes PageSizeStructure[] Not Functioning
PagingDataPropertyName String
PagingRecordsCountPropertyName String
RefBack ForwardRef
RequestApiOnlyOnce Boolean Specifies whether to Request the API only once.
RowClass String Specifies a custom class for the MatTableRow
SearchTermFieldLabel String Specifies the Label for the Filter / Search Term Textbox
SearchTermFieldPlaceHolder String Specifies the Placeholder for the Filter / Search Term Textbox
SearchTermParamName String
ShowFooter Boolean Specifies the Table Footer visibility.
ShowPaging Boolean Specifies the Paging visibility
SortBy String
SortByParamName String
Striped Boolean Determines if table has alternating color rows.
Style String Specifies an inline style for an DOM element.
Ref ElementReference Returned ElementRef reference for DOM element.
Name Price Horsepower
Volkswagen Golf $10000.00 220
Volkswagen Passat $11000.00 240
Volkswagen Polo $12000.00 110
Ford Focus $13000.00 200
Ford Fiesta $14000.00 160
Items per Page:
  • 5
  • 10
  • 25
  • 50
  • 100
  • *
Page 1 / 2
Filter Example, Pull Data from API, Single Row Selection / Hover
Id Completed Todo
1 False delectus aut autem
2 False quis ut nam facilis et officia qui
3 False fugiat veniam minus
4 True et porro tempora
5 False laboriosam mollitia et enim quasi adipisci quia provident illum
Items per Page:
  • 5
  • 10
  • 25
  • 50
  • 100
  • *
Page 1 / 40
If you like MatBlazor, please put a star on GitHub.