This site uses cookies from Google to deliver its services and to analyze traffic.
More details

Table

Autocomplete Badge Bottom Sheet Button Button toggle Card Checkbox Chips Core Datepicker Dialog Divider Expansion Panel Form field Grid list Icon Input List Menu Paginator Progress bar Progress spinner Radio button Ripples Select Sidenav Slide toggle Slider Snackbar Sort header Stepper Table Tabs Toolbar Tooltip Tree
Examples for table
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
Styling columns using their auto-generated column names
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
Adding and removing data when using an array-based datasource.
No.NameWeightSymbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
6Carbon12.0107C
7Nitrogen14.0067N
8Oxygen15.9994O
9Fluorine18.9984F
10Neon20.1797Ne
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
Adding and removing data when using an observable-based datasource.
No.NameWeightSymbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
6Carbon12.0107C
7Nitrogen14.0067N
8Oxygen15.9994O
9Fluorine18.9984F
10Neon20.1797Ne
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
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 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 with columns defined using ngFor instead of statically written in the template.
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
Testing with MatTableHarness
This example contains tests. Open in Stackblitz to run the tests.
Table retrieving data through HTTP
Created
State#Title
Items per page:
30
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.
ID
Name
Progress
Fruit
1 Oliver A. 12% mango
2 Violet M. 74% peach
3 Atticus I. 58% pomegranate
4 Mia O. 74% mango
5 Violet J. 26% lychee
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 that uses the recycle view repeater strategy.
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 re-orderable columns
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
Binding event handlers and properties to the table rows.
No.NameWeightSymbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B
6Carbon12.0107C
7Nitrogen14.0067N
8Oxygen15.9994O
9Fluorine18.9984F
10Neon20.1797Ne

Click Log

Clicked rows will be logged here
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
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 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
Flex-layout tables with toggle-able sticky headers, footers, and columns
Sticky Headers:
Sticky Footers:
Sticky Columns:
Position Name Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Weight Symbol Position Name Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Weight Symbol 1 Hydrogen Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 1.0079 H 2 Helium Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 4.0026 He 3 Lithium Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 6.941 Li 4 Beryllium Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 9.0122 Be 5 Boron Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 10.811 B 6 Carbon Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 12.0107 C 7 Nitrogen Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 14.0067 N 8 Oxygen Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 15.9994 O 9 Fluorine Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 18.9984 F 10 Neon Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 20.1797 Ne Position Footer Name Footer Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Weight Footer Symbol Footer Position Footer Name Footer Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Weight Footer Symbol Footer
Tables with toggle-able sticky headers, footers, and columns
Sticky Headers:
Sticky Footers:
Sticky Columns:
Position Name Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Weight Symbol
Position Name Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Filler header cell Weight Symbol
1 Hydrogen Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 1.0079 H
2 Helium Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 4.0026 He
3 Lithium Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 6.941 Li
4 Beryllium Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 9.0122 Be
5 Boron Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 10.811 B
6 Carbon Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 12.0107 C
7 Nitrogen Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 14.0067 N
8 Oxygen Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 15.9994 O
9 Fluorine Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 18.9984 F
10 Neon Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell Filler data cell 20.1797 Ne
Position Footer Name Footer Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Weight Footer Symbol Footer
Position Footer Name Footer Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Filler footer cell Weight Footer Symbol Footer
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
Use of 'mat-text-column' with various configurations of the interface.
Position Element Weight Symbol
1 Hydrogen 1.01 H
2 Helium 4 He
3 Lithium 6.94 Li
4 Beryllium 9.01 Be
5 Boron 10.81 B
6 Carbon 12.01 C
7 Nitrogen 14.01 N
8 Oxygen 16 O
9 Fluorine 19 F
10 Neon 20.18 Ne
Use of `mat-text-column` which can be used for simple columns that only need to display a text value for the header and cells.
Position 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
Tables with Material Design ripples.
Name Hydrogen Helium Lithium Beryllium Boron Carbon Nitrogen Oxygen Fluorine Neon
Table example that shows how to wrap a table component for definition and behavior reuse.
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
Indigo & Pink theme selected.