Skip to content

Commit bb85910

Browse files
annieywannieyw
committed
feat(material-experimental/mdc-table): add mat-table selector
1 parent 029136e commit bb85910

File tree

5 files changed

+108
-7
lines changed

5 files changed

+108
-7
lines changed

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<h3>Basic table</h3>
12
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
23
<!-- Position Column -->
34
<ng-container matColumnDef="position">
@@ -26,3 +27,33 @@
2627
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
2728
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
2829
</table>
30+
31+
<h3>Basic flex table</h3>
32+
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
33+
<!-- Position Column -->
34+
<ng-container matColumnDef="position">
35+
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
36+
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
37+
</ng-container>
38+
39+
<!-- Name Column -->
40+
<ng-container matColumnDef="name">
41+
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
42+
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
43+
</ng-container>
44+
45+
<!-- Weight Column -->
46+
<ng-container matColumnDef="weight">
47+
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
48+
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
49+
</ng-container>
50+
51+
<!-- Symbol Column -->
52+
<ng-container matColumnDef="symbol">
53+
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
54+
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
55+
</ng-container>
56+
57+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
58+
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
59+
</mat-table>

‎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: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
@include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query);
66

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

‎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'],

0 commit comments

Comments
 (0)