Skip to content

feat(material-experimental/mdc-table): add mat-table selector #20994

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 17, 2020
Merged

feat(material-experimental/mdc-table): add mat-table selector #20994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e66fa3
feat(material-experimental/mdc-table): add mat-table selector
annieyw Nov 9, 2020
a7cbbc6
fix(material-experimental/mdc-table): extract variables and flex base…
annieyw Dec 4, 2020
18125b7
fixup! fix(material-experimental/mdc-table): extract variables and fl…
annieyw Dec 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion src/dev-app/mdc-table/mdc-table-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,4 +138,34 @@ <h2> Sticky Footer </h2>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
</table>
</div>
</div>

<h2>Basic flex table</h2>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
1 change: 1 addition & 0 deletions src/material-experimental/mdc-table/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ sass_binary(
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
"//src/material/core:core_scss_lib",
"//src/material/table:table_flex_scss_lib",
],
)

Expand Down
6 changes: 3 additions & 3 deletions src/material-experimental/mdc-table/cell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class MatColumnDef extends CdkColumnDef {

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

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

/** Cell template container that adds the right classes and role. */
@Directive({
selector: 'td[mat-cell]',
selector: 'mat-cell, td[mat-cell]',
host: {
'class': 'mat-mdc-cell mdc-data-table__cell',
'role': 'gridcell',
Expand Down
6 changes: 3 additions & 3 deletions src/material-experimental/mdc-table/row.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export class MatRowDef<T> extends CdkRowDef<T> {

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

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

/** Data row template container that contains the cell outlet. Adds the right class and role. */
@Component({
selector: 'tr[mat-row]',
selector: 'mat-row, tr[mat-row]',
template: CDK_ROW_TEMPLATE,
host: {
'class': 'mat-mdc-row mdc-data-table__row',
Expand Down
2 changes: 2 additions & 0 deletions src/material-experimental/mdc-table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@use '../../material/core/style/vendor-prefixes';
@import '@material/data-table/mixins.import';
@import '../mdc-helpers/mdc-helpers';
@import '../../material/table/table-flex-styles';

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

.mat-mdc-table-sticky {
@include vendor-prefixes.position-sticky;
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-table/table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';

@Component({
selector: 'table[mat-table]',
selector: 'mat-table, table[mat-table]',
exportAs: 'matTable',
template: CDK_TABLE_TEMPLATE,
styleUrls: ['table.css'],
Expand Down
13 changes: 11 additions & 2 deletions src/material/table/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,23 @@ ng_module(

sass_library(
name = "table_scss_lib",
srcs = glob(["**/_*.scss"]),
srcs = ["_table-theme.scss"],
deps = ["//src/material/core:core_scss_lib"],
)

sass_library(
name = "table_flex_scss_lib",
srcs = ["_table-flex-styles.scss"],
deps = ["//src/material/core:core_scss_lib"],
)

sass_binary(
name = "table_scss",
src = "table.scss",
deps = ["//src/material/core:core_scss_lib"],
deps = [
":table_flex_scss_lib",
"//src/material/core:core_scss_lib",
],
)

ng_test_library(
Expand Down
72 changes: 72 additions & 0 deletions src/material/table/_table-flex-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/**
* Flex-based table structure
*/
$mat-header-row-height: 56px;
$mat-row-height: 48px;
$mat-row-horizontal-padding: 24px;

// Only use tag name selectors here since the styles are shared between MDC and non-MDC
@mixin mat-private-table-flex-styles {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking through this again, do you think that we should make these selectors a bit more specific? Currently mat-table {} will match both the MDC and non-MDC elements which could interfere with each other. We could change it to something like mat-table.mat-mdc-table, but I'm not familiar enough to know whether it'll make much of a difference.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason for extracting the flex styles into a mixin is so that both MDC and non-MDC table can use the styles

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we want the MDC version to be using MDC's styles though? Otherwise it's basically a duplicate of our current table.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MDC only has native table styles. The flexbox-based table is an Angular special.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we still want to make it work using MDC's styles? Not necessarily in this PR, but we can work with the MDC team to split their styles up into more granular mixins so we can apply it to our flexbox table too.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had been assuming the only styles we were applying exclusively to the flex table were the actual flexbox styles. If there are styles common between them, we should just use the appropriate css classes for those.

mat-table {
display: block;
}

mat-header-row {
min-height: $mat-header-row-height;
}

mat-row, mat-footer-row {
min-height: $mat-row-height;
}

mat-row, mat-header-row, mat-footer-row {
display: flex;
// Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
// which should be 1px;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
align-items: center;
box-sizing: border-box;

// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
// element that will stretch the row the correct height. See:
// https://connect.microsoft.com/IE/feedback/details/802625
&::after {
display: inline-block;
min-height: inherit;
content: '';
}
}

mat-cell, mat-header-cell, mat-footer-cell {
// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
// elements like ripples or badges from throwing off the layout (see #11165).
&:first-of-type {
padding-left: $mat-row-horizontal-padding;

[dir='rtl'] &:not(:only-of-type) {
padding-left: 0;
padding-right: $mat-row-horizontal-padding;
}
}

&:last-of-type {
padding-right: $mat-row-horizontal-padding;

[dir='rtl'] &:not(:only-of-type) {
padding-right: 0;
padding-left: $mat-row-horizontal-padding;
}
}
}

mat-cell, mat-header-cell, mat-footer-cell {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
word-wrap: break-word;
min-height: inherit;
}
}
71 changes: 2 additions & 69 deletions src/material/table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,7 @@
@use '../core/style/vendor-prefixes';
@import './table-flex-styles';

$mat-header-row-height: 56px;
$mat-row-height: 48px;
$mat-row-horizontal-padding: 24px;

/**
* Flex-based table structure
*/
mat-table {
display: block;
}

mat-header-row {
min-height: $mat-header-row-height;
}

mat-row, mat-footer-row {
min-height: $mat-row-height;
}

mat-row, mat-header-row, mat-footer-row {
display: flex;
// Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
// which should be 1px;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
align-items: center;
box-sizing: border-box;

// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
// element that will stretch the row the correct height. See:
// https://connect.microsoft.com/IE/feedback/details/802625
&::after {
display: inline-block;
min-height: inherit;
content: '';
}
}

mat-cell, mat-header-cell, mat-footer-cell {
// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
// elements like ripples or badges from throwing off the layout (see #11165).
&:first-of-type {
padding-left: $mat-row-horizontal-padding;

[dir='rtl'] &:not(:only-of-type) {
padding-left: 0;
padding-right: $mat-row-horizontal-padding;
}
}

&:last-of-type {
padding-right: $mat-row-horizontal-padding;

[dir='rtl'] &:not(:only-of-type) {
padding-right: 0;
padding-left: $mat-row-horizontal-padding;
}
}
}

mat-cell, mat-header-cell, mat-footer-cell {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
word-wrap: break-word;
min-height: inherit;
}
@include mat-private-table-flex-styles();

/**
* Native HTML table structure
Expand Down