MatTable

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.
CurrentPage Int32 The current page, starting from one.
CurrentPageChanged Action<Int32>
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 The table header
MatTableRow RenderFragment<TableItem> Renders the list of items within the table
OnRowDbClick EventCallback<Object> Action to execute on row item
PageLabel String
PageParamName String
PageRecordCountLabel String
PageSize Int32 The number of rows per page.
PageSizeChanged Action<Int32>
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 Allows the header row to be sorted
Ref ElementReference Returned ElementRef reference for DOM element.
Example
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
Example with sort header table
Dessert (100g)
Calories
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 something...
2 T2 Do something...
3 T3 Do something...
4 T4 Do something...
5 T5 Do something...
Items per Page:
  • 5
  • 10
  • 25
  • 50
  • 100
  • *
Page 1 / 2

Select row, with returning selected item example
Id Firstname Lastname
1 Gerda Mugwort
2 Mattalic Burrowes
3 Hal Smallburrow
Items per Page:
  • 5
  • 10
  • 25
  • 50
  • 100
  • *
Page 1 / 1

You have double clicked on noone

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