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
SelectionChanged Action<Object>
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.
UseSortHeaderRow Boolean
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
Items per Page:
  • 5
  • 10
  • 25
  • 50
  • 100
  • *
Page 1 / 0
Example with sort header table
Dessert (100g)
Fat (g)
Carbs (g)
Protein (g)
Frozen yogurt 159 6 24 4
Ice cream sandwich 237 9 37 4
Eclair 262 16 24 6
Cupcake 305 4 67 4
Gingerbread 356 16 49 4
Select row, with returning selected item example
Id Name Description
1 T1 Do somthing...
2 T2 Do somthing...
3 T3 Do somthing...
4 T4 Do somthing...
5 T5 Do somthing...
Items per Page:
  • 5
  • 10
  • 25
  • 50
  • 100
  • *
Page 1 / 2

If you like MatBlazor, please put a star on GitHub.