Table

Autocomplete
Checkbox
Datepicker
Form field
Input
Radio button
Select
Slider
Slide toggle
Menu
Sidenav
Toolbar
Card
Divider
Expansion Panel
Grid list
List
Stepper
Tabs
Tree
Button
Button toggle
Badge
Chips
Icon
Progress spinner
Progress bar
Ripples
Bottom Sheet
Dialog
Snackbar
Tooltip
Paginator
Sort header
Table
Examples for table
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
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
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 15, 2025open30877feat(cdk-experimental/ui-patterns): fix lint
Apr 15, 2025open30876fix(material/table): add missing sort tests
Apr 15, 2025open30875build: switch sass compilations to Dart Sass
Apr 15, 2025closed30874build: prevent NpmPackageExtract from running on RBE
Apr 15, 2025closed30873build: re-add accidentally removed ibazel
Apr 15, 2025open30872bug(radio): extra padding when label is empty
Apr 15, 2025closed30871Backport of CI fixes
Apr 15, 2025closed30870build: always run material CI checks
Apr 15, 2025closed30869build: follow-up fixes to fix CI errors
Apr 15, 2025closed30868docs(material/card): use better example for overview
Apr 14, 2025open30867fix(material/chips): icon cut off when text-spacing is increased
Apr 14, 2025open30866ci: remove caretaker script which is no longer used
Apr 14, 2025closed30865[19.2.x]: Use full pnpm and integrate material.angular.io docs site into monorepo
Apr 14, 2025open30864bug(stepper): access to undefined
Apr 14, 2025closed30863build: update dev-infra to version with `http_server` fix
Apr 14, 2025open30862feat(Menu): Option to have it the same width as the trigger
Apr 14, 2025open30861fix(material/autocomplete): add support for initial value in form control
Apr 14, 2025closed30860Use full pnpm and integrate material.angular.io docs site into monorepo
Apr 14, 2025closed30859test(material/timepicker): add timepicker to SSR test app
Apr 13, 2025closed30858fix(cdk/overlay): disable overlay animation with prefers-reduced-motion
Apr 13, 2025open30857WIP: generate adev-compatible api json
Apr 12, 2025open30856bug(mat-raised-button): Low contrast on buttons in dark mode using Angular Material 18/19
Apr 12, 2025closed30855test(multiple): remove noop module from tests
Apr 11, 2025open30854fix(cdk-experimental/listbox): change shift+nav behavior
Apr 11, 2025closed30853Migrate integration tests
Apr 11, 2025closed30852fix(cdk-experimental/listbox): use meta as alternative to ctrl
Apr 11, 2025closed30851fix(material/snack-bar): change politeness level
Apr 11, 2025open30850bug(FORM-FIELD): Container shape is incorrectly applied for both outlined and filled.
Apr 11, 2025open30849fix(material/form-field): add `hasFloatingLabel` input and update classes if mat-label is added and removed dynamically
Apr 11, 2025closed30848test(multiple): clean up DI in tests
Items per page:
30
1 – 30 of 30685
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.
1 Mia T. 98% red
2 Olivia I. 99% yellow
3 Charlotte I. 92% blue
4 Charlotte I. 19% orange
5 Charlotte A. 54% black
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
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.
 Name
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