Table | Angular Material

Basic use of `<table mat-table>`

No.	Name	Weight	Symbol
1	Hydrogen	1.0079	H
2	Helium	4.0026	He
3	Lithium	6.941	Li
4	Beryllium	9.0122	Be
5	Boron	10.811	B
6	Carbon	12.0107	C
7	Nitrogen	14.0067	N
8	Oxygen	15.9994	O
9	Fluorine	18.9984	F
10	Neon	20.1797	Ne

Basic use of `<mat-table>` (uses display flex)

No.

Name

Weight

Symbol

Hydrogen

1.0079

Helium

4.0026

Lithium

6.941

Beryllium

9.0122

Boron

10.811

Carbon

12.0107

Nitrogen

14.0067

Oxygen

15.9994

Fluorine

18.9984

Neon

20.1797

Table dynamically changing the columns displayed

name	weight	symbol	position
Hydrogen	1.0079	H	1
Helium	4.0026	He	2
Lithium	6.941	Li	3
Beryllium	9.0122	Be	4
Boron	10.811	B	5
Carbon	12.0107	C	6
Nitrogen	14.0067	N	7
Oxygen	15.9994	O	8
Fluorine	18.9984	F	9
Neon	20.1797	Ne	10

Table with expandable rows

name	weight	symbol	position
Hydrogen	1.0079	H	1
1 H Hydrogen 1.0079 Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table. -- Wikipedia
Helium	4.0026	He	2
2 He Helium 4.0026 Helium is a chemical element with symbol He and atomic number 2. It is a colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas group in the periodic table. Its boiling point is the lowest among all the elements. -- Wikipedia
Lithium	6.941	Li	3
3 Li Lithium 6.941 Lithium is a chemical element with symbol Li and atomic number 3. It is a soft, silvery-white alkali metal. Under standard conditions, it is the lightest metal and the lightest solid element. -- Wikipedia
Beryllium	9.0122	Be	4
4 Be Beryllium 9.0122 Beryllium is a chemical element with symbol Be and atomic number 4. It is a relatively rare element in the universe, usually occurring as a product of the spallation of larger atomic nuclei that have collided with cosmic rays. -- Wikipedia
Boron	10.811	B	5
5 B Boron 10.811 Boron is a chemical element with symbol B and atomic number 5. Produced entirely by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a low-abundance element in the Solar system and in the Earth's crust. -- Wikipedia
Carbon	12.0107	C	6
6 C Carbon 12.0107 Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic and tetravalent—making four electrons available to form covalent chemical bonds. It belongs to group 14 of the periodic table. -- Wikipedia
Nitrogen	14.0067	N	7
7 N Nitrogen 14.0067 Nitrogen is a chemical element with symbol N and atomic number 7. It was first discovered and isolated by Scottish physician Daniel Rutherford in 1772. -- Wikipedia
Oxygen	15.9994	O	8
8 O Oxygen 15.9994 Oxygen is a chemical element with symbol O and atomic number 8. It is a member of the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing agent that readily forms oxides with most elements as well as with other compounds. -- Wikipedia
Fluorine	18.9984	F	9
9 F Fluorine 18.9984 Fluorine is a chemical element with symbol F and atomic number 9. It is the lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard conditions. -- Wikipedia
Neon	20.1797	Ne	10
10 Ne Neon 20.1797 Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas. Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about two-thirds the density of air. -- Wikipedia

Table with filtering

Filter

No.	Name	Weight	Symbol
1	Hydrogen	1.0079	H
2	Helium	4.0026	He
3	Lithium	6.941	Li
4	Beryllium	9.0122	Be
5	Boron	10.811	B
6	Carbon	12.0107	C
7	Nitrogen	14.0067	N
8	Oxygen	15.9994	O
9	Fluorine	18.9984	F
10	Neon	20.1797	Ne

Footer row table

Item	Cost
Beach ball	$4.00
Towel	$5.00
Frisbee	$2.00
Sunscreen	$4.00
Cooler	$25.00
Swim suit	$15.00
Total	$55.00

Table retrieving data through HTTP

	State	#	Title

Items per page:

0 of 0

Table with multiple header and footer rows

Item	Cost
Name of the item purchased	Cost 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
Total	$55.00
Please note that the cost of items displayed are completely and totally made up.

Data table with sorting, pagination, and filtering.

Filter


1	Jack A.	52%	teal
2	Olivia E.	3%	orange
3	Jasper A.	4%	lime
4	Jasper C.	45%	purple
5	Isla T.	10%	purple

Items per page:

1 - 5 of 100

Table with pagination

No.	Name	Weight	Symbol
1	Hydrogen	1.0079	H
2	Helium	4.0026	He
3	Lithium	6.941	Li
4	Beryllium	9.0122	Be
5	Boron	10.811	B

Items per page:

1 - 5 of 20

Table showing each row context properties.

$implicit	index	count	first	last	even	odd
one	0	5	true	false	true	false
two	1	5	false	false	false	true
three	2	5	false	false	true	false
four	3	5	false	false	false	true
five	4	5	false	true	true	false

Table with selection

No.	Name	Weight	Symbol
1	Hydrogen	1.0079	H
2	Helium	4.0026	He
3	Lithium	6.941	Li
4	Beryllium	9.0122	Be
5	Boron	10.811	B
6	Carbon	12.0107	C
7	Nitrogen	14.0067	N
8	Oxygen	15.9994	O
9	Fluorine	18.9984	F
10	Neon	20.1797	Ne

Table with sorting


1	Hydrogen	1.0079	H
2	Helium	4.0026	He
3	Lithium	6.941	Li
4	Beryllium	9.0122	Be
5	Boron	10.811	B
6	Carbon	12.0107	C
7	Nitrogen	14.0067	N
8	Oxygen	15.9994	O
9	Fluorine	18.9984	F
10	Neon	20.1797	Ne