Table

Examples for table
Basic use of `<table mat-table>`
No.NameWeightSymbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
6Carbon12.0107C
7Nitrogen14.0067N
8Oxygen15.9994O
9Fluorine18.9984F
10Neon20.1797Ne
Basic use of `<mat-table>` (uses display flex)
No.NameWeightSymbol1Hydrogen1.0079H2Helium4.0026He3Lithium6.941Li4Beryllium9.0122Be5Boron10.811B6Carbon12.0107C7Nitrogen14.0067N8Oxygen15.9994O9Fluorine18.9984F10Neon20.1797Ne
Table dynamically changing the columns displayed
nameweightsymbolposition
Hydrogen1.0079H1
Helium4.0026He2
Lithium6.941Li3
Beryllium9.0122Be4
Boron10.811B5
Carbon12.0107C6
Nitrogen14.0067N7
Oxygen15.9994O8
Fluorine18.9984F9
Neon20.1797Ne10
Table with expandable rows
nameweightsymbolposition
Hydrogen1.0079H1
Helium4.0026He2
Lithium6.941Li3
Beryllium9.0122Be4
Boron10.811B5
Carbon12.0107C6
Nitrogen14.0067N7
Oxygen15.9994O8
Fluorine18.9984F9
Neon20.1797Ne10
Table with filtering
No.NameWeightSymbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
6Carbon12.0107C
7Nitrogen14.0067N
8Oxygen15.9994O
9Fluorine18.9984F
10Neon20.1797Ne
Footer row table
ItemCost
Beach ball$4.00
Towel$5.00
Frisbee$2.00
Sunscreen$4.00
Cooler$25.00
Swim suit$15.00
Table retrieving data through HTTP
GitHub's API rate limit has been reached. It will be reset in one minute.
State#Title
Items per page:
30
0 of 0
Table with multiple header and footer rows
ItemCost
Name of the item purchasedCost of the item in USD
Beach ball$4.00
Towel$5.00
Frisbee$2.00
Sunscreen$4.00
Cooler$25.00
Swim suit$15.00
Data table with sorting, pagination, and filtering.
1Olivia J.73%green
2Jasper A.29%gray
3Isabella A.9%green
4Theodore T.62%aqua
5Charlotte A.80%blue
Items per page:
1 - 5 of 100
Table with pagination
No.NameWeightSymbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
Items per page:
1 - 5 of 20
Table showing each row context properties.
$implicitindexcountfirstlastevenodd
one05truefalsetruefalse
two15falsefalsefalsetrue
three25falsefalsetruefalse
four35falsefalsefalsetrue
five45falsetruetruefalse
Table with selection
No.NameWeightSymbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
6Carbon12.0107C
7Nitrogen14.0067N
8Oxygen15.9994O
9Fluorine18.9984F
10Neon20.1797Ne
Table with sorting
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
6Carbon12.0107C
7Nitrogen14.0067N
8Oxygen15.9994O
9Fluorine18.9984F
10Neon20.1797Ne