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
Apr 13, 2019	open	15808	fix(drag-drop): preview element not maintaining canvas data
Apr 13, 2019	closed	15807	cdkDrag does nothing when inside an *ngFor looping through a returned 2 dimensional array
Apr 12, 2019	open	15806	refactor(slide-toggle): constructor breaking changes for 8.0
Apr 12, 2019	open	15805	fix(drag-drop): not reacting to changes in the cdkDragFreeDragPosition
Apr 12, 2019	open	15804	feat(select): configurable panel max-height
Apr 12, 2019	open	15803	Customisable select panel height
Apr 12, 2019	open	15801	Allow title on mat-badge
Apr 12, 2019	open	15800	fix(table): schematic generates code that throws an exception
Apr 12, 2019	open	15799	docs(cdk): add API docs for a11y region directives
Apr 11, 2019	open	15798	Buttons with an icon and text are not up to spec
Apr 11, 2019	open	15797	perf(popover-edit): collect common services into a single class for dependency injection
Apr 11, 2019	closed	15796	I have five elements in the ngfor list. one of them jumps the order and moves to top when dragged.
Apr 11, 2019	open	15795	Drag and drop, ability to hold element while drag
Apr 11, 2019	open	15794	fix(chips): allow for role to be overwritten on chip list and chip
Apr 11, 2019	open	15793	feat(popover-edit): allow tabbing from popup to next/previous cell
Apr 11, 2019	closed	15792	IE11: matInput does not get focused when clicking on mat-form-field
Apr 11, 2019	open	15791	schematic(table): using generated DataSource with async data source
Apr 11, 2019	open	15790	autocomplete placed inside the chip-list not preventing dummy type text
Apr 11, 2019	open	15789	MatIcon with custom SVG does not work, even in angular docs
Apr 11, 2019	open	15788	schematic(table): Cannot read property 'data' of undefined
Apr 11, 2019	open	15787	[chips] Add support to specify role for chip list and chip
Apr 11, 2019	open	15785	[A11y] aria-describer is not reactive
Apr 11, 2019	open	15784	docs(readme): general update and refresh
Apr 11, 2019	open	15783	chore: fix miscellaneous typos in comments
Apr 10, 2019	open	15782	prototype(checkbox): create prototype checkbox based on MDC Web
Apr 10, 2019	open	15781	[Tooltip] Is buggy when Angular 7 project is deployed as an Angular Element
Apr 10, 2019	open	15780	Color contrast too low on error messages
Apr 10, 2019	open	15779	Enable support to show all dates on Month's Datepicker
Apr 10, 2019	open	15778	Allow mat-error in mat-form-field subviews
Apr 10, 2019	open	15777	Deliberately and manually trigger resize of drawer / sidenav

Items per page:

1 - 30 of 15755

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	Atticus A.	75%	navy
2	Violet A.	18%	yellow
3	Maia L.	40%	olive
4	Jack A.	16%	red
5	Maia J.	53%	gray

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

Table with sticky columns

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

Table with a sticky footer

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 with sticky header

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