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

0 commit comments

Comments
 (0)