表格 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
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 2, 2021open22077help(CDK/drag and drop): CDK drop and drop mixing up, down, left and right
Mar 1, 2021open22076build: bump marked from 2.0.0 to 2.0.1
Mar 1, 2021open22075build: bump @types/node from 14.14.22 to 14.14.31
Mar 1, 2021open22074build: bump husky from 5.1.1 to 5.1.2
Mar 1, 2021closed22073fix(material-experimental/mdc-slide-toggle): prevent form field mixin…
Mar 1, 2021open22072feat(material-experimental/mdc-slider): implement some basic unit tests
Mar 1, 2021open22071fix(material-experimental/mdc-radio): include form field core theme styles
Mar 1, 2021open22070feat(material-experimental/mdc-card): add appearance input
Mar 1, 2021closed22069Height of material components
Mar 1, 2021open22068fix(material-experimental/mdc-form-field): always check hideRequiredMarker
Mar 1, 2021open22067Add test harness for CDK drag&drop
Mar 1, 2021open22066fix(material/radio): hidden circle visible on some zoom levels
Mar 1, 2021open22065bug(MatSnackBar): snackbar duration does not work in tests when there is no component
Mar 1, 2021closed22064help(MatSnackBarHarness): How do you use the snackbar harness when there is no fixture?
Mar 1, 2021open22063bug(MatDatepicker): updateOn: 'submit' is ignored if value has beed cleared
Mar 1, 2021open22062bug(Autocomplete): panelClosingActions not triggering with filtered options
Mar 1, 2021closed22061build: bump @octokit/rest from 18.2.0 to 18.3.0
Mar 1, 2021closed22060build: bump stylelint from 13.9.0 to 13.11.0
Feb 28, 2021closed22059help(google-map): Angular universal can't call get google via jsonp call
Feb 28, 2021open22058fix(material/table): data source filteredData not updating while disconnected
Feb 28, 2021open22057build: clean up sass patch workaround
Feb 28, 2021open22056fix(material/datepicker): hide date selection model from docs
Feb 28, 2021open22055fix(cdk/accordion): allow for closeAll to be used when multiple mode is disabled
Feb 28, 2021open22054refactor(material/autocomplete): remove deprecated APIs for v12
Feb 28, 2021open22053docs(material/table): use declarative idiomatic RxJS in table-http-example
Feb 28, 2021open22052fix(material/schematics): generate code that works in strict CLI projects
Feb 27, 2021open22051CDK Drag boundary is not working for SVG element
Feb 27, 2021open22050Drag and drop dragging triggered when using dropdown
Feb 26, 2021open22049fix(material-experimental/mdc-button): apply appropriate focus/actives styles to FAB
Feb 26, 2021closed22048help(prebuilt-themes): sideEffect: false removing prebuilt theme from build
Items per page:
30
1 – 30 of 21872
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 Thomas E. 38% purple
2 Amelia A. 34% lime
3 Amelia J. 58% teal
4 Maia C. 85% green
5 Amelia I. 23% teal
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