Table

Autocomplete
Badge
Bottom Sheet
Button
Button toggle
Card
Checkbox
Chips
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
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
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 retrieving data through HTTP
Created
State#Title
Mar 14, 2025open30634fix(material/select): close panel on detach output event
Mar 14, 2025open30633fix(material/core): include alternative tokens
Mar 14, 2025open30632bug(mat-select): lose the focus when no selection is made by pressing ESC
Mar 14, 2025open30631fix(material/autocomplete): allow overlay backdrop when opened
Mar 14, 2025open30630refactor(material/button): simplify host bindings
Mar 14, 2025open30629Initial PR for migrating to `rules_js`
Mar 13, 2025open30628fix(material/select): use flexible overlay dimensions
Mar 13, 2025closed30627fix(material/paginator): prevent keyboard nav to disabled buttons
Mar 13, 2025closed30626feat(material/button): allow appearance to be set dynamically
Mar 12, 2025closed30625fix(cdk-experimental/ui-patterns): small fixes for internal compatibi…
Mar 12, 2025closed30624docs: release notes for the v19.2.3 release
Mar 12, 2025closed30623Bump version to "v19.2.3" with changelog.
Mar 12, 2025closed30622Bump version to "v20.0.0-next.1" with changelog.
Mar 12, 2025open30621fix(material/slider): handle null values in slider input
Mar 12, 2025open30620bug(Select): MAT_SELECT_SCROLL_STRATEGY issue
Mar 12, 2025closed30619fix(material/autocomplete): incorrectly resolving focused element in shadow DOM
Mar 11, 2025closed30618[19.2.x] build: update `@angular/bazel` to support `.d.ts` code splitting
Mar 11, 2025closed30617build: update `@angular/bazel` to support `.d.ts` code splitting
Mar 11, 2025open30616docs-bug(Sidenav): Autosize sidenav example uses drawer instead of sidenav
Mar 11, 2025closed30615bug(form-field): mdc-notched-outline__notch shows overlapping border
Mar 10, 2025open30614bug(MatSlider): Inconsistent Reset Behavior for mat-slider with Range Thumbs in Reactive Forms
Mar 10, 2025open30613refactor(multiple): eliminate usages of `any` type (batch 2)
Mar 10, 2025closed30612Eliminate `any` type: first batch
Mar 10, 2025closed30611bug(matAutocomplete): Autocomplete not opening with shadow DOM
Mar 9, 2025closed30610fix(cdk/portal): fix incorrect injector hierarchy with DomPortalOutlet and child environment injectors
Mar 9, 2025closed30608fix(multiple): deprecate exported factories
Mar 8, 2025open30607feat(material/button): add missing tokens for hover, focus, and active pseudo-classes
Mar 8, 2025closed30606fix(multiple): resolve directive host binding issues
Mar 7, 2025closed30605bug(datepicker): Datepicker incorrectly swaps day and month when using 'pt-BR' locale
Mar 7, 2025closed30604bug(autocomplete): Autocomplete in combination with input validation triggers validation during mousedown
Items per page:
30
1 – 30 of 30442
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
Color
1 Charlotte A. 65% black
2 Violet I. 10% navy
3 Levi A. 55% teal
4 Theodore O. 49% yellow
5 Oliver C. 3% 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 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
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
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