Skip to content

Commit 4169c6f

Browse files
andrewseguinandrewseguin
authored
feat(material-experimental/mdc-table): add skeleton (#17992)
1 parent 27fc3b1 commit 4169c6f

25 files changed

+640
-0
lines changed

‎.github/CODEOWNERS

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@
108108
/src/material-experimental/mdc-slider/** @devversion
109109
/src/material-experimental/mdc-tabs/** @crisbeto
110110
/src/material-experimental/mdc-sidenav/** @crisbeto
111+
/src/material-experimental/mdc-table/** @andrewseguin
111112
/src/material-experimental/mdc-theming/** @mmalerba
112113
/src/material-experimental/mdc-typography/** @mmalerba
113114
/src/material-experimental/popover-edit/** @kseamon @andrewseguin
@@ -165,6 +166,7 @@
165166
/src/dev-app/mdc-snackbar/** @opozo
166167
/src/dev-app/mdc-slide-toggle/** @crisbeto
167168
/src/dev-app/mdc-slider/** @devversion
169+
/src/dev-app/mdc-table/** @andrewseguin
168170
/src/dev-app/mdc-tabs/** @crisbeto
169171
/src/dev-app/menu/** @crisbeto
170172
/src/dev-app/overlay/** @jelbourn @crisbeto

‎src/dev-app/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ ng_module(
5656
"//src/dev-app/mdc-slide-toggle",
5757
"//src/dev-app/mdc-slider",
5858
"//src/dev-app/mdc-snackbar",
59+
"//src/dev-app/mdc-table",
5960
"//src/dev-app/mdc-tabs",
6061
"//src/dev-app/menu",
6162
"//src/dev-app/paginator",
@@ -131,6 +132,7 @@ filegroup(
131132
"@npm//:node_modules/@material/base/dist/mdc.base.js",
132133
"@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
133134
"@npm//:node_modules/@material/chips/dist/mdc.chips.js",
135+
"@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
134136
"@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
135137
"@npm//:node_modules/@material/dom/dist/mdc.dom.js",
136138
"@npm//:node_modules/@material/drawer/dist/mdc.drawer.js",

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export class DevAppLayout {
8080
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
8181
{name: 'MDC Slider', route: '/mdc-slider'},
8282
{name: 'MDC Snackbar', route: '/mdc-snackbar'},
83+
{name: 'MDC Table', route: '/mdc-table'},
8384
];
8485

8586
constructor(

‎src/dev-app/dev-app/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export const DEV_APP_ROUTES: Routes = [
7474
loadChildren: 'mdc-slide-toggle/mdc-slide-toggle-demo-module#MdcSlideToggleDemoModule'
7575
},
7676
{path: 'mdc-slider', loadChildren: 'mdc-slider/mdc-slider-demo-module#MdcSliderDemoModule'},
77+
{path: 'mdc-table', loadChildren: 'mdc-table/mdc-table-demo-module#MdcTableDemoModule'},
7778
{path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'},
7879
{path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
7980
{path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},

‎src/dev-app/mdc-table/BUILD.bazel

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
4+
load("//tools:defaults.bzl", "ng_module")
5+
6+
ng_module(
7+
name = "mdc-table",
8+
srcs = glob(["**/*.ts"]),
9+
assets = [
10+
"mdc-table-demo.html",
11+
":mdc_table_demo_scss",
12+
],
13+
deps = [
14+
"//src/material-experimental/mdc-table",
15+
"@npm//@angular/router",
16+
],
17+
)
18+
19+
sass_binary(
20+
name = "mdc_table_demo_scss",
21+
src = "mdc-table-demo.scss",
22+
)

‎src/dev-app/mdc-table/mdc-table-demo-module.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {MatTableModule} from '@angular/material-experimental/mdc-table';
11+
import {RouterModule} from '@angular/router';
12+
import {MdcTableDemo} from './mdc-table-demo';
13+
14+
@NgModule({
15+
imports: [
16+
MatTableModule,
17+
RouterModule.forChild([{path: '', component: MdcTableDemo}]),
18+
],
19+
declarations: [MdcTableDemo],
20+
})
21+
export class MdcTableDemoModule {
22+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<table mat-table [dataSource]="dataSource">
2+
<!-- Position Column -->
3+
<ng-container matColumnDef="position">
4+
<th mat-header-cell *matHeaderCellDef> No. </th>
5+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
6+
</ng-container>
7+
8+
<!-- Name Column -->
9+
<ng-container matColumnDef="name">
10+
<th mat-header-cell *matHeaderCellDef> Name </th>
11+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
12+
</ng-container>
13+
14+
<!-- Weight Column -->
15+
<ng-container matColumnDef="weight">
16+
<th mat-header-cell *matHeaderCellDef> Weight </th>
17+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
18+
</ng-container>
19+
20+
<!-- Symbol Column -->
21+
<ng-container matColumnDef="symbol">
22+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
23+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
24+
</ng-container>
25+
26+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
27+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
28+
</table>

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

Whitespace-only changes.

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
export interface PeriodicElement {
12+
name: string;
13+
position: number;
14+
weight: number;
15+
symbol: string;
16+
}
17+
18+
const ELEMENT_DATA: PeriodicElement[] = [
19+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
20+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
21+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
22+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
23+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
24+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
25+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
26+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
27+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
28+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
29+
];
30+
31+
@Component({
32+
selector: 'mdc-table-demo',
33+
templateUrl: 'mdc-table-demo.html',
34+
styleUrls: ['mdc-table-demo.css'],
35+
})
36+
export class MdcTableDemo {
37+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
38+
dataSource = ELEMENT_DATA;
39+
}

‎src/material-experimental/config.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ entryPoints = [
1919
"mdc-slide-toggle/testing",
2020
"mdc-slider",
2121
"mdc-tabs",
22+
"mdc-table",
2223
"popover-edit",
2324
]
2425

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
4+
load(
5+
"//tools:defaults.bzl",
6+
"ng_e2e_test_library",
7+
"ng_module",
8+
"ng_test_library",
9+
"ng_web_test_suite",
10+
"sass_binary",
11+
"sass_library",
12+
)
13+
14+
ng_module(
15+
name = "mdc-table",
16+
srcs = glob(
17+
["**/*.ts"],
18+
exclude = ["**/*.spec.ts"],
19+
),
20+
assets = [":table_scss"] + glob(["**/*.html"]),
21+
module_name = "@angular/material-experimental/mdc-table",
22+
deps = [
23+
"//src/cdk/table",
24+
"//src/material/core",
25+
"@npm//@angular/common",
26+
"@npm//@angular/core",
27+
"@npm//material-components-web",
28+
],
29+
)
30+
31+
sass_library(
32+
name = "mdc_table_scss_lib",
33+
srcs = glob(["**/_*.scss"]),
34+
)
35+
36+
sass_binary(
37+
name = "table_scss",
38+
src = "table.scss",
39+
include_paths = [
40+
"external/npm/node_modules",
41+
],
42+
)
43+
44+
###########
45+
# Testing
46+
###########
47+
48+
ng_test_library(
49+
name = "table_tests_lib",
50+
srcs = glob(
51+
["**/*.spec.ts"],
52+
exclude = ["**/*.e2e.spec.ts"],
53+
),
54+
deps = [
55+
":mdc-table",
56+
"//src/cdk/bidi",
57+
"//src/cdk/keycodes",
58+
"//src/cdk/platform",
59+
"//src/cdk/table",
60+
"//src/cdk/testing/private",
61+
"@npm//@angular/forms",
62+
"@npm//@angular/platform-browser",
63+
],
64+
)
65+
66+
ng_web_test_suite(
67+
name = "unit_tests",
68+
static_files = ["@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js"],
69+
deps = [
70+
":table_tests_lib",
71+
"//src/material-experimental:mdc_require_config.js",
72+
],
73+
)
74+
75+
ng_e2e_test_library(
76+
name = "e2e_test_sources",
77+
srcs = glob(["**/*.e2e.spec.ts"]),
78+
deps = [
79+
"//src/cdk/testing/private/e2e",
80+
],
81+
)
82+
83+
e2e_test_suite(
84+
name = "e2e_tests",
85+
deps = [
86+
":e2e_test_sources",
87+
"//src/cdk/testing/private/e2e",
88+
],
89+
)

‎src/material-experimental/mdc-table/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This is a placeholder for the MDC-based implementation of the table.

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@mixin mat-table-theme-mdc($theme) {
2+
// TODO: Include theme styles for MDC Table
3+
}
4+
5+
@mixin mat-table-typography-mdc($config) {
6+
// TODO: Include typography styles for MDC Table
7+
}

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {BooleanInput} from '@angular/cdk/coercion';
10+
import {Directive, ElementRef, Input} from '@angular/core';
11+
import {
12+
CdkCell,
13+
CdkCellDef,
14+
CdkColumnDef, CdkFooterCell, CdkFooterCellDef,
15+
CdkHeaderCell,
16+
CdkHeaderCellDef,
17+
} from '@angular/cdk/table';
18+
19+
/**
20+
* Cell definition for the mat-table.
21+
* Captures the template of a column's data row cell as well as cell-specific properties.
22+
*/
23+
@Directive({
24+
selector: '[matCellDef]',
25+
providers: [{provide: CdkCellDef, useExisting: MatCellDef}]
26+
})
27+
export class MatCellDef extends CdkCellDef {}
28+
29+
/**
30+
* Header cell definition for the mat-table.
31+
* Captures the template of a column's header cell and as well as cell-specific properties.
32+
*/
33+
@Directive({
34+
selector: '[matHeaderCellDef]',
35+
providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}]
36+
})
37+
export class MatHeaderCellDef extends CdkHeaderCellDef {}
38+
39+
/**
40+
* Footer cell definition for the mat-table.
41+
* Captures the template of a column's footer cell and as well as cell-specific properties.
42+
*/
43+
@Directive({
44+
selector: '[matFooterCellDef]',
45+
providers: [{provide: CdkFooterCellDef, useExisting: MatFooterCellDef}]
46+
})
47+
export class MatFooterCellDef extends CdkFooterCellDef {}
48+
49+
/**
50+
* Column definition for the mat-table.
51+
* Defines a set of cells available for a table column.
52+
*/
53+
@Directive({
54+
selector: '[matColumnDef]',
55+
inputs: ['sticky'],
56+
providers: [
57+
{provide: CdkColumnDef, useExisting: MatColumnDef},
58+
{provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatColumnDef}
59+
],
60+
})
61+
export class MatColumnDef extends CdkColumnDef {
62+
/** Unique name for this column. */
63+
@Input('matColumnDef') name: string;
64+
65+
static ngAcceptInputType_sticky: BooleanInput;
66+
static ngAcceptInputType_stickyEnd: BooleanInput;
67+
}
68+
69+
/** Header cell template container that adds the right classes and role. */
70+
@Directive({
71+
selector: 'th[mat-header-cell]',
72+
host: {
73+
'class': 'mat-mdc-header-cell',
74+
'role': 'columnheader',
75+
},
76+
})
77+
export class MatHeaderCell extends CdkHeaderCell {
78+
constructor(columnDef: CdkColumnDef,
79+
elementRef: ElementRef<HTMLElement>) {
80+
super(columnDef, elementRef);
81+
elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
82+
}
83+
}
84+
85+
/** Footer cell template container that adds the right classes and role. */
86+
@Directive({
87+
selector: 'td[mat-footer-cell]',
88+
host: {
89+
'class': 'mat-mdc-footer-cell',
90+
'role': 'gridcell',
91+
},
92+
})
93+
export class MatFooterCell extends CdkFooterCell {
94+
constructor(columnDef: CdkColumnDef,
95+
elementRef: ElementRef) {
96+
super(columnDef, elementRef);
97+
elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
98+
}
99+
}
100+
101+
/** Cell template container that adds the right classes and role. */
102+
@Directive({
103+
selector: 'td[mat-cell]',
104+
host: {
105+
'class': 'mat-mdc-cell',
106+
'role': 'gridcell',
107+
},
108+
})
109+
export class MatCell extends CdkCell {
110+
constructor(columnDef: CdkColumnDef,
111+
elementRef: ElementRef<HTMLElement>) {
112+
super(columnDef, elementRef);
113+
elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
114+
}
115+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './public-api';

0 commit comments

Comments
 (0)