Skip to content

Commit d84d3d0

Browse files
annieywmmalerba
annieyw
authored and
mmalerba
committed
feat(material-experimental/mdc-table): add mat-table selector (#20994)
* feat(material-experimental/mdc-table): add mat-table selector * fix(material-experimental/mdc-table): extract variables and flex based tables styles into private mixin * fixup! fix(material-experimental/mdc-table): extract variables and flex based tables styles into private mixin (cherry picked from commit f0f3748)
1 parent 5d2edfd commit d84d3d0

File tree

9 files changed

+126
-79
lines changed

9 files changed

+126
-79
lines changed

‎src/dev-app/mdc-table/mdc-table-demo.html

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,4 +138,34 @@ <h2> Sticky Footer </h2>
138138
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
139139
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
140140
</table>
141-
</div>
141+
</div>
142+
143+
<h2>Basic flex table</h2>
144+
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
145+
<!-- Position Column -->
146+
<ng-container matColumnDef="position">
147+
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
148+
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
149+
</ng-container>
150+
151+
<!-- Name Column -->
152+
<ng-container matColumnDef="name">
153+
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
154+
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
155+
</ng-container>
156+
157+
<!-- Weight Column -->
158+
<ng-container matColumnDef="weight">
159+
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
160+
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
161+
</ng-container>
162+
163+
<!-- Symbol Column -->
164+
<ng-container matColumnDef="symbol">
165+
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
166+
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
167+
</ng-container>
168+
169+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
170+
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
171+
</mat-table>

‎src/material-experimental/mdc-table/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ sass_binary(
4545
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
4646
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
4747
"//src/material/core:core_scss_lib",
48+
"//src/material/table:table_flex_scss_lib",
4849
],
4950
)
5051

‎src/material-experimental/mdc-table/cell.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export class MatColumnDef extends CdkColumnDef {
8080

8181
/** Header cell template container that adds the right classes and role. */
8282
@Directive({
83-
selector: 'th[mat-header-cell]',
83+
selector: 'mat-header-cell, th[mat-header-cell]',
8484
host: {
8585
'class': 'mat-mdc-header-cell mdc-data-table__header-cell',
8686
'role': 'columnheader',
@@ -90,7 +90,7 @@ export class MatHeaderCell extends CdkHeaderCell {}
9090

9191
/** Footer cell template container that adds the right classes and role. */
9292
@Directive({
93-
selector: 'td[mat-footer-cell]',
93+
selector: 'mat-footer-cell, td[mat-footer-cell]',
9494
host: {
9595
'class': 'mat-mdc-footer-cell mdc-data-table__cell',
9696
'role': 'gridcell',
@@ -100,7 +100,7 @@ export class MatFooterCell extends CdkFooterCell {}
100100

101101
/** Cell template container that adds the right classes and role. */
102102
@Directive({
103-
selector: 'td[mat-cell]',
103+
selector: 'mat-cell, td[mat-cell]',
104104
host: {
105105
'class': 'mat-mdc-cell mdc-data-table__cell',
106106
'role': 'gridcell',

‎src/material-experimental/mdc-table/row.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export class MatRowDef<T> extends CdkRowDef<T> {
6060

6161
/** Footer template container that contains the cell outlet. Adds the right class and role. */
6262
@Component({
63-
selector: 'tr[mat-header-row]',
63+
selector: 'mat-header-row, tr[mat-header-row]',
6464
template: CDK_ROW_TEMPLATE,
6565
host: {
6666
'class': 'mat-mdc-header-row mdc-data-table__header-row',
@@ -78,7 +78,7 @@ export class MatHeaderRow extends CdkHeaderRow {
7878

7979
/** Footer template container that contains the cell outlet. Adds the right class and role. */
8080
@Component({
81-
selector: 'tr[mat-footer-row]',
81+
selector: 'mat-footer-row, tr[mat-footer-row]',
8282
template: CDK_ROW_TEMPLATE,
8383
host: {
8484
'class': 'mat-mdc-footer-row mdc-data-table__row',
@@ -96,7 +96,7 @@ export class MatFooterRow extends CdkFooterRow {
9696

9797
/** Data row template container that contains the cell outlet. Adds the right class and role. */
9898
@Component({
99-
selector: 'tr[mat-row]',
99+
selector: 'mat-row, tr[mat-row]',
100100
template: CDK_ROW_TEMPLATE,
101101
host: {
102102
'class': 'mat-mdc-row mdc-data-table__row',

‎src/material-experimental/mdc-table/table.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
@use '../../material/core/style/vendor-prefixes';
22
@import '@material/data-table/mixins.import';
33
@import '../mdc-helpers/mdc-helpers';
4+
@import '../../material/table/table-flex-styles';
45

56
@include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query);
7+
@include mat-private-table-flex-styles();
68

79
.mat-mdc-table-sticky {
810
@include vendor-prefixes.position-sticky;

‎src/material-experimental/mdc-table/table.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
1717

1818
@Component({
19-
selector: 'table[mat-table]',
19+
selector: 'mat-table, table[mat-table]',
2020
exportAs: 'matTable',
2121
template: CDK_TABLE_TEMPLATE,
2222
styleUrls: ['table.css'],

‎src/material/table/BUILD.bazel

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,23 @@ ng_module(
3131

3232
sass_library(
3333
name = "table_scss_lib",
34-
srcs = glob(["**/_*.scss"]),
34+
srcs = ["_table-theme.scss"],
35+
deps = ["//src/material/core:core_scss_lib"],
36+
)
37+
38+
sass_library(
39+
name = "table_flex_scss_lib",
40+
srcs = ["_table-flex-styles.scss"],
3541
deps = ["//src/material/core:core_scss_lib"],
3642
)
3743

3844
sass_binary(
3945
name = "table_scss",
4046
src = "table.scss",
41-
deps = ["//src/material/core:core_scss_lib"],
47+
deps = [
48+
":table_flex_scss_lib",
49+
"//src/material/core:core_scss_lib",
50+
],
4251
)
4352

4453
ng_test_library(

‎src/material/table/_table-flex-styles.scss

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* Flex-based table structure
3+
*/
4+
$mat-header-row-height: 56px;
5+
$mat-row-height: 48px;
6+
$mat-row-horizontal-padding: 24px;
7+
8+
// Only use tag name selectors here since the styles are shared between MDC and non-MDC
9+
@mixin mat-private-table-flex-styles {
10+
mat-table {
11+
display: block;
12+
}
13+
14+
mat-header-row {
15+
min-height: $mat-header-row-height;
16+
}
17+
18+
mat-row, mat-footer-row {
19+
min-height: $mat-row-height;
20+
}
21+
22+
mat-row, mat-header-row, mat-footer-row {
23+
display: flex;
24+
// Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
25+
// which should be 1px;
26+
border-width: 0;
27+
border-bottom-width: 1px;
28+
border-style: solid;
29+
align-items: center;
30+
box-sizing: border-box;
31+
32+
// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
33+
// element that will stretch the row the correct height. See:
34+
// https://connect.microsoft.com/IE/feedback/details/802625
35+
&::after {
36+
display: inline-block;
37+
min-height: inherit;
38+
content: '';
39+
}
40+
}
41+
42+
mat-cell, mat-header-cell, mat-footer-cell {
43+
// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
44+
// elements like ripples or badges from throwing off the layout (see #11165).
45+
&:first-of-type {
46+
padding-left: $mat-row-horizontal-padding;
47+
48+
[dir='rtl'] &:not(:only-of-type) {
49+
padding-left: 0;
50+
padding-right: $mat-row-horizontal-padding;
51+
}
52+
}
53+
54+
&:last-of-type {
55+
padding-right: $mat-row-horizontal-padding;
56+
57+
[dir='rtl'] &:not(:only-of-type) {
58+
padding-right: 0;
59+
padding-left: $mat-row-horizontal-padding;
60+
}
61+
}
62+
}
63+
64+
mat-cell, mat-header-cell, mat-footer-cell {
65+
flex: 1;
66+
display: flex;
67+
align-items: center;
68+
overflow: hidden;
69+
word-wrap: break-word;
70+
min-height: inherit;
71+
}
72+
}

‎src/material/table/table.scss

Lines changed: 2 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,7 @@
11
@use '../core/style/vendor-prefixes';
2+
@import './table-flex-styles';
23

3-
$mat-header-row-height: 56px;
4-
$mat-row-height: 48px;
5-
$mat-row-horizontal-padding: 24px;
6-
7-
/**
8-
* Flex-based table structure
9-
*/
10-
mat-table {
11-
display: block;
12-
}
13-
14-
mat-header-row {
15-
min-height: $mat-header-row-height;
16-
}
17-
18-
mat-row, mat-footer-row {
19-
min-height: $mat-row-height;
20-
}
21-
22-
mat-row, mat-header-row, mat-footer-row {
23-
display: flex;
24-
// Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
25-
// which should be 1px;
26-
border-width: 0;
27-
border-bottom-width: 1px;
28-
border-style: solid;
29-
align-items: center;
30-
box-sizing: border-box;
31-
32-
// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
33-
// element that will stretch the row the correct height. See:
34-
// https://connect.microsoft.com/IE/feedback/details/802625
35-
&::after {
36-
display: inline-block;
37-
min-height: inherit;
38-
content: '';
39-
}
40-
}
41-
42-
mat-cell, mat-header-cell, mat-footer-cell {
43-
// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
44-
// elements like ripples or badges from throwing off the layout (see #11165).
45-
&:first-of-type {
46-
padding-left: $mat-row-horizontal-padding;
47-
48-
[dir='rtl'] &:not(:only-of-type) {
49-
padding-left: 0;
50-
padding-right: $mat-row-horizontal-padding;
51-
}
52-
}
53-
54-
&:last-of-type {
55-
padding-right: $mat-row-horizontal-padding;
56-
57-
[dir='rtl'] &:not(:only-of-type) {
58-
padding-right: 0;
59-
padding-left: $mat-row-horizontal-padding;
60-
}
61-
}
62-
}
63-
64-
mat-cell, mat-header-cell, mat-footer-cell {
65-
flex: 1;
66-
display: flex;
67-
align-items: center;
68-
overflow: hidden;
69-
word-wrap: break-word;
70-
min-height: inherit;
71-
}
4+
@include mat-private-table-flex-styles();
725

736
/**
747
* Native HTML table structure

0 commit comments

Comments
 (0)