Hi, welcome back!
Your business dashboard template
Basic use of 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
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)
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 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 | Mia I. | 40% | teal |
2 | Maia O. | 25% | navy |
3 | Cora M. | 27% | black |
4 | Arthur A. | 14% | aqua |
5 | Arthur V. | 18% | navy |
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 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:
Table with a sticky footer
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 |