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. | 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 |
Adding and removing data when using an observable-based datasource.
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 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)
Flex table where one column's cells has a greater height than others.
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 |
---|---|---|---|
Mar 7, 2025 | open | 30602 | fix(material/schematics): some options missing from schema |
Mar 7, 2025 | open | 30601 | docs(cdk/tree): examples not working when forked to Stackblitz |
Mar 7, 2025 | open | 30600 | docs-bug(CdkTree): Most examples are broken |
Mar 7, 2025 | open | 30599 | bug(google-maps): Warning in Console about adding Event-Listener for click instead of gmp-click |
Mar 6, 2025 | closed | 30598 | build: update `@angular/bazel` for relative imports in `ng_package` |
Mar 6, 2025 | closed | 30597 | refactor(cdk-experimental/ui-patterns): loosen the API to accept different types of signals |
Mar 6, 2025 | closed | 30596 | bug(mat-select): Panel `null` on `openedChange` |
Mar 6, 2025 | closed | 30595 | build: update to Angular v20 and Node v20 |
Mar 6, 2025 | closed | 30594 | Breaking changes for v20 |
Mar 6, 2025 | closed | 30593 | fix(material/timepicker): wrong default scroll strategy |
Mar 5, 2025 | closed | 30592 | Bump version to "v20.0.0-next.0" with changelog. |
Mar 5, 2025 | closed | 30591 | build: set up schematics for v20 |
Mar 5, 2025 | closed | 30590 | docs: release notes for the v19.2.2 release |
Mar 5, 2025 | closed | 30589 | Bump version to "v19.2.2" with changelog. |
Mar 5, 2025 | open | 30588 | refactor: use relative imports within npm packages |
Mar 5, 2025 | closed | 30587 | bug(sidenav): unable to found svgIcon |
Mar 5, 2025 | closed | 30586 | bug(mat-timepicker): Timepicker not affected by scroll if parent has overflow auto |
Mar 5, 2025 | open | 30585 | bug(COMPONENT): Angular 19: cdk-visually-hidden does not work automatically anymore |
Mar 5, 2025 | closed | 30584 | fix(cdk/portal): remove deprecated symbols |
Mar 5, 2025 | closed | 30583 | Update table.ts |
Mar 5, 2025 | closed | 30582 | docs: add missing closing bracket in system token example |
Mar 4, 2025 | closed | 30581 | build(material-angular-io): fix docs site deployment |
Mar 4, 2025 | closed | 30580 | bug(drag-drop): does not work with single `mousemove` event |
Mar 4, 2025 | closed | 30579 | fix(cdk/stepper): emitting interacted event when item has not changed |
Mar 4, 2025 | open | 30578 | feat(mat-form-field / mat-label): we need the option to NOT truncate, a long/multi-line mat-label within a mat-form-field |
Mar 3, 2025 | open | 30577 | fix(material/stepper): updates vertical-stepper aria roles |
Mar 3, 2025 | closed | 30576 | bug(DragDrop): dragHandle not working in an table context |
Mar 3, 2025 | closed | 30575 | docs: add missing closing bracket in system token example |
Mar 3, 2025 | closed | 30574 | build: update to Angular 19.2 and TypeScript 5.8 final |
Mar 2, 2025 | open | 30573 | bug(Button): Button hover/clickable outside border & missing token |
Items per page:
30
1 – 30 of 30410
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 | Cora A. | 26% | peach |
2 | Charlotte J. | 67% | lime |
3 | Mia A. | 26% | pomegranate |
4 | Maia E. | 28% | lime |
5 | Oliver E. | 6% | lime |
Items per page:
5
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:
5
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. | 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 |
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:
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.
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 |